@crystallize/design-system 1.3.1 → 1.3.2

package/src/dropdown-menu/DropdownMenu.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta } from '@storybook/react';
+
+import { DropdownMenu } from '.';
+import { Button } from '../button';
+import { Icon } from '../iconography';
+
+export default {
+  title: 'Components/DropdownMenu',
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as Meta<any>;
+
+function ContentWithIcon() {
+  return (
+    <>
+      <DropdownMenu.Label>View</DropdownMenu.Label>
+      <DropdownMenu.Item>
+        <div className="flex items-center font-sans">
+          <Icon.Glasses width={24} height={24} />
+          <span className="px-3">Nerdy</span>
+        </div>
+      </DropdownMenu.Item>
+      <DropdownMenu.Item>
+        <div className="flex items-center">
+          <Icon.GraphQL width={24} height={24} />
+          <span className="px-3 font-sans">Developer</span>
+        </div>
+      </DropdownMenu.Item>
+    </>
+  );
+}
+
+export const WithOpenState = () => {
+  return (
+    <DropdownMenu.Root content={<ContentWithIcon />}>
+      <Button prepend={<Icon.NailPolish width={20} height={20} />}>Pretty</Button>
+    </DropdownMenu.Root>
+  );
+};

package/src/dropdown-menu/dropdown-menu-item.tsx

@@ -0,0 +1,15 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cx } from 'class-variance-authority';
+import type { ReactNode } from 'react';
+
+type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
+  children: ReactNode;
+};
+
+export function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps) {
+  return (
+    <DropdownMenuPrimitive.Item {...delegated} className={cx('c-dropdown-menu-item', className)}>
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+}

package/src/dropdown-menu/dropdown-menu-label.tsx

@@ -0,0 +1,10 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import type { ReactNode } from 'react';
+
+type DropdownMenuLabelProps = {
+  children: ReactNode;
+};
+
+export function DropdownMenuLabel({ children }: DropdownMenuLabelProps) {
+  return <DropdownMenuPrimitive.Label className="c-dropdown-menu-label">{children}</DropdownMenuPrimitive.Label>;
+}

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
+  children: ReactNode;
+  content: ReactNode;
+  alignContent?: 'start' | 'center' | 'end';
+  disabled?: boolean;
+};
+
+export function DropdownMenuRoot({
+  children,
+  content,
+  alignContent = 'start',
+  disabled,
+  ...delegated
+}: DropdownMenuRootProps) {
+  return (
+    <DropdownMenuPrimitive.Root>
+      <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
+        {children}
+      </DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Content
+        align={alignContent}
+        sideOffset={5}
+        className="c-dropdown-menu-content"
+        {...delegated}
+      >
+        {content}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Root>
+  );
+}

package/src/dropdown-menu/dropdown-menu.css

@@ -0,0 +1,20 @@
+.c-dropdown-menu-content {
+  @apply shadow;
+}
+
+.c-dropdown-menu-label {
+  @apply bg-elevate px-4 pt-2 font-sans text-xs font-bold text-gray-500-400;
+  @apply first:rounded-tl first:rounded-tr;
+}
+
+.c-dropdown-menu-item {
+  @apply flex h-10 cursor-pointer items-center bg-elevate px-3 font-sans text-xs font-medium text-gray-700-200;
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    @apply bg-gray-50-900 outline-none;
+  }
+
+  @apply first:rounded-tr first:rounded-tl last:rounded-br last:rounded-bl;
+}

package/src/dropdown-menu/index.ts

@@ -0,0 +1,11 @@
+import { DropdownMenuRoot } from './dropdown-menu-root';
+import { DropdownMenuItem } from './dropdown-menu-item';
+import { DropdownMenuLabel } from './dropdown-menu-label';
+
+import './dropdown-menu.css';
+
+export const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Item: DropdownMenuItem,
+  Label: DropdownMenuLabel,
+};

package/src/icon-button/IconButton.stories.tsx

@@ -0,0 +1,45 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { IconButton } from '.';
+import { Card } from '../card';
+import { Icon } from '../iconography';
+
+const meta: Meta<typeof IconButton> = {
+  title: 'Components/IconButton',
+  component: IconButton,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+const sizes = ['xxs', 'xs', 'sm', 'md', 'lg'] as const;
+
+export const AllButton: Story = {
+  name: 'All Buttons',
+  render: () => {
+    return (
+      <div className="grid grid-cols-5 justify-items-center gap-6">
+        {sizes.map(size => (
+          <Card>
+            <IconButton size={size}>
+              <Icon.Cancel width={16} height={16} />
+            </IconButton>
+          </Card>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Default: Story = {
+  args: {
+    children: <Icon.Cancel width={16} height={16} />,
+  },
+};
+
+export const Elevate: Story = {
+  args: {
+    children: <Icon.Add width={16} height={16} />,
+    variant: 'elevate',
+  },
+};

package/src/icon-button/icon-button.css

@@ -0,0 +1,48 @@
+.c-icon-button {
+  @apply flex cursor-pointer appearance-none items-center justify-center rounded border-none bg-transparent p-0 font-medium;
+
+  &:not(:disabled):active {
+    transform: scale(0.95);
+  }
+
+  &:disabled {
+    @apply scale-100 cursor-default shadow-none;
+  }
+
+  &:focus,
+  &:hover {
+    @apply bg-elevate shadow;
+  }
+
+  &:focus-visible {
+    @apply outline outline-1 outline-offset-1 outline-inherit;
+  }
+
+  &-elevate {
+    @apply bg-elevate shadow;
+  }
+
+  &:not(:disabled):hover {
+    @apply outline outline-1 outline-purple-200-700;
+  }
+
+  &-xxs {
+    @apply h-5 w-5;
+  }
+
+  &-xs {
+    @apply h-6 w-6;
+  }
+
+  &-sm {
+    @apply h-9 w-9;
+  }
+
+  &-md {
+    @apply h-11 w-11;
+  }
+
+  &-lg {
+    @apply h-14 w-14;
+  }
+}

package/src/icon-button/icon-button.tsx

@@ -0,0 +1,39 @@
+import { ComponentPropsWithRef, forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import './icon-button.css';
+
+type IconButtonStylesProps = VariantProps<typeof buttonStyles>;
+const buttonStyles = cva(['c-icon-button'], {
+  variants: {
+    variant: {
+      default: '',
+      elevate: 'c-icon-button-elevate',
+    },
+    size: {
+      xxs: 'c-icon-button-xxs',
+      xs: 'c-icon-button-xs',
+      sm: 'c-icon-button-sm',
+      md: 'c-icon-button-md',
+      lg: 'c-icon-button-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    variant: 'default',
+  },
+});
+
+export type IconButtonProps = ComponentPropsWithRef<'button'> & IconButtonStylesProps;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ children, className, type = 'button', size, variant, ...delegated }, ref) => {
+    return (
+      <button ref={ref} type={type} className={buttonStyles({ size, variant, className })} {...delegated}>
+        {children}
+      </button>
+    );
+  },
+);
+
+IconButton.displayName = 'Button';

package/src/icon-button/index.ts

@@ -0,0 +1,3 @@
+export { IconButton } from './icon-button';
+
+export type { IconButtonProps } from './icon-button';

package/src/iconography/Icon.stories.tsx

@@ -0,0 +1,47 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Icon } from '.';
+import { Card } from '../card';
+
+function Dummy() {
+  return <div>🤓</div>;
+}
+
+const meta: Meta<typeof Dummy> = {
+  title: 'Components/Icon',
+  component: Dummy,
+};
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const AllIcons: Story = {
+  name: 'All icons',
+  render: () => {
+    return (
+      <div>
+        <div className="grid grid-cols-6 justify-items-center gap-6">
+          {Object.keys(Icon).map(iconName => {
+            // @ts-expect-error
+            const Cmp = Icon[iconName];
+            const cmpString = `<Icon.${iconName} />`;
+            return (
+              <div
+                className="cursor-pointer text-center active:scale-95"
+                onClick={() => {
+                  const type = 'text/plain';
+                  const blob = new Blob([cmpString], { type });
+                  navigator.clipboard.write([new ClipboardItem({ [type]: blob })]);
+                }}
+              >
+                <Card title={cmpString}>
+                  <Cmp width={25} height={25} />
+                </Card>
+                <div className="mt-2 whitespace-nowrap text-xs text-gray-700-200">{cmpString}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+};

package/src/iconography/add.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, SVGProps } from 'react';
+
+type AddProps = SVGProps<SVGSVGElement>;
+
+type AddRef = SVGSVGElement;
+
+export const Add = forwardRef<AddRef, AddProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="currentColor"
+      {...delegated}
+    >
+      <path
+        fill="#528693"
+        d="M13.258 19.467c.005-.095-.045-3.832-.045-3.832v-2.157l-.05-.096.141-.13 5.963.028a.647.647 0 0 0 .407-.15.587.587 0 0 0 .202-.376l.005-.188.055-3.064a.576.576 0 0 0-.174-.521.6.6 0 0 0-.266-.155 1.606 1.606 0 0 0-.366-.028c-.055.01-.114.004-.194.01h-.646l-4.962.031a.188.188 0 0 1-.133-.032l-.055-.091v-.348l.05-5.612a.61.61 0 0 0-.16-.434.625.625 0 0 0-.316-.16c-.109-.009-.258-.004-.38-.004-.058-.005-2.166-.092-2.974-.12a.517.517 0 0 0-.42.165.567.567 0 0 0-.156.44l.004 2.336-.045 2.57.022 1.222a.151.151 0 0 1-.04.086.105.105 0 0 1-.079.033l-5.894-.05a.57.57 0 0 0-.517.25c-.095.202-.13.427-.101.648L2.06 12.59a.598.598 0 0 0 .178.453l.054.055a.573.573 0 0 0 .247.11c.086.016.172.022.26.018l2.68.037 3.287-.014a16.393 16.393 0 0 0-.046 2.005l.02.22c-.02.017-.02.274 0 3.384.006.077.007.155.004.232-.01.136.006.273.045.403.024.083.07.157.133.215.053.059.12.104.194.133.146.037.297.052.448.046.06-.005.119 0 .174 0l2.748.077c.2.022.4-.016.577-.11a.452.452 0 0 0 .194-.388Zm-.873-.278h-.12a52.435 52.435 0 0 0-1.019-.05l-1.527-.066-.092-.046a.18.18 0 0 1-.04-.168l.044-3.357.015-2.401a.678.678 0 0 0-.188-.535.651.651 0 0 0-.457-.194l-5.185.017-.695-.009-.114.05-.12-.118.005-2.474a.248.248 0 0 1 .037-.202l.073-.054 5.163.022H9.3a.194.194 0 0 0 .156-.064.189.189 0 0 0 .06-.151l.004-1.706.014-2.62.013-1.45.018-.582-.004-.088.055-.054a.239.239 0 0 1 .165-.055l2.487.055.092.01.065.064.022.077-.091 5.333-.002.797a.452.452 0 0 0 .457.457l5.479-.018h.165c.165-.008.33-.002.493.018.046.006.09.02.13.041.05.05.036.156.036.238l-.004.078-.032 1.898s-.005.178-.01.22a.567.567 0 0 0 .005.123.5.5 0 0 1 .005.114c-.028.11-.12.119-.28.114l-5.583-.013a.905.905 0 0 0-.59.114.6.6 0 0 0-.234.499l.02 2.743.113 3.023c0 .068-.007.135-.018.201a.165.165 0 0 1-.12.17v-.002Z"
+      />
+      <path
+        fill="#BFF6F8"
+        d="M12.384 19.19h-.119a52.478 52.478 0 0 0-1.02-.05l-1.527-.065-.092-.046a.18.18 0 0 1-.04-.169l.045-3.357.014-2.401a.678.678 0 0 0-.188-.535.651.651 0 0 0-.457-.194l-5.184.016-.695-.009-.114.05-.12-.118.005-2.474a.248.248 0 0 1 .037-.202l.073-.054 5.163.022H9.3a.194.194 0 0 0 .156-.064.189.189 0 0 0 .06-.151l.004-1.706.014-2.62.013-1.45.018-.582-.004-.088.055-.054a.239.239 0 0 1 .165-.055l2.487.055.092.01.065.064.022.077-.091 5.333-.002.797a.452.452 0 0 0 .457.457l5.479-.018h.165c.165-.008.33-.002.493.018.046.006.09.02.13.041.05.05.036.156.036.238l-.004.078-.032 1.898s-.005.178-.01.22a.567.567 0 0 0 .005.123.5.5 0 0 1 .005.114c-.028.11-.12.119-.28.114l-5.583-.013a.906.906 0 0 0-.59.114.6.6 0 0 0-.234.499l.02 2.743.113 3.023c0 .068-.007.135-.018.201a.166.166 0 0 1-.12.17Z"
+      />
+    </svg>
+  );
+});
+
+Add.displayName = 'AddIcon';

package/src/iconography/arrow.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, SVGProps } from 'react';
+
+type ArrowProps = SVGProps<SVGSVGElement>;
+
+type ArrowRef = SVGSVGElement;
+
+export const Arrow = forwardRef<ArrowRef, ArrowProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="10" height="10" viewBox="0 0 10 10" fill="currentColor" {...delegated}>
+      <path d="M4.14995 9.85C4.24341 9.94161 4.36907 9.99293 4.49995 9.99293C4.63083 9.99293 4.75649 9.94161 4.84995 9.85L8.03995 6.67C8.09195 6.6248 8.13404 6.56934 8.16359 6.5071C8.19314 6.44486 8.20951 6.37719 8.21167 6.30832C8.21383 6.23946 8.20173 6.17089 8.17614 6.10693C8.15055 6.04296 8.11201 5.98497 8.06295 5.9366C8.01389 5.88823 7.95536 5.85052 7.89104 5.82584C7.82671 5.80116 7.75798 5.79003 7.68915 5.79317C7.62033 5.79631 7.55289 5.81363 7.49108 5.84406C7.42927 5.87449 7.37441 5.91737 7.32995 5.97L4.49995 8.78L1.66995 5.96C1.62475 5.908 1.56929 5.86591 1.50705 5.83636C1.44481 5.80681 1.37714 5.79044 1.30827 5.78828C1.23941 5.78612 1.17084 5.79822 1.10688 5.82381C1.04291 5.8494 0.98492 5.88794 0.936549 5.937C0.888179 5.98606 0.850469 6.04459 0.825787 6.10892C0.801105 6.17324 0.789983 6.24197 0.79312 6.3108C0.796256 6.37962 0.813582 6.44706 0.844012 6.50887C0.874442 6.57068 0.917318 6.62554 0.96995 6.67L4.14995 9.85ZM4.49995 -2.18557e-08C4.22381 -3.39261e-08 3.99995 0.223858 3.99995 0.5L3.99995 9.5L4.99995 9.5L4.99995 0.5C4.99995 0.223857 4.77609 -9.78527e-09 4.49995 -2.18557e-08Z" />
+    </svg>
+  );
+});
+
+Arrow.displayName = 'ArrowIcon';

package/src/iconography/atom.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, SVGProps } from 'react';
+
+type AtomProps = SVGProps<SVGSVGElement>;
+
+type AtomRef = SVGSVGElement;
+
+export const Atom = forwardRef<AtomRef, AtomProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      width="24"
+      height="27"
+      viewBox="0 0 24 27"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...delegated}
+    >
+      <path
+        fill="#528693"
+        d="M18.068 3.103c.935 0 .938-1.5 0-1.5s-.938 1.5 0 1.5ZM5.911 2.928c.641 0 .643-1.027 0-1.027-.642 0-.643 1.027 0 1.027ZM4.294 8.862c.577 0 .578-.925 0-.925s-.578.925 0 .925ZM6.03 23.058a.39.39 0 0 0 .265-.126.413.413 0 0 0 0-.558.39.39 0 0 0-.264-.126.39.39 0 0 0-.264.126.413.413 0 0 0 0 .558.39.39 0 0 0 .264.126ZM16.93 23.13c.674 0 .675-1.078 0-1.078s-.675 1.078 0 1.078ZM18.966 17.685c.885 0 .887-1.418 0-1.418-.886 0-.886 1.418 0 1.418ZM11.6 23.619a.217.217 0 0 0 .15-.069.23.23 0 0 0 0-.315.216.216 0 0 0-.15-.068.216.216 0 0 0-.15.068.23.23 0 0 0 0 .315c.039.042.093.067.15.069ZM22.291 13.446l.043.031a.903.903 0 0 0 1.263-.344.972.972 0 0 0 0-.952.936.936 0 0 0-.34-.348.902.902 0 0 0-.924.004l-.042.03a.905.905 0 0 0-.319.33.937.937 0 0 0 0 .922c.077.136.187.25.319.329v-.002ZM11.496 26.097c3.17 0 5.738-.359 5.738-.8 0-.443-2.569-.802-5.738-.802-3.17 0-5.738.359-5.738.801 0 .442 2.569.8 5.738.8Z"
+        opacity=".05"
+      />
+      <path
+        fill="#FF99DB"
+        d="M11.496 16.417c1.95 0 3.531-1.629 3.531-3.638 0-2.01-1.581-3.638-3.531-3.638-1.95 0-3.531 1.629-3.531 3.638 0 2.01 1.58 3.638 3.53 3.638Z"
+      />
+      <path
+        fill="#528693"
+        d="M8.252 12.78c0-.689.207-1.36.591-1.923.385-.563.929-.99 1.557-1.222a3.153 3.153 0 0 1 1.956-.076 3.236 3.236 0 0 1 1.642 1.096 3.424 3.424 0 0 1 .285 3.834 3.278 3.278 0 0 1-1.46 1.341 3.156 3.156 0 0 1-1.945.232A3.259 3.259 0 0 1 9 14.9a3.437 3.437 0 0 1-.748-2.122.3.3 0 0 0-.088-.202.283.283 0 0 0-.398 0 .3.3 0 0 0-.088.202c0 .81.243 1.602.695 2.265a3.834 3.834 0 0 0 1.834 1.439c.74.273 1.545.305 2.304.09a3.81 3.81 0 0 0 1.934-1.293 4.03 4.03 0 0 0 .33-4.516 3.859 3.859 0 0 0-1.723-1.577 3.715 3.715 0 0 0-2.29-.268 3.85 3.85 0 0 0-2.203 1.37 4.059 4.059 0 0 0-.881 2.49.3.3 0 0 0 .088.202.283.283 0 0 0 .398 0 .3.3 0 0 0 .088-.202Z"
+      />
+      <path
+        fill="#528693"
+        d="M9.025 12.946a2.787 2.787 0 0 1 .78-1.91 2.626 2.626 0 0 1 1.854-.803.157.157 0 0 0 .113-.048.167.167 0 0 0 0-.232.157.157 0 0 0-.113-.048c-.783 0-1.533.32-2.087.891a3.093 3.093 0 0 0-.866 2.15c0 .044.017.086.047.116a.157.157 0 0 0 .225 0 .167.167 0 0 0 .047-.116ZM8.972 13.854c.033 0 .066-.01.094-.029a.17.17 0 0 0 .062-.079.137.137 0 0 0 .014-.068l-.006-.046a.176.176 0 0 0-.044-.078l-.034-.027a.167.167 0 0 0-.086-.025.174.174 0 0 0-.12.053.183.183 0 0 0-.05.123l.005.046c.008.03.024.056.044.078l.035.028a.166.166 0 0 0 .086.023v.001ZM12.136 10.204v.004a.112.112 0 0 0 .026.051c.01.016.024.03.04.039l.036.015a.145.145 0 0 0 .077 0l.034-.015a.112.112 0 0 0 .041-.039.076.076 0 0 0 .019-.033.118.118 0 0 0 .012-.057l-.005-.04-.014-.035a.113.113 0 0 0-.038-.042.107.107 0 0 0-.05-.027.109.109 0 0 0-.057-.003.104.104 0 0 0-.054.018l-.03.024a.148.148 0 0 0-.037.065v.004a.136.136 0 0 0 0 .07Z"
+      />
+      <path
+        fill="#528693"
+        d="M6.023 12.779a23.383 23.383 0 0 1 1.024-7.096c.517-1.608 1.283-3.336 2.601-4.417.989-.81 2.233-.962 3.322-.27 1.369.87 2.196 2.529 2.747 4.027a21.916 21.916 0 0 1 1.234 6.778 24.482 24.482 0 0 1-.779 7.302c-.471 1.725-1.178 3.543-2.437 4.827-.881.898-2.097 1.4-3.294.86-1.407-.632-2.294-2.18-2.89-3.56-.883-2.039-1.303-4.3-1.46-6.515a27.856 27.856 0 0 1-.068-1.936.278.278 0 0 0-.082-.187.262.262 0 0 0-.369 0 .278.278 0 0 0-.081.187c.004 2.518.314 5.078 1.117 7.465.567 1.685 1.403 3.46 2.818 4.559a3.229 3.229 0 0 0 3.73.283c1.471-.883 2.37-2.582 2.98-4.158.88-2.267 1.261-4.74 1.347-7.17a24.885 24.885 0 0 0-.84-7.606c-.509-1.799-1.28-3.699-2.628-5.008C12.998.158 11.617-.328 10.28.247 8.781.892 7.8 2.46 7.15 3.92c-.951 2.138-1.408 4.494-1.582 6.829-.05.675-.074 1.352-.075 2.03.002.07.032.138.081.187a.262.262 0 0 0 .369 0 .278.278 0 0 0 .081-.187Z"
+      />
+      <path
+        fill="#528693"
+        d="M8.64 7.969c2.066-1.293 4.315-2.336 6.686-2.86 1.61-.357 3.548-.57 5.086.197.576.27 1.048.73 1.34 1.309.24.543.327 1.145.25 1.737-.164 1.605-1.1 3.108-2.06 4.333a21.318 21.318 0 0 1-4.85 4.42 22.562 22.562 0 0 1-6.661 3.155c-1.718.468-3.69.777-5.416.176-1.207-.422-2.038-1.42-2.049-2.758-.012-1.547.808-3.03 1.665-4.243a19.773 19.773 0 0 1 4.556-4.482c.474-.345.958-.673 1.454-.984.29-.184.024-.657-.269-.473a22.835 22.835 0 0 0-5.39 4.61C1.87 13.438.81 15.035.512 16.801c-.235 1.395.136 2.779 1.293 3.62 1.41 1.023 3.364.982 4.994.743 2.442-.36 4.8-1.342 6.944-2.575a23.78 23.78 0 0 0 5.757-4.55c1.223-1.345 2.372-2.932 2.86-4.732.359-1.328.254-2.821-.758-3.823-1.204-1.192-3.091-1.326-4.666-1.182-2.378.218-4.688 1.076-6.806 2.183-.599.313-1.183.651-1.757 1.01-.293.183-.026.657.268.473Z"
+      />
+      <path
+        fill="#528693"
+        d="M14.62 7.496c-2.17-1.357-4.551-2.454-7.05-2.966-1.725-.353-3.736-.512-5.352.35a3.343 3.343 0 0 0-1.39 1.404 3.481 3.481 0 0 0-.38 1.967c.135 1.715 1.061 3.29 2.067 4.615a21.487 21.487 0 0 0 5.078 4.687 22.835 22.835 0 0 0 7.03 3.29c1.783.463 3.854.752 5.624.074 1.321-.507 2.24-1.618 2.306-3.095.074-1.64-.756-3.25-1.652-4.546-1.285-1.86-2.956-3.421-4.755-4.742a24.734 24.734 0 0 0-1.526-1.037c-.293-.185-.56.289-.269.473a22.565 22.565 0 0 1 5.134 4.347c1.078 1.26 2.095 2.754 2.443 4.424.258 1.237-.018 2.535-1.092 3.266-1.361.927-3.228.846-4.768.588-2.321-.389-4.55-1.322-6.593-2.502a23.435 23.435 0 0 1-5.472-4.295c-1.187-1.278-2.314-2.784-2.819-4.501-.351-1.197-.326-2.555.618-3.46C2.94 4.75 4.755 4.716 6.204 4.867c2.261.235 4.469 1.078 6.48 2.139.567.3 1.123.623 1.668.964.06.032.131.04.197.02a.267.267 0 0 0 .155-.126.282.282 0 0 0-.084-.367Z"
+      />
+      <path
+        fill="#fff"
+        d="M11.963 14.285h.003c.2-.04.384-.14.53-.287.175-.111.317-.27.41-.46l.159-.388c.065-.21.075-.434.028-.649a1.234 1.234 0 0 0-.188-.604l-.246-.329-.32-.254a1.152 1.152 0 0 0-.585-.193 1.164 1.164 0 0 0-.63.03l-.377.163c-.343.228-.6.571-.725.971l-.056.433c-.01.217.037.433.136.626.036.136.106.26.203.359.11.176.263.32.442.418l.377.164c.275.078.564.078.84 0h-.001Z"
+      />
+      <path
+        fill="#FF99DB"
+        d="m11.172 13.1.017.019.105.083c.057.038.124.06.192.063a.253.253 0 0 0 .138 0 .379.379 0 0 0 .191-.063l.105-.083.08-.108a.403.403 0 0 0 .062-.199.414.414 0 0 0-.009-.212l-.002-.026a.548.548 0 0 0-.135-.24.524.524 0 0 0-.232-.139l-.14-.019a.513.513 0 0 0-.265.074.605.605 0 0 0-.243.324.562.562 0 0 0 .136.527Z"
+      />
+    </svg>
+  );
+});
+
+Atom.displayName = 'AtomIcon';

package/src/iconography/cancel.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CancelProps = SVGProps<SVGSVGElement>;
+
+type CancelRef = SVGSVGElement;
+
+export const Cancel = forwardRef<CancelRef, CancelProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      width="34"
+      height="34"
+      viewBox="0 0 34 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...delegated}
+    >
+      <path
+        d="m27.4301 24.4325-.1299.1299c-.17.15-.6497.5798-1.1695 1.0595l-1.7392 1.5993-.1499.05a.2783.2783 0 0 1-.2299-.14l-3.6183-3.7182-2.6088-2.6388a1.0488 1.0488 0 0 0-.7926-.3838 1.006 1.006 0 0 0-.7096.2899l-5.6474 5.6773-.7696.7496-.07.18h-.2599l-2.6987-2.7088a.3813.3813 0 0 1-.18-.2598l.02-.14 5.6674-5.6173 1.2394-1.2395a.2995.2995 0 0 0 .1-.2398.2903.2903 0 0 0-.1-.2299l-1.8591-1.8692-2.8487-2.8786-1.5692-1.5992-.6197-.6597-.1-.09v-.12a.3689.3689 0 0 1 .12-.2398l2.7786-2.6588.11-.09h.14l.1099.06 5.7273 5.9272.8696.8796a.6998.6998 0 0 0 .9995 0l5.9672-6.0071.1799-.18a4.5467 4.5467 0 0 1 .5597-.5197.5585.5585 0 0 1 .19-.1c.1099 0 .2099.13.2998.22l.08.0899 2.039 2.109s.1899.2.2299.2499a.864.864 0 0 0 .1399.13.7704.7704 0 0 1 .13.1199c.0899.1499 0 .2598-.1799.4298l-6.1172 6.0871a1.3994 1.3994 0 0 0-.5197.7696.9287.9287 0 0 0 .2899.7997l3.0185 2.9786 3.4284 3.1785a2.001 2.001 0 0 1 .1999.2398.2564.2564 0 0 1 .0853.1524.2564.2564 0 0 1-.0323.1715Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+});
+
+Cancel.displayName = 'CancelIcon';

package/src/iconography/catalogue.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CatalogueProps = SVGProps<SVGSVGElement>;
+
+type CatalogueRef = SVGSVGElement;
+
+export const Catalogue = forwardRef<CatalogueRef, CatalogueProps>((delegated, ref) => {
+  return (
+    <svg ref={ref} width="22" height="23" viewBox="0 0 22 23" fill="none" {...delegated}>
+      <path
+        d="m20.558 16.922-.006-1.83c-.007-2.697-.007-4.838-.007-7.845l-.013-3.893a.226.226 0 0 0-.213-.22l-7.088-.013c-1.184.032-1.928.498-2.212 1.423-.343-.932-1.067-1.384-2.277-1.423l-7.095-.007a.221.221 0 0 0-.213.22l.02 13.647-.014.77c-.006.497-.006.995-.006 1.493a.29.29 0 0 0 .29.291h.544c.647 0 1.294 0 1.934-.006.64-.007 1.287-.007 1.927-.007h.55c.595 0 1.19.007 1.779.007.588 0 1.19.013 1.785.013s1.183-.007 1.778-.02c.356-.006.718-.006 1.08-.006l2.717.006c.653 0 1.3.007 1.953.007s1.306.006 1.953.006h.556a.294.294 0 0 0 .291-.29l-.013-2.323ZM1.997 5.274c-.026-.543-.046-1.112-.026-1.571l.743-.02c.854 0 1.714 0 2.568-.006.298 0 .647-.013 1.015-.032.42-.02.867-.04 1.307-.04 1.067 0 2.341.104 2.736.88.284.592.413 1.246.375 1.902l-.007 2.73v2.897c0 .304-.006.582-.013.912-.006.607-.019 1.131-.032 1.649-.026.97-.045 1.888.039 3.356-.931-.944-2.613-1.093-3.531-1.1l-2.794-.006c-.557 0-1.158.033-1.727.059l-.653.064c0-1.313.006-2.25.012-3.24 0-.757.007-1.546.013-2.561v-5.07c0-.246-.013-.518-.025-.803Zm7.23 13.615c-1.222.013-2.845.052-3.654.065-.278.006-.46.013-.491.013H3.71c-.582 0-1.164-.007-1.681-.007-.013-.045-.007-.407 0-.698.015-.259.017-.518.006-.776.104 0 .208-.007.31-.02.078-.006.15-.019.22-.019.583-.013 1.094-.02 1.624-.02.317-.006 1.242-.019 1.242-.019.233 0 .504-.006.795-.006 2.723 0 4.198.472 4.508 1.442l.007.084a12.369 12.369 0 0 0-1.514-.039Zm2.005.071a.333.333 0 0 0 .007-.11c.452-1.293 2.354-1.442 3.744-1.442.408 0 .796.02 1.139.026.2.013.381.02.543.02l3.285-.007.046 1.494-8.764.02Zm8.072-2.108c-.156 0-.298 0-.427-.006h-.09c-.46 0-.926-.007-1.385-.02-.563-.006-1.125-.013-1.694-.013h-.492c-.161 0-.336.007-.563.02a9.1 9.1 0 0 0-2.095.362c-.176.058-.35.127-.517.207-.283.119-.545.283-.777.485a.172.172 0 0 0-.032.039c.045-1.462.071-2.807.071-4.237v-.039c.007-.55.007-1.099.007-1.662l-.039-5.6c0-.266-.013-.524-.032-.77.006-.104.013-.214.025-.317.26-1.475 1.475-1.675 2.633-1.675.284 0 .575.013.847.032.252.007.485.02.699.02l2.496.006 1.397-.006c.233 0 .453 0 .627-.013v1.377c-.006 1.61-.006 3.215-.006 4.825 0 1.19.006 2.147.013 3.066.006 1.209.013 2.354.039 3.887-.235.023-.47.033-.705.031Z"
+        fill="#528693"
+      />
+      <path
+        d="m19.996 18.94-8.764.02a.333.333 0 0 0 .007-.11c.452-1.294 2.354-1.443 3.744-1.443.408 0 .796.02 1.139.026.2.013.381.02.543.02l3.285-.007.046 1.494ZM10.74 18.927a12.37 12.37 0 0 0-1.513-.038c-1.222.012-2.845.051-3.654.064l-.491.013H3.71c-.582 0-1.165-.006-1.682-.006-.013-.046-.006-.408 0-.699.015-.258.018-.517.007-.776.103 0 .207-.006.31-.02.078-.006.149-.019.22-.019a71.5 71.5 0 0 1 1.623-.02c.317-.006 1.242-.018 1.242-.018.233 0 .504-.007.796-.007 2.722 0 4.197.472 4.507 1.442l.007.084Z"
+        fill="#fff"
+      />
+      <path
+        d="m10.715 6.387-.007 2.73v2.897c0 .304-.006.582-.013.912-.006.607-.02 1.131-.032 1.649-.026.97-.045 1.888.039 3.356-.932-.944-2.613-1.093-3.532-1.1l-2.794-.006c-.556 0-1.157.033-1.726.059l-.654.064c0-1.313.007-2.25.013-3.24 0-.757.007-1.546.013-2.561v-5.07c0-.246-.013-.518-.026-.803a18.746 18.746 0 0 1-.025-1.571l.743-.02c.854 0 1.714 0 2.568-.006.297 0 .647-.013 1.015-.032.42-.02.867-.04 1.307-.04 1.067 0 2.341.104 2.735.88.285.592.414 1.246.376 1.902ZM20.009 16.82c-.235.023-.47.034-.705.032-.156 0-.298 0-.427-.006h-.09c-.46 0-.926-.007-1.385-.02-.563-.006-1.125-.013-1.694-.013h-.492c-.162 0-.336.007-.563.02a9.1 9.1 0 0 0-2.095.362c-.177.058-.35.127-.518.207a2.88 2.88 0 0 0-.776.485.174.174 0 0 0-.032.038c.045-1.461.071-2.806.071-4.236v-.039c.007-.55.007-1.099.007-1.662l-.04-5.6c0-.266-.012-.524-.031-.77.006-.104.012-.214.025-.317.26-1.475 1.475-1.675 2.633-1.675.284 0 .575.013.847.032.252.007.485.02.698.02l2.497.006 1.397-.006c.233 0 .453 0 .627-.013v1.377c-.006 1.61-.006 3.215-.006 4.825 0 1.19.006 2.147.013 3.066.006 1.208.015 2.353.039 3.887Z"
+        fill="#BFF6F8"
+      />
+    </svg>
+  );
+});
+
+Catalogue.displayName = 'CatalogueIcon';

package/src/iconography/copy.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CopyProps = SVGProps<SVGSVGElement>;
+
+type CopyRef = SVGSVGElement;
+
+export const Copy = forwardRef<CopyRef, CopyProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      width="14"
+      height="16"
+      viewBox="0 0 14 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...delegated}
+    >
+      <rect x=".5" y="3.5" width="9" height="12" rx="2.5" fill="#EAEBEE" stroke="#80878D" strokeDasharray="3 2" />
+      <rect x="4.5" y=".5" width="9" height="12" rx="2.5" fill="#EAEBEE" stroke="#80878D" />
+    </svg>
+  );
+});
+
+Copy.displayName = 'CopyIcon';

package/src/iconography/crystal.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, SVGProps } from 'react';
+
+type CrystalProps = SVGProps<SVGSVGElement>;
+
+type CrystalRef = SVGSVGElement;
+
+export const Crystal = forwardRef<CrystalRef, CrystalProps>((delegated, ref) => {
+  return (
+    <svg
+      ref={ref}
+      width="27"
+      height="27"
+      viewBox="0 0 27 27"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...delegated}
+    >
+      <path
+        fill="#528693"
+        d="M13.945 26.805c3.479 0 6.299-.386 6.299-.861 0-.476-2.82-.861-6.299-.861-3.478 0-6.298.385-6.298.86 0 .476 2.82.862 6.298.862ZM25.356 5.894l-2.998-2.938-1.98 4.77 4.978-1.832ZM26.995 14.579l-.341-3.357-3.644 1.896 3.985 1.46ZM.896 14.579l.341-3.357 3.643 1.896-3.984 1.46ZM2.563 5.894l2.999-2.938 1.98 4.77-4.979-1.832Z"
+        opacity=".15"
+      />
+      <path fill="#AEF9F6" d="m23.267 13.32-1.348-.562-1.444-6.409 2.792 6.971Z" />
+      <path fill="#fff" d="M20.475 6.35 15.51 10.6l-1.412-.367 6.378-3.884Z" />
+      <path fill="#fff" d="m14.732 23.732-.635-13.5 1.412.368.217.181-.994 12.951Z" />
+      <path
+        fill="#AEF9F6"
+        d="m23.267 13.32-8.535 10.412 6.63-10.123.557-.85 1.348.56ZM21.92 12.758 15.51 10.6l4.965-4.25 1.444 6.408Z"
+      />
+      <path fill="#AEF9F6" d="m15.51 10.6 6.41 2.158-.558.85-6.63 10.124.777-13.132Z" />
+      <path
+        fill="#528693"
+        d="m20.358 6.113-5.596 3.406-.782.476a.263.263 0 0 0-.145.223l.216 4.584.34 7.25.079 1.666a.27.27 0 0 0 .18.259.262.262 0 0 0 .3-.098l2.898-3.535 4.584-5.592 1.054-1.285a.267.267 0 0 0 .017-.266l-2.45-6.114-.343-.855c-.127-.316-.596-.078-.47.237l2.45 6.115.343.854.017-.266-2.898 3.535-4.584 5.592-1.054 1.285.48.162-.216-4.584-.341-7.25-.078-1.666-.145.223 5.596-3.406.782-.477c.288-.174.056-.65-.234-.473Z"
+      />
+      <path
+        fill="#528693"
+        d="M23.309 13.194c-.47-.196-.935-.417-1.416-.584-.556-.193-1.117-.376-1.675-.564l-4.498-1.514c-.517-.174-1.055-.288-1.582-.426-.162-.042-.246.209-.083.251.492.129.997.234 1.48.392.56.183 1.116.375 1.675.564l4.499 1.514c.516.174 1.014.409 1.517.618.156.065.239-.186.083-.251Z"
+      />
+      <path
+        fill="#528693"
+        d="m14.863 23.739.16-2.712.327-5.509.258-4.366.027-.449c0-.013.014-.078.005-.089.043.052-.1.109-.006.054.164-.119.319-.25.462-.395l.857-.735 3.537-3.027.073-.062-.216-.072.905 4.012.48 2.13c.01.076.026.15.05.222.042.093-.023-.039.025-.05-.04.01-.128.196-.15.228l-2.166 3.307-3.055 4.663-1.18 1.8c-.2.308-.42.61-.606.928l-.027.041a.134.134 0 0 0 .038.18.13.13 0 0 0 .18-.032l1.504-2.297 3.03-4.626 2.375-3.626c.1-.151.316-.37.29-.562-.08-.56-.254-1.124-.378-1.676l-1.037-4.603-.021-.093a.135.135 0 0 0-.088-.098.131.131 0 0 0-.128.025l-3.14 2.689-1.64 1.403c-.084.072-.203.141-.23.254a1.507 1.507 0 0 0-.014.245l-.232 3.907-.333 5.624-.13 2.194c-.022.368-.062.74-.065 1.11l-.003.049a.13.13 0 0 0 .262.014Z"
+      />
+      <path
+        fill="#fff"
+        d="M20.692 13.37c-.28.417-.553.837-.83 1.257-.456.693-.91 1.387-1.36 2.083-.497.767-.99 1.537-1.485 2.306-.409.635-.815 1.27-1.22 1.908-.194.303-.4.602-.583.912l-.008.013a.145.145 0 0 0 .041.195.14.14 0 0 0 .195-.035l.474-.746 1.162-1.83a928.57 928.57 0 0 0 2.815-4.46c.296-.47.59-.942.894-1.407l.06-.091a.095.095 0 0 0-.027-.128.093.093 0 0 0-.128.023ZM20.92 13.108l.005.006c.08.104.22-.012.178-.12l-.002-.006c-.041-.105-.196-.068-.215.03a.117.117 0 0 0 .057.12.114.114 0 0 0 .13-.011l.005-.003c.102-.081-.012-.222-.12-.18l-.005.003a.105.105 0 0 0-.054.073.108.108 0 0 0 .022.088ZM21.084 11.8l-.002-.028c.003.036-.003-.016-.005-.032l-.008-.05a56.027 56.027 0 0 0-.237-1.25c-.147-.724-.297-1.448-.449-2.17l-.107-.496a.123.123 0 0 0-.223-.041.126.126 0 0 0-.018.092c.093.45.182.903.275 1.354.148.724.296 1.448.461 2.168.028.12.055.239.085.358l.025.098c.014.052-.006-.01.01.027l.002.01a.097.097 0 0 0 .175.032.1.1 0 0 0 .016-.073Z"
+      />
+      <path
+        fill="#fff"
+        d="m22.606 13.365-1.138 1.425a4396.042 4396.042 0 0 0-2.227 2.793c-.031.04.034.083.065.044l1.133-1.429 1.803-2.277.413-.522c.025-.03-.026-.064-.05-.034h.001ZM22.54 12.58c-.21-.569-.417-1.138-.638-1.703-.018-.047-.088-.011-.07.035.219.565.436 1.13.653 1.695.014.037.068.009.054-.028Z"
+        opacity=".25"
+      />
+      <path
+        fill="#fff"
+        d="M16.367 11.99a.23.23 0 0 0 .286-.152.237.237 0 0 0-.139-.294.23.23 0 0 0-.173.017.235.235 0 0 0-.102.31.233.233 0 0 0 .128.118ZM16.051 12.237l-.007.01a.16.16 0 0 0-.01.16l.022.033a.154.154 0 0 0 .069.046.156.156 0 0 0 .181-.063.162.162 0 0 0 .026-.08v-.012l-.003-.04a.114.114 0 0 0-.024-.054.077.077 0 0 0-.026-.03.117.117 0 0 0-.052-.031l-.04-.008-.04.003a.172.172 0 0 0-.095.066h-.001ZM16.749 10.5a.084.084 0 0 0 .107-.053.085.085 0 0 0-.118-.104.085.085 0 0 0-.038.115c.01.02.027.035.049.043ZM16.417 10.402a.085.085 0 0 0 .104-.055.087.087 0 0 0-.05-.108.084.084 0 0 0-.105.056.086.086 0 0 0 .05.107ZM16.69 10.169a.075.075 0 0 0 .092-.05.076.076 0 0 0-.045-.096.075.075 0 0 0-.092.05.077.077 0 0 0 .044.096ZM16.043 13.249l.011.004a.087.087 0 0 0 .108-.055l.004-.022a.088.088 0 0 0-.008-.043l-.013-.019a.085.085 0 0 0-.037-.025l-.012-.004a.061.061 0 0 0-.033-.003.061.061 0 0 0-.031.008.096.096 0 0 0-.043.05l-.004.022c0 .015.002.03.009.043l.012.018c.01.011.023.02.037.025v.001Z"
+      />
+      <path fill="#AEF9F6" d="m18.609 12.145-1.93.258L9.838 1.35l8.771 10.795Z" />
+      <path fill="#fff" d="M9.837 1.35 7.842 14.228l-1.875.527L9.837 1.35Z" />
+      <path fill="#fff" d="m14.69 25.314-8.723-10.56 1.875-.527.37.063 6.479 11.024Z" />
+      <path
+        fill="#AEF9F6"
+        d="m18.609 12.144-3.918 13.17 1.906-11.552.082-1.359 1.93-.259ZM16.679 12.403l-8.837 1.824L9.837 1.35l6.842 11.053Z"
+      />
+      <path fill="#AEF9F6" d="m7.842 14.227 8.837-1.824-.082 1.36-1.906 11.551-6.849-11.087Z" />
+      <path
+        fill="#528693"
+        d="M9.506 1.238 8.196 5.77l-2.085 7.22c-.156.54-.33 1.078-.469 1.623-.097.385.45.842.669 1.107l4.482 5.424c1.191 1.443 2.35 2.922 3.578 4.333l.06.072a.352.352 0 0 0 .592-.122l1.357-4.561 2.123-7.138c.144-.483.333-.973.437-1.467.05-.24-.08-.367-.213-.531l-.551-.678-4.5-5.536c-1.172-1.442-2.31-2.92-3.52-4.33-.02-.023-.038-.047-.057-.071-.286-.352-.808.12-.522.472l2.967 3.65 4.725 5.814 1.08 1.327-.072-.35-1.324 4.454-2.11 7.094-.483 1.624.592-.122-2.95-3.571-4.7-5.69-1.075-1.301.071.35 1.31-4.535 2.085-7.22.476-1.647c.126-.437-.537-.665-.663-.227Z"
+      />
+      <path
+        fill="#528693"
+        d="M18.574 11.97c-.673.091-1.357.148-2.023.28-.77.152-1.539.317-2.31.476l-6.2 1.28c-.713.147-1.41.377-2.11.573-.215.06-.147.407.07.347.654-.184 1.306-.402 1.97-.545.767-.165 1.539-.318 2.309-.477l6.202-1.28c.712-.146 1.442-.21 2.163-.308.223-.03.152-.376-.07-.346h-.001Z"
+      />
+      <path
+        fill="#528693"
+        d="m14.847 25.234-2.316-3.75-3.669-5.938-.571-.925c-.063-.102-.172-.388-.278-.45-.048-.028-.015.075.007.047.023-.03.022-.141.028-.178l.125-.81 1.025-6.616.516-3.326.183-1.18a5.54 5.54 0 0 0 .102-.658.661.661 0 0 1 .013-.087l-.33.068 2.325 3.757 3.67 5.928.566.915c.053.085.174.39.269.434.037.017.024-.093-.012-.045-.026.035-.022.146-.029.188l-.126.823-1.021 6.632c-.265 1.714-.59 3.431-.794 5.154l-.014.087c-.034.225.316.247.35.024l.672-4.367 1.075-6.974.162-1.056c.037-.163.063-.328.076-.494a.473.473 0 0 0-.11-.264l-.415-.671-3.527-5.699c-.92-1.485-1.83-2.978-2.76-4.457l-.045-.074a.178.178 0 0 0-.19-.089.177.177 0 0 0-.141.157l-.678 4.375-1.08 6.966-.161 1.043a3.035 3.035 0 0 0-.074.477c.012.1.053.195.118.271l.423.685 3.529 5.713c.916 1.483 1.822 2.974 2.749 4.45l.046.075c.118.192.431.033.312-.16v-.001Z"
+      />
+      <path
+        fill="#fff"
+        d="M15.423 13.982c-.141 1.096-.303 2.19-.45 3.284-.181 1.338-.356 2.677-.524 4.016l-.203 1.605c-.03.245.348.27.378.026.137-1.095.271-2.19.402-3.287.16-1.34.32-2.679.465-4.02.058-.536.117-1.071.18-1.606.02-.161-.228-.176-.248-.017ZM15.594 13.639l.008.004c.128.06.26-.14.154-.235l-.004-.004a.153.153 0 0 0-.264.134.155.155 0 0 0 .14.124.152.152 0 0 0 .155-.105l.002-.005c.061-.13-.139-.262-.232-.155l-.007.007a.142.142 0 0 0 .048.234ZM15.557 11.79c-.302-.557-.644-1.096-.975-1.636L13.55 8.473a133.094 133.094 0 0 1-2.044-3.407A79.116 79.116 0 0 1 10.46 3.19a.165.165 0 0 0-.219-.067.168.168 0 0 0-.075.218c1.215 2.33 2.615 4.56 4.013 6.78.383.609.756 1.227 1.165 1.817.085.123.282-.018.213-.147Z"
+      />
+      <path
+        fill="#fff"
+        d="M17.647 12.679c-.275.877-.552 1.753-.82 2.633-.02.064.078.098.098.034.272-.879.534-1.76.8-2.641.014-.051-.062-.076-.077-.026ZM17.583 11.942c-.563-.726-1.121-1.452-1.688-2.173-.042-.053-.119.017-.078.07.565.722 1.136 1.439 1.705 2.158.033.041.093-.014.06-.055Z"
+        opacity=".25"
+      />
+      <path
+        fill="#fff"
+        d="M9.753 15.255a.311.311 0 0 0 .23-.368.314.314 0 0 0-.354-.246.312.312 0 0 0-.23.367.314.314 0 0 0 .354.247ZM9.55 15.754l-.001.016a.214.214 0 0 0 .094.191l.048.024a.206.206 0 0 0 .11.007.232.232 0 0 0 .134-.09.212.212 0 0 0 .011-.215l-.008-.014-.03-.044a.152.152 0 0 0-.063-.046.104.104 0 0 0-.05-.017.155.155 0 0 0-.08-.002l-.053.019-.043.03a.232.232 0 0 0-.067.14H9.55ZM9.129 13.173a.113.113 0 0 0 .088-.135.112.112 0 0 0-.205-.04.115.115 0 0 0 .032.158.112.112 0 0 0 .085.017ZM8.68 13.283a.116.116 0 0 0 .037-.206.114.114 0 0 0-.083-.018.114.114 0 0 0-.084.134.115.115 0 0 0 .047.071.113.113 0 0 0 .082.02ZM8.84 12.83a.103.103 0 0 0 .033-.183.1.1 0 0 0-.073-.018.102.102 0 0 0-.074.12.102.102 0 0 0 .114.08ZM10.21 16.93l.016-.004a.116.116 0 0 0 .071-.05.119.119 0 0 0 .018-.085l-.01-.03a.115.115 0 0 0-.04-.043l-.026-.013a.111.111 0 0 0-.06-.004l-.015.003a.082.082 0 0 0-.041.019.084.084 0 0 0-.031.03.13.13 0 0 0-.017.086l.01.029a.115.115 0 0 0 .039.043l.026.013c.02.006.04.008.06.004v.002ZM10.731 17.922a.108.108 0 0 0 .084-.128.11.11 0 0 0-.046-.07.107.107 0 0 0-.15.031.11.11 0 0 0 .03.152.107.107 0 0 0 .082.015Z"
+      />
+    </svg>
+  );
+});
+
+Crystal.displayName = 'CrystalIcon';