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

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

@@ -1,27 +1,27 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-import { theme } from '../lib';
+import { colors, fonts } from '../lib/theme';
 export const CheckinProgressBar = props => {
   const width = props.rsvp > 0 ? props.checkinCount / props.rsvp : 1;
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["818622950", [theme.colors.enterDarkGrey, theme.colors.enterBackground, theme.fonts.primary, theme.colors.enterGreen, theme.fonts.secondary]]]) + " " + 'checkin-progress-bar'
+    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]]) + " " + 'checkin-progress-bar'
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: `${width * 100}%`
     },
-    className: _JSXStyle.dynamic([["818622950", [theme.colors.enterDarkGrey, theme.colors.enterBackground, theme.fonts.primary, theme.colors.enterGreen, theme.fonts.secondary]]]) + " " + 'progress'
+    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]]) + " " + 'progress'
   }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["818622950", [theme.colors.enterDarkGrey, theme.colors.enterBackground, theme.fonts.primary, theme.colors.enterGreen, theme.fonts.secondary]]]) + " " + 'number checkin-count'
+    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([["818622950", [theme.colors.enterDarkGrey, theme.colors.enterBackground, theme.fonts.primary, theme.colors.enterGreen, theme.fonts.secondary]]])
+    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]])
   }, props.leftLabel || 'Checkins')), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["818622950", [theme.colors.enterDarkGrey, theme.colors.enterBackground, theme.fonts.primary, theme.colors.enterGreen, theme.fonts.secondary]]]) + " " + 'checkin-tag-display'
+    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([["818622950", [theme.colors.enterDarkGrey, theme.colors.enterBackground, theme.fonts.primary, theme.colors.enterGreen, theme.fonts.secondary]]]) + " " + 'number confirmations'
+    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([["818622950", [theme.colors.enterDarkGrey, theme.colors.enterBackground, theme.fonts.primary, theme.colors.enterGreen, theme.fonts.secondary]]])
+    className: _JSXStyle.dynamic([["2740901718", [colors.enterDarkGrey, colors.enterBackground, fonts.primary, colors.enterGreen, fonts.secondary]]])
   }, props.rightLabel || 'Confirmations')), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "818622950",
-    dynamic: [theme.colors.enterDarkGrey, theme.colors.enterBackground, theme.fonts.primary, theme.colors.enterGreen, theme.fonts.secondary]
-  }, `.checkin-progress-bar.__jsx-style-dynamic-selector{position:relative;padding:0.5em 1em 0.7em;background-color:${theme.colors.enterDarkGrey};border:1px solid ${theme.colors.enterBackground};font-family:${theme.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:${theme.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:${theme.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;}`));
+    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;}`));
 };

package/dist/ui/checkin-progress-bar.stories.d.ts

@@ -1,59 +1,12 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    checkinCount: number;
-    rsvp: number;
-    children?: React.ReactNode;
-    leftLabel?: string | undefined;
-    rightLabel?: string | undefined;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    checkinCount: number;
-    rsvp: number;
-    children?: React.ReactNode;
-    leftLabel?: string | undefined;
-    rightLabel?: string | undefined;
-}>>;
-export declare const WithoutTagName: ComponentStory<React.FunctionComponent<{
-    checkinCount: number;
-    rsvp: number;
-    children?: React.ReactNode;
-    leftLabel?: string | undefined;
-    rightLabel?: string | undefined;
-}>>;
-export declare const NoCheckins: ComponentStory<React.FunctionComponent<{
-    checkinCount: number;
-    rsvp: number;
-    children?: React.ReactNode;
-    leftLabel?: string | undefined;
-    rightLabel?: string | undefined;
-}>>;
-export declare const AllCheckinsComplete: ComponentStory<React.FunctionComponent<{
-    checkinCount: number;
-    rsvp: number;
-    children?: React.ReactNode;
-    leftLabel?: string | undefined;
-    rightLabel?: string | undefined;
-}>>;
-export declare const MoreCheckinsThanExpected: ComponentStory<React.FunctionComponent<{
-    checkinCount: number;
-    rsvp: number;
-    children?: React.ReactNode;
-    leftLabel?: string | undefined;
-    rightLabel?: string | undefined;
-}>>;
-export declare const NoRSVP: ComponentStory<React.FunctionComponent<{
-    checkinCount: number;
-    rsvp: number;
-    children?: React.ReactNode;
-    leftLabel?: string | undefined;
-    rightLabel?: string | undefined;
-}>>;
-export declare const CustomLabels: ComponentStory<React.FunctionComponent<{
-    checkinCount: number;
-    rsvp: number;
-    children?: React.ReactNode;
-    leftLabel?: string | undefined;
-    rightLabel?: string | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckinProgressBar } from './checkin-progress-bar';
+declare const meta: Meta<typeof CheckinProgressBar>;
+export default meta;
+declare type Story = StoryObj<typeof CheckinProgressBar>;
+export declare const Basic: Story;
+export declare const WithoutTagName: Story;
+export declare const NoCheckins: Story;
+export declare const AllCheckinsComplete: Story;
+export declare const MoreCheckinsThanExpected: Story;
+export declare const NoRSVP: Story;
+export declare const CustomLabels: Story;

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

@@ -1,50 +1,56 @@
-import React from 'react';
 import { CheckinProgressBar } from './checkin-progress-bar';
-export default {
+const meta = {
   title: 'Checkin progress bar',
   component: CheckinProgressBar
 };
-const Template = args => /*#__PURE__*/React.createElement(CheckinProgressBar, args);
-export const Basic = Template.bind({});
-Basic.args = {
-  rsvp: 250,
-  checkinCount: 200,
-  children: 'Dinner'
+export default meta;
+export const Basic = {
+  args: {
+    rsvp: 250,
+    checkinCount: 200,
+    children: 'Dinner'
+  }
 };
-export const WithoutTagName = Template.bind({});
-WithoutTagName.args = {
-  rsvp: 250,
-  checkinCount: 200
+export const WithoutTagName = {
+  args: {
+    rsvp: 250,
+    checkinCount: 200
+  }
 };
-export const NoCheckins = Template.bind({});
-NoCheckins.args = {
-  rsvp: 250,
-  checkinCount: 0,
-  children: 'Dinner'
+export const NoCheckins = {
+  args: {
+    rsvp: 250,
+    checkinCount: 0,
+    children: 'Dinner'
+  }
 };
-export const AllCheckinsComplete = Template.bind({});
-AllCheckinsComplete.args = {
-  rsvp: 250,
-  checkinCount: 250,
-  children: 'Dinner'
+export const AllCheckinsComplete = {
+  args: {
+    rsvp: 250,
+    checkinCount: 250,
+    children: 'Dinner'
+  }
 };
-export const MoreCheckinsThanExpected = Template.bind({});
-MoreCheckinsThanExpected.args = {
-  rsvp: 250,
-  checkinCount: 400,
-  children: 'Dinner'
+export const MoreCheckinsThanExpected = {
+  args: {
+    rsvp: 250,
+    checkinCount: 400,
+    children: 'Dinner'
+  }
 };
-export const NoRSVP = Template.bind({});
-NoRSVP.args = {
-  rsvp: 0,
-  checkinCount: 200,
-  children: 'Dinner'
+export const NoRSVP = {
+  args: {
+    rsvp: 0,
+    checkinCount: 200,
+    children: 'Dinner'
+  }
 };
-export const CustomLabels = Template.bind({});
-CustomLabels.args = {
-  rsvp: 200,
-  checkinCount: 125,
-  children: 'Dinner',
-  leftLabel: 'Present',
-  rightLabel: 'Guests'
+export const CustomLabels = {
+  args: {
+    rsvp: 200,
+    checkinCount: 125,
+    children: 'Dinner',
+    leftLabel: 'Present',
+    rightLabel: 'Guests'
+  }
 };

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';
+import { colors, fonts } from '../lib/theme';
 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'
+    className: _JSXStyle.dynamic([["21346984", [colors.enterMediumGrey, fonts.primary, 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'
+    className: _JSXStyle.dynamic([["21346984", [colors.enterMediumGrey, fonts.primary, 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};}`));
+    id: "21346984",
+    dynamic: [colors.enterMediumGrey, fonts.primary, colors.enterDarkGrey]
+  }, `.companion-info.__jsx-style-dynamic-selector{margin:-0.5em 0 0.4em;color:${colors.enterMediumGrey};font-family:${fonts.primary};}.companion-name.__jsx-style-dynamic-selector{color:${colors.enterDarkGrey};}`));
 };

package/dist/ui/companion-info.stories.d.ts

@@ -1,44 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Attendee } from '../models';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    companionStatus: {
-        isCompanion: false;
-    } | {
-        isCompanion: true;
-        mainGuestId: string;
-    };
-    formatName: (attendee: Attendee) => string;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-}>>;
-export default _default;
-export declare const WithMainGuestFound: ComponentStory<React.FunctionComponent<{
-    companionStatus: {
-        isCompanion: false;
-    } | {
-        isCompanion: true;
-        mainGuestId: string;
-    };
-    formatName: (attendee: Attendee) => string;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-}>>;
-export declare const WithoutMainGuest: ComponentStory<React.FunctionComponent<{
-    companionStatus: {
-        isCompanion: false;
-    } | {
-        isCompanion: true;
-        mainGuestId: string;
-    };
-    formatName: (attendee: Attendee) => string;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-}>>;
-export declare const NotACompanion: ComponentStory<React.FunctionComponent<{
-    companionStatus: {
-        isCompanion: false;
-    } | {
-        isCompanion: true;
-        mainGuestId: string;
-    };
-    formatName: (attendee: Attendee) => string;
-    findMainGuest?: ((attendeeId: string) => Attendee | undefined) | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { CompanionInfo } from './companion-info';
+declare const meta: Meta<typeof CompanionInfo>;
+export default meta;
+declare type Story = StoryObj<typeof CompanionInfo>;
+export declare const WithMainGuestFound: Story;
+export declare const WithoutMainGuest: Story;
+export declare const NotACompanion: Story;

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import { CompanionInfo } from './companion-info';
 import { Attendee } from '../models';
-export default {
+const meta = {
   title: 'Companion Info',
   component: CompanionInfo,
   argTypes: {
@@ -10,6 +9,7 @@ export default {
     }
   }
 };
+export default meta;
 const mainGuest = new Attendee({
   id: 'my-attendee',
   language: 'de',
@@ -32,34 +32,36 @@ const mainGuest = new Attendee({
   deleted: false,
   payment: null
 });
-const Template = args => /*#__PURE__*/React.createElement(CompanionInfo, args);
-export const WithMainGuestFound = Template.bind({});
-WithMainGuestFound.args = {
-  companionStatus: {
-    isCompanion: true,
-    mainGuestId: 'my-attendee'
-  },
-  findMainGuest: () => mainGuest,
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const WithMainGuestFound = {
+  args: {
+    companionStatus: {
+      isCompanion: true,
+      mainGuestId: 'my-attendee'
+    },
+    findMainGuest: () => mainGuest,
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };
-export const WithoutMainGuest = Template.bind({});
-WithoutMainGuest.args = {
-  companionStatus: {
-    isCompanion: true,
-    mainGuestId: 'my-attendee'
-  },
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const WithoutMainGuest = {
+  args: {
+    companionStatus: {
+      isCompanion: true,
+      mainGuestId: 'my-attendee'
+    },
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };
-export const NotACompanion = Template.bind({});
-NotACompanion.args = {
-  companionStatus: {
-    isCompanion: false
-  },
-  formatName(attendee) {
-    return attendee.userdata.name?.toString() ?? '';
+export const NotACompanion = {
+  args: {
+    companionStatus: {
+      isCompanion: false
+    },
+    formatName(attendee) {
+      return attendee.getFieldValueString('name');
+    }
   }
 };

package/dist/ui/enter-logo.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { theme } from '../lib';
+import { colors } from '../lib/theme';
 export const EnterLogo = props => {
-  const color = props.white ? 'white' : theme.colors.enterRed;
+  const color = props.white ? 'white' : colors.enterRed;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "100%",

package/dist/ui/enter-logo.stories.d.ts

@@ -1,12 +1,7 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<{
-    white?: boolean | undefined;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<{
-    white?: boolean | undefined;
-}>>;
-export declare const White: ComponentStory<React.FunctionComponent<{
-    white?: boolean | undefined;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { EnterLogo } from './enter-logo';
+declare const meta: Meta<typeof EnterLogo>;
+export default meta;
+declare type Story = StoryObj<typeof EnterLogo>;
+export declare const Basic: Story;
+export declare const White: Story;

package/dist/ui/enter-logo.stories.js

@@ -1,18 +1,17 @@
-import React from 'react';
 import { EnterLogo } from './enter-logo';
-export default {
+const meta = {
   title: 'Enter Logo',
   component: EnterLogo
 };
-const Template = args => /*#__PURE__*/React.createElement(EnterLogo, args);
-export const Basic = Template.bind({});
-Basic.args = {};
-export const White = Template.bind({});
-White.parameters = {
-  backgrounds: {
-    default: 'dark'
+export default meta;
+export const Basic = {};
+export const White = {
+  parameters: {
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  args: {
+    white: true
   }
-};
-White.args = {
-  white: true
 };

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

@@ -1,7 +1,7 @@
 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';
 import { Label } from './label';
 export const Input = ({
   label,
@@ -12,9 +12,9 @@ export const Input = ({
     htmlFor: id
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, props, {
     id: id,
-    className: _JSXStyle.dynamic([["3631038054", [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterMediumGrey, theme.colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
+    className: _JSXStyle.dynamic([["3038467672", [fonts.primary, colors.enterDarkGrey, colors.enterMediumGrey, colors.enterRed]]]) + " " + (props && props.className != null && props.className || "")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3631038054",
-    dynamic: [theme.fonts.primary, theme.colors.enterDarkGrey, theme.colors.enterMediumGrey, theme.colors.enterRed]
-  }, `input.__jsx-style-dynamic-selector{font-family:${theme.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:${theme.colors.enterDarkGrey};border-bottom:1px solid ${theme.colors.enterMediumGrey};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: "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};}`));
 };

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

@@ -1,15 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-}>>;
-export default _default;
-export declare const Basic: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-}>>;
-export declare const NumberInput: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-}>>;
-export declare const WithValue: ComponentStory<React.FunctionComponent<React.InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-}>>;
+import { Meta, StoryObj } from '@storybook/react';
+import { Input } from './input';
+declare const meta: Meta<typeof Input>;
+export default meta;
+declare type Story = StoryObj<typeof Input>;
+export declare const Basic: Story;
+export declare const NumberInput: Story;
+export declare const WithValue: Story;

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'
+  }
 };