@adobe-commerce/elsie 1.0.0-alpha1

package/config/storybook/components/OptionsTable/OptionsTable.module.css

@@ -0,0 +1,95 @@
+.optionsTable {
+  margin-left: -1.25rem;
+  margin-right: -1.25rem;
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 1rem;
+  mask-image: linear-gradient(
+    transparent 0.8em,
+    white 1.5em,
+    white calc(100% - 1.5em),
+    transparent calc(100% - 0.8em)
+  );
+}
+
+.optionsTable::-webkit-scrollbar {
+  width: 0;
+}
+
+.table {
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  line-height: 1.25rem;
+  width: 100%;
+}
+
+.tableHeader {
+  border-top: 0 none transparent;
+  border-bottom: 1px solid rgb(220, 220, 220);
+  padding: 1rem 0;
+  text-align: left;
+}
+
+.headerRow {
+  border-top: 0 none transparent;
+  border-bottom: 1px solid rgb(220, 220, 220);
+  padding: 1rem 0;
+  text-align: left;
+}
+
+.headerCell {
+  border: none;
+  padding: 0.5rem 0;
+  font-weight: 600;
+  color: #222;
+}
+
+.body {
+  vertical-align: baseline;
+  color: rgb(17 24 39);
+}
+
+.row {
+  border-bottom: 1px solid rgb(135, 29, 29);
+}
+
+.cell {
+  padding: 0.5rem 0 0.5rem 0;
+  line-height: 1.5rem;
+  font-family: inherit;
+  border-bottom: 1px solid rgb(220, 220, 220);
+}
+
+.codeCell {
+  border: none;
+  white-space: pre;
+  padding: 0.5rem 0 0.5rem 0;
+  line-height: 1.5rem;
+  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 0.75rem;
+  color: rgb(0, 93, 160);
+  border-bottom: 1px solid rgb(220, 220, 220);
+}
+
+.compactCell {
+  padding: 0;
+  border: none;
+  line-height: 1.5rem;
+  font-family: inherit;
+  border-bottom: 1px solid rgb(220, 220, 220);
+}
+
+.compactCodeCell {
+  border: none;
+  white-space: pre;
+  padding: 0;
+  line-height: 1.5rem;
+  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-size: 0.75rem;
+  color: rgb(0, 93, 160);
+  border-bottom: 1px solid rgb(220, 220, 220);
+}

package/config/storybook/components/OptionsTable/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/OptionsTable/OptionsTable';

package/config/storybook/components/Panel/Panel.module.css

@@ -0,0 +1,47 @@
+.panel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #d5d5d5;
+  border-radius: 0.25rem;
+  padding: 1rem;
+  width: 100%;
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  width: 100%;
+  height: 100%;
+  min-height: 130px;
+}
+
+.panelHeader img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.panelContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.panelContent h3 {
+  margin: 1rem 0 0 0;
+}
+
+.panelFooter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.panelFooter p:last-child {
+  margin: 0;
+}

package/config/storybook/components/Panel/Panel.tsx

@@ -0,0 +1,37 @@
+import { FunctionComponent, toChildArray } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import styles from './Panel.module.css';
+
+export interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  header?: boolean;
+  footer?: boolean;
+}
+
+export const Panel: FunctionComponent<PanelProps> = ({
+  header,
+  footer,
+  children,
+}) => {
+  const hasHeader = Boolean(header);
+  const hasFooter = Boolean(footer);
+  const childrenArray = toChildArray(children);
+  const firstChild = childrenArray[0];
+  const lastChild = childrenArray.slice(-1)[0];
+
+  const content =
+    hasHeader && !hasFooter
+      ? childrenArray.slice(1)
+      : !hasHeader && hasFooter
+      ? childrenArray.slice(0, -1)
+      : hasHeader && hasFooter
+      ? childrenArray.slice(1, -1)
+      : childrenArray;
+
+  return (
+    <div className={`${styles.panel}`}>
+      {hasHeader && <div className={styles.panelHeader}>{firstChild}</div>}
+      <div className={styles.panelContent}>{content}</div>
+      {hasFooter && <div className={styles.panelFooter}>{lastChild}</div>}
+    </div>
+  );
+};

package/config/storybook/components/Panel/index.ts

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/Panel/Panel';

package/config/storybook/components/Screenshot/Screenshot.jsx

@@ -0,0 +1,14 @@
+import styles from './Screenshot.module.css';
+
+export function Screenshot({ src, alt }) {
+  const image = {
+    src,
+    alt,
+  };
+
+  return (
+    <div className={styles.screenshotContainer}>
+      <img src={image.src} alt={image.alt} className={styles.image} />
+    </div>
+  );
+}

package/config/storybook/components/Screenshot/Screenshot.module.css

@@ -0,0 +1,19 @@
+.screenshotContainer {
+  margin-bottom: 24px;
+  margin-top: 6px;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid rgb(234, 237, 242);
+  background-color: rgb(250, 250, 252);
+}
+
+.image {
+  user-select: none;
+  background-color: white;
+  outline-width: 1px;
+  outline-color: rgb(156, 163, 175);
+  width: 100%;
+  object-fit: cover;
+}

package/config/storybook/components/Screenshot/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/Screenshot/Screenshot';

package/config/storybook/components/Steps/Steps.jsx

@@ -0,0 +1,12 @@
+import { Unstyled } from '@storybook/blocks';
+import styles from './Steps.module.css';
+
+export function Steps({ children }) {
+  return (
+    <Unstyled>
+      <div className={`${styles.stepsContainer} ${styles.steps}`}>
+        {children}
+      </div>
+    </Unstyled>
+  );
+}

package/config/storybook/components/Steps/Steps.module.css

@@ -0,0 +1,34 @@
+.stepsContainer {
+  counter-reset: step;
+  padding-left: 1.5rem;
+  margin-left: 0.75rem !important;
+  margin-bottom: 3rem;
+  border-left: 1px solid rgba(229, 231, 235);
+  overflow-wrap: break-word;
+  /* border-color: rgba(229,231,235);
+  border-left-width: 1px; */
+}
+
+.steps h3 {
+  counter-increment: step;
+  color: rgba(15, 23, 42);
+  letter-spacing: -0.015em;
+  margin: 2rem 0 0 0;
+}
+
+.steps h3::before {
+  display: inline-block;
+  border: 6px solid;
+  border-color: rgba(255, 255, 255);
+  background-color: rgba(243, 244, 246);
+  text-align: center;
+  color: rgba(122, 122, 122);
+  content: counter(step);
+  border-radius: 9999px;
+  margin: 0 0 0 -44px;
+  font-size: 1rem;
+  font-weight: 400;
+  height: 26px;
+  width: 26px;
+  line-height: 1.5rem;
+}

package/config/storybook/components/Steps/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/Steps/Steps';

package/config/storybook/components/StoryWrapper/StoryWrapper.jsx

@@ -0,0 +1,9 @@
+import styles from './StoryWrapper.module.css';
+
+export function StoryWrapper({ direction = 'row', children }) {
+  const root = document.documentElement;
+
+  root.style.setProperty('--flex-direction', direction);
+
+  return <div className={`${styles.flexItems}`}>{children}</div>;
+}

package/config/storybook/components/StoryWrapper/StoryWrapper.module.css

@@ -0,0 +1,13 @@
+:root {
+  --flex-direction: row;
+}
+
+.flexItems {
+  display: flex;
+  flex-direction: var(--flex-direction);
+  gap: 2rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+  background-color: #f5f5f5;
+  padding: 1rem;
+}

package/config/storybook/components/StoryWrapper/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/StoryWrapper/StoryWrapper';

package/config/storybook/components/Summary/Summary.jsx

@@ -0,0 +1,10 @@
+import { Unstyled } from '@storybook/blocks';
+import styles from './Summary.module.css';
+
+export function Summary({ children }) {
+  return (
+    <Unstyled>
+      <div className={`${styles.summary}`}>{children}</div>
+    </Unstyled>
+  );
+}

package/config/storybook/components/Summary/Summary.module.css

@@ -0,0 +1,11 @@
+div.summary {
+  font-weight: 400;
+  margin: 0 0 1rem 0;
+  color: #6d6d6d;
+  font-size: 1.3rem;
+  line-height: 1.8rem;
+}
+
+div.summary strong {
+  color: #222222;
+}

package/config/storybook/components/Summary/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/Summary/Summary';

package/config/storybook/components/Variants/Variants.js

@@ -0,0 +1,48 @@
+import { useState } from 'preact/hooks';
+import { useOf, Story, Source } from '@storybook/blocks';
+import './docs.css';
+
+export const Variants = ({ of, storyOrder = [] }) => {
+  const info = useOf(of || 'story', ['story', 'meta', 'component']);
+  const stories = Object.values(info.csfFile.stories).map(
+    (story) => story.moduleExport
+  );
+  const [bgColor, setBgColor] = useState('#F5F5F5');
+  const toggleBgColor = () => {
+    setBgColor((prevColor) =>
+      prevColor === '#F5F5F5' ? '#222222' : '#F5F5F5'
+    );
+  };
+
+  // Sort stories by custom order
+  const sortedStories = Object.values(stories).sort((a, b) => {
+    const indexA = storyOrder.indexOf(a);
+    const indexB = storyOrder.indexOf(b);
+    if (indexA === -1 || indexB === -1) {
+      return 0; // do not change order if story name is not in customOrder
+    }
+    return indexA - indexB;
+  });
+
+  return (
+    <div>
+      <button onClick={toggleBgColor}>Toggle Background Color</button>
+      <div className="stories">
+        {sortedStories.map((story, index) => (
+          <div key={index} className="story">
+            <div className="story__item story__item--left">
+              <h3 className="docs__header3">{story.name}</h3>
+              <p className="docs__paragraph">
+                {story.parameters.docs.description || `Add description to ${story.name}.stories.tsx.`}
+              </p>
+            </div>
+            <div className="story__item story__item--right" style={{ backgroundColor: bgColor }}>
+              <Story of={story} />
+              <Source of={story} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/config/storybook/components/Variants/docs.css

@@ -0,0 +1,39 @@
+.stories {
+  display: flex;
+  flex-direction: column;
+}
+
+.stories .story {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #ddd;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.story__item {
+  min-height: 0;
+}
+
+.story__item--left {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  flex-basis: 30%;
+}
+
+.story__item--right {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  flex-basis: 70%;
+}
+
+.stories .docs__header3.docs__header3 {
+  margin-top: 4px;
+}
+
+.stories .docs__paragraph.docs__paragraph {
+  margin-top: 0;
+  font-size: 1rem;
+}

package/config/storybook/components/Variants/index.js

@@ -0,0 +1 @@
+export * from '@adobe/elsie/config/storybook/components/Variants/Variants';

package/config/storybook/components/video/index.jsx

@@ -0,0 +1,19 @@
+export default function Video({ src }) {
+  return (
+    <video
+      muted
+      autoPlay
+      playsInline
+      loop
+      controls
+      style={{
+        marginTop: '6px',
+        borderRadius: '0.5rem',
+        border: '1px solid',
+        borderColor: 'dark:border-zinc-800',
+      }}
+    >
+      <source src={src} type="video/mp4" />
+    </video>
+  )
+}

package/config/storybook/manager.js

@@ -0,0 +1,14 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theming/theme';
+import './theming/manager.css';
+
+addons.setConfig({
+  theme,
+  sidebar: {
+    filters: {
+      patterns: (item) => {
+        return !item.tags.includes('isHidden');
+      },
+    },
+  },
+});

package/config/storybook/preview.jsx

@@ -0,0 +1,79 @@
+import { UIProvider } from '../../src/components';
+import {
+  DocsContainer,
+  Title,
+  Canvas,
+  Stories,
+  Unstyled,
+  Description,
+  Controls,
+} from '@storybook/blocks';
+import './theming/preview.css';
+import { useEffect, useState } from 'preact/hooks';
+
+export const parameters = {
+  docs: {
+    container: (props) => (
+      <div className="dropin-design">
+        <DocsContainer {...props} />
+      </div>
+    ),
+    page: () => (
+      <Unstyled>
+        <Title />
+        <Description />
+        <Canvas sourceState="none" />
+        <Controls sort="requiredFirst" />
+        <Stories title="Usage" />
+      </Unstyled>
+    ),
+    canvas: {
+      sourceState: 'none',
+    },
+    source: {
+      language: 'tsx',
+      type: 'auto',
+      dark: false,
+      format: true,
+    },
+  },
+  layout: 'centered',
+  actions: { argTypesRegex: '^on.*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => {
+    return (
+      <div className="dropin-design">
+        <UIProvider>
+          <Story />
+        </UIProvider>
+      </div>
+    );
+  },
+  // This is a workaround for the fact that the `initialData` is not passed to the
+  // component when it is rendered on Storybook.
+  (Story, story) => {
+    const [initialData, setInitialData] = useState();
+    const [loaded, setLoaded] = useState(!story.component.getInitialData);
+
+    useEffect(() => {
+      if (loaded) return;
+
+      story.component.getInitialData?.(story.args).then((_data) => {
+        setInitialData(_data);
+        setLoaded(true);
+      });
+    }, [initialData, loaded, story]);
+
+    story.args.initialData = initialData;
+
+    return loaded ? Story() : null;
+  },
+];

package/config/storybook/theming/fonts.css

@@ -0,0 +1,59 @@
+/* Light */
+@font-face {
+  font-family: 'adobe-clean';
+  src: local('Adobe Clean Light'), local('AdobeClean-Light'),
+    url('https://use.typekit.net/af/40207f/0000000000000000000176ff/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/40207f/0000000000000000000176ff/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/40207f/0000000000000000000176ff/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3')
+      format('opentype');
+  font-display: swap;
+  font-style: normal;
+  font-weight: 300;
+}
+
+/* Normal */
+@font-face {
+  font-family: 'adobe-clean';
+  src: local('Adobe Clean'), local('AdobeClean-Regular'),
+    url('https://use.typekit.net/af/cb695f/000000000000000000017701/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/cb695f/000000000000000000017701/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/cb695f/000000000000000000017701/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3')
+      format('opentype');
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+}
+
+/* Bold */
+@font-face {
+  font-family: 'adobe-clean';
+  src: local('Adobe Clean Bold'), local('AdobeClean-Bold'),
+    url('https://use.typekit.net/af/eaf09c/000000000000000000017703/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/eaf09c/000000000000000000017703/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/eaf09c/000000000000000000017703/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
+      format('opentype');
+  font-display: swap;
+  font-style: normal;
+  font-weight: 700;
+}
+
+/* Italic */
+@font-face {
+  font-family: 'adobe-clean';
+  src: local('Adobe Clean Italic'), local('AdobeClean-It'),
+    url('https://use.typekit.net/af/74ffb1/000000000000000000017702/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/74ffb1/000000000000000000017702/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/74ffb1/000000000000000000017702/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3')
+      format('opentype');
+  font-display: swap;
+  font-style: italic;
+  font-weight: 400;
+}

package/config/storybook/theming/logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="161px" height="36px" viewBox="0 0 161 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logo</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo" transform="translate(0.6, 0.7)" fill-rule="nonzero">
+            <path d="M25.4683792,0 L40.1793563,0 L40.1793563,35 L25.4683792,0 Z M14.8948643,0 L3.21964677e-15,0 L3.21964677e-15,35 L14.8948643,0 Z M20.0896782,12.9166667 L29.6058415,35 L23.399648,35 L20.6413398,28.0092593 L13.6076539,28.0092593 L20.0896782,12.9166667 Z" id="Shape" fill="#FA0F00"></path>
+            <path d="M57.168696,16.5833333 C57.168696,16.7388889 57.212829,16.8055556 57.3010948,16.8055556 C58.0072217,16.85 60.2138683,16.85 61.670255,16.85 C65.4215542,16.85 69.4817839,14.6055556 69.4817839,9.29444444 C69.4817839,5.18333333 66.9000074,2.20555556 61.6261221,2.20555556 C59.6622066,2.20555556 57.9851553,2.25 57.3231613,2.27222222 C57.1907625,2.29444444 57.168696,2.33888889 57.168696,2.45 L57.168696,16.5833333 Z M60.2359348,4.91666667 C60.721397,4.89444444 61.0744605,4.89444444 61.6040556,4.89444444 C64.4285632,4.89444444 66.3262793,6.36111111 66.3262793,9.33888889 C66.3262793,12.4277778 64.4285632,14.1833333 61.5378562,14.1833333 C61.0303275,14.1833333 60.6772641,14.1611111 60.2359348,14.1388889 L60.2359348,4.91666667 Z" id="Shape" fill="#000000"></path>
+            <path d="M71.0025311,5.76111111 C70.8921988,5.76111111 70.8701324,5.80555556 70.8701324,5.91666667 C70.9583982,6.69444444 70.9804647,7.98333333 70.9804647,8.93888889 L70.9804647,16.6055556 C70.9804647,16.7388889 71.0245976,16.8055556 71.2011293,16.8055556 L73.8491052,16.8055556 C74.0035705,16.8055556 74.0477034,16.7611111 74.0477034,16.6277778 L74.0697699,9.56111111 C74.5331657,9.02777778 75.8130207,8.53888889 77.4018062,8.60555556 C77.5562715,8.60555556 77.6004044,8.56111111 77.6004044,8.45 L77.6004044,5.71666667 C77.6004044,5.58333333 77.5562715,5.53888889 77.4238727,5.53888889 C75.8571536,5.53888889 74.643498,6.33888889 73.9153046,7.20555556 C73.8932382,6.71666667 73.7829058,6.25 73.6725735,5.96111111 C73.6284406,5.82777778 73.5622412,5.76111111 73.4077759,5.76111111 L71.0025311,5.76111111 Z" id="Path" fill="#000000"></path>
+            <path d="M83.4682454,5.53888889 C80.0700097,5.53888889 77.9736954,8.13888889 77.9736954,11.2944444 C77.9736954,14.1611111 79.6507468,17.0277778 83.4241125,17.0277778 C86.6016835,17.0277778 88.852463,14.7166667 88.852463,11.2277778 C88.852463,8.22777778 87.0209464,5.53888889 83.4682454,5.53888889 Z M83.3358466,8.11666667 C85.012898,8.11666667 85.7190249,9.56111111 85.7190249,11.2944444 C85.7190249,13.3388889 84.7481004,14.45 83.4682454,14.45 C81.9897922,14.45 81.0850671,13.2055556 81.0850671,11.25 C81.0850671,9.27222222 82.0559916,8.11666667 83.3358466,8.11666667 Z" id="Shape" fill="#000000"></path>
+            <path d="M94.8968358,5.53888889 C92.9770532,5.53888889 91.3882677,6.07222222 90.262878,6.45 C90.1746121,6.47222222 90.1746121,6.53888889 90.1746121,6.56111111 C90.1966786,6.89444444 90.2408115,7.71666667 90.2408115,8.02777778 L90.2408115,21.0944444 C90.2408115,21.2055556 90.262878,21.25 90.3952768,21.25 C90.5276755,21.2277778 92.2267934,21.0722222 93.1315185,20.9833333 C93.2859838,20.9611111 93.3080502,20.8944444 93.3080502,20.7833333 L93.3080502,17.0055556 C93.4625155,17.0277778 93.6169807,17.0277778 93.7273131,17.0277778 C97.1696817,17.0277778 100.479652,15.0055556 100.479652,10.9388889 C100.479652,8.16111111 98.7364008,5.53888889 94.8968358,5.53888889 Z M94.6320382,8.16111111 C96.3532225,8.16111111 97.324147,9.22777778 97.324147,11.1388889 C97.324147,13.5611111 95.5367633,14.45 94.0141771,14.45 C93.8155789,14.45 93.484582,14.45 93.3080502,14.4055556 L93.3080502,8.33888889 C93.7493795,8.20555556 94.1245095,8.16111111 94.6320382,8.16111111 Z" id="Shape" fill="#000000"></path>
+            <path d="M101.868,16.6055556 C101.868,16.7388889 101.934199,16.8055556 102.088665,16.8055556 L104.736641,16.8055556 C104.913172,16.8055556 104.935239,16.7388889 104.935239,16.6055556 L104.935239,5.93888889 C104.935239,5.80555556 104.891106,5.76111111 104.758707,5.76111111 L102.044532,5.76111111 C101.912133,5.76111111 101.868,5.82777778 101.868,5.93888889 L101.868,16.6055556 Z M103.412653,4.58333333 C104.449777,4.58333333 105.133837,3.89444444 105.133837,2.85 C105.133837,1.85 104.493909,1.13888889 103.434719,1.13888889 C102.441728,1.13888889 101.713535,1.85 101.713535,2.85 C101.713535,3.89444444 102.375529,4.58333333 103.412653,4.58333333 Z" id="Shape" fill="#000000"></path>
+            <path d="M106.897315,16.6055556 C106.897315,16.7388889 106.941448,16.8055556 107.095914,16.8055556 L109.765956,16.8055556 C109.898355,16.8055556 109.964554,16.7388889 109.964554,16.6277778 L109.964554,8.91666667 C110.42795,8.49444444 111.045811,8.22777778 111.796071,8.22777778 C112.943527,8.22777778 113.517255,8.93888889 113.517255,10.2722222 L113.517255,16.6055556 C113.517255,16.7388889 113.583454,16.8055556 113.73792,16.8055556 L116.385896,16.8055556 C116.540361,16.8055556 116.584494,16.7388889 116.584494,16.6055556 L116.584494,10.0055556 C116.584494,6.42777778 114.576445,5.53888889 112.877328,5.53888889 C111.707805,5.53888889 110.670681,5.91666667 109.743889,6.67222222 C109.699757,6.36111111 109.655624,6.13888889 109.567358,5.93888889 C109.523225,5.82777778 109.457025,5.76111111 109.280494,5.76111111 L106.963515,5.76111111 C106.831116,5.76111111 106.786983,5.82777778 106.809049,5.93888889 C106.853182,6.42777778 106.897315,7.58333333 106.897315,8.33888889 L106.897315,16.6055556 Z" id="Path" fill="#000000"></path>
+            <path d="M126.576925,17.0277778 C129.975161,17.0277778 132.137674,15.3388889 132.137674,12.65 C132.137674,10.85 131.321215,9.45 128.386375,8.22777778 L127.569916,7.89444444 C125.914931,7.22777778 125.451535,6.76111111 125.451535,6.07222222 C125.451535,5.33888889 126.04733,4.76111111 127.746448,4.76111111 C129.048369,4.76111111 130.262025,4.98333333 131.144683,5.49444444 C131.277082,5.58333333 131.343282,5.47222222 131.343282,5.38333333 L131.343282,2.89444444 C131.343282,2.76111111 131.321215,2.67222222 131.210883,2.60555556 C130.41649,2.20555556 129.158702,2.02777778 127.768514,2.02777778 C124.259946,2.02777778 122.450496,3.93888889 122.450496,6.33888889 C122.450496,8.07222222 123.200756,9.45 125.914931,10.6055556 L127.018254,11.0722222 C128.518774,11.7166667 129.026303,12.2277778 129.026303,12.9388889 C129.026303,13.7166667 128.364309,14.2944444 126.687257,14.2944444 C125.363269,14.2944444 123.906883,13.9166667 122.693227,13.1388889 C122.604961,13.0722222 122.516695,13.1388889 122.516695,13.25 L122.516695,15.8944444 C122.516695,16.0722222 122.560828,16.1833333 122.671161,16.25 C123.597952,16.7388889 124.944007,17.0277778 126.576925,17.0277778 Z" id="Path" fill="#000000"></path>
+            <path d="M133.85702,16.5833333 C133.85702,16.7388889 133.901153,16.8055556 133.989419,16.8055556 C134.695546,16.85 136.902192,16.85 138.358579,16.85 C142.109878,16.85 146.170108,14.6055556 146.170108,9.29444444 C146.170108,5.18333333 143.588331,2.20555556 138.314446,2.20555556 C136.35053,2.20555556 134.673479,2.25 134.011485,2.27222222 C133.879086,2.29444444 133.85702,2.33888889 133.85702,2.45 L133.85702,16.5833333 Z M136.924259,4.91666667 C137.409721,4.89444444 137.762784,4.89444444 138.292379,4.89444444 C141.116887,4.89444444 143.014603,6.36111111 143.014603,9.33888889 C143.014603,12.4277778 141.116887,14.1833333 138.22618,14.1833333 C137.718651,14.1833333 137.365588,14.1611111 136.924259,14.1388889 L136.924259,4.91666667 Z" id="Shape" fill="#000000"></path>
+            <path d="M153.913598,9.29444444 C153.869465,9.20555556 153.869465,9.16111111 153.913598,9.07222222 L159.562614,2.49444444 C159.650879,2.38333333 159.628813,2.25 159.408148,2.25 L156.495375,2.25 C156.34091,2.25 156.27471,2.29444444 156.208511,2.40555556 L151.000825,8.67222222 L151.000825,2.45 C151.000825,2.29444444 150.934625,2.25 150.802227,2.25 L148.110118,2.25 C147.977719,2.25 147.933586,2.29444444 147.933586,2.42777778 L147.933586,16.5833333 C147.933586,16.7611111 147.999785,16.8055556 148.132184,16.8055556 L150.78016,16.8055556 C150.934625,16.8055556 151.000825,16.7388889 151.000825,16.6055556 L151.000825,10.3611111 L156.208511,16.6277778 C156.34091,16.7611111 156.429175,16.8055556 156.627774,16.8055556 L159.849478,16.8055556 C159.981876,16.8055556 160.048076,16.6722222 159.95981,16.5388889 L153.913598,9.29444444 Z" id="Path" fill="#000000"></path>
+            <path d="M61.4183295,32.5462963 L62.1998502,34.8148148 L62.2917938,34.8611111 L63.1652581,34.8611111 C63.2112299,34.8611111 63.2112299,34.8611111 63.1652581,34.7685185 L60.5908371,27.5 L59.3955702,27.5 C59.3955702,27.8240741 59.3495984,27.8703704 59.3036266,27.962963 L56.867121,34.7685185 C56.867121,34.8148148 56.867121,34.8611111 56.9590646,34.8611111 L57.6946135,34.8611111 L57.7865571,34.8148148 L58.5680777,32.5 L61.4183295,32.5 L61.4183295,32.5462963 Z M58.8439085,31.6666667 C59.3036266,30.462963 59.7633446,28.9351852 59.9932036,28.2407407 L61.1424987,31.6666667 L58.8439085,31.6666667 Z M65.0960738,34.7685185 L65.0960738,34.8611111 L66.934946,34.8611111 C68.8197899,34.8611111 70.9344929,33.8425926 70.9344929,31.0185185 C70.9344929,28.8888889 69.5553388,27.4537037 67.0728614,27.4537037 C66.4133374,27.4699587 65.7542486,27.5008304 65.0960738,27.5462963 L65.0960738,34.7685185 L65.0960738,34.7685185 Z M66.0155099,28.287037 L67.0728614,28.287037 C68.7278463,28.287037 70.0150568,29.212963 70.0150568,31.0648148 C70.0150568,33.0555556 68.7278463,34.0740741 66.934946,34.0740741 L66.0155099,34.0740741 L66.0155099,28.2407407 L66.0155099,28.287037 Z M76.1752785,27.3611111 C74.2444627,27.3611111 72.8193368,28.8888889 72.8193368,31.1574074 C72.8193368,33.3333333 74.0605755,34.9537037 76.2212503,34.9537037 C78.1060942,34.9537037 79.5312201,33.5648148 79.5312201,31.1111111 C79.5312201,29.0277778 78.2899814,27.3611111 76.1752785,27.3611111 L76.1752785,27.3611111 Z M73.7847447,31.1574074 C73.7847447,29.212963 74.8420962,28.1944444 76.1752785,28.1944444 C77.6004044,28.1944444 78.5658123,29.3981481 78.5658123,31.1574074 C78.5658123,32.9166667 77.692348,34.1203704 76.2212503,34.1203704 C74.6122372,34.1203704 73.7847447,32.7314815 73.7847447,31.1574074 L73.7847447,31.1574074 Z M81.7378667,34.7685185 C82.3810537,34.8076704 83.0247116,34.8385372 83.6686825,34.8611111 C85.3696392,34.8611111 86.6568497,34.1666667 86.6568497,32.6851852 C86.6869875,31.8866642 86.2051043,31.1587372 85.4615828,30.8796296 C85.9551732,30.5303058 86.247224,29.9593821 86.2431035,29.3518519 C86.2431035,28.7037037 85.9672726,27.4537037 83.7146543,27.4537037 L81.8298103,27.4537037 C81.7378667,27.4537037 81.7378667,27.5 81.7378667,27.5462963 L81.7378667,34.7685185 L81.7378667,34.7685185 Z M82.6573028,31.3888889 L83.8065979,31.3888889 L84.6800621,31.4351852 C85.3696392,31.6203704 85.6914418,32.0833333 85.6914418,32.6851852 C85.6914418,33.6111111 84.8639494,34.0740741 83.6227107,34.0740741 L82.7032746,34.0740741 L82.7032746,31.3888889 L82.6573028,31.3888889 Z M82.6573028,28.287037 L83.6686825,28.287037 C84.7260339,28.287037 85.3696392,28.6574074 85.3696392,29.4907407 C85.3696392,30.0462963 85.0478366,30.4166667 84.7260339,30.6018519 L83.7146543,30.5555556 L82.6573028,30.5555556 L82.6573028,28.2407407 L82.6573028,28.287037 Z M93.368733,34.0740741 L93.2767894,34.0277778 L89.7369605,34.0277778 L89.7369605,31.4814815 L92.7710996,31.4814815 L92.8170714,31.4351852 L92.8170714,30.7407407 L92.7710996,30.6481481 L89.7369605,30.6481481 L89.7369605,28.3333333 L93.0929022,28.3333333 L93.138874,28.2407407 L93.0469304,27.5462963 C93.0469304,27.4537037 93.0469304,27.4537037 92.9549868,27.4537037 L88.9094681,27.4537037 C88.8634963,27.4537037 88.8175245,27.4537037 88.8175245,27.5462963 L88.8175245,34.7685185 C88.8175245,34.8611111 88.8175245,34.8611111 88.9094681,34.8611111 L93.138874,34.8611111 L93.2308176,34.8148148 L93.368733,34.0740741 L93.368733,34.0740741 Z M103.712389,33.9814815 C103.712389,33.8888889 103.712389,33.8888889 103.620445,33.9351852 C103.206699,34.0740741 102.838925,34.1203704 102.241291,34.1203704 C101.091996,34.1203704 99.3450675,33.4722222 99.3450675,31.1111111 C99.3450675,29.3518519 100.540334,28.1944444 102.287263,28.1944444 C102.761696,28.1834958 103.232661,28.2783537 103.666417,28.4722222 C103.712389,28.4722222 103.758361,28.4722222 103.758361,28.3796296 L103.758361,27.5462963 C103.48253,27.4537037 103.022812,27.3611111 102.287263,27.3611111 C99.9427009,27.3611111 98.3796596,28.8888889 98.3796596,31.1574074 C98.3796596,33.8888889 100.310475,34.9537037 102.149347,34.9537037 C102.792953,34.9537037 103.298643,34.9537037 103.666417,34.7685185 L103.666417,33.9351852 L103.712389,33.9814815 Z M108.677344,27.3611111 C106.746528,27.3611111 105.367374,28.8888889 105.367374,31.1574074 C105.367374,33.3333333 106.608612,34.9537037 108.723315,34.9537037 C110.654131,34.9537037 112.033285,33.5648148 112.033285,31.1111111 C112.033285,29.0277778 110.792047,27.3611111 108.677344,27.3611111 L108.677344,27.3611111 Z M106.28681,31.1574074 C106.28681,29.212963 107.344161,28.1944444 108.677344,28.1944444 C110.148441,28.1944444 111.067877,29.3981481 111.067877,31.1574074 C111.067877,32.9166667 110.194413,34.1203704 108.769287,34.1203704 C107.160274,34.1203704 106.28681,32.7314815 106.28681,31.1574074 L106.28681,31.1574074 Z M114.607706,27.5462963 L114.147988,34.8148148 L114.19396,34.8611111 L114.975481,34.8611111 L115.021452,34.8148148 L115.389227,28.1018519 C116.078778,30.3647658 116.79907,32.6180636 117.549902,34.8611111 L118.331422,34.8611111 L118.423366,34.8148148 C118.883084,33.3796296 120.354182,29.1203704 120.630013,28.1018519 C120.71583,30.3559221 120.823103,32.609112 120.951815,34.8611111 L121.779308,34.8611111 L121.825279,34.8148148 L121.457505,27.5 L120.124323,27.5 L118.00962,33.6574074 L116.032832,27.5462963 C116.032832,27.5 116.032832,27.4537037 115.940889,27.4537037 L114.653678,27.4537037 L114.561734,27.5462963 L114.607706,27.5462963 Z M124.721503,27.5462963 L124.261785,34.8148148 L124.261785,34.8611111 L125.043306,34.8611111 L125.135249,34.8148148 C125.227193,32.4537037 125.457052,29.0740741 125.457052,28.1018519 C126.146625,30.3647589 126.866917,32.6180563 127.617727,34.8611111 L128.399247,34.8611111 L128.491191,34.8148148 C128.950909,33.3796296 130.467978,29.1203704 130.743809,28.1018519 C130.81424,30.3557765 130.906187,32.608967 131.01964,34.8611111 L131.847133,34.8611111 C131.893104,34.8611111 131.939076,34.8611111 131.893104,34.8148148 L131.52533,27.5 L130.192148,27.5 L128.077445,33.6574074 C127.847586,32.7314815 126.514403,28.7037037 126.100657,27.5462963 C126.100657,27.5 126.100657,27.4537037 126.008714,27.4537037 L124.813447,27.4537037 C124.767475,27.4537037 124.721503,27.4537037 124.721503,27.5462963 L124.721503,27.5462963 Z M138.972762,34.0740741 L138.92679,34.0277778 L135.34099,34.0277778 L135.34099,31.4814815 L138.329157,31.4814815 L138.375129,31.4351852 L138.375129,30.7407407 L138.329157,30.6481481 L135.34099,30.6481481 L135.34099,28.3333333 L138.65096,28.3333333 L138.696931,28.2407407 L138.604988,27.5462963 L138.559016,27.4537037 L134.467525,27.4537037 L134.421554,27.5462963 L134.421554,34.7685185 C134.421554,34.8611111 134.421554,34.8611111 134.513497,34.8611111 L138.696931,34.8611111 L138.788875,34.8148148 L138.92679,34.0740741 L138.972762,34.0740741 Z M141.777042,34.8611111 L141.868986,34.8148148 L141.868986,31.8055556 L143.110224,31.8055556 C143.24814,31.8055556 143.294112,31.8518519 143.386055,31.9907407 L145.224927,34.8148148 L145.316871,34.8611111 L146.236307,34.8611111 C145.552479,33.751828 144.847446,32.6559448 144.121604,31.5740741 C144.949097,31.2962963 145.684645,30.6481481 145.684645,29.5833333 C145.684645,28.1481481 144.581322,27.4537037 142.926337,27.4537037 C142.266877,27.4717315 141.607825,27.5026014 140.94955,27.5462963 L140.94955,34.8611111 L140.995521,34.9074074 L141.777042,34.9074074 L141.777042,34.8611111 Z M141.868986,31.0185185 L141.868986,28.287037 L142.926337,28.287037 C144.121604,28.287037 144.765209,28.75 144.765209,29.6296296 C144.765209,30.462963 144.121604,31.0185185 143.064253,31.0185185 L141.868986,31.0185185 Z M152.994162,33.9814815 C152.994162,33.8888889 152.994162,33.8888889 152.902219,33.9351852 C152.456177,34.0748725 151.989867,34.137486 151.523064,34.1203704 C150.327798,34.1203704 148.626841,33.4722222 148.626841,31.1111111 C148.626841,29.3518519 149.776136,28.1944444 151.523064,28.1944444 C152.012914,28.1765243 152.500356,28.2715337 152.94819,28.4722222 C152.994162,28.4722222 153.040134,28.4722222 153.040134,28.3796296 L153.040134,27.6388889 L152.994162,27.5462963 C152.718331,27.4537037 152.304585,27.3611111 151.569036,27.3611111 C149.178503,27.3611111 147.661433,28.8888889 147.661433,31.1574074 C147.661433,33.8888889 149.546277,34.9537037 151.431121,34.9537037 C152.028754,34.9537037 152.534444,34.9537037 152.902219,34.7685185 C152.94819,34.7685185 152.994162,34.7222222 152.994162,34.6296296 L152.994162,33.9814815 L152.994162,33.9814815 Z M159.614102,34.0740741 L159.614102,34.0277778 L156.028301,34.0277778 L156.028301,31.4814815 L159.016468,31.4814815 L159.108412,31.4351852 L159.108412,30.7407407 C159.108412,30.6944444 159.108412,30.6481481 159.016468,30.6481481 L156.028301,30.6481481 L156.028301,28.3333333 L159.338271,28.3333333 C159.430215,28.3333333 159.430215,28.287037 159.430215,28.2407407 L159.338271,27.5462963 C159.338271,27.4537037 159.338271,27.4537037 159.246327,27.4537037 L155.200809,27.4537037 C155.154837,27.4537037 155.108865,27.4537037 155.108865,27.5462963 L155.108865,34.7685185 C155.108865,34.8611111 155.108865,34.8611111 155.200809,34.8611111 L159.430215,34.8611111 L159.522158,34.8148148 L159.614102,34.0740741 L159.614102,34.0740741 Z" id="Shape" fill="#6E6E6E"></path>
+        </g>
+    </g>
+</svg>