@dev-crew-berlin/enter-js-utils 0.5.3 → 0.5.4

package/dist/ui/checkin-count-indicator.stories.js

@@ -1,64 +1,62 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import { CheckinCountIndicator } from './checkin-count-indicator';
 export default {
-    title: 'Checkin-Count Indicator',
-    component: CheckinCountIndicator,
+  title: 'Checkin-Count Indicator',
+  component: CheckinCountIndicator
+};
+const exampleCheckin = {
+  time: new Date('2022-01-01')
 };
-var exampleCheckin = { time: new Date('2022-01-01') };
-var Template = function (args) { return (React.createElement(CheckinCountIndicator, __assign({}, args))); };
-export var SingleResponse = Template.bind({});
+
+const Template = args => /*#__PURE__*/React.createElement(CheckinCountIndicator, args);
+
+export const SingleResponse = Template.bind({});
 SingleResponse.args = {
-    checkins: [],
-    response: 'positive-response',
-    rsvpCount: 1,
+  checkins: [],
+  response: 'positive-response',
+  rsvpCount: 1
+};
+export const Decline = Template.bind({});
+Decline.args = {
+  checkins: [],
+  response: 'negative-repsone'
 };
-export var Decline = Template.bind({});
-Decline.args = { checkins: [], response: 'negative-repsone' };
-export var NoResponse = Template.bind({});
-NoResponse.args = { checkins: [], response: 'no-response' };
-export var MultipleResponses = Template.bind({});
+export const NoResponse = Template.bind({});
+NoResponse.args = {
+  checkins: [],
+  response: 'no-response'
+};
+export const MultipleResponses = Template.bind({});
 MultipleResponses.args = {
-    checkins: [],
-    response: 'positive-response',
-    rsvpCount: 16,
+  checkins: [],
+  response: 'positive-response',
+  rsvpCount: 16
 };
-export var CheckinAndResponse = Template.bind({});
+export const CheckinAndResponse = Template.bind({});
 CheckinAndResponse.args = {
-    checkins: [exampleCheckin],
-    response: 'positive-response',
-    rsvpCount: 1,
+  checkins: [exampleCheckin],
+  response: 'positive-response',
+  rsvpCount: 1
 };
-export var MultipleCheckinsAndResponse = Template.bind({});
+export const MultipleCheckinsAndResponse = Template.bind({});
 MultipleCheckinsAndResponse.args = {
-    checkins: [exampleCheckin, exampleCheckin],
-    response: 'positive-response',
-    rsvpCount: 1,
+  checkins: [exampleCheckin, exampleCheckin],
+  response: 'positive-response',
+  rsvpCount: 1
 };
-export var CheckinsWithDecline = Template.bind({});
+export const CheckinsWithDecline = Template.bind({});
 CheckinsWithDecline.args = {
-    checkins: [exampleCheckin],
-    response: 'negative-repsone',
+  checkins: [exampleCheckin],
+  response: 'negative-repsone'
 };
-export var CheckinWithoutResponse = Template.bind({});
+export const CheckinWithoutResponse = Template.bind({});
 CheckinWithoutResponse.args = {
-    checkins: [exampleCheckin],
-    response: 'no-response',
+  checkins: [exampleCheckin],
+  response: 'no-response'
 };
-export var MultipleCheckins = Template.bind({});
+export const MultipleCheckins = Template.bind({});
 MultipleCheckins.args = {
-    checkins: [exampleCheckin, exampleCheckin, exampleCheckin, exampleCheckin],
-    response: 'positive-response',
-    rsvpCount: 2,
-};
-//# sourceMappingURL=checkin-count-indicator.stories.js.map
+  checkins: [exampleCheckin, exampleCheckin, exampleCheckin, exampleCheckin],
+  response: 'positive-response',
+  rsvpCount: 2
+};

package/dist/ui/companion-info.js

@@ -1,17 +1,17 @@
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import 'styled-jsx';
 import { theme } from '../lib';
-export var CompanionInfo = function (props) {
-    if (!props.companionStatus.isCompanion)
-        return null;
-    var mainGuest = props.findMainGuest
-        ? props.findMainGuest(props.companionStatus.mainGuestId)
-        : undefined;
-    var mainGuestName = mainGuest ? props.formatName(mainGuest) : undefined;
-    return (React.createElement("p", { className: 'companion-info' },
-        mainGuestName ? (React.createElement(React.Fragment, null,
-            "companion of ",
-            React.createElement("span", { className: 'companion-name' }, mainGuestName))) : (React.createElement(React.Fragment, null, "companion")),
-        React.createElement("style", { jsx: true }, "\n        .companion-info {\n          margin: -0.5em 0 0.4em;\n          color: ".concat(theme.colors.enterMediumGrey, ";\n          font-family: ").concat(theme.fonts.primary, ";\n        }\n\n        .companion-name {\n          color: ").concat(theme.colors.enterDarkGrey, ";\n        }\n      "))));
-};
-//# sourceMappingURL=companion-info.js.map
+export const CompanionInfo = props => {
+  if (!props.companionStatus.isCompanion) return null;
+  const mainGuest = props.findMainGuest ? props.findMainGuest(props.companionStatus.mainGuestId) : undefined;
+  const mainGuestName = mainGuest ? props.formatName(mainGuest) : undefined;
+  return /*#__PURE__*/React.createElement("p", {
+    className: _JSXStyle.dynamic([["353274210", [theme.colors.enterMediumGrey, theme.fonts.primary, theme.colors.enterDarkGrey]]]) + " " + 'companion-info'
+  }, mainGuestName ? /*#__PURE__*/React.createElement(React.Fragment, null, "companion of ", /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["353274210", [theme.colors.enterMediumGrey, theme.fonts.primary, theme.colors.enterDarkGrey]]]) + " " + 'companion-name'
+  }, mainGuestName)) : /*#__PURE__*/React.createElement(React.Fragment, null, "companion"), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "353274210",
+    dynamic: [theme.colors.enterMediumGrey, theme.fonts.primary, theme.colors.enterDarkGrey]
+  }, `.companion-info.__jsx-style-dynamic-selector{margin:-0.5em 0 0.4em;color:${theme.colors.enterMediumGrey};font-family:${theme.fonts.primary};}.companion-name.__jsx-style-dynamic-selector{color:${theme.colors.enterDarkGrey};}`));
+};

package/dist/ui/companion-info.stories.js

@@ -1,61 +1,70 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import { CompanionInfo } from './companion-info';
 import { Attendee } from '../models';
 export default {
-    title: 'Companion Info',
-    component: CompanionInfo,
-    argTypes: { formatName: { type: 'function' } },
+  title: 'Companion Info',
+  component: CompanionInfo,
+  argTypes: {
+    formatName: {
+      type: 'function'
+    }
+  }
 };
-var mainGuest = new Attendee({
-    id: 'my-attendee',
-    language: 'de',
-    auth: null,
-    tags: ['VIP', 'Import-200-02-10'],
-    time: new Date('2022-01-01'),
-    rsvp: { default: 1 },
-    checkin: {},
-    payment: null,
-    companions: { isCompanion: false },
-    userdata: {
-        name: 'Max Mustermann',
-    },
-    metadata: {},
+const mainGuest = new Attendee({
+  id: 'my-attendee',
+  language: 'de',
+  auth: null,
+  tags: ['VIP', 'Import-200-02-10'],
+  time: new Date('2022-01-01'),
+  rsvp: {
+    default: 1
+  },
+  checkin: {},
+  payment: null,
+  companions: {
+    isCompanion: false
+  },
+  userdata: {
+    name: 'Max Mustermann'
+  },
+  metadata: {}
 });
-var Template = function (args) { return (React.createElement(CompanionInfo, __assign({}, args))); };
-export var WithMainGuestFound = Template.bind({});
+
+const Template = args => /*#__PURE__*/React.createElement(CompanionInfo, args);
+
+export const WithMainGuestFound = Template.bind({});
 WithMainGuestFound.args = {
-    companionStatus: { isCompanion: true, mainGuestId: 'my-attendee' },
-    findMainGuest: function () { return mainGuest; },
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
+  companionStatus: {
+    isCompanion: true,
+    mainGuestId: 'my-attendee'
+  },
+  findMainGuest: () => mainGuest,
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
 };
-export var WithoutMainGuest = Template.bind({});
+export const WithoutMainGuest = Template.bind({});
 WithoutMainGuest.args = {
-    companionStatus: { isCompanion: true, mainGuestId: 'my-attendee' },
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
+  companionStatus: {
+    isCompanion: true,
+    mainGuestId: 'my-attendee'
+  },
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
 };
-export var NotACompanion = Template.bind({});
+export const NotACompanion = Template.bind({});
 NotACompanion.args = {
-    companionStatus: { isCompanion: false },
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
-};
-//# sourceMappingURL=companion-info.stories.js.map
+  companionStatus: {
+    isCompanion: false
+  },
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
+};

package/dist/ui/fonts.js

@@ -1,6 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import 'styled-jsx';
-export var Fonts = function () {
-    return (React.createElement("style", { jsx: true, global: true }, "\n      @font-face {\n        font-family: 'PTSans';\n        font-display: swap;\n        src: url('/fonts/pt-sans-v12-latin-regular.woff2');\n        font-weight: 300;\n        font-style: normal;\n      }\n      @font-face {\n        font-family: 'PTSans';\n        font-display: swap;\n        src: url('/fonts/pt-sans-v12-latin-italic.woff2');\n        font-weight: 300;\n        font-style: italic;\n      }\n      @font-face {\n        font-family: 'PTSans';\n        font-display: swap;\n        src: url('/fonts/pt-sans-v12-latin-700.woff2');\n        font-weight: 700;\n        font-style: normal;\n      }\n      @font-face {\n        font-family: 'PTSans';\n        font-display: swap;\n        src: url('/fonts/pt-sans-v12-latin-700italic.woff2');\n        font-weight: 700;\n        font-style: italic;\n      }\n      @font-face {\n        font-family: 'Iosevka';\n        src: url('/fonts/iosevka-regular.woff2');\n        font-weight: 300;\n        font-style: bold;\n      }\n      @font-face {\n        font-family: 'Iosevka';\n        src: url('/fonts/iosevka-medium.woff2');\n        font-weight: 500;\n        font-style: bold;\n      }\n      @font-face {\n        font-family: 'Iosevka';\n        src: url('/fonts/iosevka-semibold.woff2');\n        font-weight: 600;\n        font-style: bold;\n      }\n      @font-face {\n        font-family: 'Iosevka';\n        src: url('/fonts/iosevka-bold.woff2');\n        font-weight: 700;\n        font-style: bold;\n      }\n      @font-face {\n        font-family: 'Iosevka';\n        src: url('/fonts/iosevka-heavy.woff2');\n        font-weight: 900;\n        font-style: bold;\n      }\n    "));
-};
-//# sourceMappingURL=fonts.js.map
+export const Fonts = () => {
+  return /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3815458256"
+  }, "@font-face{font-family:'PTSans';font-display:swap;src:url('/fonts/pt-sans-v12-latin-regular.woff2');font-weight:300;font-style:normal;}@font-face{font-family:'PTSans';font-display:swap;src:url('/fonts/pt-sans-v12-latin-italic.woff2');font-weight:300;font-style:italic;}@font-face{font-family:'PTSans';font-display:swap;src:url('/fonts/pt-sans-v12-latin-700.woff2');font-weight:700;font-style:normal;}@font-face{font-family:'PTSans';font-display:swap;src:url('/fonts/pt-sans-v12-latin-700italic.woff2');font-weight:700;font-style:italic;}@font-face{font-family:'Iosevka';src:url('/fonts/iosevka-regular.woff2');font-weight:300;font-style:bold;}@font-face{font-family:'Iosevka';src:url('/fonts/iosevka-medium.woff2');font-weight:500;font-style:bold;}@font-face{font-family:'Iosevka';src:url('/fonts/iosevka-semibold.woff2');font-weight:600;font-style:bold;}@font-face{font-family:'Iosevka';src:url('/fonts/iosevka-bold.woff2');font-weight:700;font-style:bold;}@font-face{font-family:'Iosevka';src:url('/fonts/iosevka-heavy.woff2');font-weight:900;font-style:bold;}");
+};

package/dist/ui/guest-card.js

@@ -1,36 +1,45 @@
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import 'styled-jsx';
 import { classNames as cx, theme } from '../lib';
 import { CheckinCountIndicator } from './checkin-count-indicator';
 import { CompanionInfo } from './companion-info';
 import { Tag } from './tag';
-export var GuestCard = function (props) {
-    var _a;
-    var filterTags = (_a = props.filterTags) !== null && _a !== void 0 ? _a : (function () { return true; });
-    var tags = (props.attendee.tags || []).filter(filterTags);
-    var onClick = props.onClick
-        ? function () {
-            if (!props.onClick)
-                return;
-            props.onClick(props.attendee.id);
-        }
-        : undefined;
-    return (React.createElement("div", { className: cx({
-            'guest-card': true,
-            plain: props.plain,
-            labeled: props.labelColor !== undefined,
-        }), onClick: onClick },
-        React.createElement("div", null,
-            React.createElement("h2", { className: 'name' }, props.formatName(props.attendee)),
-            React.createElement(CompanionInfo, { companionStatus: props.attendee.companions, findMainGuest: props.findMainGuest, formatName: props.formatName }),
-            React.createElement(CheckinCountIndicator, { checkins: props.attendee
-                    .getCheckinsForTag(props.checkinTag)
-                    .getAllCheckins(), response: props.attendee.getResponseForTag(props.checkinTag), rsvpCount: props.attendee.getRsvpCountForTag(props.checkinTag) })),
-        React.createElement("div", { className: 'tag-list' },
-            tags.map(function (tag) { return (React.createElement(Tag, { key: tag }, tag)); }),
-            props.infoText && React.createElement("div", { className: 'info' },
-                " ",
-                props.infoText)),
-        React.createElement("style", { jsx: true }, "\n        .guest-card {\n          position: relative;\n          display: flex;\n          justify-content: space-between;\n          align-items: start;\n          border-radius: 2px;\n          border: 1px solid ".concat(theme.colors.enterGrey, ";\n          background-color: ").concat(theme.colors.enterBackground, ";\n          font-family: ").concat(theme.fonts.primary, ";\n          padding: 1.1em 1em 0.9em;\n          margin: 1.5em 0;\n          user-select: none;\n        }\n\n        .plain {\n          border: none;\n          background-color: transparent;\n        }\n\n        .labeled::before {\n          content: '';\n          position: absolute;\n          top: -1px;\n          right: -1px;\n          width: 3px;\n          height: 100%;\n          background-color: ").concat(props.labelColor, ";\n          border: 1px solid ").concat(props.labelColor, ";\n          border-radius: 0 2px 2px 0;\n        }\n\n        .name {\n          font-size: 1.15em;\n          margin: -0.1em 0 0.3em;\n        }\n\n        .tag-list {\n          max-width: 40%;\n          text-align: right;\n        }\n\n        .info {\n          display: block;\n          width: 100%;\n          text-align: right;\n        }\n      "))));
-};
-//# sourceMappingURL=guest-card.js.map
+export const GuestCard = props => {
+  const filterTags = props.filterTags ?? (() => true);
+
+  const tags = (props.attendee.tags || []).filter(filterTags);
+  const onClick = props.onClick ? () => {
+    if (!props.onClick) return;
+    props.onClick(props.attendee.id);
+  } : undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + (cx({
+      'guest-card': true,
+      plain: props.plain,
+      labeled: props.labelColor !== undefined
+    }) || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]])
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'name'
+  }, props.formatName(props.attendee)), /*#__PURE__*/React.createElement(CompanionInfo, {
+    companionStatus: props.attendee.companions,
+    findMainGuest: props.findMainGuest,
+    formatName: props.formatName
+  }), /*#__PURE__*/React.createElement(CheckinCountIndicator, {
+    checkins: props.attendee.getCheckinsForTag(props.checkinTag).getAllCheckins(),
+    response: props.attendee.getResponseForTag(props.checkinTag),
+    rsvpCount: props.attendee.getRsvpCountForTag(props.checkinTag)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'tag-list'
+  }, tags.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    key: tag
+  }, tag)), props.infoText && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2201546649", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]]]) + " " + 'info'
+  }, " ", props.infoText)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2201546649",
+    dynamic: [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.labelColor, props.labelColor]
+  }, `.guest-card.__jsx-style-dynamic-selector{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;border-radius:2px;border:1px solid ${theme.colors.enterGrey};background-color:${theme.colors.enterBackground};font-family:${theme.fonts.primary};padding:1.1em 1em 0.9em;margin:1.5em 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.plain.__jsx-style-dynamic-selector{border:none;background-color:transparent;}.labeled.__jsx-style-dynamic-selector::before{content:'';position:absolute;top:-1px;right:-1px;width:3px;height:100%;background-color:${props.labelColor};border:1px solid ${props.labelColor};border-radius:0 2px 2px 0;}.name.__jsx-style-dynamic-selector{font-size:1.15em;margin:-0.1em 0 0.3em;}.tag-list.__jsx-style-dynamic-selector{max-width:40%;text-align:right;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;}`));
+};

package/dist/ui/guest-card.stories.js

@@ -1,125 +1,136 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
 import { GuestCard } from './guest-card';
 import { Attendee } from '../models';
 import { theme } from '../lib';
 export default {
-    title: 'Guest Card',
-    component: GuestCard,
-    argTypes: { formatName: { type: 'function' } },
+  title: 'Guest Card',
+  component: GuestCard,
+  argTypes: {
+    formatName: {
+      type: 'function'
+    }
+  }
 };
-var attendee = new Attendee({
-    id: 'my-attendee',
-    language: 'de',
-    auth: null,
-    tags: ['VIP', 'Import-200-02-10'],
-    time: new Date('2022-01-01'),
-    rsvp: { default: 1 },
-    checkin: {},
-    payment: null,
-    companions: { isCompanion: false },
-    userdata: {
-        name: 'Max Mustermann',
-    },
-    metadata: {},
+const attendee = new Attendee({
+  id: 'my-attendee',
+  language: 'de',
+  auth: null,
+  tags: ['VIP', 'Import-200-02-10'],
+  time: new Date('2022-01-01'),
+  rsvp: {
+    default: 1
+  },
+  checkin: {},
+  payment: null,
+  companions: {
+    isCompanion: false
+  },
+  userdata: {
+    name: 'Max Mustermann'
+  },
+  metadata: {}
 });
-var companion = new Attendee({
-    id: 'my-companion',
-    language: 'de',
-    auth: null,
-    tags: ['VIP', 'Import-200-02-10'],
-    time: new Date('2022-01-01'),
-    rsvp: { default: 1 },
-    checkin: {},
-    payment: null,
-    companions: { isCompanion: true, mainGuestId: 'my-attendee' },
-    userdata: {
-        name: 'Jhon Doe',
-    },
-    metadata: {},
+const companion = new Attendee({
+  id: 'my-companion',
+  language: 'de',
+  auth: null,
+  tags: ['VIP', 'Import-200-02-10'],
+  time: new Date('2022-01-01'),
+  rsvp: {
+    default: 1
+  },
+  checkin: {},
+  payment: null,
+  companions: {
+    isCompanion: true,
+    mainGuestId: 'my-attendee'
+  },
+  userdata: {
+    name: 'Jhon Doe'
+  },
+  metadata: {}
 });
-var Template = function (args) { return (React.createElement(GuestCard, __assign({}, args))); };
-export var WithBackground = Template.bind({});
+
+const Template = args => /*#__PURE__*/React.createElement(GuestCard, args);
+
+export const WithBackground = Template.bind({});
 WithBackground.args = {
-    attendee: attendee,
-    checkinTag: 'default',
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
+  attendee: attendee,
+  checkinTag: 'default',
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
 };
-export var Plain = Template.bind({});
+export const Plain = Template.bind({});
 Plain.args = {
-    plain: true,
-    attendee: attendee,
-    checkinTag: 'default',
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
+  plain: true,
+  attendee: attendee,
+  checkinTag: 'default',
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
 };
-export var FilteredTags = Template.bind({});
+export const FilteredTags = Template.bind({});
 FilteredTags.args = {
-    attendee: attendee,
-    checkinTag: 'default',
-    filterTags: function (tag) {
-        var allowedTags = ['VIP'];
-        return allowedTags.includes(tag);
-    },
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
+  attendee: attendee,
+  checkinTag: 'default',
+
+  filterTags(tag) {
+    const allowedTags = ['VIP'];
+    return allowedTags.includes(tag);
+  },
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
 };
-export var WithColorLabel = Template.bind({});
+export const WithColorLabel = Template.bind({});
 WithColorLabel.args = {
-    attendee: attendee,
-    checkinTag: 'default',
-    labelColor: theme.colors.enterPink,
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
+  attendee: attendee,
+  checkinTag: 'default',
+  labelColor: theme.colors.enterPink,
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
 };
-export var WithInfoText = Template.bind({});
+export const WithInfoText = Template.bind({});
 WithInfoText.args = {
-    attendee: attendee,
-    checkinTag: 'default',
-    infoText: '🥦 Vegetarian',
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
+  attendee: attendee,
+  checkinTag: 'default',
+  infoText: '🥦 Vegetarian',
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
 };
-export var WithCompanion = Template.bind({});
+export const WithCompanion = Template.bind({});
 WithCompanion.args = {
-    attendee: companion,
-    checkinTag: 'default',
-    findMainGuest: function () {
-        return attendee;
-    },
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
+  attendee: companion,
+  checkinTag: 'default',
+  findMainGuest: () => {
+    return attendee;
+  },
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
 };
-export var WithCompanionButNoMainGuestInfo = Template.bind({});
+export const WithCompanionButNoMainGuestInfo = Template.bind({});
 WithCompanionButNoMainGuestInfo.args = {
-    attendee: companion,
-    checkinTag: 'default',
-    formatName: function (attendee) {
-        var _a, _b;
-        return (_b = (_a = attendee.userdata.name) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
-    },
-};
-//# sourceMappingURL=guest-card.stories.js.map
+  attendee: companion,
+  checkinTag: 'default',
+
+  formatName(attendee) {
+    return attendee.userdata.name?.toString() ?? '';
+  }
+
+};

package/dist/ui/index.js

@@ -3,5 +3,4 @@ export { CheckinCountIndicator } from './checkin-count-indicator';
 export { CompanionInfo } from './companion-info';
 export { Fonts } from './fonts';
 export { GuestCard } from './guest-card';
-export { Tag } from './tag';
-//# sourceMappingURL=index.js.map
+export { Tag } from './tag';

package/dist/ui/tag.js

@@ -1,9 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import 'styled-jsx';
 import { theme } from '../lib';
-export var Tag = function (props) {
-    return (React.createElement("div", { className: 'tag' },
-        props.children,
-        React.createElement("style", { jsx: true }, "\n        .tag {\n          font-family: ".concat(theme.fonts.primary, ";\n          font-size: 0.8em;\n          color: ").concat(theme.colors.enterDarkGrey, ";\n          text-transform: uppercase;\n          display: inline-block;\n          background-color: transparent;\n          border-radius: 2px;\n          border: 1px solid ").concat(theme.colors.enterGrey, ";\n          padding: 2px 8px;\n          margin: 0 0 0.5em 0.5em;\n          word-wrap: anywhere;\n        }\n      "))));
-};
-//# sourceMappingURL=tag.js.map
+export const Tag = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2407016309", [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterGrey]]]) + " " + 'tag'
+  }, props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2407016309",
+    dynamic: [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterGrey]
+  }, `.tag.__jsx-style-dynamic-selector{font-family:${theme.fonts.primary};font-size:0.8em;color:${theme.colors.enterDarkGrey};text-transform:uppercase;display:inline-block;background-color:transparent;border-radius:2px;border:1px solid ${theme.colors.enterGrey};padding:2px 8px;margin:0 0 0.5em 0.5em;word-wrap:anywhere;}`));
+};