@ilo-org/react 0.13.0 → 0.14.0

package/src/stories/Tag/Tag.stories.tsx

@@ -0,0 +1,130 @@
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Title,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Tag, TagSet } from "../../components/Tag";
+import { TagProps } from "../../components/Tag/Tag.props";
+import tagSetArgs from "../../components/Tag/TagSet.args";
+import tagArgs from "../../components/Tag/Tag.args";
+
+const themeDoc = `
+By changing the \`type\` prop you can set the which kind of tag to use.
+
+| Prop   |  Description  |
+|----------|-------------|
+| \`anochor\` | The tag is a link. Useful for taxonomies that have landing pages. |
+| \`button\` | The tag is a button. Useful for tags that are used to filter search results. |
+| \`display\` | The tag is static (not clickable). Useful for displaying non-actionable info. |
+`;
+
+const TagMeta: Meta<typeof Tag> = {
+  title: "Components/User Interface/Tag",
+  tags: ["autodocs"],
+  component: Tag,
+  argTypes: {
+    type: {
+      options: ["anchor", "button", "display"],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The tag component creates an anchor tag with a specific theme.
+          </Description>
+          <Primary />
+          <Subheading>Types of tags</Subheading>
+          <Description>{themeDoc}</Description>
+          <Stories title="Examples"></Stories>
+          <Subheading>Default props</Subheading>
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
+};
+
+export default TagMeta;
+
+const DisplayTagTemplate: StoryFn<TagProps> = (args) => (
+  <TagSet {...tagSetArgs.tag} {...args}>
+    <Tag {...tagArgs.tag} type="display">
+      Economy
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag2" type="display">
+      Trade
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag3" type="display">
+      Statistics
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag4" type="display">
+      Human rights
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag5" type="display">
+      Employment
+    </Tag>
+  </TagSet>
+);
+
+const AnchorTagTemplate: StoryFn<TagProps> = (args) => (
+  <TagSet {...tagSetArgs.tag} {...args}>
+    <Tag {...tagArgs.tag} url="https://www.google.com/" type="anchor">
+      Economy
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag2" url="https://www.google.com/" type="anchor">
+      Trade
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag3" url="https://www.google.com/" type="anchor">
+      Statistics
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag4" url="https://www.google.com/" type="anchor">
+      Human rights
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag5" url="https://www.google.com/" type="anchor">
+      Employment
+    </Tag>
+  </TagSet>
+);
+
+const ButtonTagTemplate: StoryFn<TagProps> = (args) => (
+  <TagSet {...tagSetArgs.buttonTag} {...args}>
+    <Tag {...tagArgs.tag} id="tag1" url="https://www.google.com/" type="button">
+      Economy
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag2" url="https://www.google.com/" type="button">
+      Trade
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag3" url="https://www.google.com/" type="button">
+      Statistics
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag4" url="https://www.google.com/" type="button">
+      Human rights
+    </Tag>
+    <Tag {...tagArgs.tag} id="tag5" url="https://www.google.com/" type="button">
+      Employment
+    </Tag>
+  </TagSet>
+);
+
+export const DisplayTag: StoryFn<TagProps> = DisplayTagTemplate.bind({});
+
+export const AnchorTag: StoryFn<TagProps> = AnchorTagTemplate.bind({});
+
+export const ButtonTag: StoryFn<TagProps> = ButtonTagTemplate.bind({});
+
+DisplayTag.args = tagSetArgs.tag;
+DisplayTag.storyName = "Display";
+
+AnchorTag.args = tagSetArgs.tag;
+AnchorTag.storyName = "Anchor";
+
+ButtonTag.args = tagSetArgs.buttonTag;
+ButtonTag.storyName = "Button";

package/src/stories/TextInput/TextInput.stories.tsx

@@ -0,0 +1,100 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TextInput, TextInputArgs } from "../../components/TextInput";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from "@storybook/blocks";
+import { labelledFormFieldArgTypes } from "../../types/forms.args";
+
+const TextInputMeta: Meta<typeof TextInput> = {
+  title: "Components/Forms/TextInput",
+  component: TextInput,
+  tags: ["autodocs"],
+  argTypes: {
+    pattern: {
+      description:
+        "Optional pattern attribute for phone numbers, zip codes, etc.",
+      control: "select",
+      options: ["email", "hidden", "password", "search", "tel", "text", "url"],
+
+      table: {
+        type: {
+          summary: "email | hidden | password | search | tel | text| url",
+        },
+      },
+    },
+    ...labelledFormFieldArgTypes("HTMLTextAreaElement"),
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The TextInput field provides a way for users with a single line of
+            text to enter into a form. Use this component for things like names,
+            email addresses, passwords and other short form fields.
+          </Description>
+          <Primary />
+          <ArgTypes of={TextInputMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default TextInputMeta;
+
+export const Basic: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.basic,
+};
+
+export const WithLabel: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.basic,
+  render: (props) => <TextInput {...props} />,
+};
+
+export const WithHelperText: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.basic,
+  render: (props) => <TextInput {...props} />,
+};
+
+export const Error: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.haserror,
+  render: (props) => <TextInput {...props} />,
+};
+
+export const Disabled: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.isdisabled,
+  render: (props) => <TextInput {...props} />,
+};
+
+export const WithToolTip: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.basic,
+  render: (props) => <TextInput {...props} />,
+};
+
+export const Email: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.email,
+  render: (props) => <TextInput {...props} />,
+};
+
+export const Telephone: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.telephone,
+  render: (props) => <TextInput {...props} />,
+};
+
+export const Password: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.password,
+  render: (props) => <TextInput {...props} />,
+};
+
+export const URL: StoryObj<typeof TextInput> = {
+  args: TextInputArgs.url,
+  render: (props) => <TextInput {...props} />,
+};

package/src/stories/Textarea/Textarea.stories.tsx

@@ -0,0 +1,147 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Textarea, TextareaArgs } from "../../components/Textarea";
+import {
+  ArgTypes,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from "@storybook/blocks";
+import { labelledFormFieldArgTypes } from "../../types/forms.args";
+
+const TextareaMeta: Meta<typeof Textarea> = {
+  title: "Components/Forms/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+  argTypes: {
+    autocorrect: {
+      description:
+        "Activate automatic spelling correction and processing of text substitutions",
+      control: {
+        type: "select",
+        options: ["on", "off"],
+      },
+      table: {
+        type: {
+          summary: "on | off",
+        },
+      },
+    },
+    form: {
+      description:
+        "The id of the form element the Textarea belongs to if it's not nested inside the form.",
+      control: {
+        type: "text",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    maxlength: {
+      description: "The maximum number of characters that the user can enter.",
+      control: {
+        type: "number",
+      },
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+    },
+    minlength: {
+      description: "The minimum number of characters that the user can enter.",
+      control: {
+        type: "number",
+      },
+      table: {
+        type: {
+          summary: "number",
+        },
+      },
+    },
+    placeholder: {
+      description: "The placeholder text for the textarea",
+      control: {
+        type: "text",
+      },
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    spellcheck: {
+      description:
+        "Specifies whether the textarea is subject to spellchecking by the underlying browser/OS",
+      control: {
+        type: "select",
+        options: [true, false, "default"],
+      },
+      table: {
+        type: {
+          summary: "true | false | 'default'",
+        },
+      },
+    },
+    wrap: {
+      description:
+        "Specifies how the text in a textarea is to be wrapped when submitted in a form",
+      control: {
+        type: "select",
+        options: ["hard", "soft", "off"],
+      },
+      table: {
+        type: {
+          summary: "'hard' | 'soft' | 'off'",
+        },
+      },
+    },
+    ...labelledFormFieldArgTypes("HTMLTextAreaElement"),
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Textarea field provides a way for users with a multiple lines of
+            text to enter into a form. Use this component for things like
+            comments, descriptions, and other long form fields.
+          </Description>
+          <Primary />
+          <Subheading>Accessibility</Subheading>
+          <Description>
+            The Textarea component must have an `id` prop to map a label to the
+            form element.
+          </Description>
+          <ArgTypes of={TextareaMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default TextareaMeta;
+
+export const Basic: StoryObj<typeof Textarea> = {
+  args: TextareaArgs.basic,
+};
+
+export const WithLabel: StoryObj<typeof Textarea> = {
+  args: TextareaArgs.basic,
+  render: (props) => <Textarea {...props} />,
+};
+
+export const WithError: StoryObj<typeof Textarea> = {
+  args: TextareaArgs.basic,
+  render: (props) => <Textarea {...props} error />,
+};
+
+export const disabled: StoryObj<typeof Textarea> = {
+  args: TextareaArgs.disabled,
+  render: (props) => <Textarea {...props} />,
+};

package/src/stories/Toggle/Toggle.stories.tsx

@@ -0,0 +1,99 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Toggle, ToggleArgs } from "../../components/Toggle";
+import {
+  ArgTypes,
+  Description,
+  Heading,
+  Primary,
+  Stories,
+  Title,
+} from "@storybook/blocks";
+import { labelledChoiceFieldArgTypes } from "../../types/forms.args";
+
+const ToggleMeta: Meta<typeof Toggle> = {
+  title: "Components/Forms/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+  argTypes: {
+    ...labelledChoiceFieldArgTypes("HTMLInputElement"),
+    size: {
+      description: "The size of the toggle",
+      control: "select",
+      options: ["small", "medium", "large"],
+      table: {
+        defaultValue: { summary: "medium" },
+        type: {
+          summary: "small | medium | large",
+        },
+      },
+    },
+    onClick: {
+      description: "The click event handler",
+      table: {
+        type: {
+          summary: "(event: React.MouseEventHandler<HTMLInputElement>) => any",
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The toggle component provides users with a switch they can use to
+            turn a single option on or off or alternate between two different
+            states.
+          </Description>
+          <Primary />
+          <Heading>Props</Heading>
+          <ArgTypes of={ToggleMeta} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+};
+
+export default ToggleMeta;
+
+export const Default: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Default,
+};
+
+export const DefaultChecked: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.DefaultChecked,
+};
+
+export const Disabled: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Disabled,
+};
+
+export const Helper: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Helper,
+};
+
+export const Tooltip: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Tooltip,
+};
+
+export const Error: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Error,
+};
+
+export const Controlled: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Controlled,
+};
+
+export const Small: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Small,
+};
+
+export const Medium: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Medium,
+};
+
+export const Large: StoryObj<typeof Toggle> = {
+  args: ToggleArgs.Large,
+};

package/src/stories/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,82 @@
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Title,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Tooltip } from "../../components/Tooltip";
+import { TooltipProps } from "../../components/Tooltip/Tooltip.props";
+import tooltipArgs from "../../components/Tooltip/Tooltip.args";
+
+const TooltipMeta: Meta<typeof Tooltip> = {
+  title: "Components/Feedback/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    icon: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+    theme: {
+      options: ["light", "dark"],
+      control: { type: "select" },
+    },
+    iconTheme: {
+      options: ["light", "dark"],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            Tooltips display informative text when a user hovers over, focus on,
+            or taps an element.
+          </Description>
+          <Primary />
+          <Stories title="Examples"></Stories>
+          <Subheading>Default props</Subheading>
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
+};
+
+export default TooltipMeta;
+
+/**
+ * Tooltip Template
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const TooltipTemplate: StoryFn<TooltipProps> = (args) => (
+  <Tooltip {...args}>Hover over this to see a tooltip</Tooltip>
+);
+
+/**
+ * Tooltip Instance
+ *
+ */
+export const Light: StoryFn<TooltipProps> = TooltipTemplate.bind({});
+
+export const Dark: StoryFn<TooltipProps> = TooltipTemplate.bind({});
+
+export const DarkIcon: StoryFn<TooltipProps> = TooltipTemplate.bind({});
+
+// enumerate the props for the tooltip
+Light.args = tooltipArgs.light;
+Light.storyName = "Light";
+
+Dark.args = tooltipArgs.dark;
+Dark.storyName = "Dark";
+
+DarkIcon.args = tooltipArgs.darkicon;
+DarkIcon.storyName = "Icon";

package/src/stories/Video/Video.stories.tsx

@@ -0,0 +1,71 @@
+import { StoryFn, Meta } from "@storybook/react";
+import {
+  Title,
+  Description,
+  Primary,
+  ArgsTable,
+  Subheading,
+} from "@storybook/addon-docs";
+import { Video } from "../../components/Video";
+import { VideoProps } from "../../components/Video/Video.props";
+import videoArgs from "../../components/Video/Video.args";
+
+/**
+ * Video Story
+ *
+ */
+const VideoMeta: Meta<typeof Video> = {
+  title: "Components/Media/Video",
+  tags: ["autodocs"],
+  component: Video,
+  argTypes: {},
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description>
+            The Video component displays a video, which can be either a media
+            file or an embed from a video hosting service like YouTube. It uses
+            [react-player](https://github.com/CookPete/react-player) under the
+            hood so look there for further documentation.
+          </Description>
+          <Primary />
+          <Subheading>Default props</Subheading>
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
+};
+
+export default VideoMeta;
+
+/**
+ * VideoTemplate
+ *
+ * create a Storybook template for this component
+ *
+ *@param (Object) args - props to be passed to the component
+ */
+const VideoTemplate: StoryFn<VideoProps> = (args) => <Video {...args} />;
+
+/**
+ * Video File Instance
+ *
+ */
+export const VideoFileMedia: StoryFn<VideoProps> = VideoTemplate.bind({});
+
+/**
+ * Video YouTube Instance
+ *
+ */
+export const VideoYTMedia: StoryFn<VideoProps> = VideoTemplate.bind({});
+
+// enumerate the props for the video file option
+VideoFileMedia.args = videoArgs.videofile;
+VideoFileMedia.storyName = "Media file";
+
+// enumerate the props for the video youtube option
+VideoYTMedia.args = videoArgs.videoyt;
+VideoYTMedia.storyName = "YouTube";

package/src/stories/Welcome.stories.mdx

@@ -0,0 +1,37 @@
+import { Meta } from "@storybook/blocks";
+import { Button } from "../components/Button";
+import "./welcome.scss";
+import { version } from "../../package.json";
+
+<Meta title="Welcome" />
+
+<div>
+  <div className="welcome">
+    <h1 className="welcome--title">ILO Design System</h1>
+    <h3 className="welcome--subtitle">
+      <img src="/react.svg" alt="React Icon" />
+      <span>React Components</span>
+    </h3>
+    <span className="welcome--version">v{version}</span>
+    <a
+      className="ilo--button ilo--button--large ilo--button--primary optionalclassName"
+      href="/?path=/docs/getting-started--overview"
+      target="true"
+      rel="noopener noreferrer"
+    >
+      <span className="link__label">Get started</span>
+    </a>
+  </div>
+  <div className="triangles">
+    <div
+      className="triangle triangle1"
+      onMouseOver={(e) => {
+        if (!e.target.classList.contains("spinning")) {
+          e.target.classList.add("spinning");
+        }
+      }}
+    ></div>
+    <div className="triangle triangle2"></div>
+    <div className="triangle triangle3"></div>
+  </div>
+</div>

package/src/stories/assets/code-brackets.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>

package/src/stories/assets/colors.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/colors</title><g id="illustration/colors" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><circle id="Oval" cx="23.763" cy="16.192" r="13.271" fill="#FC521F" opacity=".6"/><circle id="Oval-Copy" cx="15.468" cy="32.308" r="13.271" fill="#66BF3C" opacity=".6"/><path id="Combined-Shape" fill="#FF5F95" d="M15.4683651,19.0362231 C21.5434817,19.0362231 26.6652087,23.1181689 28.2404554,28.6889694 C26.8420385,29.1906678 25.3344184,29.4637769 23.7630101,29.4637769 C17.6878936,29.4637769 12.5661666,25.3818311 10.9909199,19.8110306 C12.3898993,19.3092302 13.8972501,19.0362231 15.4683651,19.0362231 Z"/><circle id="Oval-Copy-2" cx="32.532" cy="32.308" r="13.271" fill="#1EA7FD" opacity=".6"/><path id="Combined-Shape" fill="#87E6E5" d="M24.00025,22.1417324 C26.897967,24.5762286 28.7397972,28.2268506 28.7397972,32.3076552 C28.7397972,36.3884597 26.897967,40.0390817 24.00025,42.4735779 C21.1018087,40.038637 19.2602028,36.3882111 19.2602028,32.3076552 C19.2602028,28.2815316 21.0530043,24.6741393 23.8838362,22.2402492 Z"/><path id="Combined-Shape" fill="#FBD178" d="M32.5316349,19.0362231 C33.9415155,19.0362231 35.3000478,19.2560712 36.5748203,19.6633557 C35.0489179,25.3104816 29.8909911,29.4637769 23.7630101,29.4637769 C22.3527608,29.4637769 20.9938866,29.2438138 19.7188247,28.8363247 C21.2451195,23.1900077 26.403293,19.0362231 32.5316349,19.0362231 Z"/><path id="Combined-Shape" fill="#FFF" d="M24.00025,22.1417324 L24.0124326,22.1519799 C24.1747744,22.288701 24.3337918,22.4292434 24.4893463,22.5734686 L24.3896855,22.4820008 C24.4671836,22.552408 24.5438453,22.6237194 24.619654,22.6959185 L24.4893463,22.5734686 C24.5690639,22.6473803 24.6478719,22.7222591 24.7257519,22.7980864 L24.619654,22.6959185 C24.6907654,22.7636441 24.7611262,22.8321506 24.8307226,22.9014245 L24.7257519,22.7980864 C24.8120661,22.8821258 24.8972403,22.9673303 24.981249,23.0536745 L24.8307226,22.9014245 C24.9073006,22.9776475 24.9829531,23.0547994 25.0576619,23.132862 L25.057852,23.1330605 C25.3140855,23.4007967 25.559391,23.679459 25.7928375,23.9681079 L25.7230574,23.8825538 C25.7985998,23.9743942 25.8729325,24.0672672 25.9460311,24.1611484 L25.7928375,23.9681079 C25.8624256,24.0541514 25.93096,24.1410823 25.998421,24.228881 L25.9460311,24.1611484 C26.0074362,24.2400115 26.0679704,24.319586 26.1276194,24.3998576 L25.998421,24.228881 C26.0663495,24.317288 26.1331896,24.4065749 26.1989214,24.4967216 L26.1276194,24.3998576 C26.204848,24.5037867 26.2805926,24.6088841 26.3548219,24.7151187 L26.1989214,24.4967216 C26.2678555,24.59126 26.3355706,24.6867441 26.4020436,24.7831507 L26.3548219,24.7151187 C26.4130013,24.798383 26.4702498,24.8823459 26.5265523,24.9669921 L26.4020436,24.7831507 C26.4678788,24.8786322 26.5324956,24.9750187 26.5958716,25.0722875 L26.5959296,25.0723765 C26.736338,25.2878741 26.870709,25.5077955 26.9987399,25.7318073 L26.9410662,25.6319089 C26.9973106,25.7283602 27.0523736,25.8255849 27.1062352,25.9235633 L26.9987399,25.7318073 C27.0539848,25.8284676 27.1080492,25.9258895 27.1609136,26.0240532 L27.1606656,26.0235927 C27.2696676,26.2259984 27.3733426,26.4310837 27.4717677,26.6391379 L27.4715275,26.6386302 C27.5541941,26.8133735 27.6329386,26.9896914 27.7079006,27.1679911 C27.7630163,27.299081 27.8161443,27.431391 27.8671831,27.5647345 L27.804312,27.4036517 C27.8391482,27.4912057 27.8730792,27.5792182 27.9060936,27.6676774 L27.8671831,27.5647345 C27.906613,27.6677486 27.9447959,27.7713796 27.9817136,27.8756091 L27.9060936,27.6676774 C27.946474,27.7758735 27.9854831,27.884738 28.0230997,27.9942498 L27.9817136,27.8756091 C28.0144978,27.9681688 28.0462842,28.0612004 28.0770597,28.1546911 L28.0230997,27.9942498 C28.0618265,28.1069941 28.0990774,28.2204244 28.1348294,28.3345177 L28.0770597,28.1546911 C28.1112208,28.2584663 28.1441365,28.3628071 28.175789,28.4676958 L28.1756797,28.4673338 L28.2408136,28.6893554 C28.2284694,28.6937793 28.2161167,28.6981854 28.2037557,28.7025737 L28.2404554,28.6889694 C27.9517707,28.7925384 27.6584322,28.8863659 27.3608394,28.97006 L27.3609965,28.9702524 C27.0695498,29.0519815 26.7741843,29.1241944 26.4751174,29.1863314 L26.5385665,29.1730829 C26.3901218,29.2046704 26.2407589,29.2337757 26.0905233,29.2603535 L26.4751174,29.1863314 C26.3367402,29.215082 26.1975707,29.2416755 26.0576458,29.2660754 L26.0905233,29.2603535 C25.9366833,29.2875689 25.7819282,29.312134 25.6263069,29.334 L26.0576458,29.2660754 C25.9017815,29.2932549 25.7449801,29.3177127 25.5872928,29.3393985 L25.6263069,29.334 C25.493366,29.3526793 25.3597929,29.3693888 25.2256182,29.3840982 L25.5872928,29.3393985 C25.4326976,29.360659 25.277251,29.3792552 25.1210012,29.3951396 L25.2256182,29.3840982 C25.0570566,29.4025774 24.8875455,29.4178998 24.7171453,29.4300052 L25.1210012,29.3951396 C24.9661341,29.4108835 24.810478,29.4239634 24.6540799,29.4343333 L24.7171453,29.4300052 C24.5612618,29.4410793 24.4046342,29.4494611 24.2473088,29.4551045 L24.6540799,29.4343333 C24.5098436,29.4438967 24.3649762,29.4511552 24.2195147,29.4560724 L24.2473088,29.4551045 C24.0865878,29.4608697 23.9251385,29.4637769 23.7630101,29.4637769 L23.3130142,29.4562912 C23.2993121,29.4558347 23.2856153,29.4553574 23.2719237,29.4548593 C22.9596275,29.4434959 22.6502324,29.4213577 22.3439491,29.3888006 L22.3886972,29.3934808 C22.2468147,29.3788837 22.105595,29.3620515 21.9650736,29.3430199 L22.3439491,29.3888006 C22.1914515,29.3725905 22.0397254,29.3537976 21.8888152,29.3324664 L21.9650736,29.3430199 C21.8025527,29.3210088 21.6409661,29.2960557 21.4803691,29.2682161 L21.8888152,29.3324664 C21.7352182,29.3107553 21.5824665,29.2864149 21.4306071,29.2594919 L21.4803691,29.2682161 C21.3506285,29.2457255 21.2215338,29.221351 21.0931142,29.1951218 L21.4306071,29.2594919 C21.2772401,29.2323016 21.1247833,29.2024774 20.973285,29.1700676 L21.0931142,29.1951218 C20.9267071,29.1611338 20.7614335,29.1240315 20.5973571,29.0838786 L20.973285,29.1700676 C20.825476,29.138447 20.6785795,29.1043653 20.5326403,29.0678674 L20.5973571,29.0838786 C20.4596684,29.0501832 20.3228227,29.0143396 20.1868576,28.9763851 L20.5326403,29.0678674 C20.3930822,29.0329653 20.2543997,28.9958536 20.1166319,28.9565718 L20.1169729,28.956669 L19.7188247,28.8363247 L19.7188247,28.8363247 L19.7880988,28.5894836 C19.8166627,28.4914193 19.8463277,28.3938241 19.8770797,28.2967124 L19.8480041,28.389868 C19.888904,28.2573207 19.931824,28.1256601 19.9767281,27.9949221 L19.8770797,28.2967124 C19.9117081,28.1873592 19.9477148,28.0786191 19.9850793,27.9705124 L19.9853117,27.9700125 C20.1152243,27.5939638 20.2618428,27.2250995 20.4240731,26.8647811 L20.345088,27.0439391 C20.3899401,26.9402428 20.4360767,26.8372321 20.4834778,26.7349269 L20.4240731,26.8647811 C20.461061,26.78263 20.4988604,26.7009231 20.5374612,26.6196707 L20.4834778,26.7349269 C20.5344734,26.6248636 20.5869326,26.515617 20.6408302,26.4072119 L20.5374612,26.6196707 C20.5871241,26.5151329 20.6381134,26.4113474 20.6904074,26.308336 L20.6408302,26.4072119 C20.681671,26.3250682 20.7233378,26.2434076 20.7658197,26.1622412 L20.7658807,26.1619302 C20.8435258,26.013775 20.923959,25.866962 21.0070529,25.7218685 C21.2050227,25.3759931 21.4182299,25.0398756 21.6456589,24.7144306 L21.5286537,24.8848257 C21.5876708,24.7975143 21.6476996,24.7109431 21.7087233,24.6251289 L21.6456589,24.7144306 C21.6993229,24.6376387 21.7537788,24.5614411 21.8090146,24.4858495 L21.7087233,24.6251289 C21.7826333,24.5211934 21.8580028,24.4183683 21.9348018,24.3166836 L21.8090146,24.4858495 C21.8722751,24.3992759 21.9365587,24.3134973 22.0018475,24.2285315 L22.0016895,24.2288802 C22.3179789,23.8171232 22.6576794,23.4247699 23.0189296,23.053491 L22.8296293,23.2521975 C22.9033796,23.1732135 22.9780829,23.095131 23.0537208,23.0179683 L23.0189296,23.053491 C23.083529,22.9870982 23.1488175,22.9213793 23.2147836,22.8563459 L23.0537208,23.0179683 C23.131055,22.9390752 23.2093662,22.8611436 23.2886348,22.7841931 L23.2147836,22.8563459 C23.2821211,22.7899605 23.3501645,22.7242893 23.4189017,22.6593447 L23.2886348,22.7841931 C23.3852399,22.6904132 23.4832671,22.5980904 23.582681,22.5072602 L23.4189017,22.6593447 C23.4912637,22.5909753 23.5643945,22.523411 23.6382797,22.4566663 L23.582681,22.5072602 C23.6715916,22.4260264 23.7616113,22.3459865 23.8527148,22.2671658 L23.8525967,22.2671923 C23.8915062,22.2336043 23.9304941,22.2002638 23.9696766,22.1671464 L24.00025,22.1417324 Z"/></g></svg>