@dev-crew-berlin/enter-js-utils 0.95.1 → 0.96.1

package/dist/generated/api-schema.d.ts

@@ -768,6 +768,16 @@ export type components = {
              */
             items: components["schemas"]["ItemOption"][];
         };
+        /**
+         * DynamicTag
+         * @description A tag with color and optional filter
+         */
+        DynamicTag: {
+            /** Color */
+            color: string;
+            /** @default {} */
+            filter?: components["schemas"]["Filter"];
+        };
         /** EmailField */
         EmailField: {
             /**
@@ -1007,6 +1017,11 @@ export type components = {
             /** Ext */
             ext: string[] | null;
         };
+        /** Filter */
+        Filter: {
+            /** Query */
+            query: string | null;
+        };
         /** FrontendConfigJSON */
         FrontendConfigJSON: {
             /** Domain */
@@ -1412,6 +1427,8 @@ export type components = {
              * @default false
              */
             deleted: boolean;
+            /** Name */
+            name: string;
         };
         /** PublicEmail */
         PublicEmail: {
@@ -1436,10 +1453,17 @@ export type components = {
             registration: components["schemas"]["PublicRegistrationInfo"];
             /** Guestnamefields */
             guestNameFields: string[];
-            /** Tagcolors */
+            /**
+             * Tagcolors
+             * @deprecated
+             */
             tagColors: {
                 [key: string]: string;
             };
+            /** Dynamictags */
+            dynamicTags: {
+                [key: string]: components["schemas"]["DynamicTag"];
+            };
             /** Branches */
             branches: {
                 [key: string]: components["schemas"]["Branch"];

package/dist/models/attendee.d.ts

@@ -11,6 +11,7 @@ export type AttendeeJSON = Omit<components['schemas']['PublicAttendee-Output'],
 };
 export declare class Attendee {
     id: string;
+    readonly name: string | undefined;
     userdata: Map<string, FieldValue>;
     tags: Set<string>;
     language: string | null;
@@ -20,17 +21,17 @@ export declare class Attendee {
     checkin: Map<string, Checkins>;
     companions: {
         isCompanion: false;
-        companionNames?: {
+        readonly companionNames?: {
             [attendeeId: string]: string;
         };
     } | {
         isCompanion: true;
         mainGuestId: string;
-        mainGuestName: string;
+        readonly mainGuestName: string;
     };
     payment: Payment | null;
     deleted: boolean;
-    constructor(args: AttendeeJSONInput | string);
+    constructor(args: AttendeeJSONInput | AttendeeJSON | string);
     /**
      * creates a bse36 encoded uuid
      * we use base36 encoding because it is more human readable and also shorter

package/dist/models/attendee.js

@@ -23,6 +23,7 @@ export class Attendee {
     }
     const json = args;
     this.id = json.id;
+    this.name = 'name' in json ? json.name : undefined;
     this.userdata = new Map(Object.entries(json.userdata ?? {}));
     this.tags = new Set(json.tags);
     this.language = json.language;
@@ -67,6 +68,7 @@ export class Attendee {
     const rsvp = Object.fromEntries(Array.from(this.rsvp).map(([checkinTag, rsvp]) => [checkinTag, rsvp ? rsvp.toJSON() : null]));
     return {
       ...this,
+      name: this.name ?? '',
       time: this.time?.toISOString(),
       branches: Array.from(this.branches),
       tags: Array.from(this.tags),

package/dist/models/dynamic-tag.d.ts

@@ -0,0 +1,2 @@
+import { components } from '../generated/api-schema';
+export type DynamicTag = components['schemas']['DynamicTag'];

package/dist/models/dynamic-tag.js

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

package/dist/models/instance.d.ts

@@ -1,6 +1,7 @@
 import { components } from '../generated/api-schema';
 import { Attendee } from './attendee';
 import { Branch } from './branch';
+import { DynamicTag } from './dynamic-tag';
 export type InstanceJSON = components['schemas']['PublicInstance'];
 export declare class Instance {
     name: string;
@@ -20,7 +21,7 @@ export declare class Instance {
         allowRegistrationWithAuthCode: boolean;
     };
     guestNameFields: string[];
-    tagColors: Record<string, string>;
+    dynamicTags: Map<string, DynamicTag>;
     constructor(json: InstanceJSON);
     toJSON(): InstanceJSON;
     isRegistrationClosed(): boolean;

package/dist/models/instance.js

@@ -16,11 +16,13 @@ export class Instance {
       allowRegistrationWithAuthCode: json.registration.allowRegistrationWithAuthCode
     };
     this.guestNameFields = json.guestNameFields;
-    this.tagColors = json.tagColors;
+    this.dynamicTags = new Map(Object.entries(json.dynamicTags));
   }
   toJSON() {
     // convert each branch to its json representation
     const branches = Object.fromEntries(Array.from(this.branches).map(([branchName, branch]) => [branchName, branch.toJSON()]));
+    const dynamicTags = Object.fromEntries(this.dynamicTags);
+    const tagColors = Object.fromEntries(Array.from(this.dynamicTags).map(([tag, dynamicTag]) => [tag, dynamicTag.color]));
     return {
       name: this.name,
       title: this.title,
@@ -37,7 +39,8 @@ export class Instance {
         allowRegistrationWithAuthCode: this.registration.allowRegistrationWithAuthCode
       },
       guestNameFields: this.guestNameFields,
-      tagColors: this.tagColors
+      tagColors: tagColors,
+      dynamicTags: dynamicTags
     };
   }
   isRegistrationClosed() {
@@ -70,6 +73,6 @@ export class Instance {
     return this.guestNameFields.map(fieldKey => guest.userdata.get(fieldKey) ?? '').join(' ');
   }
   getTagColor(tag) {
-    return this.tagColors[tag] ?? undefined;
+    return this.dynamicTags.get(tag)?.color;
   }
 }

package/dist/ui/button.js

@@ -11,13 +11,13 @@ export const Button = ({
   ...props
 }) => {
   return /*#__PURE__*/React.createElement("button", _extends({}, props, {
-    className: _JSXStyle.dynamic([["4186526764", [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]]]) + " " + (classNames({
+    className: _JSXStyle.dynamic([["1300251439", [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]]]) + " " + (classNames({
       [appearance]: true,
       'full-width': fullWidth,
       borderless
     }) || "")
   }), props.children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4186526764",
+    id: "1300251439",
     dynamic: [fonts.secondary, colors.enterBackground, colors.enterDarkGrey, colors.enterGrey, colors.enterError, colors.enterGrey, colors.enterError, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterGreen, colors.enterGreen, colors.enterGreen]
-  }, `button.__jsx-style-dynamic-selector{font-family:${fonts.secondary};margin:1em 0 0.8em;padding:0.8em 1.5em;min-width:150px;font-size:1em;font-weight:500;white-space:nowrap;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;line-height:1;cursor:pointer;border-radius:2px;background-color:${colors.enterBackground};color:${colors.enterDarkGrey};border:1px solid ${colors.enterGrey};box-shadow:0px 0px 2px 0px rgba(0,0,0,0.12), 0px 1px 2px 0px rgba(0,0,0,0.24);}button.__jsx-style-dynamic-selector:disabled{opacity:0.5;cursor:not-allowed;}button.borderless.__jsx-style-dynamic-selector{background-color:transparent;border:0;box-shadow:none;margin:0.2em 0;}.full-width.__jsx-style-dynamic-selector{display:block;width:100%;}.danger.__jsx-style-dynamic-selector{color:${colors.enterError};border:1px solid ${colors.enterGrey};}.danger.borderless.__jsx-style-dynamic-selector{color:${colors.enterError};}.primary.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;border:1px solid ${colors.enterDarkGrey};}.primary.borderless.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};font-weight:bold;}.green.__jsx-style-dynamic-selector{background-color:${colors.enterGreen};color:white;border:1px solid ${colors.enterGreen};}.green.borderless.__jsx-style-dynamic-selector{color:${colors.enterGreen};}`));
+  }, `button.__jsx-style-dynamic-selector{font-family:${fonts.secondary};margin:1em 0 0.8em;padding:0.8em 1.5em;min-width:150px;font-size:1em;font-weight:500;white-space:nowrap;text-align:center;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;line-height:1;cursor:pointer;border-radius:10px;background-color:${colors.enterBackground};color:${colors.enterDarkGrey};border:1px solid ${colors.enterGrey};}button.__jsx-style-dynamic-selector:disabled{opacity:0.5;cursor:not-allowed;}button.borderless.__jsx-style-dynamic-selector{background-color:transparent;border:0;box-shadow:none;margin:0.2em 0;}.full-width.__jsx-style-dynamic-selector{display:block;width:100%;}.danger.__jsx-style-dynamic-selector{color:${colors.enterError};border:1px solid ${colors.enterGrey};}.danger.borderless.__jsx-style-dynamic-selector{color:${colors.enterError};}.primary.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;border:1px solid ${colors.enterDarkGrey};}.primary.borderless.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};font-weight:bold;}.green.__jsx-style-dynamic-selector{background-color:${colors.enterGreen};color:white;border:1px solid ${colors.enterGreen};}.green.borderless.__jsx-style-dynamic-selector{color:${colors.enterGreen};}`));
 };

package/dist/ui/checkin-progress-bar.js

@@ -1,27 +1,44 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-import { colors, fonts } from '../lib/theme';
-export const CheckinProgressBar = props => {
-  const width = props.rsvp > 0 ? props.checkinCount / props.rsvp : 1;
+import { fonts } from '../lib/theme';
+export const CheckinProgressBar = ({
+  checkinCount,
+  rsvp,
+  children
+}) => {
+  const safeRsvp = Math.max(rsvp, 0);
+  const safeCheckins = Math.max(checkinCount, 0);
+  const progress = safeRsvp > 0 ? Math.min(safeCheckins / safeRsvp, 1) : 1;
+  const remaining = Math.max(safeRsvp - safeCheckins, 0);
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]]) + " " + 'checkin-progress-bar'
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'checkin-progress-bar'
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: `${width * 100}%`
+      width: `${progress * 100}%`
     },
-    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]]) + " " + 'progress'
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'progress'
   }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]]) + " " + 'number checkin-count'
-  }, props.checkinCount, /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]])
-  }, props.leftLabel || 'Checkins')), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]]) + " " + 'checkin-tag-display'
-  }, props.children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]]) + " " + 'number confirmations'
-  }, props.rsvp, /*#__PURE__*/React.createElement("label", {
-    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]])
-  }, props.rightLabel || 'Confirmations')), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2740901718",
-    dynamic: [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]
-  }, `.checkin-progress-bar.__jsx-style-dynamic-selector{position:relative;padding:0.5em 1em 0.7em;background-color:${colors.enterDarkGrey};border:1px solid ${colors.enterBackground};font-family:${fonts.primary};color:white;display:grid;grid-template-columns:1fr auto 1fr;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;overflow:hidden;cursor:pointer;}.progress.__jsx-style-dynamic-selector{z-index:0;top:0;margin:0;padding:0;position:absolute;height:100%;background-color:${colors.enterGreen};}.number.__jsx-style-dynamic-selector{z-index:1;font-weight:200;font-size:1.4em;}.checkin-count.__jsx-style-dynamic-selector{text-align:left;}.confirmations.__jsx-style-dynamic-selector{text-align:right;}.number.__jsx-style-dynamic-selector label.__jsx-style-dynamic-selector{display:block;font-family:${fonts.secondary};font-size:0.6rem;-webkit-letter-spacing:0.05em;-moz-letter-spacing:0.05em;-ms-letter-spacing:0.05em;letter-spacing:0.05em;text-transform:uppercase;font-weight:normal;}.checkin-tag-display.__jsx-style-dynamic-selector{z-index:1;font-size:1.3em;}`));
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'metric left'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'value'
+  }, safeCheckins), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'label'
+  }, "Processed")), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'center'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'center-main'
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'center-sub'
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'total'
+  }, safeRsvp), " Total")), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'metric right'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'value'
+  }, remaining), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["269769892", [fonts.primary, fonts.secondary, fonts.secondary]]]) + " " + 'label'
+  }, "Remaining")), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "269769892",
+    dynamic: [fonts.primary, fonts.secondary, fonts.secondary]
+  }, `.checkin-progress-bar.__jsx-style-dynamic-selector{position:relative;padding:0.85rem 1rem;border-radius:1rem;overflow:hidden;display:grid;grid-template-columns:1fr auto 1fr;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#493f48;color:#ffffff;font-family:${fonts.primary};box-shadow:0 6px 18px rgba(0,0,0,0.2);}.progress.__jsx-style-dynamic-selector{position:absolute;inset:0 auto 0 0;height:100%;background-color:#89b859;z-index:0;}.metric.__jsx-style-dynamic-selector,.center.__jsx-style-dynamic-selector{position:relative;z-index:1;}.metric.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:0.2rem;}.value.__jsx-style-dynamic-selector{font-size:1.15rem;font-weight:800;line-height:1;}.label.__jsx-style-dynamic-selector{font-family:${fonts.secondary};font-size:0.65rem;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;opacity:0.85;}.left.__jsx-style-dynamic-selector{text-align:left;}.right.__jsx-style-dynamic-selector{text-align:right;}.center.__jsx-style-dynamic-selector{text-align:center;padding:0 0.5rem;min-width:0;}.center-main.__jsx-style-dynamic-selector{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.center-sub.__jsx-style-dynamic-selector{margin-top:0.2rem;font-family:${fonts.secondary};font-size:0.65rem;-webkit-letter-spacing:0.06em;-moz-letter-spacing:0.06em;-ms-letter-spacing:0.06em;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;opacity:0.85;}.center-sub.__jsx-style-dynamic-selector .total.__jsx-style-dynamic-selector{font-weight:800;opacity:1;}`));
 };

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

@@ -13,9 +13,9 @@ export const Input = ({
     htmlFor: id
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, props, {
     id: id,
-    className: _JSXStyle.dynamic([["3038467672", [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["2200566855", [fonts.primary, colors.enterDarkGrey, colors.enterDarkGrey]]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3038467672",
-    dynamic: [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, colors.enterRed]
-  }, `input.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:1.1em;display:block;width:100%;padding:0.2em 0;margin-bottom:1.1em;border:none;outline:none;background-color:transparent;color:${colors.enterDarkGrey};border-bottom:1px solid ${colors.enterMediumGrey};border-radius:0;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;}input.__jsx-style-dynamic-selector:focus{border-color:${colors.enterRed};}`));
+    id: "2200566855",
+    dynamic: [fonts.primary, colors.enterDarkGrey, colors.enterDarkGrey]
+  }, `input.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;width:100%;padding:0.6rem 0.9rem;margin-bottom:0.9rem;background-color:#f9fafb;color:${colors.enterDarkGrey};border:1px solid #d1d5db;border-radius:999px;outline:none;box-sizing:border-box;-webkit-transition:background-color 0.15s ease,border-color 0.15s ease, box-shadow 0.15s ease;transition:background-color 0.15s ease,border-color 0.15s ease, box-shadow 0.15s ease;}input.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:#9ca3af;}input.__jsx-style-dynamic-selector::-moz-placeholder{color:#9ca3af;}input.__jsx-style-dynamic-selector:-ms-input-placeholder{color:#9ca3af;}input.__jsx-style-dynamic-selector::placeholder{color:#9ca3af;}input.__jsx-style-dynamic-selector:hover{background-color:#ffffff;border-color:#cbd5e1;}input.__jsx-style-dynamic-selector:focus{background-color:#ffffff;border-color:${colors.enterDarkGrey};box-shadow:0 0 0 2px rgba(17,24,39,0.12);}`));
 };

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

@@ -5,23 +5,23 @@ import { colors, fonts } from '../../lib/theme';
 import { SearchIcon } from '../icons/search-icon';
 export const SearchInput = ({
   textColor = colors.enterDarkGrey,
-  borderColor = colors.enterMediumGrey,
+  borderColor = '#e5e7eb',
   placeholder = 'Search',
   ...props
 }) => {
   const id = useId();
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + 'search-input'
+    className: _JSXStyle.dynamic([["2389809060", [fonts.primary, textColor]]]) + " " + 'search-input'
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + 'icon'
+    className: _JSXStyle.dynamic([["2389809060", [fonts.primary, textColor]]]) + " " + 'icon'
   }, /*#__PURE__*/React.createElement(SearchIcon, {
     color: textColor
   })), /*#__PURE__*/React.createElement("input", _extends({}, props, {
     placeholder: placeholder,
     id: id,
-    className: _JSXStyle.dynamic([["1969077888", [fonts.primary, textColor, borderColor, colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["2389809060", [fonts.primary, textColor]]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    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};}`));
+    id: "2389809060",
+    dynamic: [fonts.primary, textColor]
+  }, `.search-input.__jsx-style-dynamic-selector{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin-bottom:1rem;}.icon.__jsx-style-dynamic-selector{position:absolute;left:0.75rem;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:16px;height:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;opacity:0.8;}input.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;width:100%;padding:0.55rem 0.875rem 0.55rem 2.25rem;color:${textColor};background-color:#ffffff;border:1px solid #d1d5db;border-radius:0.75rem;outline:none;box-shadow:0 1px 2px rgba(16,24,40,0.05);}input.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:rgba(107,114,128,0.8);}input.__jsx-style-dynamic-selector::-moz-placeholder{color:rgba(107,114,128,0.8);}input.__jsx-style-dynamic-selector:-ms-input-placeholder{color:rgba(107,114,128,0.8);}input.__jsx-style-dynamic-selector::placeholder{color:rgba(107,114,128,0.8);}input.__jsx-style-dynamic-selector:hover{border-color:#d1d5db;}input.__jsx-style-dynamic-selector:focus{border-color:#9ca3af;box-shadow:0 0 0 2px rgba(229,231,235,0.9);}`));
 };

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

@@ -4,10 +4,10 @@ import { colors, fonts } from '../../lib/theme';
 export const SegmentedControl = props => {
   const name = props.segments.join('');
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]]) + " " + 'segmented-controll'
+    className: _JSXStyle.dynamic([["382506645", [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey]]]) + " " + 'segmented-controll'
   }, props.segments.map((segment, index) => /*#__PURE__*/React.createElement("div", {
     key: segment,
-    className: _JSXStyle.dynamic([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]]) + " " + 'segment'
+    className: _JSXStyle.dynamic([["382506645", [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, 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([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]])
+    className: _JSXStyle.dynamic([["382506645", [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, 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([["2098643240", [fonts.secondary, colors.enterLightGrey, colors.enterMediumGrey, colors.enterDarkGrey]]])
+    className: _JSXStyle.dynamic([["382506645", [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey]]])
   }, segment))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    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;}`));
+    id: "382506645",
+    dynamic: [fonts.secondary, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey, colors.enterDarkGrey]
+  }, `.segmented-controll.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;border-radius:999px;background-color:#f3f4f6;border:1px solid #d1d5db;box-shadow:0 1px 2px rgba(16,24,40,0.06);overflow:hidden;}.segment.__jsx-style-dynamic-selector{position:relative;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;}label.__jsx-style-dynamic-selector{font-family:${fonts.secondary};font-weight:600;font-size:0.84rem;-webkit-letter-spacing:0.03em;-moz-letter-spacing:0.03em;-ms-letter-spacing:0.03em;letter-spacing:0.03em;padding:0.62rem 0.85rem;text-align:center;background-color:#f9fafb;color:${colors.enterDarkGrey};box-sizing:border-box;display:block;width:100%;height:100%;border-radius:0;cursor:pointer;-webkit-transition:background-color 0.15s ease,color 0.15s ease, box-shadow 0.15s ease,-webkit-transform 0.1s ease;-webkit-transition:background-color 0.15s ease,color 0.15s ease, box-shadow 0.15s ease,transform 0.1s ease;transition:background-color 0.15s ease,color 0.15s ease, box-shadow 0.15s ease,transform 0.1s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.segment.__jsx-style-dynamic-selector:not(:last-child) label.__jsx-style-dynamic-selector{border-right:1px solid rgba(209,213,219,0.9);}label.__jsx-style-dynamic-selector:hover{background-color:#eef2f7;color:${colors.enterDarkGrey};}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector{background-color:${colors.enterDarkGrey};color:white;box-shadow:0 2px 6px rgba(15,23,42,0.22);}input.__jsx-style-dynamic-selector:checked+label.__jsx-style-dynamic-selector:hover{background-color:${colors.enterDarkGrey};}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/select.js

@@ -16,7 +16,7 @@ export function Select({
   } = props;
   const _id = useId();
   const id = props.id ?? _id;
-  const uriEncodedChevronSVG = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' ><polygon fill='${colors.enterBackground}' points='0,0 100,0 50,50'/></svg>`);
+  const uriEncodedChevronSVG = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'><polygon fill='${colors.enterBackground}' points='0,0 100,0 50,50'/></svg>`);
   const chevronSVGImageURL = `data:image/svg+xml,${uriEncodedChevronSVG}`;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
     htmlFor: id
@@ -24,14 +24,14 @@ export function Select({
     id: id,
     value: value,
     onChange: e => onChange(e.target.value),
-    className: _JSXStyle.dynamic([["2093301006", [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, chevronSVGImageURL, colors.enterRed]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
+    className: _JSXStyle.dynamic([["4146534212", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || "")
   }), options.map(option => /*#__PURE__*/React.createElement("option", {
     key: option,
     value: option,
     disabled: optionDisabled(option),
-    className: _JSXStyle.dynamic([["2093301006", [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, chevronSVGImageURL, colors.enterRed]]])
+    className: _JSXStyle.dynamic([["4146534212", [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]]])
   }, optionFormat(option)))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2093301006",
-    dynamic: [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, chevronSVGImageURL, colors.enterRed]
-  }, `select.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:1.1em;display:block;width:100%;padding:0.2em 0;margin-bottom:1.1em;border:none;outline:none;background-color:transparent;color:${colors.enterDarkGrey};border-bottom:1px solid ${colors.enterMediumGrey};border-radius:0;-webkit-transition:border-color 0.2s;transition:border-color 0.2s;background:url('${chevronSVGImageURL}');background-repeat:no-repeat;background-position:right 0.5em center;background-size:12px;}select.__jsx-style-dynamic-selector:focus{border-color:1px solid ${colors.enterRed};}`));
+    id: "4146534212",
+    dynamic: [fonts.primary, colors.enterDarkGrey, chevronSVGImageURL]
+  }, `select.__jsx-style-dynamic-selector{font-family:${fonts.primary};font-size:0.95rem;display:block;width:100%;padding:0.55rem 2.25rem 0.55rem 0.875rem;color:${colors.enterDarkGrey};background-color:#ffffff;border:1px solid #e5e7eb;border-radius:0.75rem;outline:none;box-shadow:0 1px 2px rgba(16,24,40,0.05);-webkit-transition:border-color 120ms ease,box-shadow 120ms ease, background-color 120ms ease;transition:border-color 120ms ease,box-shadow 120ms ease, background-color 120ms ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url('${chevronSVGImageURL}');background-repeat:no-repeat;background-position:right 0.75rem center;background-size:12px;margin-bottom:1rem;}select.__jsx-style-dynamic-selector:hover{border-color:#d1d5db;}select.__jsx-style-dynamic-selector:focus{border-color:#9ca3af;box-shadow:0 0 0 2px rgba(229,231,235,0.9);}select.__jsx-style-dynamic-selector:disabled{color:#9ca3af;background-color:#f9fafb;cursor:not-allowed;}option.__jsx-style-dynamic-selector:disabled{color:#9ca3af;}`));
 }

package/dist/ui/guest-card.js

@@ -1,7 +1,7 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import 'styled-jsx';
-import { colors, fonts } from '../lib/theme';
+import { fonts } from '../lib/theme';
 import { classNames as cx } from '../lib/class-names';
 import { CheckinCountIndicator } from './checkin-count-indicator';
 import { CompanionInfo } from './companion-info';
@@ -15,12 +15,12 @@ export const GuestCard = props => {
     props.onClick(props.attendee.id);
   } : undefined;
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + (cx({
+    className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + (cx({
       'guest-card-wrapper': true,
       plain: props.plain
     }) || "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color-list'
+    className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'tag-color-list'
   }, tags.map(tag => [tag, getTagColor(tag)]).filter(([, tagColor]) => tagColor).map(([tag, tagColor]) => /*#__PURE__*/React.createElement("div", {
     key: tag,
     title: tag,
@@ -28,14 +28,14 @@ export const GuestCard = props => {
       backgroundColor: tagColor,
       height: '100%'
     },
-    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-color'
+    className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'tag-color'
   }))), /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
-    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'guest-card'
+    className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'guest-card'
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]])
+    className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'main'
   }, /*#__PURE__*/React.createElement("h2", {
-    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'name'
+    className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'name'
   }, props.formatName(props.attendee)), /*#__PURE__*/React.createElement(CompanionInfo, {
     companionStatus: props.attendee.companions
   }), /*#__PURE__*/React.createElement(CheckinCountIndicator, {
@@ -43,14 +43,14 @@ export const GuestCard = props => {
     response: props.attendee.getResponse(props.branchName, props.counterName),
     rsvpCount: props.attendee.getRsvpCount(props.branchName, props.counterName)
   })), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1739379681", [colors.enterGrey, colors.enterBackground, fonts.primary, props.dense ? '0.5em 0' : '1.5em 0']]]) + " " + 'tag-list'
+    className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'tag-list'
   }, tags.map(tag => /*#__PURE__*/React.createElement(Tag, {
     key: tag,
     color: getTagColor(tag)
   }, tag)), props.infoText && /*#__PURE__*/React.createElement("div", {
-    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: "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;}`));
+    className: _JSXStyle.dynamic([["3131953377", [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']]]) + " " + 'info'
+  }, props.infoText))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3131953377",
+    dynamic: [fonts.primary, props.dense ? '0.45rem 0' : '0.85rem 0', onClick ? 'pointer' : 'default']
+  }, `.guest-card-wrapper.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:${fonts.primary};margin:${props.dense ? '0.45rem 0' : '0.85rem 0'};border-radius:1.1rem;background-color:#ffffff;border:1px solid #e5e7eb;box-shadow:0 1px 2px rgba(16,24,40,0.08), 0 6px 14px rgba(16,24,40,0.08);-webkit-transition:box-shadow 0.18s ease,-webkit-transform 0.18s ease;-webkit-transition:box-shadow 0.18s ease,transform 0.18s ease;transition:box-shadow 0.18s ease,transform 0.18s ease;cursor:${onClick ? 'pointer' : 'default'};background-clip:padding-box;}.guest-card-wrapper.__jsx-style-dynamic-selector:hover{box-shadow:0 2px 4px rgba(16,24,40,0.1), 0 12px 26px rgba(16,24,40,0.14);-webkit-transform:translateY(-1px);-ms-transform:translateY(-1px);transform:translateY(-1px);}.guest-card-wrapper.__jsx-style-dynamic-selector:active{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);box-shadow:0 1px 2px rgba(16,24,40,0.08), 0 8px 18px rgba(16,24,40,0.12);}.guest-card-wrapper.plain.__jsx-style-dynamic-selector{border:none;box-shadow:none;background-color:transparent;-webkit-transform:none;-ms-transform:none;transform:none;}.tag-color-list.__jsx-style-dynamic-selector{width:6px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:0 0 6px;-ms-flex:0 0 6px;flex:0 0 6px;}.tag-color.__jsx-style-dynamic-selector:first-child{border-top-left-radius:1.1rem;}.tag-color.__jsx-style-dynamic-selector:last-child{border-bottom-left-radius:1.1rem;}.guest-card.__jsx-style-dynamic-selector{position:relative;-webkit-flex:1;-ms-flex:1;flex:1;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:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding:1.15rem 1.15rem 1.05rem 1.3rem;}.main.__jsx-style-dynamic-selector{min-width:0;max-width:62%;}.name.__jsx-style-dynamic-selector{font-size:1.05rem;font-weight:650;color:#111827;margin:0 0 0.5rem 0;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.tag-list.__jsx-style-dynamic-selector{max-width:38%;text-align:right;font-size:0.9rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:0.3rem 0.4rem;margin-left:0.9rem;}.info.__jsx-style-dynamic-selector{display:block;width:100%;text-align:right;margin-top:0.45rem;color:#6b7280;font-size:0.82rem;}`));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-crew-berlin/enter-js-utils",
-  "version": "0.95.1",
+  "version": "0.96.1",
   "description": "utils such as vaildation and other helpers to work with data from the enter app",
   "files": [
     "dist",