@sats-group/ui-lib 80.4.0 → 81.0.1

package/react/logos/sats-pride-dark.tsx

@@ -1,102 +0,0 @@
-import * as React from 'react';
-const SvgSatsPrideDark = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={99} height={29} fill="none">
-    <path
-      fill="url(#sats-pride-dark_svg__a)"
-      d="M70.524 13.274c8.407 0 15.106 6.586 15.106 14.569q0 .183-.006.373h2.135l.004-.373c0-9.08-7.479-16.468-16.795-16.696l-.445-.006q-.762 0-1.509.063v2.141q.744-.07 1.51-.071"
-    />
-    <path
-      fill="url(#sats-pride-dark_svg__b)"
-      d="M70.524 11.143c9.547 0 17.17 7.48 17.17 16.568q0 .253-.008.505h2.135v-.022l.006-.483c0-10.167-8.374-18.44-18.805-18.696l-.498-.006q-.763 0-1.51.057v2.14q.746-.063 1.51-.063"
-    />
-    <path
-      fill="url(#sats-pride-dark_svg__c)"
-      d="M70.524 9.011c10.687 0 19.233 8.377 19.233 18.568q0 .318-.01.633h2.134l.003-.099.007-.534c0-11.254-9.27-20.41-20.815-20.694l-.552-.007c-.514 0-1.002.006-1.507.04v2.139c.504-.038.992-.046 1.507-.046"
-    />
-    <path
-      fill="url(#sats-pride-dark_svg__d)"
-      d="M70.524 6.88c11.826 0 21.297 9.271 21.297 20.567q0 .383-.014.762h2.134l.006-.176.007-.586c0-12.341-10.164-22.382-22.825-22.693l-.606-.008q-.765 0-1.516.047l.006 2.141c.5-.034 1-.054 1.51-.054"
-    />
-    <path
-      fill="url(#sats-pride-dark_svg__e)"
-      d="M70.524 4.748c12.966 0 23.361 10.167 23.361 22.567q0 .45-.018.895h2.134l.009-.258.008-.637c0-13.428-11.06-24.354-24.836-24.692l-.658-.008c-.513 0-1.018.016-1.524.045l.009 2.132a24 24 0 0 1 1.515-.044"
-    />
-    <path
-      fill="url(#sats-pride-dark_svg__f)"
-      d="M70.524 2.614c14.106 0 25.424 11.197 25.424 24.701q0 .45-.016.894h2.135l.006-.205.01-.689C98.082 12.8 86.125.855 71.234.49l-.71-.01c-.51 0-1.021.006-1.524.032v2.136a27 27 0 0 1 1.523-.034"
-    />
-    <path
-      fill="#0D2134"
-      d="M9.267 28.224c-3.902 0-6.78-1.504-8.38-3.647l4.382-3.358a5.66 5.66 0 0 0 4.254 1.951c1.951 0 2.783-.832 2.783-2.047 0-.864-.64-1.504-1.663-2.367L9.17 17.508c-1.535-1.311-2.815-3.038-2.815-5.277 0-3.999 3.39-7.293 8.54-7.293 3.871 0 6.43 1.631 7.453 3.262l-4.414 3.327c-1.055-1.055-2.303-1.535-3.518-1.535-1.44 0-2.24.671-2.24 1.759 0 .896.768 1.567 1.632 2.303l1.504 1.28c1.47 1.247 2.846 3.006 2.846 5.181 0 4.286-2.942 7.709-8.892 7.709M30.983 5.386h7.708v22.39H33.51v-4.542h-7.26l-2.527 4.542h-6.174zM29.095 18.18h4.414v-7.932zM42.949 27.776 47.81 10.44h-5.917l1.44-5.054h17.272l-1.44 5.054h-5.533l-4.926 17.336zM63.869 28.224c-3.903 0-6.782-1.504-8.38-3.647l4.381-3.358a5.66 5.66 0 0 0 4.254 1.951c1.952 0 2.783-.832 2.783-2.047 0-.864-.64-1.504-1.663-2.367l-1.471-1.248c-1.536-1.311-2.815-3.038-2.815-5.277 0-3.999 3.39-7.293 8.54-7.293 3.87 0 6.43 1.631 7.453 3.262l-4.414 3.327c-1.056-1.055-2.303-1.535-3.519-1.535-1.44 0-2.239.671-2.239 1.759 0 .896.768 1.567 1.632 2.303l1.503 1.28c1.471 1.247 2.847 3.006 2.847 5.181 0 4.286-2.943 7.709-8.892 7.709"
-    />
-    <defs>
-      <linearGradient
-        id="sats-pride-dark_svg__a"
-        x1={69.014}
-        x2={78.1}
-        y1={19.937}
-        y2={19.937}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#502E91" stopOpacity={0} />
-        <stop offset={1} stopColor="#502E91" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-dark_svg__b"
-        x1={69.014}
-        x2={78.072}
-        y1={18.806}
-        y2={18.806}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#336FE2" stopOpacity={0} />
-        <stop offset={1} stopColor="#336FE2" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-dark_svg__c"
-        x1={69.017}
-        x2={79.051}
-        y1={17.676}
-        y2={17.676}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#55A17B" stopOpacity={0} />
-        <stop offset={1} stopColor="#55A17B" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-dark_svg__d"
-        x1={69.007}
-        x2={78.072}
-        y1={16.544}
-        y2={16.544}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#FFC100" stopOpacity={0} />
-        <stop offset={1} stopColor="#FFC100" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-dark_svg__e"
-        x1={69}
-        x2={78.128}
-        y1={15.413}
-        y2={15.413}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#FF621D" stopOpacity={0} />
-        <stop offset={1} stopColor="#FF621D" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-dark_svg__f"
-        x1={69.001}
-        x2={78.1}
-        y1={14.413}
-        y2={14.413}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#C2102A" stopOpacity={0} />
-        <stop offset={1} stopColor="#C2102A" />
-      </linearGradient>
-    </defs>
-  </svg>
-);
-export default SvgSatsPrideDark;

package/react/logos/sats-pride-light.tsx

@@ -1,102 +0,0 @@
-import * as React from 'react';
-const SvgSatsPrideLight = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={99} height={29} fill="none">
-    <path
-      fill="url(#sats-pride-light_svg__a)"
-      d="M70.539 13.766c8.407 0 15.107 6.586 15.107 14.57q0 .183-.007.373h2.136l.004-.374c0-9.08-7.48-16.468-16.795-16.696l-.445-.006q-.762 0-1.51.063v2.142q.745-.072 1.51-.072"
-    />
-    <path
-      fill="url(#sats-pride-light_svg__b)"
-      d="M70.54 11.635c9.546 0 17.17 7.48 17.17 16.568q0 .254-.008.505h2.134l.001-.022.006-.483c0-10.167-8.374-18.44-18.805-18.695l-.499-.006q-.762 0-1.51.056v2.14a18 18 0 0 1 1.51-.063"
-    />
-    <path
-      fill="url(#sats-pride-light_svg__c)"
-      d="M70.54 9.504c10.686 0 19.233 8.376 19.233 18.567q0 .318-.011.634h2.134l.003-.1.008-.534c0-11.254-9.27-20.41-20.816-20.694l-.551-.007c-.514 0-1.003.006-1.508.04V9.55c.504-.038.993-.045 1.508-.045"
-    />
-    <path
-      fill="url(#sats-pride-light_svg__d)"
-      d="M70.539 7.372c11.827 0 21.298 9.272 21.298 20.567q0 .383-.014.762h2.134l.005-.176.008-.586c0-12.34-10.165-22.382-22.826-22.692l-.605-.008q-.764 0-1.517.047l.006 2.14c.501-.033 1-.054 1.511-.054"
-    />
-    <path
-      fill="url(#sats-pride-light_svg__e)"
-      d="M70.54 5.24c12.966 0 23.36 10.167 23.36 22.567q0 .45-.017.896h2.134l.008-.258.009-.638c0-13.428-11.06-24.354-24.837-24.692l-.658-.008c-.513 0-1.018.016-1.523.045l.008 2.132a24 24 0 0 1 1.515-.043"
-    />
-    <path
-      fill="url(#sats-pride-light_svg__f)"
-      d="M70.54 3.106c14.105 0 25.424 11.198 25.424 24.701q0 .45-.017.895h2.135l.006-.205.01-.69c0-14.515-11.956-26.46-26.848-26.825l-.71-.009c-.51 0-1.02.005-1.523.031v2.137a27 27 0 0 1 1.523-.035"
-    />
-    <path
-      fill="#fff"
-      d="M9.267 28.714c-3.902 0-6.78-1.504-8.38-3.647l4.382-3.358a5.66 5.66 0 0 0 4.254 1.951c1.951 0 2.783-.832 2.783-2.047 0-.864-.64-1.503-1.663-2.367L9.17 17.998c-1.535-1.311-2.815-3.038-2.815-5.277 0-3.999 3.39-7.293 8.54-7.293 3.871 0 6.43 1.631 7.453 3.262l-4.414 3.327c-1.055-1.056-2.303-1.535-3.518-1.535-1.44 0-2.24.671-2.24 1.759 0 .896.768 1.567 1.632 2.303l1.504 1.28c1.47 1.247 2.846 3.006 2.846 5.181 0 4.286-2.942 7.709-8.892 7.709M30.983 5.876h7.708v22.39H33.51v-4.542h-7.26l-2.527 4.542h-6.174zM29.095 18.67h4.414v-7.932zM42.949 28.266 47.81 10.93h-5.917l1.44-5.054h17.272l-1.44 5.054h-5.533l-4.926 17.336zM63.869 28.714c-3.903 0-6.782-1.504-8.38-3.647l4.381-3.358a5.66 5.66 0 0 0 4.254 1.951c1.952 0 2.783-.832 2.783-2.047 0-.864-.64-1.503-1.663-2.367l-1.471-1.248c-1.536-1.311-2.815-3.038-2.815-5.277 0-3.999 3.39-7.293 8.54-7.293 3.87 0 6.43 1.631 7.453 3.262l-4.414 3.327c-1.056-1.056-2.303-1.535-3.519-1.535-1.44 0-2.239.671-2.239 1.759 0 .896.768 1.567 1.632 2.303l1.503 1.28c1.471 1.247 2.847 3.006 2.847 5.181 0 4.286-2.943 7.709-8.892 7.709"
-    />
-    <defs>
-      <linearGradient
-        id="sats-pride-light_svg__a"
-        x1={69.03}
-        x2={78.116}
-        y1={20.429}
-        y2={20.429}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#502E91" stopOpacity={0} />
-        <stop offset={1} stopColor="#502E91" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-light_svg__b"
-        x1={69.03}
-        x2={78.088}
-        y1={19.298}
-        y2={19.298}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#336FE2" stopOpacity={0} />
-        <stop offset={1} stopColor="#336FE2" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-light_svg__c"
-        x1={69.032}
-        x2={79.066}
-        y1={18.168}
-        y2={18.168}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#55A17B" stopOpacity={0} />
-        <stop offset={1} stopColor="#55A17B" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-light_svg__d"
-        x1={69.022}
-        x2={78.088}
-        y1={17.036}
-        y2={17.036}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#FFC100" stopOpacity={0} />
-        <stop offset={1} stopColor="#FFC100" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-light_svg__e"
-        x1={69.016}
-        x2={78.144}
-        y1={15.905}
-        y2={15.905}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#FF621D" stopOpacity={0} />
-        <stop offset={1} stopColor="#FF621D" />
-      </linearGradient>
-      <linearGradient
-        id="sats-pride-light_svg__f"
-        x1={69.017}
-        x2={78.116}
-        y1={14.905}
-        y2={14.905}
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#C2102A" stopOpacity={0} />
-        <stop offset={1} stopColor="#C2102A" />
-      </linearGradient>
-    </defs>
-  </svg>
-);
-export default SvgSatsPrideLight;

package/react/logos/sats-small.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-const SvgSatsSmall = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={79}
-    height={25}
-    fill="currentColor"
-  >
-    <path d="m4.514 17.404-4.232 3.27c1.599 2.307 4.42 4.038 8.37 4.038 5.831 0 9.217-3.558 9.217-8.27 0-2.403-1.41-3.846-2.915-5.192l-1.505-1.442c-.94-.866-1.41-1.539-1.41-2.404 0-1.154.752-2.212 2.538-2.212 1.223 0 2.446.481 3.574 1.731l4.232-3.27C21.35 2.02 18.903.289 15.142.289c-5.079 0-8.84 3.462-8.84 7.981 0 2.212 1.222 3.75 2.82 5.192l1.505 1.443c1.035.961 1.505 1.538 1.505 2.404 0 1.154-.846 2.404-3.103 2.404-1.787 0-3.386-.866-4.515-2.308m56.24 0-4.231 3.27c1.504 2.307 4.42 4.038 8.37 4.038 5.83 0 9.216-3.558 9.216-8.27 0-2.403-1.41-3.846-2.915-5.192l-1.505-1.442c-.94-.866-1.41-1.539-1.41-2.404 0-1.154.752-2.212 2.539-2.212 1.222 0 2.445.481 3.574 1.731l4.232-3.27C77.589 2.02 75.144.289 71.382.289c-5.078 0-8.84 3.462-8.84 7.981 0 2.212 1.222 3.75 2.821 5.192l1.505 1.443c1.034.961 1.505 1.538 1.505 2.404 0 1.154-.847 2.404-3.104 2.404-1.787 0-3.386-.866-4.514-2.308m-.752-11.73h-5.454l-5.079 18.46h-5.643l5.079-18.46h-5.831l1.41-5h17.023zM39.312 24.23V.769h-7.806L17.963 24.231h6.02l2.633-4.904h7.711v4.904zM34.327 5.288v9.039h-4.984z" />
-  </svg>
-);
-export default SvgSatsSmall;

package/react/logos/sats.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-const SvgSats = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={168}
-    height={52}
-    fill="currentColor"
-  >
-    <path d="M9.6 36.2.6 43c3.4 4.8 9.4 8.4 17.8 8.4C30.8 51.4 38 44 38 34.2c0-5-3-8-6.2-10.8l-3.2-3c-2-1.8-3-3.2-3-5 0-2.4 1.6-4.6 5.4-4.6 2.6 0 5.2 1 7.6 3.6l9-6.8c-2.2-3.4-7.4-7-15.4-7-10.8 0-18.8 7.2-18.8 16.6 0 4.6 2.6 7.8 6 10.8l3.2 3c2.2 2 3.2 3.2 3.2 5 0 2.4-1.8 5-6.6 5-3.8 0-7.2-1.8-9.6-4.8m119.6 0-9 6.8c3.2 4.8 9.4 8.4 17.8 8.4 12.4 0 19.6-7.4 19.6-17.2 0-5-3-8-6.2-10.8l-3.2-3c-2-1.8-3-3.2-3-5 0-2.4 1.6-4.6 5.4-4.6 2.6 0 5.2 1 7.6 3.6l9-6.8c-2.2-3.4-7.4-7-15.4-7C141 .6 133 7.8 133 17.2c0 4.6 2.6 7.8 6 10.8l3.2 3c2.2 2 3.2 3.2 3.2 5 0 2.4-1.8 5-6.6 5-3.8 0-7.2-1.8-9.6-4.8m-1.6-24.4H116l-10.8 38.4h-12L104 11.8H91.6l3-10.4h36.2zm-44 38.6V1.6H67L38.2 50.4H51l5.6-10.2H73v10.2zM73 11v18.8H62.4z" />
-  </svg>
-);
-export default SvgSats;

package/react/message/hook/use-message.ts

@@ -1,22 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { MessageDetail } from '../message.types';
-import { subscribe } from '../publish';
-
-export const useMessage = (
-  initialMessage?: MessageDetail,
-): [message: MessageDetail | undefined, clearMessage: () => void] => {
-  const [message, setMessage] = useState(initialMessage);
-
-  const clearMessage = () => setMessage(undefined);
-
-  const onMessage = (message: MessageDetail) => {
-    setMessage(message);
-  };
-
-  useEffect(() => subscribe(onMessage), []);
-
-  return [message, clearMessage];
-};
-
-export default useMessage;

package/react/message/message.tsx

@@ -1,60 +0,0 @@
-import cn from 'classnames';
-import * as React from 'react';
-
-import Text from '../text';
-import VisuallyButton from '../visually-button';
-
-import { Message as Props, themes } from './message.types';
-
-const Message: React.FC<Props> & {
-  themes: typeof themes;
-} = ({ action, inline, link, mini, text, theme = themes.default }) => (
-  <div
-    className={cn('message', {
-      'message--floating': !inline,
-      'message--inline': inline,
-      'message--mini': mini,
-      [`message--theme-${theme}`]: theme,
-    })}
-  >
-    <div
-      className={cn('message__main', {
-        'message--has-button': action,
-      })}
-    >
-      <div>
-        <Text
-          className="message__text"
-          size={mini ? Text.sizes.small : Text.sizes.basic}
-        >
-          {text}
-        </Text>
-        {link ? (
-          <div className="message__link-container">
-            <Text
-              className="message__link"
-              elementName="a"
-              href={link.href}
-              size={mini ? Text.sizes.small : Text.sizes.basic}
-            >
-              {link.text}
-            </Text>
-          </div>
-        ) : null}
-      </div>
-    </div>
-    {action ? (
-      <div>
-        <VisuallyButton
-          {...action}
-          size={VisuallyButton.sizes.small}
-          variant={VisuallyButton.variants.secondary}
-        />
-      </div>
-    ) : null}
-  </div>
-);
-
-Message.themes = themes;
-
-export default Message;

package/react/message/message.types.ts

@@ -1,39 +0,0 @@
-import { ObjectValues } from '../types';
-import { VisuallyButton } from '../visually-button/visually-button.types';
-
-export const themes = {
-  default: 'default',
-  error: 'error',
-  success: 'success',
-  warning: 'warning',
-} as const;
-
-export type Message = {
-  action?: VisuallyButton;
-  inline?: boolean;
-  link?: {
-    href: string;
-    text: string;
-  };
-  mini?: boolean;
-  text: string;
-  theme?: ObjectValues<typeof themes>;
-};
-
-export const isMessageType = (
-  maybeMessageType?: string,
-): maybeMessageType is Message['theme'] =>
-  maybeMessageType
-    ? Boolean(themes[maybeMessageType as keyof Message['theme']])
-    : false;
-
-export const types: Record<string, Message['theme']> = {
-  default: themes.default,
-  error: themes.error,
-  success: themes.success,
-  warning: themes.warning,
-};
-
-export type MessageDetail = Pick<Message, 'link' | 'text' | 'theme'>;
-
-export type Listener = (event: MessageDetail) => void;

package/react/message/publish.ts

@@ -1,19 +0,0 @@
-import { Listener, MessageDetail } from './message.types';
-
-const eventName = 'user-message';
-
-export const publish = (message: MessageDetail) => {
-  if (!message) {
-    return;
-  }
-
-  window.dispatchEvent(new CustomEvent(eventName, { detail: message }));
-};
-
-const subscriber = (listener: Listener) => (event: CustomEvent) =>
-  listener(event.detail);
-
-export const subscribe = (listener: Listener) => {
-  window.addEventListener(eventName, subscriber(listener));
-  return () => window.removeEventListener(eventName, subscriber(listener));
-};

package/react/message-field/message-field.tsx

@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-
-import { MessageField as Props, variants, sizes } from './message-field.types';
-import Button from '../button';
-import TextArea from '../text-area';
-import Add from '../icons/16/add';
-import Send from '../icons/16/send';
-import classNames from 'classnames';
-
-const MessageField: React.FunctionComponent<Props> & {
-  variants: typeof variants;
-  sizes: typeof sizes;
-} = ({
-  send,
-  input,
-  altButton,
-  variant = variants.nested,
-  size = sizes.default,
-  isSubmitting,
-  onAltButtonClick = () => {},
-  onClickFunc = () => {},
-}) => {
-  const [hasTyped, setHasTyped] = useState(false);
-  return (
-    <div
-      className={classNames('message-field', {
-        [`message-field--variant-${variant}`]: variant,
-        [`message-field--variant-${variant}-${size}`]: size,
-      })}
-    >
-      {altButton ? (
-        <Button
-          {...altButton}
-          leadingIcon={<Add />}
-          variant={Button.variants.tertiary}
-          onClick={onAltButtonClick}
-          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}
-        />
-      ) : null}
-      <div className="message-field__message">
-        <TextArea
-          {...input}
-          onChange={e => {
-            setHasTyped(!!e.target.value.length);
-          }}
-          isLabelVisible={false}
-          size={
-            size === sizes.small ? TextArea.sizes.small : TextArea.sizes.default
-          }
-          isShort
-        />
-      </div>
-      <div>
-        <Button
-          {...send}
-          disabled={!hasTyped || isSubmitting}
-          leadingIcon={<Send />}
-          onClick={onClickFunc}
-          size={size === sizes.small ? Button.sizes.small : Button.sizes.basic}
-          spinning={isSubmitting}
-          variant={Button.variants.complete}
-        />
-      </div>
-    </div>
-  );
-};
-
-MessageField.variants = variants;
-MessageField.sizes = sizes;
-export default MessageField;

package/react/message-field/message-field.types.ts

@@ -1,24 +0,0 @@
-import type { Button } from '../button/button.types';
-import type { TextArea } from '../text-area/text-area.types';
-import type { ObjectValues } from '../types';
-
-export const variants = {
-  nested: 'nested',
-  standalone: 'standalone',
-} as const;
-
-export const sizes = {
-  default: 'default',
-  small: 'small',
-} as const;
-
-export type MessageField = {
-  send: Button;
-  input: TextArea;
-  altButton?: Button;
-  variant?: ObjectValues<typeof variants>;
-  size?: ObjectValues<typeof sizes>;
-  isSubmitting?: boolean;
-  onAltButtonClick?: () => void;
-  onClickFunc?: () => void;
-};

package/react/modal/modal.tsx

@@ -1,131 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import Button from '../button';
-import useEscape from '../hooks/use-escape';
-import { useIsMounted } from '../hooks/use-is-mounted';
-import Close from '../icons/18/close';
-import Text from '../text';
-
-import { ActionTypes, type Modal as Props, backgrounds } from './modal.types';
-import TabTrapper from './tab-trapper';
-import LinkButton from '../link-button';
-
-const Modal: React.FC<React.PropsWithChildren<Props>> & {
-  backgrounds: typeof backgrounds;
-} = ({
-  ariaLabel,
-  background = backgrounds.primary,
-  children,
-  closeLabel,
-  explanation,
-  id,
-  onClose = () => {},
-  title,
-  actions,
-  onClick = () => {},
-}) => {
-  const modal = React.useRef<HTMLDivElement>(null);
-  const isMounted = useIsMounted();
-  useEscape(onClose);
-
-  if (!isMounted) {
-    return null;
-  }
-
-  const handleModalClick: React.MouseEventHandler = e => {
-    if (modal.current && modal.current === e.target) {
-      onClose();
-    }
-  };
-
-  return ReactDOM.createPortal(
-    <div
-      aria-label={ariaLabel}
-      className="modal"
-      id={id}
-      onClick={handleModalClick}
-      ref={modal}
-      role="dialog"
-    >
-      <div
-        className={classNames('modal__content', {
-          [`modal__content--${background}`]: background,
-        })}
-      >
-        <TabTrapper isActive={true} className="modal__content-inner">
-          <div
-            className={classNames('modal__close-action', {
-              'modal__close-action--always-shown': actions && actions.length,
-            })}
-          >
-            <Button
-              leadingIcon={<Close />}
-              onClick={onClose}
-              size={Button.sizes.small}
-              text={closeLabel}
-              variant={Button.variants.secondary}
-              iconOnly
-            />
-          </div>
-          {title || explanation ? (
-            <div className="modal__nav">
-              <div className="modal__texts">
-                {title ? (
-                  <Text
-                    className="modal__title"
-                    size={Text.sizes.headline2}
-                    theme={Text.themes.emphasis}
-                  >
-                    {title}
-                  </Text>
-                ) : null}
-                {explanation ? (
-                  <div
-                    className={classNames('modal__explanation', {
-                      [`modal__explanation--${background}`]: background,
-                    })}
-                  >
-                    <Text size={Text.sizes.small}>{explanation}</Text>
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          ) : null}
-          <div className="modal__children">
-            <div>{children}</div>
-          </div>
-          {actions && actions.length ? (
-            <div className="modal__actions">
-              {actions.map(action =>
-                action.type === ActionTypes.LinkButton ? (
-                  <LinkButton {...action.action} />
-                ) : action.type === ActionTypes.Button ? (
-                  <Button
-                    {...action.action}
-                    onClick={e => onClick(action.buttonId, e)}
-                  />
-                ) : null,
-              )}
-            </div>
-          ) : (
-            <div className="modal__close-action-mobile">
-              <Button
-                leadingIcon={<Close />}
-                onClick={onClose}
-                text={closeLabel}
-                variant={Button.variants.secondary}
-              />
-            </div>
-          )}
-        </TabTrapper>
-      </div>
-    </div>,
-    document.body,
-  );
-};
-
-Modal.backgrounds = backgrounds;
-
-export default Modal;

package/react/modal/modal.types.ts

@@ -1,36 +0,0 @@
-import { Button } from '../button/button.types';
-import { LinkButton } from '../link-button/link-button.types';
-import { ObjectValues } from '../types';
-
-export const backgrounds = {
-  primary: 'primary',
-  secondary: 'secondary',
-} as const;
-
-export enum ActionTypes {
-  LinkButton = 'LinkButton',
-  Button = 'Button',
-}
-
-type LinkAction = {
-  type: ActionTypes.LinkButton;
-  action: LinkButton;
-};
-
-type ButtonAction = {
-  type: ActionTypes.Button;
-  action: Button;
-  buttonId: string;
-};
-
-export type Modal = {
-  ariaLabel: string;
-  background?: ObjectValues<typeof backgrounds>;
-  closeLabel: string;
-  explanation?: string;
-  id: string;
-  onClose?: () => void;
-  title?: string;
-  actions?: (LinkAction | ButtonAction)[];
-  onClick?: (id: string, arg?: unknown) => void;
-};