@treely/strapi-slices 1.0.0

package/src/components/portfolio/SmallCheckout/SmallCheckout.test.tsx

@@ -0,0 +1,166 @@
+import { render, screen, userEvent, waitFor } from '@/test/testUtils';
+import { pushSpy } from '../../../../__mocks__/next/router';
+
+import SmallCheckout from '.';
+import { SmallCheckoutProps } from './SmallCheckout';
+import messagesEn from './messages.en';
+
+const defaultProps: SmallCheckoutProps = {
+  batchId: 'batchId',
+  pricePerKg: 0.06,
+  initialContributionValue: 60,
+  checkoutText: 'Checkout text',
+  currency: 'EUR',
+};
+
+const setup = (props = {}) => {
+  const combinedProps = { ...defaultProps, ...props };
+  render(<SmallCheckout {...combinedProps} />);
+};
+
+describe('The SmallCheckout component', () => {
+  afterEach(() => {
+    pushSpy.mockClear();
+  });
+
+  it('displays amount in euro', () => {
+    setup();
+
+    expect(
+      screen.getByText(
+        messagesEn[
+          'portfolio.smallCheckout.contributionValueCurrency.label.EUR'
+        ]
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('displays amount in tons', () => {
+    setup();
+
+    expect(
+      screen.getByText(
+        messagesEn['portfolio.smallCheckout.contributionValueKgs.label']
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('displays the submit button', () => {
+    setup();
+
+    expect(
+      screen.getByText(messagesEn['portfolio.smallCheckout.submitButton'])
+    ).toBeInTheDocument();
+  });
+
+  it('navigates to the checkout on submit', async () => {
+    setup();
+
+    await userEvent.clear(
+      screen.getByLabelText(
+        messagesEn[
+          'portfolio.smallCheckout.contributionValueCurrency.label.EUR'
+        ]
+      )
+    );
+
+    await userEvent.type(
+      screen.getByLabelText(
+        messagesEn[
+          'portfolio.smallCheckout.contributionValueCurrency.label.EUR'
+        ]
+      ),
+      '120'
+    );
+
+    await userEvent.click(
+      screen.getByText(messagesEn['portfolio.smallCheckout.submitButton'])
+    );
+
+    await waitFor(() => {
+      expect(pushSpy).toHaveBeenCalledWith(
+        'https://api.fpm.t-staging.com/v1/webhooks/shop/checkout?batchId=batchId&quantity=2000'
+      );
+    });
+  });
+
+  it('correctly converts tons to EUR', async () => {
+    setup();
+
+    await userEvent.clear(
+      screen.getByLabelText(
+        messagesEn['portfolio.smallCheckout.contributionValueKgs.label']
+      )
+    );
+    await userEvent.type(
+      screen.getByLabelText(
+        messagesEn['portfolio.smallCheckout.contributionValueKgs.label']
+      ),
+      '3'
+    );
+
+    await userEvent.click(
+      screen.getByText(messagesEn['portfolio.smallCheckout.submitButton'])
+    );
+
+    await waitFor(() => {
+      expect(pushSpy).toHaveBeenCalledWith(
+        'https://api.fpm.t-staging.com/v1/webhooks/shop/checkout?batchId=batchId&quantity=3000'
+      );
+    });
+  });
+
+  it('works with CHF', async () => {
+    setup({ ...defaultProps, currency: 'CHF' });
+
+    expect(
+      screen.getByLabelText(
+        messagesEn[
+          'portfolio.smallCheckout.contributionValueCurrency.label.CHF'
+        ]
+      )
+    ).toBeInTheDocument();
+
+    await userEvent.clear(
+      screen.getByLabelText(
+        messagesEn[
+          'portfolio.smallCheckout.contributionValueCurrency.label.CHF'
+        ]
+      )
+    );
+    await userEvent.type(
+      screen.getByLabelText(
+        messagesEn[
+          'portfolio.smallCheckout.contributionValueCurrency.label.CHF'
+        ]
+      ),
+      '1'
+    );
+    await userEvent.click(
+      screen.getByText(messagesEn['portfolio.smallCheckout.submitButton'])
+    );
+
+    expect(
+      await screen.findByText(
+        messagesEn[
+          'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.CHF'
+        ]
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('displays customTitle, customSubtitle and customButton if they are defined im slice', () => {
+    setup({
+      ...defaultProps,
+      title: 'Custom Title',
+      subtitle: 'Custom Subtitle',
+      button: { id: 1, url: 'customButtonUrl', text: 'Custom Button' },
+    });
+
+    expect(screen.getByText('Custom Title')).toBeInTheDocument();
+    expect(screen.getByText('Custom Subtitle')).toBeInTheDocument();
+
+    expect(screen.getAllByRole('button')).toHaveLength(2);
+    expect(screen.getByText('Custom Button')).toBeInTheDocument();
+  });
+});

package/src/components/portfolio/SmallCheckout/SmallCheckout.tsx

@@ -0,0 +1,265 @@
+import { CDN_URI, FPM_API_URI } from '@/constants/api';
+import StrapiLinkButton from '@/components/StrapiLinkButton';
+import {
+  BoemlyFormControl,
+  Box,
+  Button,
+  Divider,
+  Flex,
+  InputRightAddon,
+  Spacer,
+  Text,
+} from 'boemly';
+import {
+  Field,
+  FieldProps,
+  Form,
+  Formik,
+  FormikErrors,
+  FormikProps,
+} from 'formik';
+import { useRouter } from 'next/router';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Image from 'next/image';
+import { useCallback } from 'react';
+import StrapiLink from '@/models/strapi/StrapiLink';
+import {
+  MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY,
+  MINIMUM_CONTRIBUTION_VALUE_IN_MONEY,
+} from '@/constants/domain';
+
+export interface SmallCheckoutProps {
+  batchId: string;
+  pricePerKg: number;
+  initialContributionValue: number;
+  checkoutText?: string;
+  currency: 'EUR' | 'CHF';
+
+  title?: string;
+  subtitle?: string;
+  button?: StrapiLink;
+}
+
+interface SmallCheckoutForm {
+  contributionValueCurrency: number;
+  contributionValueKgs: number;
+}
+
+const SmallCheckout = ({
+  pricePerKg,
+  currency,
+  batchId,
+  initialContributionValue,
+  checkoutText,
+  title,
+  subtitle,
+  button,
+}: SmallCheckoutProps) => {
+  const { formatNumber, formatMessage } = useIntl();
+  const { push } = useRouter();
+
+  const validateForm = useCallback((values: SmallCheckoutForm) => {
+    const errors: FormikErrors<SmallCheckoutForm> = {};
+
+    if (!values.contributionValueCurrency) {
+      errors.contributionValueCurrency = formatMessage({
+        id: 'portfolio.smallCheckout.contributionValueCurrency.validation.empty',
+      });
+    } else if (
+      values.contributionValueCurrency < MINIMUM_CONTRIBUTION_VALUE_IN_MONEY
+    ) {
+      errors.contributionValueCurrency = formatMessage({
+        id: `portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.${currency}`,
+      });
+    } else if (
+      values.contributionValueCurrency > MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY
+    ) {
+      errors.contributionValueCurrency = formatMessage({
+        id: 'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh',
+      });
+    }
+
+    return errors;
+  }, []);
+
+  const onSubmit = async ({ contributionValueCurrency }: SmallCheckoutForm) => {
+    push(
+      `${FPM_API_URI}/v1/webhooks/shop/checkout?batchId=${batchId}&quantity=${Math.floor(
+        contributionValueCurrency / pricePerKg
+      )}`
+    );
+  };
+
+  return (
+    <Flex
+      width="full"
+      height="full"
+      borderRadius="xl"
+      background="primary.100"
+      padding="6"
+      direction="column"
+    >
+      <Flex gap="1" alignItems="end" mb="6">
+        <Text color="black" lineHeight="0">
+          {formatMessage(
+            { id: 'unit.formatter.tonsCo2' },
+            {
+              number: (
+                <Text as="span" size="lgLowBold" color="black">
+                  {formatNumber(pricePerKg * 1000, {
+                    style: 'currency',
+                    currency,
+                    maximumFractionDigits: 0,
+                  })}
+                </Text>
+              ),
+            }
+          )}
+        </Text>
+      </Flex>
+
+      <Formik
+        initialValues={{
+          contributionValueCurrency: initialContributionValue,
+          contributionValueKgs: initialContributionValue / pricePerKg / 1000,
+        }}
+        validate={validateForm}
+        onSubmit={onSubmit}
+      >
+        {({
+          errors,
+          touched,
+          handleSubmit,
+          setValues,
+        }: FormikProps<SmallCheckoutForm>) => (
+          <Form onSubmit={handleSubmit}>
+            <Flex gap="4">
+              <Box width="full">
+                <Field name="contributionValueCurrency">
+                  {({ field }: FieldProps) => (
+                    <BoemlyFormControl
+                      id="contributionValueCurrency"
+                      size="md"
+                      inputType="NumberInput"
+                      numberInputProps={{
+                        value: field.value,
+                        onChange: (valueString) => {
+                          // valueAsNumber might be NaN
+                          const value = parseInt(valueString || '0', 10);
+
+                          setValues({
+                            contributionValueCurrency: value,
+                            contributionValueKgs: value / pricePerKg / 1000,
+                          });
+                        },
+                      }}
+                      label={formatMessage({
+                        id: `portfolio.smallCheckout.contributionValueCurrency.label.${currency}`,
+                      })}
+                      rightAddonsOrElements={[
+                        <InputRightAddon key="currencyUnit">
+                          <FormattedMessage
+                            id={`portfolio.smallCheckout.contributionValueCurrency.unit.${currency}`}
+                          />
+                        </InputRightAddon>,
+                      ]}
+                      isInvalid={
+                        !!errors.contributionValueCurrency &&
+                        touched.contributionValueCurrency
+                      }
+                      errorMessage={errors.contributionValueCurrency}
+                    />
+                  )}
+                </Field>
+              </Box>
+
+              <Box width="full">
+                <Field name="contributionValueKgs">
+                  {({ field }: FieldProps) => (
+                    <BoemlyFormControl
+                      id="contributionValueKgs"
+                      size="md"
+                      inputType="NumberInput"
+                      numberInputProps={{
+                        value: field.value,
+                        onChange: (valueString) => {
+                          const value = parseInt(valueString || '0', 10);
+
+                          setValues({
+                            contributionValueCurrency:
+                              value * pricePerKg * 1000,
+                            contributionValueKgs: value,
+                          });
+                        },
+                      }}
+                      label={formatMessage({
+                        id: 'portfolio.smallCheckout.contributionValueKgs.label',
+                      })}
+                      rightAddonsOrElements={[
+                        <InputRightAddon key="tCO₂">tCO₂</InputRightAddon>,
+                      ]}
+                      isInvalid={
+                        !!errors.contributionValueKgs &&
+                        touched.contributionValueKgs
+                      }
+                      errorMessage={errors.contributionValueKgs}
+                    />
+                  )}
+                </Field>
+              </Box>
+            </Flex>
+
+            <Spacer height="4" />
+
+            <Button type="submit" width="full">
+              <FormattedMessage id="portfolio.smallCheckout.submitButton" />
+            </Button>
+          </Form>
+        )}
+      </Formik>
+
+      <Flex
+        width="full"
+        justifyContent="center"
+        alignItems="center"
+        mt="6"
+        gap="2"
+      >
+        <Image
+          src={`${CDN_URI}/assets/v3/strapi-slices/globe-love-icon.svg`}
+          alt="Icon"
+          width={20}
+          height={20}
+        />
+        <Text size="smLowNormal">{checkoutText}</Text>
+      </Flex>
+
+      <Divider my="6" />
+
+      <Flex width="full" alignItems="center" direction="column">
+        {title && (
+          <Text size="smLowBold" textAlign="center" color="black" mb="2">
+            {title}
+          </Text>
+        )}
+        {subtitle && (
+          <Text size="smRegularNormal" textAlign="center" mb="3">
+            {subtitle}
+          </Text>
+        )}
+        {button && (
+          <StrapiLinkButton
+            link={{
+              id: 1,
+              intercomLauncher: true,
+              text: button.text,
+            }}
+            variant="outline"
+          />
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default SmallCheckout;

package/src/components/portfolio/SmallCheckout/index.ts

@@ -0,0 +1,3 @@
+import SmallCheckout from './SmallCheckout';
+
+export default SmallCheckout;

package/src/components/portfolio/SmallCheckout/messages.de.ts

@@ -0,0 +1,26 @@
+export default {
+  'portfolio.smallCheckout.contributionValueCurrency.label.CHF':
+    'Geben Sie den Beitrag in Fr. ein',
+  'portfolio.smallCheckout.contributionValueCurrency.label.EUR':
+    'Geben Sie den Beitrag in € ein',
+  'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
+  'portfolio.smallCheckout.contributionValueCurrency.unit.CHF': 'Fr.',
+  'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.CHF':
+    'Der Wert muss mindestens 10 CHF betragen',
+  'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.EUR':
+    'Der Wert muss mindestens 10 Euro betragen.',
+  'portfolio.smallCheckout.contributionValueCurrency.validation.empty':
+    'Bitte geben Sie einen Wert ein',
+  'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh':
+    'Für größere Einkäufe kontaktieren Sie bitte unser Verkaufsteam über den unten stehenden Button',
+
+  'portfolio.smallCheckout.contributionValueKgs.label': 'Beitrag in Tonnen',
+
+  'portfolio.smallCheckout.submitButton': 'Credits kaufen',
+
+  'portfolio.smallCheckout.cta.title':
+    'Möchten Sie mehr als 10.000 tCO₂ kaufen?',
+  'portfolio.smallCheckout.cta.subTitle':
+    'Für Unternehmenskunden bieten wir individuelle Lösungen an. Kontaktieren Sie uns.',
+  'portfolio.smallCheckout.cta.button': 'Unser Vertriebsteam kontaktieren',
+};

package/src/components/portfolio/SmallCheckout/messages.en.ts

@@ -0,0 +1,26 @@
+export default {
+  'portfolio.smallCheckout.contributionValueCurrency.label.CHF':
+    'Contribution Amount in CHF',
+  'portfolio.smallCheckout.contributionValueCurrency.label.EUR':
+    'Contribution Amount in €',
+  'portfolio.smallCheckout.contributionValueCurrency.unit.EUR': '€',
+  'portfolio.smallCheckout.contributionValueCurrency.unit.CHF': 'CHF',
+  'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.CHF':
+    'The value must be at least 10 CHF',
+  'portfolio.smallCheckout.contributionValueCurrency.validation.tooLow.EUR':
+    'The value must be at least 10 Euro',
+  'portfolio.smallCheckout.contributionValueCurrency.validation.empty':
+    'Please enter a value',
+  'portfolio.smallCheckout.contributionValueCurrency.validation.tooHigh':
+    'For bigger purchases please contact our sales team via office@tree.ly',
+
+  'portfolio.smallCheckout.contributionValueKgs.label':
+    'Contribution Amount in Tons',
+
+  'portfolio.smallCheckout.submitButton': 'Buy credits',
+
+  'portfolio.smallCheckout.cta.title': 'Looking to buy more than 10.000 tCO₂?',
+  'portfolio.smallCheckout.cta.subTitle':
+    'For enterprise-customers we offer custom solutions. Feel free to contact us.',
+  'portfolio.smallCheckout.cta.button': 'Contact our Sales Team',
+};

package/src/constants/animations.ts

@@ -0,0 +1 @@
+export const MEDIUM_TRANSITION_DURATION = 0.2;

package/src/constants/api.ts

@@ -0,0 +1,5 @@
+export const API_URI =
+  process.env.NEXT_PUBLIC_API_URI || 'http://localhost:4001';
+export const FPM_API_URI =
+  process.env.NEXT_PUBLIC_FPM_API_URI || 'https://api.fpm.t-staging.com';
+export const CDN_URI = 'https://cdn.tree.ly';

package/src/constants/breakpoints.ts

@@ -0,0 +1,9 @@
+export const BREAKPOINT_SM = '320px';
+export const BREAKPOINT_MD = '768px';
+export const BREAKPOINT_LG = '960px';
+export const BREAKPOINT_XL = '1200px';
+
+export const BREAKPOINT_SM_QUERY = `(max-width: ${BREAKPOINT_SM})`;
+export const BREAKPOINT_MD_QUERY = `(max-width: ${BREAKPOINT_MD})`;
+export const BREAKPOINT_LG_QUERY = `(max-width: ${BREAKPOINT_LG})`;
+export const BREAKPOINT_XL_QUERY = `(max-width: ${BREAKPOINT_XL})`;

package/src/constants/domain.ts

@@ -0,0 +1,3 @@
+export const MINIMUM_CONTRIBUTION_VALUE_IN_MONEY = 10;
+
+export const MAXIMUM_CONTRIBUTION_VALUE_IN_MONEY = 60_000;

package/src/constants/fontCustomizations.ts

@@ -0,0 +1,6 @@
+export const FONT_CUSTOMIZATIONS = {
+  body: 'Inter',
+  heading: 'Inter',
+  display: 'GintoNord',
+  mono: 'SpaceMono',
+};

package/src/constants/formatter.ts

@@ -0,0 +1,29 @@
+import { FormatNumberOptions } from 'react-intl';
+
+export const FORMAT_AS_EUR_CONFIG: FormatNumberOptions = {
+  style: 'currency',
+  currency: 'EUR',
+};
+
+export const FORMAT_AS_METER_CONFIG: FormatNumberOptions = {
+  unit: 'meter',
+  unitDisplay: 'short',
+  style: 'unit',
+  maximumFractionDigits: 0,
+};
+
+export const FORMAT_AS_HECTARE_CONFIG: FormatNumberOptions = {
+  unit: 'hectare',
+  unitDisplay: 'short',
+  style: 'unit',
+  maximumFractionDigits: 2,
+};
+
+export const FORMAT_AS_CUBIC_METERS_PER_HECTARE_CONFIG: FormatNumberOptions = {
+  maximumFractionDigits: 0,
+};
+
+export const FORMAT_AS_PERCENT_CONFIG: FormatNumberOptions = {
+  style: 'percent',
+  maximumFractionDigits: 2,
+};

package/src/constants/globalStyle.ts

@@ -0,0 +1,55 @@
+import { css } from '@emotion/react';
+import { CDN_URI } from './api';
+
+export const GLOBAL_STYLE = css`
+  // GintoNord
+  @font-face {
+    font-family: 'GintoNord';
+    src: url('${CDN_URI}/assets/v3/fonts/ABCGintoNord-Bold.woff2')
+      format('woff2');
+    font-style: normal;
+    font-weight: 700;
+    font-display: block;
+  }
+  // Inter
+  @font-face {
+    font-family: 'Inter';
+    src: url('${CDN_URI}/assets/v3/fonts/Inter-Regular.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+  }
+  @font-face {
+    font-family: 'Inter';
+    src: url('${CDN_URI}/assets/v3/fonts/Inter-Medium.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 500;
+    font-display: block;
+  }
+  @font-face {
+    font-family: 'Inter';
+    src: url('${CDN_URI}/assets/v3/fonts/Inter-SemiBold.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 600;
+    font-display: block;
+  }
+  @font-face {
+    font-family: 'Inter';
+    src: url('${CDN_URI}/assets/v3/fonts/Inter-Bold.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 700;
+    font-display: block;
+  }
+  // SpaceMono
+  @font-face {
+    font-family: 'SpaceMono';
+    src: url('${CDN_URI}/assets/v3/fonts/SpaceMono-Bold.woff2') format('woff2');
+    font-style: normal;
+    font-weight: 700;
+    font-display: block;
+  }
+
+  :root {
+    --default-hero-height: calc(100vh - var(--boemly-space-24));
+  }
+`;

package/src/constants/mapbox.ts

@@ -0,0 +1,24 @@
+export const MAPBOX_TOKEN =
+  'pk.eyJ1IjoidHJlZS1seSIsImEiOiJja25rNG1heHgwNThjMnZwZTl2eThmeXUwIn0.SOrYUKfevZkbx8jZPxJesA';
+
+export enum MapBoxStyle {
+  Outdoors = 'mapbox://styles/mapbox/outdoors-v11',
+  SatelliteStreets = 'mapbox://styles/mapbox/satellite-streets-v11',
+  Satellite = 'mapbox://styles/mapbox/satellite-v9',
+  CaliTerrain = 'mapbox://styles/tree-ly/clna54iq603ht01pbc199cszw',
+}
+
+export const MAPBOX_TILES_URL = `${
+  process.env.NEXT_PUBLIC_MAPBOX_TILES_URL || 'http://localhost:8123'
+}/vectortiles/v1/plots/{z}/{x}/{y}.mvt`;
+export const MAPBOX_SOURCE_LAYER = 'plots';
+export const MAPBOX_SOURCE_IDENTIFIER = 'plots';
+export const MAPBOX_BORDER_LAYER_IDENTIFIER = 'plots-borders';
+export const MAPBOX_FILL_LAYER_IDENTIFIER = 'plots-fill';
+export const MAPBOX_TEXT_LAYER_IDENTIFIER = 'plots-text';
+
+export const MAPBOX_TEXT_MIN_ZOOM = 15;
+export const MAPBOX_SHAPES_MIN_ZOOM = 13;
+
+export const MAPBOX_MAX_ZOOM = 19;
+export const MAPBOX_INITIAL_ZOOM = 13;

package/src/constants/strapi.ts

@@ -0,0 +1,2 @@
+export const STRAPI_URI =
+  process.env.NEXT_PUBLIC_STRAPI_URI || 'http://127.0.0.1:1337';

package/src/icons/LinkedInIcon.tsx

@@ -0,0 +1,23 @@
+const LinkedInIcon = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_112_606)">
+      <path
+        d="M11.9286 11.9285H9.85424V8.67998C9.85424 7.90534 9.84042 6.90813 8.77539 6.90813C7.695 6.90813 7.52969 7.75213 7.52969 8.62357V11.9283H5.45533V5.24799H7.44671V6.16093H7.47459C7.67388 5.82018 7.96186 5.53986 8.30786 5.34984C8.65386 5.15981 9.04493 5.06719 9.4394 5.08183C11.5418 5.08183 11.9295 6.46473 11.9295 8.2638L11.9286 11.9285ZM3.11477 4.33484C2.87669 4.33489 2.64393 4.26433 2.44595 4.13209C2.24796 3.99985 2.09365 3.81188 2.0025 3.59193C1.91135 3.37199 1.88746 3.12995 1.93387 2.89644C1.98027 2.66292 2.09488 2.44841 2.26321 2.28003C2.43153 2.11164 2.646 1.99696 2.8795 1.95047C3.11301 1.90398 3.35504 1.92778 3.57502 2.01884C3.795 2.10992 3.98303 2.26417 4.11533 2.46211C4.24764 2.66004 4.31829 2.89277 4.31833 3.13085C4.31836 3.28894 4.28725 3.44547 4.22678 3.59153C4.1663 3.7376 4.07767 3.87031 3.96591 3.98211C3.85415 4.09392 3.72146 4.18261 3.57541 4.24313C3.42937 4.30365 3.27286 4.33481 3.11477 4.33484ZM4.15194 11.9285H2.07544V5.24799H4.15194V11.9285ZM12.9628 0.000953808H1.03307C0.762304 -0.00210183 0.501383 0.102466 0.307673 0.291681C0.113961 0.480895 0.00330461 0.739273 0 1.01004V12.9892C0.00319151 13.2602 0.113783 13.5187 0.307487 13.7081C0.501192 13.8975 0.762169 14.0023 1.03307 13.9994H12.9628C13.2342 14.0028 13.496 13.8983 13.6904 13.7089C13.8848 13.5195 13.9962 13.2607 14 12.9892V1.00918C13.9961 0.737873 13.8846 0.479199 13.6902 0.28999C13.4958 0.10078 13.2341 -0.00348904 12.9628 8.91429e-05"
+        fill="#0A66C2"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_112_606">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default LinkedInIcon;

package/src/index.tsx

@@ -0,0 +1 @@
+export * from './components/SliceRenderer';

package/src/models/BBox.ts

@@ -0,0 +1,3 @@
+type BBox = [number, number, number, number];
+
+export default BBox;

package/src/models/CreditsAvailableState.ts

@@ -0,0 +1,8 @@
+enum CreditsAvailableState {
+  YES = 'yes',
+  SOME = 'some',
+  NO = 'no',
+  NOT_YET = 'notYet',
+}
+
+export default CreditsAvailableState;

package/src/models/Locale.ts

@@ -0,0 +1,3 @@
+type Locale = 'en' | 'de';
+
+export default Locale;