@mirohq/design-system-icons 0.1.0

package/README.md

@@ -0,0 +1,52 @@
+# Miro Design System Icons
+
+## Adding a new Icon
+
+The process of adding a new icon is the result of the collaboration of the design and development team.
+For this to happen follow this procedure:
+
+1. The designer should create a new Figma file including the new icon by following this guideline: [MDS - System Icons Library Figma file](https://www.figma.com/file/jSWCA1HFD22hk0isIY37ua/MDS---System-Icons-Library?node-id=1001%3A1063), which includes a template with all steps needed to easily create the new icon.
+2. Once the file is ready, the designer should notify the Miro design system team so they can approve and include changes into the Figma root file containing all icons.
+3. Finally, the development team takes over and runs the synchronization process, where the latest changes performed over the Figma root file are downloaded into the repository accordingly.
+
+## Synchronizing icons
+
+Figma is the chosen tool to collaborate between designers and the DS team when it comes to icons.
+It also serves as a source of truth, therefore it is important to keep in sync the DS icons package with it, right now the process is manual, and it can be done by executing this command in the root repo:
+
+```sh
+pnpm sync:icons
+```
+
+The execution of this command does the following:
+
+![Sync-icons-process](./docs/assets/sync-icons.png)
+
+- **figma-sync**: runs the `figma-sync` command to obtain all icons coming from the specified figma file and store them in svg format inside svg folder. You can go in-depth about the synchronization process [here](#figma-synchronization).
+- **svg-to-react**: runs the `svg-to-react` command to take all svg files and create their ccorresponding react components.
+- **changeset creation**: generates a changeset file detailing all the changes with the proper version (Major, Minor, or patch).
+- **git add chages**: all changes resulting from the previous two steps are staged.
+- **git commit changes**: changes are committed under a specific message.
+
+### Figma synchronization
+
+The execution of the `figma-sync` command does the following:
+
+- Removes all the content inside svg folder.
+- Icons content and metadata is obtained via Figma API.
+- Once the content for all the icons is available, [SVGO](https://github.com/svg/svgo) is applied on top to perform some optimizations and replaces colors to currentColor prop.
+- Icons are stored based on different folders based on size (svg/24, svg/16).
+
+[For technical details, please check it here.](./docs/how-figma-sync-works.md)
+
+### SVGR icon generation
+
+To convert the svgs obtained and formatted by figma-sync into react components, the utility [SVGR](https://react-svgr.com/) takes care of it, and helps to automate the process. Overall the only thing that needs as an input is the path where the svg files are stored, and the file where the react auto-generated components should live.
+
+The overall process can be started by using the following command `svg-to-react`, which does the following:
+
+- Removes all icons from the react folder.
+- Using the SVGR cli, it reads from the `svgrrc.js` file where some configurations are specified, such as the paths where templates to generate icons and the index file are, as well as the attributes to be kept inside icon react components.
+- SVGR takes all svgs stored inside `svg/24` folder, and based on the icon template `templates/icon.js`. It creates the content for the icon react component and stores it inside react folder.
+- The components generated extend all the DS capabilities including stitches and tokens. Moreover, it provides the component with the size attribute.
+- Finally, SVGR creates an index file inside the react folder where all generated icons are exported.

package/dist/main.js

@@ -0,0 +1,591 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var designSystemStitches = require('@mirohq/design-system-stitches');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
+var designSystemUtils = require('@mirohq/design-system-utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const StyledIcon = designSystemStitches.styled(designSystemPrimitive.Primitive.svg, {
+  display: "inline-flex",
+  verticalAlign: "text-bottom",
+  forcedColorAdjust: "preserve-parent-color",
+  variants: {
+    size: {
+      small: {
+        width: "$icon-200"
+      },
+      medium: {
+        width: "$icon-300"
+      },
+      large: {
+        width: "$icon-400"
+      }
+    },
+    color: designSystemUtils.mapKeysToVariants(designSystemStitches.theme.colors, "color")
+  }
+});
+
+const IconArrowLeft = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h23.59v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M20.59 12h-17M10 5l-7 7 7 7"
+    })
+  )
+);
+
+const IconArrowRight = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M20 12H3m10.59-7 7 7-7 7"
+    })
+  )
+);
+
+const IconArrowTopRight = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M10 5h9v9m0-9L5 19"
+    })
+  )
+);
+
+const IconBarThree = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M21 5H3m18 7H3m18 7H3"
+    })
+  )
+);
+
+const IconCheckMark = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m5 11 5 5 9-9"
+    })
+  )
+);
+
+const IconChevronDown = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m6 9.5 6 6 6-6"
+    })
+  )
+);
+
+const IconChevronLeft = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m14.5 6-6 6 6 6"
+    })
+  )
+);
+
+const IconChevronRight = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m9.5 6 6 6-6 6"
+    })
+  )
+);
+
+const IconChevronUp = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m6 14.5 6-6 6 6"
+    })
+  )
+);
+
+const IconCrossCircle = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 12,
+      r: 9,
+      stroke: "currentColor",
+      strokeWidth: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m9 9 6 6m0-6-6 6"
+    })
+  )
+);
+
+const IconCross = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m6 6 12 12m0-12L6 18"
+    })
+  )
+);
+
+const IconEnvelope = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("rect", {
+      width: 18,
+      height: 14,
+      x: 3,
+      y: 5,
+      stroke: "currentColor",
+      strokeWidth: 2,
+      rx: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m7 9 3.618 3.459a2 2 0 0 0 2.764 0L17 9"
+    })
+  )
+);
+
+const IconExclamationPointCircle = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 12,
+      r: 9,
+      stroke: "currentColor",
+      strokeWidth: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M12 7v6m0 3.5v.5"
+    })
+  )
+);
+
+const IconGlobe = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 12,
+      r: 9,
+      stroke: "currentColor",
+      strokeWidth: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M11.663 3C9.495 4.62 8 8.042 8 12s1.495 7.38 3.663 9m.674-18C14.505 4.62 16 8.042 16 12s-1.495 7.38-3.663 9M4 9h16M4 15h16"
+    })
+  )
+);
+
+const IconIconPlaceholder = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 12,
+      r: 9,
+      stroke: "currentColor",
+      strokeWidth: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m3 3 18 18m0-18L3 21"
+    })
+  )
+);
+
+const IconInformationMarkCircle = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 12,
+      r: 9,
+      stroke: "currentColor",
+      strokeWidth: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M12 6.5V7m0 4v6"
+    })
+  )
+);
+
+const IconLockClosed = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 16,
+      r: 1,
+      fill: "currentColor"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("rect", {
+      width: 14,
+      height: 10,
+      x: 5,
+      y: 11,
+      stroke: "currentColor",
+      strokeWidth: 2,
+      rx: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M16.5 11V5a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v6"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 16,
+      r: 1,
+      stroke: "currentColor",
+      strokeWidth: 2
+    })
+  )
+);
+
+const IconLockOpen = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 16,
+      r: 1,
+      fill: "currentColor"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("rect", {
+      width: 14,
+      height: 10,
+      x: 5,
+      y: 11,
+      stroke: "currentColor",
+      strokeWidth: 2,
+      rx: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M16.5 11V5a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2v1.5"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 16,
+      r: 1,
+      stroke: "currentColor",
+      strokeWidth: 2
+    })
+  )
+);
+
+const IconMinus = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M5 12h14"
+    })
+  )
+);
+
+const IconPlus = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M5 12h14m-7-7v14"
+    })
+  )
+);
+
+const IconQuestionMark = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 12,
+      cy: 12,
+      r: 9,
+      stroke: "currentColor",
+      strokeWidth: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "M9.17 9a3.001 3.001 0 1 1 3.812 3.836c-.522.18-.982.612-.982 1.164v.25m0 2.65v.1"
+    })
+  )
+);
+
+const IconSearch = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("circle", {
+      cx: 10,
+      cy: 10,
+      r: 6,
+      stroke: "currentColor",
+      strokeWidth: 2
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: 2,
+      d: "m20 20-5.5-5.5"
+    })
+  )
+);
+
+const IconSocialFacebook = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      fill: "currentColor",
+      d: "M22 12.061C22 6.505 17.523 2 12 2S2 6.505 2 12.061c0 5.022 3.657 9.184 8.438 9.939v-7.03h-2.54v-2.91h2.54V9.845c0-2.522 1.492-3.915 3.777-3.915 1.094 0 2.238.197 2.238.197v2.476h-1.26c-1.243 0-1.63.775-1.63 1.57v1.888h2.773l-.443 2.908h-2.33V22c4.78-.755 8.437-4.917 8.437-9.939Z"
+    })
+  )
+);
+
+const IconSocialInstagram = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      fill: "currentColor",
+      d: "M8.667 12a3.333 3.333 0 1 0 6.666 0 3.333 3.333 0 0 0-6.666 0Z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M12 2c-2.716 0-3.056.012-4.123.06-1.064.049-1.791.218-2.427.465a4.902 4.902 0 0 0-1.772 1.153A4.902 4.902 0 0 0 2.525 5.45c-.247.636-.416 1.363-.465 2.427C2.011 8.944 2 9.284 2 12s.011 3.056.06 4.123c.049 1.064.218 1.791.465 2.427a4.902 4.902 0 0 0 1.153 1.772 4.901 4.901 0 0 0 1.772 1.153c.636.247 1.363.416 2.427.465 1.067.048 1.407.06 4.123.06s3.056-.012 4.123-.06c1.064-.049 1.791-.218 2.427-.465a4.902 4.902 0 0 0 1.772-1.153 4.902 4.902 0 0 0 1.153-1.772c.247-.636.416-1.363.465-2.427.048-1.067.06-1.407.06-4.123s-.012-3.056-.06-4.123c-.049-1.064-.218-1.791-.465-2.427a4.901 4.901 0 0 0-1.153-1.772 4.902 4.902 0 0 0-1.772-1.153c-.636-.247-1.363-.416-2.427-.465C15.056 2.012 14.716 2 12 2Zm6.538 4.662a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0ZM6.865 12a5.135 5.135 0 1 1 10.27 0 5.135 5.135 0 0 1-10.27 0Z",
+      clipRule: "evenodd"
+    })
+  )
+);
+
+const IconSocialLinkedin = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      fill: "currentColor",
+      d: "M20.52 2c.816 0 1.48.646 1.48 1.442v17.115c0 .796-.664 1.443-1.48 1.443H3.475C2.661 22 2 21.353 2 20.557V3.442C2 2.646 2.661 2 3.475 2h17.046Zm-1.477 17.042v-5.234c0-2.57-.555-4.547-3.558-4.547-1.444 0-2.412.791-2.807 1.542h-.04V9.498H9.793v9.544h2.963v-4.72c0-1.246.235-2.452 1.779-2.452 1.522 0 1.541 1.424 1.541 2.53v4.642h2.966ZM7.933 9.498h-2.97v9.544h2.97V9.498ZM6.449 4.753a1.72 1.72 0 1 0-.003 3.44 1.72 1.72 0 0 0 .003-3.44Z"
+    })
+  )
+);
+
+const IconSocialTwitter = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      fill: "currentColor",
+      d: "M7.919 21C16.22 21 20.76 14.074 20.76 8.068c0-.196 0-.392-.013-.587A9.22 9.22 0 0 0 23 5.128a8.963 8.963 0 0 1-2.593.715 4.556 4.556 0 0 0 1.985-2.514 9.01 9.01 0 0 1-2.866 1.104A4.505 4.505 0 0 0 16.235 3c-2.479 0-4.518 2.054-4.518 4.55 0 .345.039.69.117 1.028A12.791 12.791 0 0 1 2.53 3.829c-1.19 2.065-.574 4.741 1.4 6.067a4.456 4.456 0 0 1-2.049-.569v.058c0 2.155 1.523 4.029 3.621 4.455a4.477 4.477 0 0 1-2.038.078 4.532 4.532 0 0 0 4.217 3.157A9.019 9.019 0 0 1 1 18.958a12.716 12.716 0 0 0 6.919 2.039"
+    })
+  )
+);
+
+const IconSocialYoutube = React.forwardRef(
+  ({ size = "medium", ...props }, forwardRef2) => React.createElement(
+    StyledIcon,
+    { ...props, size, viewBox: "0 0 24 24", fill: "none", ref: forwardRef2 },
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      d: "M0 0h24v24H0z"
+    }),
+    /* @__PURE__ */ React__default["default"].createElement("path", {
+      fill: "currentColor",
+      d: "M23.02 6.155c-.265-1.045-1.044-1.868-2.034-2.147C19.192 3.5 12 3.5 12 3.5s-7.192 0-8.986.508C2.024 4.287 1.245 5.11.98 6.155.5 8.049.5 12 .5 12s0 3.952.48 5.845c.265 1.045 1.044 1.868 2.034 2.148C4.808 20.5 12 20.5 12 20.5s7.192 0 8.986-.507c.99-.28 1.77-1.103 2.034-2.148.48-1.893.48-5.845.48-5.845s0-3.951-.48-5.845ZM9.7 15.643V8.357L15.675 12 9.7 15.643Z"
+    })
+  )
+);
+
+exports.IconArrowLeft = IconArrowLeft;
+exports.IconArrowRight = IconArrowRight;
+exports.IconArrowTopRight = IconArrowTopRight;
+exports.IconBarThree = IconBarThree;
+exports.IconCheckMark = IconCheckMark;
+exports.IconChevronDown = IconChevronDown;
+exports.IconChevronLeft = IconChevronLeft;
+exports.IconChevronRight = IconChevronRight;
+exports.IconChevronUp = IconChevronUp;
+exports.IconCross = IconCross;
+exports.IconCrossCircle = IconCrossCircle;
+exports.IconEnvelope = IconEnvelope;
+exports.IconExclamationPointCircle = IconExclamationPointCircle;
+exports.IconGlobe = IconGlobe;
+exports.IconIconPlaceholder = IconIconPlaceholder;
+exports.IconInformationMarkCircle = IconInformationMarkCircle;
+exports.IconLockClosed = IconLockClosed;
+exports.IconLockOpen = IconLockOpen;
+exports.IconMinus = IconMinus;
+exports.IconPlus = IconPlus;
+exports.IconQuestionMark = IconQuestionMark;
+exports.IconSearch = IconSearch;
+exports.IconSocialFacebook = IconSocialFacebook;
+exports.IconSocialInstagram = IconSocialInstagram;
+exports.IconSocialLinkedin = IconSocialLinkedin;
+exports.IconSocialTwitter = IconSocialTwitter;
+exports.IconSocialYoutube = IconSocialYoutube;
+//# sourceMappingURL=main.js.map