@universal-tennis/ui-shared 0.1.82 → 0.1.85

package/dist/components.js

@@ -1,43 +1,44 @@
-import './stories/assets/css/variables.css';
-// ATOMS
-export { default as Button } from './stories/atoms/Button/Button';
-export { default as UTMap } from './stories/atoms/UTMap/UTMap';
-export { default as Typography } from './stories/atoms/Typography/Typography';
-// ATOMS - ICONS
-export { default as AddIcon } from './stories/atoms/Icons/AddIcon';
-export { default as AvailabilityMaybeIcon } from './stories/atoms/Icons/AvailabilityMaybeIcon';
-export { default as AvailabilityNoIcon } from './stories/atoms/Icons/AvailabilityNoIcon';
-export { default as AvailabilityYesIcon } from './stories/atoms/Icons/AvailabilityYesIcon';
-export { default as AvailabilityNotSetIcon } from './stories/atoms/Icons/AvailabilityNotSetIcon';
-export { default as CalendarIcon } from './stories/atoms/Icons/CalendarIcon';
-export { default as ClockIcon } from './stories/atoms/Icons/ClockIcon';
-export { default as CloseIcon } from './stories/atoms/Icons/CloseIcon';
-export { default as DeleteIcon } from './stories/atoms/Icons/DeleteIcon';
-export { default as DoublePersonIcon } from './stories/atoms/Icons/DoublePersonIcon';
-export { default as EditIcon } from './stories/atoms/Icons/EditIcon';
-export { default as LocationIcon } from './stories/atoms/Icons/LocationIcon';
-export { default as LeftChevronIcon } from './stories/atoms/Icons/LeftChevronIcon';
-export { default as LineIcon } from './stories/atoms/Icons/LineIcon';
-export { default as MessageIcon } from './stories/atoms/Icons/MessageIcon';
-export { default as RightChevronIcon } from './stories/atoms/Icons/RightChevronIcon';
-export { default as SessionIcon } from './stories/atoms/Icons/SessionIcon';
-export { default as SinglePersonIcon } from './stories/atoms/Icons/SinglePersonIcon';
-export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
-export { default as SwapNoBorderIcon } from './stories/atoms/Icons/SwapNoBorderIcon';
-export { default as VerifiedIcon } from './stories/atoms/Icons/VerifiedIcon';
-export { default as VisibilityIcon } from './stories/atoms/Icons/VisibilityIcon';
-export { default as VisibilityOffIcon } from './stories/atoms/Icons/VisibilityOffIcon';
-export { default as WinnerIndicatorIcon } from './stories/atoms/Icons/WinnerIndicatorIcon';
-// MOLECULES
-export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
-export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
-export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
-export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
-export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
-export { default as TeamDrawCard } from './stories/molecules/Cards/TeamDrawCard';
-// ORGANISMS
-export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
-export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';
-export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
-export { default as TeamDrawCardTable } from './stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable';
+import './stories/assets/css/variables.css';
+// ATOMS
+export { default as Button } from './stories/atoms/Button/Button';
+export { default as UTMap } from './stories/atoms/UTMap/UTMap';
+export { default as Typography } from './stories/atoms/Typography/Typography';
+// ATOMS - ICONS
+export { default as AddIcon } from './stories/atoms/Icons/AddIcon';
+export { default as AvailabilityMaybeIcon } from './stories/atoms/Icons/AvailabilityMaybeIcon';
+export { default as AvailabilityNoIcon } from './stories/atoms/Icons/AvailabilityNoIcon';
+export { default as AvailabilityYesIcon } from './stories/atoms/Icons/AvailabilityYesIcon';
+export { default as AvailabilityNotSetIcon } from './stories/atoms/Icons/AvailabilityNotSetIcon';
+export { default as CalendarIcon } from './stories/atoms/Icons/CalendarIcon';
+export { default as ClockIcon } from './stories/atoms/Icons/ClockIcon';
+export { default as CloseIcon } from './stories/atoms/Icons/CloseIcon';
+export { default as DeleteIcon } from './stories/atoms/Icons/DeleteIcon';
+export { default as DoublePersonIcon } from './stories/atoms/Icons/DoublePersonIcon';
+export { default as EditIcon } from './stories/atoms/Icons/EditIcon';
+export { default as LocationIcon } from './stories/atoms/Icons/LocationIcon';
+export { default as LeftChevronIcon } from './stories/atoms/Icons/LeftChevronIcon';
+export { default as LineIcon } from './stories/atoms/Icons/LineIcon';
+export { default as MessageIcon } from './stories/atoms/Icons/MessageIcon';
+export { default as RightChevronIcon } from './stories/atoms/Icons/RightChevronIcon';
+export { default as SessionIcon } from './stories/atoms/Icons/SessionIcon';
+export { default as SinglePersonIcon } from './stories/atoms/Icons/SinglePersonIcon';
+export { default as SwapIcon } from './stories/atoms/Icons/SwapIcon';
+export { default as SwapNoBorderIcon } from './stories/atoms/Icons/SwapNoBorderIcon';
+export { default as VerifiedIcon } from './stories/atoms/Icons/VerifiedIcon';
+export { default as VisibilityIcon } from './stories/atoms/Icons/VisibilityIcon';
+export { default as VisibilityOffIcon } from './stories/atoms/Icons/VisibilityOffIcon';
+export { default as WinnerIndicatorIcon } from './stories/atoms/Icons/WinnerIndicatorIcon';
+// MOLECULES
+export { default as AvatarWithName } from './stories/molecules/AvatarWithName/AvatarWithName';
+export { default as ContactCard } from './stories/molecules/Cards/ContactCard';
+export { default as DrawCard } from './stories/molecules/Cards/DrawCard';
+export { default as SquareAvatarWithName } from './stories/molecules/SquareAvatarWithName/SquareAvatarWithName';
+export { default as TeamCard } from './stories/molecules/Cards/TeamCard';
+export { default as TeamDrawCard } from './stories/molecules/Cards/TeamDrawCard';
+// ORGANISMS
+export { default as DrawCardTable } from './stories/organisms/Tables/DrawCardTable';
+export { default as FullPageModal } from './stories/organisms/Modals/FullPageModal';
+export { default as SortableTable } from './stories/organisms/Tables/SortableTable';
+export { default as TeamDrawCardTable } from './stories/organisms/Tables/TeamDrawCardTable/TeamDrawCardTable';
+export { default as Footer } from './stories/organisms/Footer/Footer';
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

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

package/dist/index.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/index.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(React.createElement(React.StrictMode, null,
-    React.createElement(App, null)));
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(React.createElement(React.StrictMode, null,
+    React.createElement(App, null)));
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
 //# sourceMappingURL=index.js.map

package/dist/items.d.ts

@@ -1,2 +1,2 @@
-declare const _exports: typeof import("./components");
-export = _exports;
+declare const _exports: typeof import("./components");
+export = _exports;

package/dist/items.js

@@ -1,2 +1,2 @@
-module.exports = require('./components');
+module.exports = require('./components');
 //# sourceMappingURL=items.js.map

package/dist/stories/Button.d.ts

@@ -0,0 +1,27 @@
+export function Button({ primary, backgroundColor, size, label, ...props }: {
+    [x: string]: any;
+    primary: any;
+    backgroundColor: any;
+    size: any;
+    label: any;
+}): JSX.Element;
+export namespace Button {
+    namespace propTypes {
+        const primary: PropTypes.Requireable<boolean>;
+        const backgroundColor: PropTypes.Requireable<string>;
+        const size: PropTypes.Requireable<string>;
+        const label: PropTypes.Validator<string>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        const backgroundColor_1: null;
+        export { backgroundColor_1 as backgroundColor };
+        const primary_1: boolean;
+        export { primary_1 as primary };
+        const size_1: string;
+        export { size_1 as size };
+        const onClick_1: undefined;
+        export { onClick_1 as onClick };
+    }
+}
+import PropTypes from "prop-types";

package/dist/stories/Button.js

@@ -0,0 +1,51 @@
+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 PropTypes from 'prop-types';
+import './button.css';
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = (_a) => {
+    var { primary, backgroundColor, size, label } = _a, props = __rest(_a, ["primary", "backgroundColor", "size", "label"]);
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return (React.createElement("button", Object.assign({ type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: backgroundColor && { backgroundColor } }, props), label));
+};
+Button.propTypes = {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary: PropTypes.bool,
+    /**
+     * What background color to use
+     */
+    backgroundColor: PropTypes.string,
+    /**
+     * How large should the button be?
+     */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /**
+     * Button contents
+     */
+    label: PropTypes.string.isRequired,
+    /**
+     * Optional click handler
+     */
+    onClick: PropTypes.func,
+};
+Button.defaultProps = {
+    backgroundColor: null,
+    primary: false,
+    size: 'medium',
+    onClick: undefined,
+};
+//# sourceMappingURL=Button.js.map

package/dist/stories/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/stories/Button.jsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAmD,EAAE,EAAE;QAAvD,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,OAAY,EAAP,KAAK,cAAjD,+CAAmD,CAAF;IACtE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,6BAA6B,CAAC;IACnF,OAAO,CACL,8CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,kBAAkB,EAAE,qBAAqB,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5E,KAAK,EAAE,eAAe,IAAI,EAAE,eAAe,EAAE,IACzC,KAAK,GAER,KAAK,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,SAAS,GAAG;IACjB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC,IAAI;IACvB;;OAEG;IACH,eAAe,EAAE,SAAS,CAAC,MAAM;IACjC;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC,IAAI;CACxB,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,eAAe,EAAE,IAAI;IACrB,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,SAAS;CACnB,CAAC"}

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,15 @@
+declare namespace _default {
+    export const title: string;
+    export { Button as component };
+    export namespace argTypes {
+        namespace backgroundColor {
+            const control: string;
+        }
+    }
+}
+export default _default;
+export const Primary: any;
+export const Secondary: any;
+export const Large: any;
+export const Small: any;
+import { Button } from "./Button";

package/dist/stories/Button.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button } from './Button';
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+    title: 'Example/Button',
+    component: Button,
+    // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => React.createElement(Button, Object.assign({}, args));
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+    primary: true,
+    label: 'Button',
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+    label: 'Button',
+};
+export const Large = Template.bind({});
+Large.args = {
+    size: 'large',
+    label: 'Button',
+};
+export const Small = Template.bind({});
+Small.args = {
+    size: 'small',
+    label: 'Button',
+};
+//# sourceMappingURL=Button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/stories/Button.stories.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,0GAA0G;AAC1G,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;IACjB,qEAAqE;IACrE,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KACtC;CACF,CAAC;AAEF,2GAA2G;AAC3G,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,yEAAyE;AACzE,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,QAAQ;CAChB,CAAC"}

package/dist/stories/Header.d.ts

@@ -0,0 +1,19 @@
+export function Header({ user, onLogin, onLogout, onCreateAccount }: {
+    user: any;
+    onLogin: any;
+    onLogout: any;
+    onCreateAccount: any;
+}): JSX.Element;
+export namespace Header {
+    namespace propTypes {
+        const user: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+        const onLogin: PropTypes.Validator<(...args: any[]) => any>;
+        const onLogout: PropTypes.Validator<(...args: any[]) => any>;
+        const onCreateAccount: PropTypes.Validator<(...args: any[]) => any>;
+    }
+    namespace defaultProps {
+        const user_1: null;
+        export { user_1 as user };
+    }
+}
+import PropTypes from "prop-types";

package/dist/stories/Header.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from './Button';
+import './header.css';
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (React.createElement("header", null,
+    React.createElement("div", { className: "wrapper" },
+        React.createElement("div", null,
+            React.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                    React.createElement("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }),
+                    React.createElement("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }),
+                    React.createElement("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" }))),
+            React.createElement("h1", null, "Acme")),
+        React.createElement("div", null, user ? (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "welcome" },
+                "Welcome, ",
+                React.createElement("b", null, user.name),
+                "!"),
+            React.createElement(Button, { size: "small", onClick: onLogout, label: "Log out" }))) : (React.createElement(React.Fragment, null,
+            React.createElement(Button, { size: "small", onClick: onLogin, label: "Log in" }),
+            React.createElement(Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })))))));
+Header.propTypes = {
+    user: PropTypes.shape({}),
+    onLogin: PropTypes.func.isRequired,
+    onLogout: PropTypes.func.isRequired,
+    onCreateAccount: PropTypes.func.isRequired,
+};
+Header.defaultProps = {
+    user: null,
+};
+//# sourceMappingURL=Header.js.map

package/dist/stories/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/stories/Header.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CACtE;IACE,6BAAK,SAAS,EAAC,SAAS;QACtB;YACE,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;gBAChF,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;oBAC/B,8BACE,CAAC,EAAC,mFAAmF,EACrF,IAAI,EAAC,MAAM,GACX;oBACF,8BACE,CAAC,EAAC,kEAAkE,EACpE,IAAI,EAAC,SAAS,GACd;oBACF,8BACE,CAAC,EAAC,gEAAgE,EAClE,IAAI,EAAC,SAAS,GACd,CACA,CACA;YACN,uCAAa,CACT;QACN,iCACG,IAAI,CAAC,CAAC,CAAC,CACN;YACE,8BAAM,SAAS,EAAC,SAAS;;gBACd,+BAAI,IAAI,CAAC,IAAI,CAAK;oBACtB;YACP,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAC,SAAS,GAAG,CACzD,CACJ,CAAC,CAAC,CAAC,CACF;YACE,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,QAAQ,GAAG;YACxD,oBAAC,MAAM,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAC,SAAS,GAAG,CACxE,CACJ,CACG,CACF,CACC,CACV,CAAC;AAEF,MAAM,CAAC,SAAS,GAAG;IACjB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IACzB,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IAClC,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,eAAe,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAC3C,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,IAAI,EAAE,IAAI;CACX,CAAC"}

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    export const title: string;
+    export { Header as component };
+    export namespace parameters {
+        const layout: string;
+    }
+}
+export default _default;
+export const LoggedIn: any;
+export const LoggedOut: any;
+import { Header } from "./Header";

package/dist/stories/Header.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Header } from './Header';
+export default {
+    title: 'Example/Header',
+    component: Header,
+    parameters: {
+        // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+const Template = (args) => React.createElement(Header, Object.assign({}, args));
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+    user: {
+        name: 'Jane Doe',
+    },
+};
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};
+//# sourceMappingURL=Header.stories.js.map

package/dist/stories/Header.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../src/stories/Header.stories.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,mFAAmF;QACnF,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACd,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG,EAAE,CAAC"}

package/dist/stories/Page.d.ts

@@ -0,0 +1 @@
+export function Page(): JSX.Element;

package/dist/stories/Page.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Header } from './Header';
+import './page.css';
+export const Page = () => {
+    const [user, setUser] = React.useState();
+    return (React.createElement("article", null,
+        React.createElement(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }),
+        React.createElement("section", null,
+            React.createElement("h2", null, "Pages in Storybook"),
+            React.createElement("p", null,
+                "We recommend building UIs with a",
+                ' ',
+                React.createElement("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer" },
+                    React.createElement("strong", null, "component-driven")),
+                ' ',
+                "process starting with atomic components and ending with pages."),
+            React.createElement("p", null, "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:"),
+            React.createElement("ul", null,
+                React.createElement("li", null, "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories"),
+                React.createElement("li", null, "Assemble data in the page component from your services. You can mock these services out using Storybook.")),
+            React.createElement("p", null,
+                "Get a guided tutorial on component-driven development at",
+                ' ',
+                React.createElement("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer" }, "Storybook tutorials"),
+                ". Read more in the",
+                ' ',
+                React.createElement("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer" }, "docs"),
+                "."),
+            React.createElement("div", { className: "tip-wrapper" },
+                React.createElement("span", { className: "tip" }, "Tip"),
+                " Adjust the width of the canvas with the",
+                ' ',
+                React.createElement("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("g", { fill: "none", fillRule: "evenodd" },
+                        React.createElement("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }))),
+                "Viewports addon in the toolbar"))));
+};
+//# sourceMappingURL=Page.js.map

package/dist/stories/Page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../src/stories/Page.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,EAAE;IACvB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC;IAEzC,OAAO,CACL;QACE,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAClC,eAAe,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,GACpD;QAEF;YACE,qDAA2B;YAC3B;;gBACmC,GAAG;gBACpC,2BAAG,IAAI,EAAC,6BAA6B,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB;oBAC7E,uDAAiC,CAC/B;gBAAC,GAAG;iFAEN;YACJ,oOAII;YACJ;gBACE,6JAGK;gBACL,2IAGK,CACF;YACL;;gBAC2D,GAAG;gBAC5D,2BAAG,IAAI,EAAC,qCAAqC,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,0BAEnF;;gBACe,GAAG;gBACtB,2BAAG,IAAI,EAAC,+BAA+B,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,WAE7E;oBAEF;YACJ,6BAAK,SAAS,EAAC,aAAa;gBAC1B,8BAAM,SAAS,EAAC,KAAK,UAAW;;gBAAyC,GAAG;gBAC5E,6BAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;oBAChF,2BAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS;wBAC/B,8BACE,CAAC,EAAC,sOAAsO,EACxO,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,MAAM,GACX,CACA,CACA;iDAEF,CACE,CACF,CACX,CAAC;AACJ,CAAC,CAAC"}

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,11 @@
+declare namespace _default {
+    export const title: string;
+    export { Page as component };
+    export namespace parameters {
+        const layout: string;
+    }
+}
+export default _default;
+export const LoggedOut: any;
+export const LoggedIn: any;
+import { Page } from "./Page";

package/dist/stories/Page.stories.js

@@ -0,0 +1,30 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { within, userEvent } from '@storybook/testing-library';
+import { Page } from './Page';
+export default {
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+        // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+        layout: 'fullscreen',
+    },
+};
+const Template = (args) => React.createElement(Page, Object.assign({}, args));
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedOut = Template.bind({});
+export const LoggedIn = Template.bind({});
+LoggedIn.play = ({ canvasElement }) => __awaiter(void 0, void 0, void 0, function* () {
+    const canvas = within(canvasElement);
+    const loginButton = yield canvas.getByRole('button', { name: /Log in/i });
+    yield userEvent.click(loginButton);
+});
+//# sourceMappingURL=Page.stories.js.map

package/dist/stories/Page.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Page.stories.js","sourceRoot":"","sources":["../../src/stories/Page.stories.jsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,mFAAmF;QACnF,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,IAAI,oBAAK,IAAI,EAAI,CAAC;AAE9C,qGAAqG;AACrG,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG,CAAO,EAAE,aAAa,EAAE,EAAE,EAAE;IAC1C,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACrC,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1E,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACrC,CAAC,CAAA,CAAC"}

package/dist/stories/assets/comments.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>

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

@@ -1,15 +1,16 @@
-:root {
-    --primary: #008ded;
-    --secondary: #e0004f;
-    --disabled: #bac6d6;
-    --black: #000;
-    --white: #fff;
-    --light-grey: #d7e0ea;
-    --grey: #828B96;
-    --darkest-grey: #3b4859;
-    --cool-grey-600: #A7B2C1;
-    --cool-grey-500: #C1CCDA;
-    --cool-grey-300: #DDE3EB;
-    --cool-grey-150: #F0F4F9;
-    --blue-grey-500: #778DA9;
+:root {
+    --primary: #008ded;
+    --secondary: #e0004f;
+    --disabled: #bac6d6;
+    --black: #000;
+    --white: #fff;
+    --light-grey: #d7e0ea;
+    --grey: #828B96;
+    --darkest-grey: #3b4859;
+    --cool-grey-600: #A7B2C1;
+    --cool-grey-500: #C1CCDA;
+    --cool-grey-300: #DDE3EB;
+    --cool-grey-150: #F0F4F9;
+    --blue-grey-500: #778DA9;
+    --teal: #01DFCB;
     }

package/dist/stories/assets/direction.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>

package/dist/stories/assets/icon-chat-blue.svg

@@ -1,10 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
-    <defs>
-        <path id="0s7v3h5tpa" d="M12 0c6.075 0 11 4.773 11 10.661 0 4.263-2.192 7.456-6.31 9.646l-6.523 3.625c-.084.047-.173.068-.26.068-.274 0-.526-.213-.526-.51v-2.472C3.438 19.61-.613 13.524 1.625 7.014 2.649 4.033 5.095 1.64 8.164.63 9.469.199 10.759 0 12 0zm0 1.015c-1.163 0-2.34.193-3.499.575-2.76.909-4.958 3.056-5.882 5.745-.943 2.743-.707 5.578.664 7.983 1.344 2.358 3.657 4.076 6.346 4.714.47.11.8.518.8.986v1.598l5.74-3.19c3.897-2.074 5.784-4.937 5.784-8.765 0-5.318-4.465-9.646-9.953-9.646zM14.095 13.2c.29 0 .524.224.524.5s-.234.5-.524.5h-6.81c-.288 0-.523-.224-.523-.5s.235-.5.524-.5zm3.143-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5zm0-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <g>
-            <use fill="#008DED" xlink:href="#0s7v3h5tpa"/>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="0s7v3h5tpa" d="M12 0c6.075 0 11 4.773 11 10.661 0 4.263-2.192 7.456-6.31 9.646l-6.523 3.625c-.084.047-.173.068-.26.068-.274 0-.526-.213-.526-.51v-2.472C3.438 19.61-.613 13.524 1.625 7.014 2.649 4.033 5.095 1.64 8.164.63 9.469.199 10.759 0 12 0zm0 1.015c-1.163 0-2.34.193-3.499.575-2.76.909-4.958 3.056-5.882 5.745-.943 2.743-.707 5.578.664 7.983 1.344 2.358 3.657 4.076 6.346 4.714.47.11.8.518.8.986v1.598l5.74-3.19c3.897-2.074 5.784-4.937 5.784-8.765 0-5.318-4.465-9.646-9.953-9.646zM14.095 13.2c.29 0 .524.224.524.5s-.234.5-.524.5h-6.81c-.288 0-.523-.224-.523-.5s.235-.5.524-.5zm3.143-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5zm0-3.046c.29 0 .524.224.524.5s-.235.5-.524.5H7.286c-.29 0-.524-.224-.524-.5s.235-.5.524-.5z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <use fill="#008DED" xlink:href="#0s7v3h5tpa"/>
+        </g>
+    </g>
+</svg>

package/dist/stories/assets/utr-sports-logo.svg

@@ -0,0 +1,9 @@
+<svg width="205" height="51" viewBox="0 0 205 51" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="205" height="51" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_702_6269" transform="scale(0.00487805 0.0196078)"/>
+</pattern>
+<image id="image0_702_6269" width="205" height="51" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

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

@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react';
-type ButtonProps = {
-    children: string | ReactElement;
-    category?: string;
-    onClick?: VoidFunction;
-    style?: React.CSSProperties;
-    disabled?: boolean;
-};
-export default function Button({ children, category, ...props }: ButtonProps): JSX.Element;
-export {};
+import React, { ReactElement } from 'react';
+type ButtonProps = {
+    children: string | ReactElement;
+    category?: string;
+    onClick?: VoidFunction;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+};
+export default function Button({ children, category, ...props }: ButtonProps): JSX.Element;
+export {};