@pnx-mixtape/mxds 0.0.1

package/src/Atom/Heading/_headings.css

@@ -0,0 +1,84 @@
+@layer defaults {
+  :is(
+      .headline,
+      h1,
+      .heading--xxl,
+      h2,
+      .heading--xl,
+      h3,
+      .heading--l,
+      h4,
+      .heading--m,
+      h5,
+      .heading--s,
+      h6,
+      .heading--xs
+    ) {
+    font-family: var(--heading-font-family, var(--font-family));
+    line-height: var(--line-height-h);
+    font-size: var(--heading-font-size, var(--font-size));
+    font-weight: var(--heading-font-weight, var(--font-weight-bold));
+    text-wrap: balance;
+  }
+
+  @supports (font-size: 1cqi) {
+    :is(
+        .headline,
+        h1,
+        .heading--xxl,
+        h2,
+        .heading--xl,
+        h3,
+        .heading--l,
+        h4,
+        .heading--m,
+        h5,
+        .heading--s
+      ) {
+      --font-min: calc(
+        var(--heading-font-size) - var(--heading-font-size) *
+          var(--font-size-diff, 0.3)
+      );
+
+      font-size: clamp(
+        max(var(--base-font-size), var(--font-min)),
+        var(--font-min) + 1cqi,
+        var(--heading-font-size)
+      );
+    }
+  }
+
+  .headline {
+    --heading-font-size: var(--font-size-xxxl);
+  }
+
+  h1,
+  .heading--xxl {
+    --heading-font-size: var(--font-size-xxl);
+  }
+
+  h2,
+  .heading--xl {
+    --heading-font-size: var(--font-size-xl);
+  }
+
+  h3,
+  .heading--l {
+    --heading-font-size: var(--font-size-l);
+  }
+
+  h4,
+  .heading--m {
+    --heading-font-size: var(--font-size-m);
+  }
+
+  h5,
+  .heading--s {
+    --heading-font-size: var(--base-font-size);
+  }
+
+  h6,
+  .heading--xs {
+    --heading-font-size: var(--font-size-s);
+  }
+}

package/src/Atom/Heading/heading.twig

@@ -0,0 +1,8 @@
+{% set classes = [
+  modifier ? modifier : null,
+  excluded ? 'is-excluded' : null,
+  srOnly ? 'sr-only' : null,
+] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<{{ as|default('h2')  }} {{ attributes }}>{{ title }}</{{ as|default('h2') }}>

package/src/Atom/Icon/Icon.mdx

@@ -0,0 +1,32 @@
+import {
+  Meta,
+  Primary,
+  Controls,
+  IconGallery,
+  IconItem,
+  Stories,
+} from "@storybook/blocks"
+import * as IconStories from "./Icon.stories"
+import { Icons } from "../../enums"
+
+<Meta of={IconStories} />
+
+# Icon set
+
+Icons are available as a css image mask.
+
+<IconGallery>
+  {Object.values(Icons).map(name => (
+    <IconItem name={name} key={name}>
+      <span className={`icon icon--${name}`} />
+    </IconItem>
+  ))}
+</IconGallery>
+
+# Icon
+
+<Primary />
+
+<Controls />
+
+<Stories />

package/src/Atom/Icon/Icon.stories.ts

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./icon.twig"
+import "./icon.css"
+import {
+  Icon as IconType,
+  AlignmentTypes,
+  IconColourModifier,
+  IconRotateModifier,
+  IconSizeModifier,
+} from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
+
+type IconArgs = IconType & {
+  icon: Icons
+}
+
+const meta: Meta<IconArgs> = {
+  tags: ["ids-mvp"],
+  component: Component,
+  args: {
+    icon: Icons.ARROW_RIGHT,
+  },
+  argTypes: {
+    icon: { options: Object.values(Icons), control: "select" },
+    align: { options: Object.values(AlignmentTypes), control: "select" },
+    color: { options: Object.values(IconColourModifier), control: "select" },
+    rotate: { options: Object.values(IconRotateModifier), control: "select" },
+    size: { options: Object.values(IconSizeModifier), control: "select" },
+    text: { control: "text" },
+  },
+}
+
+export default meta
+type Story = StoryObj<IconArgs>
+
+export const Icon: Story = {}
+
+export const WithText: Story = {
+  args: {
+    text: "Message with icon",
+  },
+}
+
+export const Alignment: Story = {
+  args: {
+    text: "Message with icon",
+    icon: Icons.ARROW_LEFT,
+    align: AlignmentTypes.END,
+  },
+}

package/src/Atom/Icon/Icon.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Icon"
+import { Icons } from "../../enums"
+import {
+  IconColourModifier,
+  AlignmentTypes,
+  IconRotateModifier,
+  IconSizeModifier,
+} from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<typeof Component> = {
+  title: "Atom/Icon",
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    icon: Icons.ARROW_RIGHT,
+  },
+  argTypes: {
+    icon: { options: Object.values(Icons) },
+    align: { options: Object.values(AlignmentTypes), control: "select" },
+    color: { options: Object.values(IconColourModifier), control: "select" },
+    rotate: { options: Object.values(IconRotateModifier), control: "select" },
+    size: { options: Object.values(IconSizeModifier), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Icon: Story = {}
+
+export const WithText: Story = {
+  args: {
+    text: "Message with icon",
+  },
+}
+
+export const Alignment: Story = {
+  args: {
+    text: "Message with icon",
+    icon: Icons.ARROW_LEFT,
+    align: AlignmentTypes.END,
+  },
+}

package/src/Atom/Icon/Icon.tsx

@@ -0,0 +1,30 @@
+import { JSX } from "react"
+import classNames from "classnames"
+import { Icons } from "../../enums"
+import { Icon as IconType } from "@pnx-mixtape/ids-shape"
+
+type IconProps = IconType & {
+  icon: Icons
+}
+
+const Icon = ({
+  icon,
+  color,
+  text,
+  align,
+  rotate,
+  size,
+}: IconProps): JSX.Element => (
+  <span
+    className={classNames("icon", `icon--${icon}`, {
+      [`icon--color-${color}`]: color,
+      [`icon--${align}`]: align,
+      [`icon--${rotate}`]: rotate,
+      [`icon--size-${size}`]: size,
+    })}
+  >
+    {text}
+  </span>
+)
+
+export default Icon

package/src/Atom/Icon/README.md

@@ -0,0 +1,7 @@
+# Icon
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/icon.css';`

package/src/Atom/Icon/__snapshots__/Icon.stories.ts.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Icon Alignment smoke-test 1`] = `
+<span class="icon icon--arrow-left icon--end ">
+  Message with icon
+</span>
+`;
+
+exports[`Base/Icon Icon smoke-test 1`] = `
+<span class="icon icon--arrow-right ">
+</span>
+`;
+
+exports[`Base/Icon WithText smoke-test 1`] = `
+<span class="icon icon--arrow-right ">
+  Message with icon
+</span>
+`;

package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Icon Alignment smoke-test 1`] = `
+<span class="icon icon--arrow-left icon--end">
+  Message with icon
+</span>
+`;
+
+exports[`Base/Icon Icon smoke-test 1`] = `
+<span class="icon icon--arrow-right">
+</span>
+`;
+
+exports[`Base/Icon WithText smoke-test 1`] = `
+<span class="icon icon--arrow-right">
+  Message with icon
+</span>
+`;

package/src/Atom/Icon/_extended-set.css

@@ -0,0 +1,45 @@
+@import "_mixin-icon.css";
+
+/**
+ * Icon - Extended
+ */
+@layer elements {
+  @mixin icon attachment;
+  @mixin icon blockquote;
+  @mixin icon building;
+  @mixin icon calendar;
+  @mixin icon clock;
+  @mixin icon email;
+  @mixin icon file;
+  @mixin icon globe;
+  @mixin icon heart-selected;
+  @mixin icon heart-unselected;
+  @mixin icon image;
+  @mixin icon home;
+  @mixin icon link;
+  @mixin icon lock;
+  @mixin icon login;
+  @mixin icon media-play;
+  @mixin icon media-pause;
+  @mixin icon media-stop;
+  @mixin icon media-next;
+  @mixin icon media-previous;
+  @mixin icon media-rewind;
+  @mixin icon media-skip;
+  @mixin icon more;
+  @mixin icon notification;
+  @mixin icon pencil;
+  @mixin icon phone;
+  @mixin icon pin;
+  @mixin icon print;
+  @mixin icon question;
+  @mixin icon restart;
+  @mixin icon settings;
+  @mixin icon share;
+  @mixin icon star-selected;
+  @mixin icon star-unselected;
+  @mixin icon tick;
+  @mixin icon trash;
+  @mixin icon user;
+  @mixin icon video;
+}

package/src/Atom/Icon/_icon.css

@@ -0,0 +1,151 @@
+@import "_mixin-icon.css";
+
+/**
+ * Icon
+ */
+
+@layer elements {
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xxs);
+
+    &::before {
+      content: "";
+      display: block;
+      flex-shrink: 0;
+      inline-size: var(--icon-size, var(--spacing-s));
+      block-size: var(--icon-size, var(--spacing-s));
+      mask-position: center;
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      background-color: currentcolor;
+    }
+  }
+
+  .icon--only {
+    inline-size: var(--icon-size, var(--spacing-s));
+    block-size: var(--icon-size, var(--spacing-s));
+    overflow: hidden;
+    flex-wrap: wrap;
+
+    &::before {
+      inline-size: 100%;
+      block-size: 100%;
+      mask-size: var(--icon-size, var(--spacing-s));
+    }
+  }
+
+  @mixin icon arrow-down;
+  @mixin icon arrow-left;
+  @mixin icon arrow-up;
+  @mixin icon arrow-right;
+  @mixin icon chevron-down;
+  @mixin icon chevron-left;
+  @mixin icon chevron-right;
+  @mixin icon chevron-up;
+  @mixin icon close;
+  @mixin icon collapse;
+  @mixin icon download;
+  @mixin icon drupal;
+  @mixin icon error;
+  @mixin icon expand;
+  @mixin icon external-link;
+  @mixin icon facebook;
+  @mixin icon google;
+  @mixin icon info;
+  @mixin icon instagram;
+  @mixin icon linkedin;
+  @mixin icon mastodon;
+  @mixin icon bluesky;
+  @mixin icon menu;
+  @mixin icon search;
+  @mixin icon success;
+  @mixin icon twitter;
+  @mixin icon warning;
+  @mixin icon youtube;
+
+  .icon--status::before {
+    mask-image: svg-load("./images/info.svg");
+  }
+}
+
+/**
+ * Icon - Colours
+ */
+
+@layer elements {
+  .icon--color-info::before {
+    color: var(--colour-info-foreground);
+  }
+
+  .icon--color-error::before {
+    color: var(--colour-error-foreground);
+  }
+
+  .icon--color-warning::before {
+    color: var(--colour-warning-foreground);
+  }
+
+  .icon--color-success::before {
+    color: var(--colour-success-foreground);
+  }
+
+  .icon--color-brand::before {
+    color: var(--colour-primary);
+  }
+
+  .icon--color-accent::before {
+    color: var(--colour-accent);
+  }
+}
+
+/**
+ * Icon - alignment
+ */
+
+@layer elements {
+  .icon.icon--end::before {
+    order: 2;
+  }
+}
+
+/**
+ * Icon - rotate
+ */
+
+@layer elements {
+  .icon.icon--rotate-90::before {
+    rotate: 90deg;
+  }
+
+  .icon.icon--rotate-180::before {
+    rotate: 180deg;
+  }
+
+  .icon.icon--rotate-270::before {
+    rotate: 270deg;
+  }
+}
+
+/**
+ * Icon - size
+ */
+
+@layer elements {
+  .icon.icon--size-sm::before {
+    --icon-size: var(--spacing-s);
+  }
+
+  .icon.icon--size-md::before {
+    --icon-size: var(--spacing-m);
+  }
+
+  .icon.icon--size-lg::before {
+    --icon-size: var(--spacing-l);
+  }
+
+  .icon.icon--size-xl::before {
+    --icon-size: var(--spacing-xl);
+  }
+}

package/src/Atom/Icon/_mixin-icon.css

@@ -0,0 +1,5 @@
+@define-mixin icon $name {
+  .icon--$(name)::before {
+    mask-image: svg-load("./images/$(name).svg");
+  }
+}

package/src/Atom/Icon/icon.css

@@ -0,0 +1,2 @@
+@import "_icon.css";
+@import "_extended-set.css";

package/src/Atom/Icon/icon.twig

@@ -0,0 +1,12 @@
+{% set baseClass = 'icon' %}
+{% set classes = [
+  baseClass,
+  baseClass~'--'~icon,
+  align ? baseClass~'--'~align : null,
+  color ? baseClass~'--color-'~color : null,
+  rotate ? baseClass~'--'~rotate : null,
+  size ? baseClass~'--size-'~size : null,
+] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<span{{ attributes }}>{{ text }}</span>

package/src/Atom/Icon/images/arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M14.7 9.3l-1.4-1.4L9 12.2V0H7v12.2L2.7 7.9 1.3 9.3 8 16z" /></svg>

package/src/Atom/Icon/images/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M6.7 14.7l1.4-1.4L3.8 9H16V7H3.8l4.3-4.3-1.4-1.4L0 8z" /></svg>

package/src/Atom/Icon/images/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M9.3 1.3L7.9 2.7 12.2 7H0v2h12.2l-4.3 4.3 1.4 1.4L16 8z" /></svg>

package/src/Atom/Icon/images/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1.3 6.7l1.4 1.4L7 3.8V16h2V3.8l4.3 4.3 1.4-1.4L8 0z" /></svg>

package/src/Atom/Icon/images/attachment.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M5 5v4c0 1.7 1.3 3 3 3s3-1.3 3-3V4.5C11 2 9 0 6.5 0S2 2 2 4.5V10c0 3.3 2.7 6 6 6s6-2.7 6-6V4h-2v6c0 2.2-1.8 4-4 4s-4-1.8-4-4V4.5C4 3.1 5.1 2 6.5 2S9 3.1 9 4.5V9c0 .6-.4 1-1 1s-1-.4-1-1V5H5z" /></svg>

package/src/Atom/Icon/images/blockquote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper"><path d="M7,5.5A3.5,3.5,0,1,0,3.5,9a3.476,3.476,0,0,0,1.039-.175A8.983,8.983,0,0,1,2.422,12.3,1,1,0,1,0,3.85,13.7,10.934,10.934,0,0,0,7,6a.951.951,0,0,0-.034-.167A3.323,3.323,0,0,0,7,5.5Z"/><path d="M16,5.5a3.567,3.567,0,1,0-2.461,3.325A8.983,8.983,0,0,1,11.422,12.3a1,1,0,1,0,1.428,1.4A10.934,10.934,0,0,0,16,6a.951.951,0,0,0-.034-.167A3.323,3.323,0,0,0,16,5.5Z" data-color="color-2"/></g></svg>

package/src/Atom/Icon/images/bluesky.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#000" d="M3.353 1.917c1.773 1.33 3.68 4.03 4.38 5.479.7-1.449 2.608-4.148 4.381-5.48 1.28-.96 3.353-1.703 3.353.662 0 .472-.271 3.968-.43 4.535-.552 1.973-2.564 2.476-4.353 2.172 3.128.532 3.924 2.295 2.205 4.059-3.264 3.349-4.69-.84-5.057-1.914-.067-.197-.098-.289-.099-.21 0-.079-.031.013-.098.21-.366 1.074-1.793 5.263-5.057 1.914-1.719-1.764-.923-3.527 2.205-4.06C2.993 9.59.982 9.087.43 7.115.27 6.545 0 3.05 0 2.577 0 .213 2.073.956 3.353 1.917Z"/></svg>

package/src/Atom/Icon/images/bookmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 0C2.9 0 2 .9 2 2v14l6-3 6 3V2c0-1.1-.9-2-2-2H4z" /></svg>

package/src/Atom/Icon/images/building.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M15 9h-2V3c0-.6-.4-1-1-1H9V0H7v2H4c-.6 0-1 .4-1 1v6H1c-.6 0-1 .4-1 1v5c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-5c0-.6-.4-1-1-1zM5 10V4h6v10H9v-3H7v3H5v-4z"/><path d="M7 6h2v2H7z"/></svg>

package/src/Atom/Icon/images/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M15,2h-2V0h-2v2H9V0H7v2H5V0H3v2H1C0.447,2,0,2.447,0,3v12c0,0.553,0.447,1,1,1h14c0.553,0,1-0.447,1-1V3 C16,2.447,15.553,2,15,2z M14,14H2V6h12V14z"/></svg>

package/src/Atom/Icon/images/chevron-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 11.4L2.6 6 4 4.6l4 4 4-4L13.4 6z" /></svg>

package/src/Atom/Icon/images/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M10 13.4L4.6 8 10 2.6 11.4 4l-4 4 4 4z" /></svg>

package/src/Atom/Icon/images/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M6 13.4L4.6 12l4-4-4-4L6 2.6 11.4 8z" /></svg>

package/src/Atom/Icon/images/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12 11.4l-4-4-4 4L2.6 10 8 4.6l5.4 5.4z" /></svg>

package/src/Atom/Icon/images/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"/><path d="M9 4H7v5h5V7H9z"/></svg>

package/src/Atom/Icon/images/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M14.7 1.3c-.4-.4-1-.4-1.4 0L8 6.6 2.7 1.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-5.3 5.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l5.3 5.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l5.3-5.3c.4-.4.4-1 0-1.4z" /></svg>

package/src/Atom/Icon/images/collapse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7h8v2H4z" /></svg>

package/src/Atom/Icon/images/controls.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M5 5V1c0-.6-.4-1-1-1S3 .4 3 1v4c0 .6.4 1 1 1s1-.4 1-1zM1 11c0 1.3.9 2.4 2 2.8V15c0 .6.4 1 1 1s1-.4 1-1v-1-.2c1.2-.4 2-1.5 2-2.8 0-1.7-1.3-3-3-3s-3 1.3-3 3z"/><path d="M11 11v4c0 .6.4 1 1 1s1-.4 1-1v-4c0-.6-.4-1-1-1s-1 .4-1 1zM9 5c0 1.7 1.3 3 3 3s3-1.3 3-3c0-1.3-.9-2.4-2-2.8V1c0-.6-.4-1-1-1s-1 .4-1 1v1.2C9.9 2.6 9 3.7 9 5z"/></svg>

package/src/Atom/Icon/images/download.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 12c.3 0 .5-.1.7-.3L14.4 6 13 4.6l-4 4V0H7v8.6l-4-4L1.6 6l5.7 5.7c.2.2.4.3.7.3z"/><path d="M1 14h14v2H1z"/></svg>

package/src/Atom/Icon/images/drupal.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="32" viewBox="0 0 25 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.264 6.808C15.015 4.56 12.87 2.417 12.231 0c-.639 2.417-2.785 4.56-5.034 6.808C3.824 10.178 0 13.999 0 19.729a12.231 12.231 0 1 0 24.462 0c0-5.73-3.824-9.55-7.198-12.921M5.2 22.579c-.75-.025-3.518-4.796 1.617-9.876l3.397 3.712a.29.29 0 0 1-.022.433c-.811.832-4.267 4.297-4.696 5.496-.09.247-.219.238-.296.235m7.032 6.288a4.207 4.207 0 0 1-4.206-4.207 4.383 4.383 0 0 1 1.048-2.778c.759-.928 3.158-3.537 3.158-3.537s2.362 2.647 3.152 3.528a4.114 4.114 0 0 1 1.055 2.787 4.207 4.207 0 0 1-4.207 4.207m8.052-6.822c-.091.198-.297.53-.574.54-.495.018-.548-.236-.914-.777-.803-1.188-7.81-8.512-9.12-9.928-1.153-1.246-.163-2.124.297-2.584.576-.578 2.259-2.26 2.259-2.26s5.017 4.761 7.107 8.013c2.09 3.253 1.37 6.067.945 6.996" />
+</svg>

package/src/Atom/Icon/images/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M15 1H1c-.6 0-1 .4-1 1v1.4l8 4.5 8-4.4V2c0-.6-.4-1-1-1z"/><path d="M7.5 9.9L0 5.7V14c0 .6.4 1 1 1h14c.6 0 1-.4 1-1V5.7L8.5 9.9c-.28.14-.72.14-1 0z"/></svg>

package/src/Atom/Icon/images/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" /></svg>

package/src/Atom/Icon/images/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M9 4H7v3H4v2h3v3h2V9h3V7H9z" /></svg>

package/src/Atom/Icon/images/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M15 0H8v2h4.6L6.3 8.3l1.4 1.4L14 3.4V8h2V1c0-.6-.4-1-1-1z"/><path d="M14 16H1c-.6 0-1-.4-1-1V2c0-.6.4-1 1-1h4v2H2v11h11v-3h2v4c0 .6-.4 1-1 1z"/></svg>

package/src/Atom/Icon/images/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M24,12.072A12,12,0,1,0,10.125,23.926V15.541H7.078V12.072h3.047V9.428c0-3.007,1.792-4.669,4.532-4.669a18.611,18.611,0,0,1,2.687.234V7.947H15.83a1.734,1.734,0,0,0-1.947,1.49,1.71,1.71,0,0,0-.008.385v2.25H17.2l-.532,3.469h-2.8v8.385A12,12,0,0,0,24,12.072Z"/></svg>

package/src/Atom/Icon/images/file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper"><path d="M14.707,4.707,10.293.293A1,1,0,0,0,9.586,0H2A1,1,0,0,0,1,1V15a1,1,0,0,0,1,1H14a1,1,0,0,0,1-1V5.414A1,1,0,0,0,14.707,4.707ZM13,14H3V2H9V5a1,1,0,0,0,1,1h3Z"/></g></svg>

package/src/Atom/Icon/images/globe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm5.9 7H12c-.1-1.5-.4-2.9-.8-4.1 1.4.9 2.4 2.4 2.7 4.1zM8 14c-.6 0-1.8-1.9-2-5h4c-.2 3.1-1.4 5-2 5zM6 7c.2-3.1 1.3-5 2-5s1.8 1.9 2 5H6zM4.9 2.9C4.4 4.1 4.1 5.5 4 7H2.1c.3-1.7 1.3-3.2 2.8-4.1zM2.1 9H4c.1 1.5.4 2.9.8 4.1-1.4-.9-2.4-2.4-2.7-4.1zm9 4.1c.5-1.2.7-2.6.8-4.1h1.9c-.2 1.7-1.2 3.2-2.7 4.1z"/></svg>

package/src/Atom/Icon/images/google.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 7v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4s2-4.4 4.3-4.4c1.4 0 2.3.6 2.8 1.1l1.9-1.8C11.6 1.7 10 1 8.1 1c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H8z" /></svg>

package/src/Atom/Icon/images/heart-selected.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M11.6 0C10.1 0 8.8.8 8 2 7.2.8 5.9 0 4.4 0 2 0 0 2 0 4.4c0 4.4 8 10.9 8 10.9s8-6.5 8-10.9C16 2 14 0 11.6 0z" /></svg>

package/src/Atom/Icon/images/heart-unselected.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M7.4 15.5C6.6 14.8 0 9.3 0 5.1 0 2.4 2.2.3 4.8.3 6 .3 7.1.8 8 1.5 8.9.7 10 .3 11.2.3 13.9.3 16 2.5 16 5.1c0 4.2-6.6 9.7-7.4 10.3-.3.4-.9.4-1.2.1zM4.8 2.3C3.3 2.3 2 3.6 2 5.1c0 2.2 3.5 6 6 8.2 2.1-1.9 6-5.8 6-8.2 0-1.6-1.3-2.8-2.8-2.8-.9 0-1.8.5-2.3 1.3-.4.6-1.3.6-1.7 0-.6-.8-1.4-1.3-2.4-1.3z" /></svg>

package/src/Atom/Icon/images/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M11 16h2c.6 0 1-.4 1-1V8h1c.3 0 .6-.1.8-.3.4-.4.3-1-.1-1.4l-7-6C8.3 0 7.8 0 7.4.3l-7 6c-.4.4-.5 1-.1 1.4.1.2.4.3.7.3h1v7c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-3h4v3c0 .6.4 1 1 1z"/></svg>

package/src/Atom/Icon/images/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><g class="nc-icon-wrapper"><path data-color="color-2" d="M10.447,6.276A.5.5,0,0,0,10.023,6a.469.469,0,0,0-.447.234L7.409,9.7,5.854,8.146A.525.525,0,0,0,5.451,8a.5.5,0,0,0-.367.221l-2,3A.5.5,0,0,0,3.5,12h9a.5.5,0,0,0,.447-.724Z"/><path d="M14,0H2A2,2,0,0,0,0,2V14a2,2,0,0,0,2,2H14a2,2,0,0,0,2-2V2A2,2,0,0,0,14,0ZM2,14V2H14l0,12Z"/><circle data-color="color-2" cx="5" cy="5" r="1"/></g></svg>

package/src/Atom/Icon/images/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" /></svg>

package/src/Atom/Icon/images/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="12.145" cy="3.892" r=".96"/><path d="M8 12c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-6c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/><path d="M12 16H4c-2.056 0-4-1.944-4-4V4c0-2.056 1.944-4 4-4h8c2.056 0 4 1.944 4 4v8c0 2.056-1.944 4-4 4zM4 2c-.935 0-2 1.065-2 2v8c0 .953 1.047 2 2 2h8c.935 0 2-1.065 2-2V4c0-.935-1.065-2-2-2H4z"/></svg>

package/src/Atom/Icon/images/link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4.5 16c-1.2 0-2.3-.5-3.2-1.3-1.8-1.8-1.8-4.6 0-6.4l.7-.7L3.4 9l-.7.7c-1 1-1 2.6 0 3.6s2.6 1 3.6 0l3-3c1-1 1-2.6 0-3.6L8.6 6 10 4.6l.7.7c1.8 1.8 1.8 4.6 0 6.4l-3 3c-.8.8-2 1.3-3.2 1.3z"/><path d="M6 11.4l-.7-.7c-1.8-1.8-1.8-4.6 0-6.4l3-3c.9-.9 2-1.3 3.2-1.3s2.3.5 3.2 1.3c1.8 1.8 1.8 4.6 0 6.4l-.7.7L12.6 7l.7-.7c1-1 1-2.6 0-3.6s-2.6-1-3.6 0l-3 3c-1 1-1 2.6 0 3.6l.7.7L6 11.4z"/></svg>

package/src/Atom/Icon/images/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M15.3 0H.7C.3 0 0 .3 0 .7v14.7c0 .3.3.6.7.6h14.7c.4 0 .7-.3.7-.7V.7c-.1-.4-.4-.7-.8-.7zM4.7 13.6H2.4V6h2.4v7.6zM3.6 5c-.8 0-1.4-.7-1.4-1.4 0-.8.6-1.4 1.4-1.4.8 0 1.4.6 1.4 1.4-.1.7-.7 1.4-1.4 1.4zm10 8.6h-2.4V9.9c0-.9 0-2-1.2-2s-1.4 1-1.4 2v3.8H6.2V6h2.3v1c.3-.6 1.1-1.2 2.2-1.2 2.4 0 2.8 1.6 2.8 3.6v4.2z" /></svg>