@crystallize/design-system 1.4.0 → 1.4.2

package/src/dialog/dialog.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode, RefAttributes } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva, cx, VariantProps } from 'class-variance-authority';
+
+import { Button } from '../button';
+import { Icon } from '../iconography';
+import type { DialogFuncProps } from './types';
+
+import './dialog.css';
+
+const IconMap = {
+  error: Icon.Error,
+  info: Icon.Info,
+  warning: Icon.Warning,
+};
+
+type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>;
+const dialogContentStyles = cva('c-dialog', {
+  variants: {
+    withIcon: {
+      true: 'c-dialog-with-icon',
+    },
+  },
+});
+
+type DialogContentProps = DialogContentStylesProps & {
+  children: ReactNode;
+} & Pick<
+    DialogFuncProps,
+    'onEscapeKeyDown' | 'onInteractOutside' | 'onPointerDownOutside' | 'closable' | 'type' | 'className'
+  > &
+  DialogPrimitive.DialogContentProps &
+  Pick<DialogPrimitive.PortalProps, 'container'>;
+
+function DialogContent({ children, closable = true, type, className, container, ...delegated }: DialogContentProps) {
+  const withIcon = typeof type !== 'undefined';
+
+  const IconComponent = type && IconMap[type];
+
+  return (
+    <DialogPrimitive.Portal container={container}>
+      <DialogPrimitive.Overlay className="c-dialog-overlay" />
+      <DialogPrimitive.Content className={dialogContentStyles({ withIcon, class: className })} {...delegated}>
+        {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="c-dialog-close-button">
+              <Icon.Cancel color="density" aria-label="Close" height={16} width={16} />
+            </Button>
+          </DialogClose>
+        )}
+        <div>{children}</div>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+}
+
+type DialogTitleProps = JSX.IntrinsicAttributes & DialogPrimitive.DialogTitleProps & RefAttributes<HTMLHeadingElement>;
+
+function DialogTitle({ className, ...delegated }: DialogTitleProps) {
+  return <DialogPrimitive.Title className={cx('c-dialog-title', className)} {...delegated} />;
+}
+
+type DialogDescriptionProps = JSX.IntrinsicAttributes &
+  DialogPrimitive.DialogDescriptionProps &
+  RefAttributes<HTMLParagraphElement>;
+
+function DialogDescription(delegated: DialogDescriptionProps) {
+  return <DialogPrimitive.Description className="c-dialog-description" {...delegated} />;
+}
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogClose = DialogPrimitive.Close;
+
+export const DialogRoot = DialogPrimitive.Root;
+
+type DialogBaseProps = React.ComponentProps<typeof DialogRoot> & {
+  children: ReactNode;
+};
+
+export function DialogBase({ children, ...delegated }: DialogBaseProps) {
+  return <DialogRoot {...delegated}>{children}</DialogRoot>;
+}
+
+DialogBase.Title = DialogTitle;
+DialogBase.Trigger = DialogTrigger;
+DialogBase.Description = DialogDescription;
+DialogBase.Content = DialogContent;
+DialogBase.Overlay = DialogPrimitive.Overlay;
+DialogBase.Close = DialogPrimitive.Close;

package/src/dialog/index.tsx

@@ -0,0 +1,40 @@
+import { destroyFns } from './destroyFns';
+import { DialogBase } from './dialog';
+import type { DialogFuncProps } from './types';
+import { confirm, withWarning, withConfirm, withDialog, withError, withInfo } from './config';
+
+type DialogType = typeof DialogBase & DialogFuncProps;
+
+const Dialog = DialogBase as DialogType;
+
+function showDialog(delegated: DialogFuncProps) {
+  return confirm(withDialog(delegated));
+}
+
+function showWarning(delegated: DialogFuncProps) {
+  return confirm(withWarning(delegated));
+}
+
+function showConfirm(delegated: DialogFuncProps) {
+  return confirm(withConfirm(delegated));
+}
+
+function showError(delegated: DialogFuncProps) {
+  return confirm(withError(delegated));
+}
+
+function showInfo(delegated: DialogFuncProps) {
+  return confirm(withInfo(delegated));
+}
+
+function destroyAll() {
+  while (destroyFns.length) {
+    const close = destroyFns.pop();
+
+    if (close) {
+      close();
+    }
+  }
+}
+
+export { Dialog, destroyAll, showWarning, showConfirm, showDialog, showError, showInfo };

package/src/dialog/types.ts

@@ -0,0 +1,70 @@
+import type { ReactNode, ComponentProps } from 'react';
+
+import type { Button } from '../button';
+
+export type DialogFuncProps = {
+  afterClose?: () => void;
+  /**
+   * Text that should be displayed in the cancel button
+   */
+  cancelText?: ReactNode;
+  className?: string;
+  closable?: boolean;
+  content?: ReactNode;
+  description?: ReactNode;
+  /**
+   * Flag that controls if the cancel button should be included in the dialog or not
+   */
+  displayCancel?: boolean;
+  /**
+   * Flag that controls if the ok button should be included in the dialog or not
+   */
+  displayOk?: boolean;
+  /**
+   * @deprecated - Use displayCancel instead
+   *
+   * Flag that controls if the cancel button should be included in the dialog or not
+   */
+  okCancel?: boolean;
+  /**
+   * Text that should be displayed in the ok button
+   */
+  okText?: ReactNode;
+  okButtonIntent?: ComponentProps<typeof Button>['intent'];
+  /**
+   * The callback that will be called once the user click the cancel button
+   * @param args
+   * @returns void
+   */
+  onCancel?: (...args: unknown[]) => void;
+  onEscapeKeyDown?: (event: Event) => void;
+  onInteractOutside?: (event: Event) => void;
+  /**
+   * The callback that will be called once the user click the ok button
+   * @param args
+   * @returns void
+   */
+  onOk?: (...args: unknown[]) => void;
+  onPointerDownOutside?: (event: Event) => void;
+  open?: boolean;
+  prefixCls?: string;
+  title?: ReactNode;
+  type?: 'info' | 'error' | 'warning';
+};
+
+export type ConfigUpdate = DialogFuncProps | ((prevConfig: DialogFuncProps) => DialogFuncProps);
+
+export type DialogFunc = (props: DialogFuncProps) => {
+  destroy: () => void;
+  update: (configUpdate: ConfigUpdate) => void;
+};
+
+export type ModalStaticFunctions = Record<NonNullable<DialogFuncProps['type']>, DialogFunc>;
+
+export interface ConfirmDialogProps extends DialogFuncProps {
+  afterClose?: () => void;
+  close: (...args: unknown[]) => void;
+  autoFocusButton?: null | 'ok' | 'cancel';
+  rootPrefixCls: string;
+  iconPrefixCls?: string;
+}

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,50 @@
+.c-icon-button {
+  @apply flex cursor-pointer appearance-none items-center justify-center rounded border-none bg-transparent p-0 font-medium;
+
+  &:disabled {
+    @apply scale-100 cursor-default shadow-none;
+  }
+
+  &:enabled {
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &:focus,
+    &:hover {
+      @apply bg-elevate shadow;
+    }
+
+    &:hover {
+      @apply outline outline-1 outline-purple-200-700;
+    }
+
+    &:focus-visible {
+      @apply outline outline-1 outline-offset-1 outline-inherit;
+    }
+  }
+
+  &-elevate {
+    @apply bg-elevate shadow;
+  }
+
+  &-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';