@universal-tennis/ui-shared 0.0.24 → 0.1.0

package/.storybook/preview.js

@@ -1,4 +1,5 @@
 import "./typography.css";
+import './variables.css';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

package/.storybook/variables.css

@@ -0,0 +1,12 @@
+:root {
+    --primary: #008ded;
+    --secondary: #e0004f;
+    --disabled: #bac6d6;
+    --black: #000;
+    --white: #fff;
+    --light-grey: #d7e0ea;
+    --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
+    --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
+    }

package/dist/components.js

@@ -1,4 +1,4 @@
-import "./stories/assets/css/typography.css";
+import "./stories/assets/css/variables.css";
 // ATOMS
 export { default as Button } from './stories/atoms/Button/Button';
 export { default as Typography } from './stories/atoms/Typography/Typography';

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,qCAAqC,CAAC;AAE7C,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa"}

package/dist/stories/assets/css/variables.css

@@ -0,0 +1,12 @@
+:root {
+    --primary: #008ded;
+    --secondary: #e0004f;
+    --disabled: #bac6d6;
+    --black: #000;
+    --white: #fff;
+    --light-grey: #d7e0ea;
+    --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
+    --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
+    }

package/dist/stories/atoms/Button/Button.js

@@ -12,7 +12,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import MuiButton from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
-import { colors } from '../../theme/colors';
 const StyledButton = styled(MuiButton)({
     borderRadius: '24px',
     fontSize: '12px',
@@ -26,33 +25,33 @@ const StyledButton = styled(MuiButton)({
     },
 });
 const PrimaryButton = styled(StyledButton)((props) => ({
-    backgroundColor: colors.black,
-    color: colors.white,
+    backgroundColor: 'var(--black)',
+    color: 'var(--white)',
     width: props.isExpanded ? '100%' : 'inherit',
     '&:hover': {
-        backgroundColor: colors.darkestGrey,
-        borderColor: colors.darkestGrey,
+        backgroundColor: 'var(--darkest-grey)',
+        borderColor: 'var(--darkest-grey)',
     },
     '&:disabled': {
-        backgroundColor: colors.lightGrey,
-        borderColor: colors.lightGrey,
+        backgroundColor: 'var(--light-grey)',
+        borderColor: 'var(--light-grey)',
     },
 }));
 const SecondaryButton = styled(StyledButton)({
-    borderColor: colors.black,
+    borderColor: 'var(--black)',
     backgroundColor: 'transparent',
-    color: colors.black,
+    color: 'var(--black)',
     '&:hover': {
-        borderColor: colors.darkestGrey,
+        borderColor: 'var(--darkest-grey)',
     },
     '&:disabled': {
-        borderColor: colors.disabled
+        borderColor: 'var(--disabled)'
     },
 });
 const LinkButton = styled(MuiButton)({
     borderColor: 'transparent',
     backgroundColor: 'transparent',
-    color: colors.primary,
+    color: 'var(--primary)',
     textTransform: 'inherit',
     justifyContent: 'left',
     padding: 0,
@@ -60,7 +59,7 @@ const LinkButton = styled(MuiButton)({
         backgroundColor: 'transparent',
     },
     '&:disabled': {
-        borderColor: colors.disabled
+        borderColor: 'var(--disabled)'
     },
 });
 export default function Button(_a) {

package/dist/stories/atoms/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAa1C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;IAE/B,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,CAAC;IACxE,eAAe,EAAE,MAAM,CAAC,KAAK;IAC7B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;IAE5C,SAAS,EAAE;QACT,eAAe,EAAE,MAAM,CAAC,WAAW;QACnC,WAAW,EAAE,MAAM,CAAC,WAAW;KAChC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,MAAM,CAAC,SAAS;QACjC,WAAW,EAAE,MAAM,CAAC,SAAS;KAC9B;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,MAAM,CAAC,KAAK;IACzB,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,MAAM,CAAC,KAAK;IAEnB,SAAS,EAAE;QACT,WAAW,EAAE,MAAM,CAAC,WAAW;KAChC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,MAAM,CAAC,QAAQ;KAC7B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,MAAM,CAAC,OAAO;IACrB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,CAAC;IAEV,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;IAED,YAAY,EAAE;QACZ,WAAW,EAAE,MAAM,CAAC,QAAQ;KAC7B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IAC3D,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACZ,UAAU,UACN,KAAK,GAER,QAAQ,CACK,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACH,oBAAC,UAAU,kBACT,kBAAkB,UACd,KAAK,GAER,QAAQ,CACE,CAChB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAa9C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;IAE/B,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,CAAC;IACxE,eAAe,EAAE,cAAc;IAC/B,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;IAE5C,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,mBAAmB;QACpC,WAAW,EAAE,mBAAmB;KACjC;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,CAAC;IAEV,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;IAED,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IAC3D,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACZ,UAAU,UACN,KAAK,GAER,QAAQ,CACK,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACH,oBAAC,UAAU,kBACT,kBAAkB,UACd,KAAK,GAER,QAAQ,CACE,CAChB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}

package/dist/stories/atoms/Typography/Typography.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import "../../assets/css/typography.css";
 type TypographyProps = {
     children: string | ReactElement;
     category?: string;

package/dist/stories/atoms/Typography/Typography.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import MuiTypography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
+import "../../assets/css/typography.css";
 const DISPLAY_SIZES = {
     "XXX-large": '120px',
     "XX-large": '100px',
@@ -46,17 +47,17 @@ const SECONDARY_SIZES = {
     "xx-small-book": '10px',
 };
 const DisplayTypography = styled(MuiTypography)((props) => ({
-    fontFamily: `'UTR Numerals', 'Tungsten A', 'Tungsten B'`,
+    fontFamily: 'var(--display-font)',
     fontSize: DISPLAY_SIZES[props.size],
     fontWeight: props.weight
 }));
 const PrimaryTypography = styled(MuiTypography)((props) => ({
-    fontFamily: `'Tungsten A', 'Tungsten B', 'Helvetica', Arial, sans-serif`,
+    fontFamily: 'var(--primary-font)',
     fontSize: PRIMARY_SIZES[props.size],
     fontWeight: props.weight
 }));
 const SecondaryTypography = styled(MuiTypography)((props) => ({
-    fontFamily: `'Gotham SSm A', 'Gotham SSm B', 'Helvetica', Arial, sans-serif`,
+    fontFamily: 'var(--secondary-font)',
     fontSize: SECONDARY_SIZES[props.size],
     textTransform: props.isCap ? 'uppercase' : 'inherit',
     fontWeight: props.weight

package/dist/stories/atoms/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}

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

@@ -4,3 +4,4 @@ declare const _default: {
 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,6 +1,7 @@
 import React from 'react';
 import ContactCard from './ContactCard';
 import TeamCard from './TeamCard';
+import DrawCard from './DrawCard';
 // Default
 export default {
     title: 'Molecules/Cards',
@@ -12,6 +13,10 @@ function ContactCardTemplate(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 = {
@@ -24,4 +29,23 @@ 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 = {
+    choices: [
+        {
+            id: 1,
+            label: 'Team 1',
+        },
+        {
+            id: 2,
+            label: 'Team 2',
+        }
+    ],
+    selectedTeams: {
+        teamOne: 1,
+        teamTwo: 2,
+    },
+    dateLabel: 'Dec 20 at 9:00am',
+    locationLabel: 'Taube Tennis Center',
+};
 //# sourceMappingURL=Cards.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cards.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/Cards.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAelC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,YAAY;AACZ,SAAS,mBAAmB,CAAC,IAAsB;IACjD,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAC;AAChC,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,sGAAsG;CACpH,CAAC"}
+{"version":3,"file":"Cards.stories.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/Cards.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAGlC,UAAU;AACV,eAAe;IACb,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,YAAY;AACZ,SAAS,mBAAmB,CAAC,IAAsB;IACjD,OAAO,oBAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;AACnC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAC;AAChC,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAmB;IAC3C,OAAO,CACT,6BAAK,KAAK,EAAE,EAAC,KAAK,EAAE,OAAO,EAAC;QACxB,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CACpB,CACH,CAAC;AACJ,CAAC;AAED,UAAU;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,iBAAiB;IACxB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,KAAK,EAAE,QAAQ;IACf,WAAW,EAAE,sGAAsG;CACpH,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,IAAI,CAAC,IAAI,GAAG;IACV,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,aAAa,EAAE;QACb,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,CAAC;KACX;IACD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,qBAAqB;CACrC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAStC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAEjB;QAFiB,EAClC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,OACjB,EADsB,KAAK,cADV,4CAEnC,CAD6C;IAE5C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,EAAE,CAAC;IAExD,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,IAAI,CAAc;QACtG,WAAW,IAAI,CAChB,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE;YACpE,oBAAC,sBAAsB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YAC1D,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CAC1E,CACN;QACA,KAAK,IAAI,CACV,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE;YACrE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YACrD,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACtE,CACN;QACD,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC;YACxE;gBACE,6BAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,GAAI;gBAC5D,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAC5E,WAAW,SAAS,EAAE,CACd,CACZ,CACI,CACE,CAChB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ContactCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/ContactCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AACjD,OAAO,sBAAsB,MAAM,wCAAwC,CAAC;AAC5E,OAAO,iBAAiB,MAAM,mCAAmC,CAAC;AAClE,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAEjB;QAFiB,EAClC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,OACjB,EADsB,KAAK,cADV,4CAEnC,CAD6C;IAE5C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,YAAY,GAAG,gBAAgB,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,EAAE,CAAC;IAExD,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,YAAY,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,IAAI,CAAc;QACtG,WAAW,IAAI,CAChB,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,KAAK,EAAE;YACpE,oBAAC,sBAAsB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YAC1D,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CAC1E,CACN;QACA,KAAK,IAAI,CACV,oBAAC,IAAI,IAAC,EAAE,EAAE,EAAC,OAAO,EAAE,MAAM,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,KAAK,EAAE;YACrE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,GAAI;YACrD,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,KAAK,CAAc,CACtE,CACN;QACD,oBAAC,MAAM,IAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,EAAC;YACxE;gBACE,6BAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,GAAI;gBAC5D,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC,EAAE,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAC5E,WAAW,SAAS,EAAE,CACd,CACZ,CACI,CACE,CAChB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DrawCardProps } from "./sharedTypes";
+export default function DrawCard({ choices, onChange, onEditClick, selectedTeams, dateLabel, locationLabel, ...props }: DrawCardProps): JSX.Element;

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

@@ -0,0 +1,66 @@
+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 MuiSelect from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+const StyledCard = styled(Box)({
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: '4px',
+    padding: '16px 24px',
+    width: '100%',
+    backgroundColor: 'var(--cool-grey-150)',
+    '&:hover': {
+        cursor: 'pointer'
+    },
+});
+const StyledMuiSelect = styled(MuiSelect)({
+    border: '1px solid var(--cool-grey-600)',
+});
+const BottomGrid = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: '32px',
+});
+export default function DrawCard(_a) {
+    var { choices, onChange, onEditClick, selectedTeams, dateLabel, locationLabel } = _a, props = __rest(_a, ["choices", "onChange", "onEditClick", "selectedTeams", "dateLabel", "locationLabel"]);
+    const { teamOne, teamTwo } = selectedTeams || null;
+    const handleOnTeamOneChange = () => {
+        if (onChange) {
+            onChange(0);
+        }
+    };
+    const handleOnTeamTwoChange = () => {
+        if (onChange) {
+            onChange(1);
+        }
+    };
+    return (React.createElement(StyledCard, Object.assign({}, props),
+        React.createElement(StyledMuiSelect, { labelId: "draw-card-select-label-top", id: "draw-card-select-top", value: teamOne, label: "teamOne", onChange: handleOnTeamOneChange }, choices.map((choice) => React.createElement(MenuItem, { value: choice.id }, choice.label))),
+        React.createElement(Box, { pt: 1 }),
+        React.createElement(StyledMuiSelect, { labelId: "draw-card-select-label-bot", id: "draw-card-select-bot", value: teamTwo, label: "teamTwo", onChange: handleOnTeamTwoChange }, choices.map((choice) => React.createElement(MenuItem, { value: choice.id }, choice.label))),
+        React.createElement(BottomGrid, null,
+            React.createElement(Box, null,
+                React.createElement(Typography, { category: "secondary", size: "small-book" }, dateLabel),
+                React.createElement(Typography, { category: "secondary", size: "small-book" }, locationLabel)),
+            React.createElement(Button, { style: {
+                    display: 'flex',
+                    justifyContent: 'end'
+                }, onClick: onEditClick, category: "link" },
+                React.createElement(Typography, { category: "secondary", size: "x-small-medium-cap" }, "Edit")))));
+}
+//# sourceMappingURL=DrawCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/DrawCard.tsx"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-type TeamCardProps = {
-    title: string;
-    description: string;
-};
+import { TeamCardProps } from './sharedTypes';
 export default function TeamCard({ title, description, ...props }: TeamCardProps): JSX.Element;
-export {};

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

@@ -1 +1 @@
-{"version":3,"file":"TeamCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAOtC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAA+C;QAA/C,EAAE,KAAK,EAAE,WAAW,OAA2B,EAAtB,KAAK,cAA9B,wBAAgC,CAAF;IAC7D,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,KAAK,CAAc;QAC1E,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CACpE,CAChB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"TeamCard.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/TeamCard.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAA+C;QAA/C,EAAE,KAAK,EAAE,WAAW,OAA2B,EAAtB,KAAK,cAA9B,wBAAgC,CAAF;IAC7D,OAAO,CACH,oBAAC,UAAU,oBACL,KAAK;QAET,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,eAAe,IAAE,KAAK,CAAc;QAC1E,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,IAAE,WAAW,CAAc,CACpE,CAChB,CAAC;AACJ,CAAC"}

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

@@ -1,12 +1,11 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { colors } from 'stories/theme/colors';
 export const StyledCard = styled(Box)({
     display: 'flex',
     flexDirection: 'column',
     borderRadius: '4px',
     padding: '16px',
-    border: `1px solid ${colors.coolGrey300}`,
+    border: `1px solid var(--cool-grey-300)`,
     '&:hover': {
         cursor: 'pointer'
     },

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

@@ -1 +1 @@
-{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,aAAa,MAAM,CAAC,WAAW,EAAE;IAEzC,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC"}
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,gCAAgC;IAExC,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC"}

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

@@ -0,0 +1,27 @@
+type SelectedTeams = {
+    teamOne: number;
+    teamTwo: number;
+};
+type Choices = {
+    id: number;
+    label: string;
+}[];
+export type DrawCardProps = {
+    choices: Choices;
+    selectedTeams: SelectedTeams;
+    dateLabel: string;
+    locationLabel: string;
+    onEditClick?: VoidFunction;
+    onChange?: (arg0: number) => null;
+};
+export interface TeamCardProps {
+    title: string;
+    description: string;
+}
+export interface ContactCardProps {
+    name: string;
+    phone: string;
+    email: string;
+    onMessageClick?: VoidFunction;
+}
+export {};

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

@@ -0,0 +1,3 @@
+// Card types
+export {};
+//# sourceMappingURL=sharedTypes.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sharedTypes.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/sharedTypes.ts"],"names":[],"mappings":"AAAA,aAAa"}

package/dist/stories/organisms/DrawCardTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DrawCardTableProps } from './sharedTypes';
+export default function DrawCardTable({ headerRows, tableRows, ...props }: DrawCardTableProps): JSX.Element;

package/dist/stories/organisms/DrawCardTable.js

@@ -0,0 +1,40 @@
+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 Grid from '@mui/material/Grid';
+import Typography from '../atoms/Typography/Typography';
+const StyledHeader = styled(Grid)({
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+});
+const GridSections = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px'
+});
+export default function DrawCardTable(_a) {
+    var { headerRows, tableRows } = _a, props = __rest(_a, ["headerRows", "tableRows"]);
+    const totalColumns = Math.floor(12 / headerRows.length);
+    const formatTableRows = tableRows.map((row, index) => {
+        const rowSectionsWidth = `${100 / tableRows[index].length}%`;
+        const sectionAmount = tableRows[index].length;
+        return (React.createElement(Grid, { xs: totalColumns }, [...Array(sectionAmount)].map((section, idx) => (React.createElement(GridSections, { sx: { height: rowSectionsWidth } }, row[idx])))));
+    });
+    return (React.createElement(Box, Object.assign({}, props, { sx: { flexGrow: 1 }, "aria-label": "draw table" }),
+        React.createElement(Grid, { container: true, sx: { height: '60px' } }, headerRows.map((row) => (React.createElement(StyledHeader, { key: row.name, xs: totalColumns },
+            React.createElement(Typography, { category: "secondary", size: "small-medium-cap" }, row.name))))),
+        React.createElement(Grid, { container: true }, formatTableRows)));
+}
+//# sourceMappingURL=DrawCardTable.js.map

package/dist/stories/organisms/DrawCardTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawCardTable.js","sourceRoot":"","sources":["../../../src/stories/organisms/DrawCardTable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAGxD,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAChC,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,KAAK;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAIjB;QAJiB,EACpC,UAAU,EACV,SAAS,OAEU,EADhB,KAAK,cAH4B,2BAIrC,CADS;IAER,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IAExD,MAAM,eAAe,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACnD,MAAM,gBAAgB,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC;QAC7D,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC;QAE9C,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE,EAAE,YAAY,IACnB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7C,oBAAC,YAAY,IAAC,EAAE,EAAE,EAAC,MAAM,EAAE,gBAAgB,EAAC,IACzC,GAAG,CAAC,GAAG,CAAC,CACI,CAClB,CAAC,CACG,CACR,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,GAAG,oBAAK,KAAK,IAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,gBAAa,YAAY;QAC1D,oBAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,EAAC,MAAM,EAAE,MAAM,EAAC,IAC7B,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACrB,oBAAC,YAAY,IAAC,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,EAAE,EAAE,YAAY;YAC3C,oBAAC,UAAU,IAAC,QAAQ,EAAC,WAAW,EAAC,IAAI,EAAC,kBAAkB,IAAE,GAAG,CAAC,IAAI,CAAc,CACnE,CAClB,CAAC,CACD;QACP,oBAAC,IAAI,IAAC,SAAS,UACJ,eAAe,CACnB,CACH,CACP,CAAC;AACJ,CAAC"}

package/dist/stories/organisms/Tables.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const DrawTable: any;

package/dist/stories/organisms/Tables.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import DrawCard from '../molecules/Cards/DrawCard';
+import DrawCardTable from './DrawCardTable';
+const SAMPLE_CARD_DATA = {
+    choices: [
+        {
+            id: 1,
+            label: 'Team 1',
+        },
+        {
+            id: 2,
+            label: 'Team 2',
+        }
+    ],
+    selectedTeams: {
+        teamOne: 1,
+        teamTwo: 2,
+    },
+    dateLabel: 'Dec 20 at 9:00am',
+    locationLabel: 'Taube Tennis Center',
+};
+// Default
+export default {
+    title: 'Organisms/Tables',
+};
+// Templates
+function DrawCardTableTemplate(args) {
+    return React.createElement(DrawCardTable, Object.assign({}, args));
+}
+const headerRows = [
+    { name: 'Round 1' },
+    { name: 'Quarterfinal' },
+    { name: 'SemiFinal' },
+];
+const tableRows = [
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+    [
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+        React.createElement(DrawCard, Object.assign({}, SAMPLE_CARD_DATA)),
+    ],
+];
+// Stories
+export const DrawTable = DrawCardTableTemplate.bind({});
+DrawTable.args = {
+    headerRows,
+    tableRows,
+};
+//# sourceMappingURL=Tables.stories.js.map

package/dist/stories/organisms/Tables.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tables.stories.js","sourceRoot":"","sources":["../../../src/stories/organisms/Tables.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,6BAA6B,CAAC;AACnD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAG5C,MAAM,gBAAgB,GAAG;IACvB,OAAO,EAAE;QACP;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;QACD;YACE,EAAE,EAAE,CAAC;YACL,KAAK,EAAE,QAAQ;SAChB;KACF;IACD,aAAa,EAAE;QACb,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,CAAC;KACX;IACD,SAAS,EAAE,kBAAkB;IAC7B,aAAa,EAAE,qBAAqB;CACrC,CAAC;AAEF,UAAU;AACV,eAAe;IACb,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEF,YAAY;AACZ,SAAS,qBAAqB,CAAC,IAAwB;IACrD,OAAO,oBAAC,aAAa,oBAAK,IAAI,EAAI,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,EAAC,IAAI,EAAE,SAAS,EAAE;IAClB,EAAC,IAAI,EAAE,cAAc,EAAE;IACvB,EAAC,IAAI,EAAE,WAAW,EAAE;CACrB,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;IACD;QACI,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACrC;IACD;QACM,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;QAClC,oBAAC,QAAQ,oBAAK,gBAAgB,EAAI;KACvC;CACF,CAAC;AAEF,UAAU;AACV,MAAM,CAAC,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,SAAS,CAAC,IAAI,GAAG;IACf,UAAU;IACV,SAAS;CACV,CAAC"}

package/dist/stories/organisms/sharedTypes.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type DrawCardTableProps = {
+    headerRows: {
+        name: string;
+    }[];
+    tableRows: ReactNode[][];
+};

package/dist/stories/organisms/sharedTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sharedTypes.js.map

package/dist/stories/organisms/sharedTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sharedTypes.js","sourceRoot":"","sources":["../../../src/stories/organisms/sharedTypes.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.0.24",
+  "version": "0.1.0",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

package/src/components.jsx

@@ -1,4 +1,4 @@
-import "./stories/assets/css/typography.css";
+import "./stories/assets/css/variables.css";
 
 // ATOMS
 export { default as Button } from './stories/atoms/Button/Button';

package/src/stories/assets/css/variables.css

@@ -0,0 +1,12 @@
+:root {
+    --primary: #008ded;
+    --secondary: #e0004f;
+    --disabled: #bac6d6;
+    --black: #000;
+    --white: #fff;
+    --light-grey: #d7e0ea;
+    --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
+    --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
+    }

package/src/stories/atoms/Button/Button.tsx

@@ -1,7 +1,6 @@
 import React, {ReactElement} from 'react';
 import MuiButton from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
-import {colors} from '../../theme/colors';
 
 type ButtonProps = {
   children: string | ReactElement;
@@ -29,37 +28,37 @@ const StyledButton = styled(MuiButton)({
 });
 
 const PrimaryButton = styled(StyledButton)((props: StyledButtonProps) => ({
-  backgroundColor: colors.black,
-  color: colors.white,
+  backgroundColor: 'var(--black)',
+  color: 'var(--white)',
   width: props.isExpanded ? '100%' : 'inherit',
   
   '&:hover': {
-    backgroundColor: colors.darkestGrey,
-    borderColor: colors.darkestGrey,
+    backgroundColor: 'var(--darkest-grey)',
+    borderColor: 'var(--darkest-grey)',
   },
   '&:disabled': {
-    backgroundColor: colors.lightGrey,
-    borderColor: colors.lightGrey,
+    backgroundColor: 'var(--light-grey)',
+    borderColor: 'var(--light-grey)',
   },
 }));
 
 const SecondaryButton = styled(StyledButton)({
-  borderColor: colors.black,
+  borderColor: 'var(--black)',
   backgroundColor: 'transparent',
-  color: colors.black,
+  color: 'var(--black)',
 
   '&:hover': {
-    borderColor: colors.darkestGrey,
+    borderColor: 'var(--darkest-grey)',
   },
   '&:disabled': {
-    borderColor: colors.disabled
+    borderColor: 'var(--disabled)'
   },
 });
 
 const LinkButton = styled(MuiButton)({
   borderColor: 'transparent',
   backgroundColor: 'transparent',
-  color: colors.primary,
+  color: 'var(--primary)',
   textTransform: 'inherit',
   justifyContent: 'left',
   padding: 0,
@@ -69,7 +68,7 @@ const LinkButton = styled(MuiButton)({
   },
 
   '&:disabled': {
-    borderColor: colors.disabled
+    borderColor: 'var(--disabled)'
   },
 });
 

package/src/stories/atoms/Typography/Typography.tsx

@@ -1,6 +1,7 @@
 import React, {ReactElement} from 'react';
 import MuiTypography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
+import "../../assets/css/typography.css";
 
 type TypographyProps = {
   children: string | ReactElement;
@@ -52,19 +53,19 @@ const SECONDARY_SIZES = {
 };
 
 const DisplayTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: `'UTR Numerals', 'Tungsten A', 'Tungsten B'`,
+  fontFamily: 'var(--display-font)',
   fontSize: DISPLAY_SIZES[props.size as keyof typeof DISPLAY_SIZES],
   fontWeight: props.weight
 }));
 
 const PrimaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: `'Tungsten A', 'Tungsten B', 'Helvetica', Arial, sans-serif`,
+  fontFamily: 'var(--primary-font)',
   fontSize: PRIMARY_SIZES[props.size as keyof typeof PRIMARY_SIZES],
   fontWeight: props.weight
 }));
 
 const SecondaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: `'Gotham SSm A', 'Gotham SSm B', 'Helvetica', Arial, sans-serif`,
+  fontFamily: 'var(--secondary-font)',
   fontSize: SECONDARY_SIZES[props.size as keyof typeof SECONDARY_SIZES],
   textTransform: props.isCap ? 'uppercase' : 'inherit',
   fontWeight: props.weight

package/src/stories/molecules/Cards/Cards.stories.tsx

@@ -2,19 +2,8 @@ import React from 'react';
 
 import ContactCard from './ContactCard';
 import TeamCard from './TeamCard';
-
-// Prop types
-interface ContactCardProps {
-  name: string;
-  phone: string;
-  email: string;
-  handleOnMessageClick?: VoidFunction;
-}
-
-interface TeamCardProps {
-  title: string; 
-  description: string;
-}
+import DrawCard from './DrawCard';
+import {DrawCardProps, TeamCardProps, ContactCardProps} from "./sharedTypes";
 
 // Default
 export default {
@@ -30,6 +19,14 @@ function TeamCardTemplate(args: TeamCardProps) {
   return <TeamCard {...args} />;  
 }
 
+function DrawCardTemplate(args: DrawCardProps) {
+  return (
+<div style={{width: '372px'}}>
+    <DrawCard {...args} /> 
+</div>
+  );
+}
+
 // Stories
 export const Contact = ContactCardTemplate.bind({});
 Contact.args = {
@@ -43,3 +40,23 @@ 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 = {
+  choices: [
+    {
+      id: 1,
+      label: 'Team 1',
+    },
+    {
+      id: 2,
+      label: 'Team 2',
+    }
+  ],
+  selectedTeams: {
+    teamOne: 1,
+    teamTwo: 2,
+  },
+  dateLabel: 'Dec 20 at 9:00am',
+  locationLabel: 'Taube Tennis Center',
+};

package/src/stories/molecules/Cards/ContactCard.tsx

@@ -8,13 +8,7 @@ import Typography from '../../atoms/Typography/Typography';
 import ChatIcon from '../../assets/icon-chat-blue.svg';
 
 import { StyledCard } from './shared';
-
-type ContactCardProps = {
-  name: string;
-  phone: string;
-  email: string;
-  onMessageClick?: VoidFunction;
-}
+import {ContactCardProps} from './sharedTypes';
 
 export default function ContactCard({
   name, phone, email, onMessageClick, ...props 

package/src/stories/molecules/Cards/DrawCard.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import MuiSelect from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '../../atoms/Button/Button';
+import Typography from '../../atoms/Typography/Typography';
+import {DrawCardProps} from "./sharedTypes";
+
+const StyledCard = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '4px',
+  padding: '16px 24px',
+  width: '100%',
+  backgroundColor: 'var(--cool-grey-150)',
+  
+  '&:hover': {
+    cursor: 'pointer'
+  },
+});
+
+const StyledMuiSelect = styled(MuiSelect)({
+  border: '1px solid var(--cool-grey-600)',
+});
+
+const BottomGrid = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingTop: '32px',
+
+});
+
+export default function DrawCard({
+  choices, onChange, onEditClick, selectedTeams, dateLabel, locationLabel, ...props
+}: DrawCardProps) {
+  const {teamOne, teamTwo} = selectedTeams || null;
+
+  const handleOnTeamOneChange = () => {
+    if (onChange) {
+      onChange(0);
+    }
+  };
+
+  const handleOnTeamTwoChange = () => {
+    if (onChange) {
+      onChange(1);
+    }
+  };
+
+  return (
+      <StyledCard
+        {...props}
+      >
+          <StyledMuiSelect
+            labelId="draw-card-select-label-top"
+            id="draw-card-select-top"
+            value={teamOne}
+            label="teamOne"
+            onChange={handleOnTeamOneChange}
+          >
+            {choices.map((choice) => <MenuItem value={choice.id}>{choice.label}</MenuItem>)}
+          </StyledMuiSelect>
+
+            <Box pt={1} />
+
+          <StyledMuiSelect
+            labelId="draw-card-select-label-bot"
+            id="draw-card-select-bot"
+            value={teamTwo}
+            label="teamTwo"
+            onChange={handleOnTeamTwoChange}
+          >
+            {choices.map((choice) => <MenuItem value={choice.id}>{choice.label}</MenuItem>)}
+          </StyledMuiSelect>
+        <BottomGrid> 
+
+            <Box>
+          <Typography category="secondary" size="small-book">
+            {dateLabel}
+          </Typography>
+          <Typography category="secondary" size="small-book">
+            {locationLabel}
+          </Typography>
+            </Box>
+            <Button
+              style={{
+                display: 'flex',
+                justifyContent: 'end'
+              }}
+              onClick={onEditClick}
+              category="link"
+            >
+                <Typography category="secondary" size="x-small-medium-cap">
+                Edit
+                </Typography>
+            </Button>
+        </BottomGrid>
+      </StyledCard>
+  );
+}

package/src/stories/molecules/Cards/TeamCard.tsx

@@ -2,11 +2,7 @@ import React from 'react';
 
 import Typography from '../../atoms/Typography/Typography';
 import { StyledCard } from './shared';
-
-type TeamCardProps = {
-  title: string;
-  description: string;
-}
+import {TeamCardProps} from './sharedTypes';
 
 export default function TeamCard({ title, description, ...props }: TeamCardProps) {
   return (

package/src/stories/molecules/Cards/shared.tsx

@@ -1,13 +1,12 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { colors } from 'stories/theme/colors';
 
 export const StyledCard = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '4px',
   padding: '16px',
-  border: `1px solid ${colors.coolGrey300}`,
+  border: `1px solid var(--cool-grey-300)`,
   
   '&:hover': {
     cursor: 'pointer'

package/src/stories/molecules/Cards/sharedTypes.ts

@@ -0,0 +1,32 @@
+// Card types
+
+type SelectedTeams = {
+    teamOne: number;
+    teamTwo: number;
+}
+
+type Choices = {
+    id: number;
+    label: string;
+}[];
+
+export type DrawCardProps = {
+    choices: Choices;
+    selectedTeams: SelectedTeams;
+    dateLabel: string;
+    locationLabel: string;
+    onEditClick?: VoidFunction;
+    onChange?: (arg0: number) => null;
+  }
+
+export interface TeamCardProps {
+    title: string; 
+    description: string;
+  }
+
+export interface ContactCardProps {
+    name: string;
+    phone: string;
+    email: string;
+    onMessageClick?: VoidFunction;
+  }

package/src/stories/organisms/DrawCardTable.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
+import Typography from '../atoms/Typography/Typography';
+import {DrawCardTableProps} from './sharedTypes';
+
+const StyledHeader = styled(Grid)({
+  alignItems: 'center',
+  justifyContent: 'center',
+  display: 'flex',
+});
+
+const GridSections = styled(Box)({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '8px'
+});
+
+export default function DrawCardTable({
+  headerRows,
+  tableRows,
+  ...props
+}: DrawCardTableProps) {
+  const totalColumns = Math.floor(12 / headerRows.length); 
+
+  const formatTableRows = tableRows.map((row, index) => {
+    const rowSectionsWidth = `${100 / tableRows[index].length}%`;
+    const sectionAmount = tableRows[index].length;
+
+    return (
+      <Grid xs={totalColumns}>
+        {[...Array(sectionAmount)].map((section, idx) => (
+            <GridSections sx={{height: rowSectionsWidth}}>
+              {row[idx]}
+            </GridSections>
+        ))}
+      </Grid>
+    );
+  });
+
+  return (
+    <Box {...props} sx={{ flexGrow: 1 }} aria-label="draw table">
+      <Grid container sx={{height: '60px'}}>
+            {headerRows.map((row) => (
+                <StyledHeader key={row.name} xs={totalColumns}>
+                  <Typography category="secondary" size="small-medium-cap">{row.name}</Typography>
+                </StyledHeader>
+            ))}
+      </Grid>
+      <Grid container>
+                {formatTableRows}
+      </Grid>
+    </Box>
+  );
+}

package/src/stories/organisms/Tables.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import DrawCard from '../molecules/Cards/DrawCard';
+import DrawCardTable from './DrawCardTable';
+import {DrawCardTableProps } from './sharedTypes';
+
+const SAMPLE_CARD_DATA = {
+  choices: [
+    {
+      id: 1,
+      label: 'Team 1',
+    },
+    {
+      id: 2,
+      label: 'Team 2',
+    }
+  ],
+  selectedTeams: {
+    teamOne: 1,
+    teamTwo: 2,
+  },
+  dateLabel: 'Dec 20 at 9:00am',
+  locationLabel: 'Taube Tennis Center',
+};
+
+// Default
+export default {
+  title: 'Organisms/Tables',
+};
+
+// Templates
+function DrawCardTableTemplate(args: DrawCardTableProps) {
+  return <DrawCardTable {...args} />;
+}
+
+const headerRows = [
+  {name: 'Round 1' },
+  {name: 'Quarterfinal' },
+  {name: 'SemiFinal' },
+];
+
+const tableRows = [
+  [      
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+  [      
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+      <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+  [      
+        <DrawCard {...SAMPLE_CARD_DATA} />,
+        <DrawCard {...SAMPLE_CARD_DATA} />,
+  ],
+];
+
+// Stories
+export const DrawTable = DrawCardTableTemplate.bind({});
+DrawTable.args = {
+  headerRows,
+  tableRows,
+};

package/src/stories/organisms/sharedTypes.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+
+export type DrawCardTableProps = {
+    headerRows: {
+      name: string;
+    }[],
+    tableRows: ReactNode[][];
+  }

package/dist/stories/theme/colors.d.ts

@@ -1,10 +0,0 @@
-export declare const colors: {
-    primary: string;
-    secondary: string;
-    disabled: string;
-    black: string;
-    white: string;
-    lightGrey: string;
-    darkestGrey: string;
-    coolGrey300: string;
-};

package/dist/stories/theme/colors.js

@@ -1,11 +0,0 @@
-export const colors = {
-    primary: '#008ded',
-    secondary: '#e0004f',
-    disabled: '#bac6d6',
-    black: '#000',
-    white: '#fff',
-    lightGrey: '#d7e0ea',
-    darkestGrey: '#3b4859',
-    coolGrey300: '#DDE3EB'
-};
-//# sourceMappingURL=colors.js.map

package/dist/stories/theme/colors.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/stories/theme/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;CACvB,CAAC"}

package/src/stories/theme/colors.ts

@@ -1,10 +0,0 @@
-export const colors = {
-  primary: '#008ded',
-  secondary: '#e0004f',
-  disabled: '#bac6d6',
-  black: '#000',
-  white: '#fff',
-  lightGrey: '#d7e0ea',
-  darkestGrey: '#3b4859',
-  coolGrey300: '#DDE3EB'
-};