@crystallize/design-system 0.2.0 → 1.0.0

package/src/dialog/Dialog.stories.tsx

@@ -15,9 +15,9 @@ export default meta;
 type Story = StoryObj<typeof Dialog>;
 
 const Lorem = () => (
-  <p className="py-6">
+  <p className="leading-6">
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis neque id, blanditiis exercitationem doloremque
-    quam ab minima architecto culpa, nam nobis labore quibusdam veniam maiores. Veritatis non maxime ut magnam?
+    quam ab minima architecto culpa.
   </p>
 );
 
@@ -54,10 +54,13 @@ export const ComponentWithDangerAction: Story = {
       <Dialog.Content>
         <Dialog.Title>A Dialog</Dialog.Title>
         <div>
-          <Lorem />
-          <div className="flex gap-4 justify-end">
-            <Button variant="secondary-dark">Cancel</Button>
-            <Button variant="danger">Delete</Button>
+          <Dialog.Description>
+            <Lorem />
+          </Dialog.Description>
+
+          <div className="mt-8 flex justify-end gap-4">
+            <Button>Cancel</Button>
+            <Button intent="danger">Delete</Button>
           </div>
         </div>
       </Dialog.Content>

package/src/dialog/confirm-dialog.tsx

@@ -11,6 +11,7 @@ export function ConfirmDialog({
   content,
   okCancel,
   okText = 'OK',
+  okButtonIntent = 'default',
   onOk,
   onCancel,
   cancelText = 'Cancel',
@@ -18,10 +19,10 @@ export function ConfirmDialog({
   onInteractOutside,
   onPointerDownOutside,
   type,
+  closable,
 }: ConfirmDialogProps) {
   const cancelButton = okCancel && (
     <Button
-      variant="secondary"
       onClick={() => {
         onCancel?.();
         close();
@@ -38,13 +39,15 @@ export function ConfirmDialog({
         onInteractOutside={onInteractOutside}
         onPointerDownOutside={onPointerDownOutside}
         type={type}
+        closable={closable}
       >
         {title && <Dialog.Title>{title}</Dialog.Title>}
         {description && <Dialog.Description>{description}</Dialog.Description>}
         {content}
-        <div className="flex items-center gap-4 mt-4 justify-end">
+        <div className="mt-4 flex items-center justify-end gap-4">
           {cancelButton}
           <Button
+            intent={okButtonIntent}
             onClick={() => {
               onOk?.();
               close();

package/src/dialog/dialog.css

@@ -0,0 +1,27 @@
+.c-dialog {
+  @apply fixed top-1/2 left-1/2 z-20 w-auto min-w-[25%] max-w-xl rounded-lg bg-elevate p-14 leading-6 text-gray-500-400 shadow;
+  transform: translate(-50%, -50%);
+  &-overlay {
+    @apply fixed inset-0 z-10 bg-overlay;
+  }
+
+  &-icon {
+    @apply my-1 shrink-0;
+  }
+
+  &-title {
+    @apply m-0 font-serif text-xl font-bold text-gray;
+  }
+
+  &-description {
+    @apply mt-1 mb-5 font-medium;
+  }
+
+  &-close-button {
+    @apply absolute top-0 right-0 inline-flex h-12 w-12 items-center justify-center rounded-none rounded-tr-lg border !bg-transparent !p-0 !drop-shadow-none hover:!bg-gray-50-900 focus:!bg-gray-50-900;
+  }
+
+  &-with-icon {
+    @apply flex items-start gap-6 pl-6;
+  }
+}

package/src/dialog/dialog.tsx

@@ -3,9 +3,11 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cva, cx, VariantProps } from 'class-variance-authority';
 
 import { Button } from '../button';
-import { Icon } from '../icons';
+import { Icon } from '../iconography';
 import type { DialogFuncProps } from './types';
 
+import './dialog.css';
+
 const IconMap = {
   error: Icon.Error,
   info: Icon.Info,
@@ -13,16 +15,13 @@ const IconMap = {
 };
 
 type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>;
-const dialogContentStyles = cva(
-  'bg-white rounded shadow fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-xl w-auto p-6',
-  {
-    variants: {
-      withIcon: {
-        true: 'flex gap-4 items-start',
-      },
+const dialogContentStyles = cva('c-dialog', {
+  variants: {
+    withIcon: {
+      true: 'c-dialog-with-icon',
     },
   },
-);
+});
 
 type DialogContentProps = DialogContentStylesProps & {
   children: ReactNode;
@@ -40,13 +39,17 @@ function DialogContent({ children, closable = true, type, className, container,
 
   return (
     <DialogPrimitive.Portal container={container}>
-      <DialogPrimitive.Overlay className="bg-black/30 fixed inset-0" />
+      <DialogPrimitive.Overlay className="c-dialog-overlay" />
       <DialogPrimitive.Content className={dialogContentStyles({ withIcon, class: className })} {...delegated}>
-        {IconComponent && <IconComponent className="my-1 shrink-0" width={32} height={32} />}
+        {IconComponent && (
+          <div className="flex h-[44px] w-[44px]  min-w-[44px] items-center justify-center rounded-lg bg-gray-50-900 p-[5px]">
+            <IconComponent className="c-dialog-icon" width={34} height={34} />
+          </div>
+        )}
         {closable && (
           <DialogClose asChild>
-            <Button className="absolute top-2.5 right-2.5 !rounded-full !p-0 h-6 w-6 inline-flex items-center justify-center !bg-transparent hover:!bg-gray-200 focus:!bg-gray-200 !drop-shadow-none">
-              <Icon.Cancel color="density" aria-label="Close" height={18} width={18} />
+            <Button className="c-dialog-close-button">
+              <Icon.Cancel color="density" aria-label="Close" height={16} width={16} />
             </Button>
           </DialogClose>
         )}
@@ -59,12 +62,7 @@ function DialogContent({ children, closable = true, type, className, container,
 type DialogTitleProps = JSX.IntrinsicAttributes & DialogPrimitive.DialogTitleProps & RefAttributes<HTMLHeadingElement>;
 
 function DialogTitle({ className, ...delegated }: DialogTitleProps) {
-  return (
-    <DialogPrimitive.Title
-      className={cx('m-0 font-medium text-xl font-sans text-black-text', className)}
-      {...delegated}
-    />
-  );
+  return <DialogPrimitive.Title className={cx('c-dialog-title', className)} {...delegated} />;
 }
 
 type DialogDescriptionProps = JSX.IntrinsicAttributes &
@@ -72,7 +70,7 @@ type DialogDescriptionProps = JSX.IntrinsicAttributes &
   RefAttributes<HTMLParagraphElement>;
 
 function DialogDescription(delegated: DialogDescriptionProps) {
-  return <DialogPrimitive.Description className="mt-2 mb-5 text-gray-600" {...delegated} />;
+  return <DialogPrimitive.Description className="c-dialog-description" {...delegated} />;
 }
 
 const DialogTrigger = DialogPrimitive.Trigger;

package/src/dialog/types.ts

@@ -1,4 +1,6 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ComponentProps } from 'react';
+
+import type { Button } from '../button';
 
 export type DialogFuncProps = {
   afterClose?: () => void;
@@ -9,6 +11,7 @@ export type DialogFuncProps = {
   description?: ReactNode;
   okCancel?: boolean;
   okText?: ReactNode;
+  okButtonIntent?: ComponentProps<typeof Button>['intent'];
   onCancel?: (...args: unknown[]) => void;
   onEscapeKeyDown?: (event: Event) => void;
   onInteractOutside?: (event: Event) => void;

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

@@ -1,9 +1,8 @@
 import type { Meta } from '@storybook/react';
-import { useState } from 'react';
 
 import { DropdownMenu } from '.';
 import { Button } from '../button';
-import { Icon } from '../icons';
+import { Icon } from '../iconography';
 
 export default {
   title: 'Components/DropdownMenu',
@@ -15,15 +14,15 @@ function ContentWithIcon() {
     <>
       <DropdownMenu.Label>View</DropdownMenu.Label>
       <DropdownMenu.Item>
-        <div className="flex items-center">
+        <div className="flex items-center font-sans">
           <Icon.Glasses width={24} height={24} />
-          <span className="px-4">Nerdy</span>
+          <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-4">Developer</span>
+          <span className="px-3 font-sans">Developer</span>
         </div>
       </DropdownMenu.Item>
     </>
@@ -31,16 +30,9 @@ function ContentWithIcon() {
 }
 
 export const WithOpenState = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
   return (
-    <DropdownMenu.Root content={<ContentWithIcon />} onOpenChange={setIsOpen}>
-      <Button>
-        <div className="flex items-center">
-          <Icon.NailPolish width={20} height={20} /> <span className="pl-4 pr-8">Pretty</span>
-          <Icon.Arrow className={isOpen ? 'rotate-180' : ''} />
-        </div>
-      </Button>
+    <DropdownMenu.Root content={<ContentWithIcon />}>
+      <Button prepend={<Icon.NailPolish width={20} height={20} />}>Pretty</Button>
     </DropdownMenu.Root>
   );
 };

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

@@ -8,16 +8,7 @@ type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
 
 export function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps) {
   return (
-    <DropdownMenuPrimitive.Item
-      {...delegated}
-      className={cx(
-        'text-xs font-medium text-black-text',
-        'flex h-10 cursor-pointer items-center bg-white px-4 outline-asteroid',
-        'hover:bg-[#F8F8F9] hover:outline-none hover:focus-visible:outline-none',
-        'first:rounded-tr first:rounded-tl last:rounded-br last:rounded-bl',
-        className,
-      )}
-    >
+    <DropdownMenuPrimitive.Item {...delegated} className={cx('c-dropdown-menu-item', className)}>
       {children}
     </DropdownMenuPrimitive.Item>
   );

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

@@ -1,5 +1,4 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { cx } from 'class-variance-authority';
 import type { ReactNode } from 'react';
 
 type DropdownMenuLabelProps = {
@@ -7,11 +6,5 @@ type DropdownMenuLabelProps = {
 };
 
 export function DropdownMenuLabel({ children }: DropdownMenuLabelProps) {
-  return (
-    <DropdownMenuPrimitive.Label
-      className={cx('bg-white px-4 py-2 text-xs text-label', 'first:rounded-tl first:rounded-tr')}
-    >
-      {children}
-    </DropdownMenuPrimitive.Label>
-  );
+  return <DropdownMenuPrimitive.Label className="c-dropdown-menu-label">{children}</DropdownMenuPrimitive.Label>;
 }

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

@@ -1,18 +1,22 @@
 import type { ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-type DropdownMenuRootProps = {
+type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
   children: ReactNode;
   content: ReactNode;
   alignContent?: 'start' | 'center' | 'end';
-  onOpenChange?: (isOpen: boolean) => void;
 };
 
-export function DropdownMenuRoot({ children, content, onOpenChange, alignContent = 'start' }: DropdownMenuRootProps) {
+export function DropdownMenuRoot({ children, content, alignContent = 'start', ...delegated }: DropdownMenuRootProps) {
   return (
-    <DropdownMenuPrimitive.Root onOpenChange={onOpenChange}>
+    <DropdownMenuPrimitive.Root>
       <DropdownMenuPrimitive.Trigger asChild>{children}</DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Content align={alignContent} sideOffset={5} className="shadow">
+      <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

@@ -2,6 +2,8 @@ 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,

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

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { IconButton } from '.';
-import { Icon } from '../icons';
+import { Card } from '../card';
+import { Icon } from '../iconography';
 
 const meta: Meta<typeof IconButton> = {
   title: 'Components/IconButton',
@@ -11,17 +12,19 @@ const meta: Meta<typeof IconButton> = {
 export default meta;
 type Story = StoryObj<typeof IconButton>;
 
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+const sizes = ['xxs', 'xs', 'sm', 'md', 'lg'] as const;
 
 export const AllButton: Story = {
   name: 'All Buttons',
   render: () => {
     return (
-      <div className="grid grid-cols-5 gap-6 justify-items-center">
+      <div className="grid grid-cols-5 justify-items-center gap-6">
         {sizes.map(size => (
-          <IconButton size={size}>
-            <Icon.Cancel width={16} height={16} />
-          </IconButton>
+          <Card>
+            <IconButton size={size}>
+              <Icon.Cancel width={16} height={16} />
+            </IconButton>
+          </Card>
         ))}
       </div>
     );

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

@@ -0,0 +1,40 @@
+.c-icon-button {
+  @apply flex cursor-pointer appearance-none items-center justify-center rounded-md border-none bg-transparent 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;
+  }
+
+  &-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

@@ -1,31 +1,23 @@
 import { ComponentPropsWithRef, forwardRef } from 'react';
 import { cva, VariantProps } from 'class-variance-authority';
 
+import './icon-button.css';
+
 type IconButtonStylesProps = VariantProps<typeof buttonStyles>;
-const buttonStyles = cva(
-  [
-    'flex items-center justify-center rounded-full font-medium cursor-pointer',
-    'disabled:cursor-default disabled:scale-100 disabled:shadow-none',
-    'active:scale-95',
-    'focus:shadow focus:bg-slate-200',
-    'hover:shadow hover:bg-slate-200',
-    'focus-visible:outline-inherit focus-visible:outline-offset-1 focus-visible:outline focus-visible:outline-1',
-  ],
-  {
-    variants: {
-      size: {
-        xs: 'h-8 w-8',
-        sm: 'h-9 w-9',
-        md: 'h-10 w-10',
-        lg: 'h-10 w-10',
-        xl: 'h-11 w-11',
-      },
-    },
-    defaultVariants: {
-      size: 'sm',
+const buttonStyles = cva(['c-icon-button'], {
+  variants: {
+    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',
+  },
+});
 
 export type IconButtonProps = ComponentPropsWithRef<'button'> & IconButtonStylesProps;
 

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/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/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';