@dev-crew-berlin/enter-js-utils 0.70.2 → 0.80.0

package/dist/ui/form-elements/input.stories.js

@@ -1,31 +1,33 @@
-import React from 'react';
 import { Input } from './input';
-export default {
+const meta = {
   title: 'Form Elements/Input',
   component: Input
 };
-const Template = args => /*#__PURE__*/React.createElement(Input, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  type: 'text',
-  label: 'Text input',
-  placeholder: 'Enter text here',
-  value: '',
-  onClick: () => undefined
+export default meta;
+export const Basic = {
+  args: {
+    type: 'text',
+    label: 'Text input',
+    placeholder: 'Enter text here',
+    value: '',
+    onClick: () => undefined
+  }
 };
-export const NumberInput = Template.bind({});
-NumberInput.args = {
-  type: 'number',
-  label: 'Number input',
-  placeholder: 'Enter number here',
-  value: '',
-  onClick: () => undefined
+export const NumberInput = {
+  args: {
+    type: 'number',
+    label: 'Number input',
+    placeholder: 'Enter number here',
+    value: '',
+    onClick: () => undefined
+  }
 };
-export const WithValue = Template.bind({});
-WithValue.args = {
-  type: 'text',
-  label: 'Text input',
-  placeholder: 'Enter text here',
-  value: 'Text value',
-  onClick: () => undefined
+export const WithValue = {
+  args: {
+    type: 'text',
+    label: 'Text input',
+    placeholder: 'Enter text here',
+    value: 'Text value',
+    onClick: () => undefined
+  }
 };

package/dist/ui/form-elements/label.js

@@ -1,12 +1,12 @@
 import _JSXStyle from "styled-jsx/style";
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
-import { theme } from '../../lib';
+import { colors, fonts } from '../../lib/theme';
 export const Label = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1848048607", [theme.fonts.secondary, theme.colors.enterDarkGrey]]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["1684173836", [fonts.secondary, colors.enterDarkGrey]]]) + " " + (props && props.className != null && props.className || "")
   }), props.children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1848048607",
-    dynamic: [theme.fonts.secondary, theme.colors.enterDarkGrey]
-  }, `label.__jsx-style-dynamic-selector{display:block;font-family:${theme.fonts.secondary};font-weight:400;font-size:0.9em;color:${theme.colors.enterDarkGrey};-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;margin-bottom:0.6em;}`));
+    id: "1684173836",
+    dynamic: [fonts.secondary, colors.enterDarkGrey]
+  }, `label.__jsx-style-dynamic-selector{display:block;font-family:${fonts.secondary};font-weight:400;font-size:0.9em;color:${colors.enterDarkGrey};-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;margin-bottom:0.6em;}`));
 };

package/dist/ui/form-elements/label.stories.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<React.LabelHTMLAttributes<HTMLLabelElement>>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { Label } from './label';
+declare const meta: Meta<typeof Label>;
+export default meta;
+declare type Story = StoryObj<typeof Label>;
+export declare const Basic: Story;

package/dist/ui/form-elements/label.stories.js

@@ -1,11 +1,11 @@
-import React from 'react';
 import { Label } from './label';
-export default {
+const meta = {
   title: 'Form Elements/Label',
   component: Label
 };
-const Template = args => /*#__PURE__*/React.createElement(Label, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  children: 'Label text'
+export default meta;
+export const Basic = {
+  args: {
+    children: 'Label text'
+  }
 };

package/dist/ui/form-elements/search-input.js

@@ -1,27 +1,27 @@
 import _JSXStyle from "styled-jsx/style";
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useId } from 'react';
-import { theme } from '../../lib';
+import { colors, fonts } from '../../lib/theme';
 import { SearchIcon } from '../icons/search-icon';
 export const SearchInput = ({
-  textColor = theme.colors.enterDarkGrey,
-  borderColor = theme.colors.enterMediumGrey,
+  textColor = colors.enterDarkGrey,
+  borderColor = colors.enterMediumGrey,
   placeholder = 'Search',
   ...props
 }) => {
   const id = useId();
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["914481870", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + 'search-input'
+    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + 'search-input'
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["914481870", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + 'icon'
+    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + 'icon'
   }, /*#__PURE__*/React.createElement(SearchIcon, {
     color: textColor
   })), /*#__PURE__*/React.createElement("input", _extends({}, props, {
     placeholder: placeholder,
     id: id,
-    className: _JSXStyle.dynamic([["914481870", [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "914481870",
-    dynamic: [theme.fonts.primary, textColor, borderColor, theme.colors.enterRed]
-  }, `.search-input.__jsx-style-dynamic-selector{display:grid;grid-template-areas:'icon-input';-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1.1em;}.icon.__jsx-style-dynamic-selector{grid-area:icon-input;width:12px;height:16px;margin:0 0 0 0.2em;}input.__jsx-style-dynamic-selector{grid-area:icon-input;font-family:${theme.fonts.primary};font-size:1.1em;display:block;width:calc(100% - 20px);padding:0.2em 0 0.2em 20px;border:none;outline:none;background-color:transparent;color:${textColor};border-bottom:1px solid ${borderColor};border-radius:0;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;}input.__jsx-style-dynamic-selector:focus{border-color:${theme.colors.enterRed};}`));
+    id: "1969077888",
+    dynamic: [fonts.primary, textColor, borderColor, colors.enterRed]
+  }, `.search-input.__jsx-style-dynamic-selector{display:grid;grid-template-areas:'icon-input';-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:1.1em;}.icon.__jsx-style-dynamic-selector{grid-area:icon-input;width:12px;height:16px;margin:0 0 0 0.2em;}input.__jsx-style-dynamic-selector{grid-area:icon-input;font-family:${fonts.primary};font-size:1.1em;display:block;width:calc(100% - 20px);padding:0.2em 0 0.2em 20px;border:none;outline:none;background-color:transparent;color:${textColor};border-bottom:1px solid ${borderColor};border-radius:0;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;}input.__jsx-style-dynamic-selector:focus{border-color:${colors.enterRed};}`));
 };

package/dist/ui/form-elements/search-input.stories.d.ts

@@ -1,18 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    textColor?: string | undefined;
-    borderColor?: string | undefined;
-    placeholder?: string | undefined;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    textColor?: string | undefined;
-    borderColor?: string | undefined;
-    placeholder?: string | undefined;
-}>>;
-export declare const WhiteText: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    textColor?: string | undefined;
-    borderColor?: string | undefined;
-    placeholder?: string | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { SearchInput } from './search-input';
+declare const meta: Meta<typeof SearchInput>;
+export default meta;
+declare type Story = StoryObj<typeof SearchInput>;
+export declare const Basic: Story;
+export declare const WhiteText: Story;

package/dist/ui/form-elements/search-input.stories.js

@@ -1,24 +1,25 @@
-import React from 'react';
 import { SearchInput } from './search-input';
-import { theme } from '../../lib';
-export default {
+import { colors } from '../../lib/theme';
+const meta = {
   title: 'Form Elements/SearchInput',
   component: SearchInput
 };
-const Template = args => /*#__PURE__*/React.createElement(SearchInput, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  textColor: theme.colors.enterDarkGrey,
-  borderColor: theme.colors.enterMediumGrey,
-  placeholder: 'Search'
-};
-export const WhiteText = Template.bind({});
-WhiteText.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {
+  args: {
+    textColor: colors.enterDarkGrey,
+    borderColor: colors.enterMediumGrey,
+    placeholder: 'Search'
   }
 };
-WhiteText.args = {
-  textColor: 'white',
-  borderColor: 'white'
+export const WhiteText = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    textColor: 'white',
+    borderColor: 'white'
+  }
 };

package/dist/ui/form-elements/segmented-control.js

@@ -1,13 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-import { theme } from '../../lib';
+import { colors, fonts } from '../../lib/theme';
 export const SegmentedControl = props => {
   const name = props.segments.join('');
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segmented-controll'
+    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]]) + " " + 'segmented-controll'
   }, props.segments.map((segment, index) => /*#__PURE__*/React.createElement("div", {
     key: segment,
-    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]]) + " " + 'segment'
+    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]]) + " " + 'segment'
   }, /*#__PURE__*/React.createElement("input", {
     type: "radio",
     id: segment,
@@ -15,15 +15,15 @@ export const SegmentedControl = props => {
     checked: segment === props.activeSegment,
     onChange: () => props.onChange(segment),
     onFocus: props.onFocus,
-    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
+    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]])
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: segment,
     style: props.colors && {
       backgroundColor: props.colors[index] && segment === props.activeSegment ? props.colors[index] : undefined
     },
-    className: _JSXStyle.dynamic([["235524868", [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]]])
+    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]])
   }, segment))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "235524868",
-    dynamic: [theme.fonts.secondary, theme.colors.enterLightGrey, theme.colors.enterMediumGrey, theme.colors.enterDarkGrey]
-  }, `.segmented-controll.__jsx-style-dynamic-selector{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-gap:2px;}.segment.__jsx-style-dynamic-selector{position:relative;}.segment.__jsx-style-dynamic-selector:first-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:first-child input.__jsx-style-dynamic-selector{border-radius:2px 0 0 2px;}.segment.__jsx-style-dynamic-selector:last-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:last-child input.__jsx-style-dynamic-selector{border-radius:0 2px 2px 0;}label.__jsx-style-dynamic-selector{font-family:${theme.fonts.secondary};text-transform:uppercase;font-size:0.9em;-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;padding:0.7em 0.5em;text-align:center;background-color:${theme.colors.enterLightGrey};box-sizing:border-box;display:block;width:100%;height:100%;-webkit-transition:background-color 0.1s;transition:background-color 0.1s;cursor:pointer;}label.__jsx-style-dynamic-selector:hover{background-color:${theme.colors.enterMediumGrey};color:white;}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector{background-color:${theme.colors.enterDarkGrey};color:white;}input.__jsx-style-dynamic-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;left:0;top:0;margin:0;width:100%;height:100%;background-color:transparent;pointer-events:none;}`));
+    id: "2098643240",
+    dynamic: [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]
+  }, `.segmented-controll.__jsx-style-dynamic-selector{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-gap:2px;}.segment.__jsx-style-dynamic-selector{position:relative;}.segment.__jsx-style-dynamic-selector:first-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:first-child input.__jsx-style-dynamic-selector{border-radius:2px 0 0 2px;}.segment.__jsx-style-dynamic-selector:last-child label.__jsx-style-dynamic-selector,.segment.__jsx-style-dynamic-selector:last-child input.__jsx-style-dynamic-selector{border-radius:0 2px 2px 0;}label.__jsx-style-dynamic-selector{font-family:${fonts.secondary};text-transform:uppercase;font-size:0.9em;-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;padding:0.7em 0.5em;text-align:center;background-color:${colors.enterLightGrey};box-sizing:border-box;display:block;width:100%;height:100%;-webkit-transition:background-color 0.1s;transition:background-color 0.1s;cursor:pointer;}label.__jsx-style-dynamic-selector:hover{background-color:${colors.enterMediumGrey};color:white;}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;}input.__jsx-style-dynamic-selector{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;left:0;top:0;margin:0;width:100%;height:100%;background-color:transparent;pointer-events:none;}`));
 };

package/dist/ui/form-elements/segmented-control.stories.d.ts

@@ -1,17 +1,6 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<(<Segment extends string>(props: {
-    segments: Segment[];
-    activeSegment?: Segment | undefined;
-    colors?: string[] | undefined;
-    onChange: (segment: Segment) => void;
-    onFocus?: (() => void) | undefined;
-}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
-export default _default;
-export declare const Basic: ComponentStory<(<Segment extends string>(props: {
-    segments: Segment[];
-    activeSegment?: Segment | undefined;
-    colors?: string[] | undefined;
-    onChange: (segment: Segment) => void;
-    onFocus?: (() => void) | undefined;
-}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
+import { Meta, StoryObj } from '@storybook/react';
+import { SegmentedControl } from './segmented-control';
+declare const meta: Meta<typeof SegmentedControl>;
+export default meta;
+declare type Story = StoryObj<typeof SegmentedControl>;
+export declare const Basic: Story;

package/dist/ui/form-elements/segmented-control.stories.js

@@ -1,12 +1,12 @@
-import React from 'react';
 import { SegmentedControl } from './segmented-control';
-export default {
+const meta = {
   title: 'Form Elements/Segmented Control',
   component: SegmentedControl
 };
-const Template = args => /*#__PURE__*/React.createElement(SegmentedControl, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  segments: ['One', 'Two', 'Three'],
-  activeSegment: 'One'
+export default meta;
+export const Basic = {
+  args: {
+    segments: ['One', 'Two', 'Three'],
+    activeSegment: 'One'
+  }
 };

package/dist/ui/guest-card.d.ts

@@ -3,7 +3,8 @@ import 'styled-jsx';
 import { Attendee } from '../models';
 declare type Props = {
     attendee: Attendee;
-    checkinTag: string;
+    branchName: string;
+    counterName: string;
     plain?: boolean;
     dense?: boolean;
     infoText?: string;

package/dist/ui/guest-card.js

@@ -1,25 +1,26 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import 'styled-jsx';
-import { classNames as cx, theme } from '../lib';
+import { colors, fonts } from '../lib/theme';
+import { classNames as cx } from '../lib/class-names';
 import { CheckinCountIndicator } from './checkin-count-indicator';
 import { CompanionInfo } from './companion-info';
 import { Tag } from './tag';
 export const GuestCard = props => {
   const filterTags = props.filterTags ?? (() => true);
-  const tags = (props.attendee.tags || []).filter(filterTags);
+  const tags = Array.from(props.attendee.tags).filter(filterTags);
   const getTagColor = props.getTagColor ?? (() => undefined);
   const onClick = props.onClick ? () => {
     if (!props.onClick) return;
     props.onClick(props.attendee.id);
   } : undefined;
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + (cx({
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + (cx({
       'guest-card-wrapper': true,
       plain: props.plain
     }) || "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color-list'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color-list'
   }, tags.map(tag => [tag, getTagColor(tag)]).filter(([, tagColor]) => tagColor).map(([tag, tagColor]) => /*#__PURE__*/React.createElement("div", {
     key: tag,
     title: tag,
@@ -27,30 +28,30 @@ export const GuestCard = props => {
       backgroundColor: tagColor,
       height: '100%'
     },
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color'
   }))), /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'guest-card'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'guest-card'
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]])
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]])
   }, /*#__PURE__*/React.createElement("h2", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'name'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + '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).getActiveCheckins(),
-    response: props.attendee.getResponseForTag(props.checkinTag),
-    rsvpCount: props.attendee.getRsvpCountForTag(props.checkinTag)
+    checkins: props.attendee.getCheckinsForBranch(props.branchName).getActiveCheckins(props.counterName),
+    response: props.attendee.getResponse(props.branchName, props.counterName),
+    rsvpCount: props.attendee.getRsvpCount(props.branchName, props.counterName)
   })), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-list'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-list'
   }, tags.map(tag => /*#__PURE__*/React.createElement(Tag, {
     key: tag
   }, tag)), props.infoText && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2947209375", [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'info'
+    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'info'
   }, " ", props.infoText))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2947209375",
-    dynamic: [theme.colors.enterGrey, theme.colors.enterBackground, theme.fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']
-  }, `.guest-card-wrapper.__jsx-style-dynamic-selector{border-radius:2px;border:1px solid ${theme.colors.enterGrey};background-color:${theme.colors.enterBackground};font-family:${theme.fonts.primary};margin:${props.dense ? '0.5em 0' : '1.5em 0'};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.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;padding:1.1em 1em 0.9em;-webkit-flex:1;-ms-flex:1;flex:1;}.tag-color-list.__jsx-style-dynamic-selector{width:0.35em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.tag-color.__jsx-style-dynamic-selector:first-child{border-top-left-radius:1px;}.tag-color.__jsx-style-dynamic-selector:last-child{border-bottom-left-radius:1px;}.plain.__jsx-style-dynamic-selector{border:none;background-color:transparent;}.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;font-size:0.9em;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;}`));
+    id: "1739379681",
+    dynamic: [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']
+  }, `.guest-card-wrapper.__jsx-style-dynamic-selector{border-radius:2px;border:1px solid ${colors.enterGrey};background-color:${colors.enterBackground};font-family:${fonts.primary};margin:${props.dense ? '0.5em 0' : '1.5em 0'};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.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;padding:1.1em 1em 0.9em;-webkit-flex:1;-ms-flex:1;flex:1;}.tag-color-list.__jsx-style-dynamic-selector{width:0.35em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.tag-color.__jsx-style-dynamic-selector:first-child{border-top-left-radius:1px;}.tag-color.__jsx-style-dynamic-selector:last-child{border-bottom-left-radius:1px;}.plain.__jsx-style-dynamic-selector{border:none;background-color:transparent;}.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;font-size:0.9em;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;}`));
 };

package/dist/ui/guest-card.stories.d.ts

@@ -1,124 +1,14 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Attendee } from '../models';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export default _default;
-export declare const WithBackground: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export declare const Plain: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export declare const Dense: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export declare const FilteredTags: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export declare const WithColorLabel: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export declare const WithMultipleColorLabels: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export declare const WithInfoText: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export declare const WithCompanion: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
-export declare const WithCompanionButNoMainGuestInfo: ComponentStory<React.FunctionComponent<{
-    attendee: Attendee;
-    checkinTag: string;
-    plain?: boolean | undefined;
-    dense?: boolean | undefined;
-    infoText?: string | undefined;
-    formatName: (attendee: Attendee) => string;
-    filterTags?: ((tag: string) => boolean) | undefined;
-    getTagColor?: ((tag: string) => string | undefined) | undefined;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-    onClick?: ((attendeeId: string) => void) | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { GuestCard } from './guest-card';
+declare const meta: Meta<typeof GuestCard>;
+export default meta;
+declare type Story = StoryObj<typeof GuestCard>;
+export declare const WithBackground: Story;
+export declare const Plain: Story;
+export declare const Dense: Story;
+export declare const FilteredTags: Story;
+export declare const WithColorLabel: Story;
+export declare const WithMultipleColorLabels: Story;
+export declare const WithInfoText: Story;
+export declare const WithCompanion: Story;
+export declare const WithCompanionButNoMainGuestInfo: Story;