@quillsql/react 1.0.0

package/src/QuillProvider.tsx

@@ -0,0 +1,28 @@
+import React, { useContext, useEffect } from 'react';
+import { ContextProvider } from './Context';
+
+const QuillProvider = ({
+  organizationId,
+  authToken,
+  publicKey,
+  theme,
+  containerStyle,
+  runQueryButton,
+  saveQueryButton,
+  exportQueryButton,
+  children,
+}) => {
+  return (
+    <ContextProvider
+      containerStyle={containerStyle}
+      initialTheme={theme}
+      authToken={authToken}
+      publicKey={publicKey}
+      customerId={organizationId}
+    >
+      {children}
+    </ContextProvider>
+  );
+};
+
+export default QuillProvider;

package/src/assets/ArrowDownHeadIcon.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowDownHeadIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path fill="currentColor" d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
+  </svg>
+);
+
+export default ArrowDownHeadIcon;

package/src/assets/ArrowDownIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowDownIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z"
+    />
+  </svg>
+);
+
+export default ArrowDownIcon;

package/src/assets/ArrowDownRightIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowDownRightIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M14.59 16.004L5.982 7.397l1.414-1.414 8.607 8.606V7.004h2v11h-11v-2z"
+    />
+  </svg>
+);
+
+export default ArrowDownRightIcon;

package/src/assets/ArrowLeftHeadIcon.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowLeftHeadIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z" />
+  </svg>
+);
+
+export default ArrowLeftHeadIcon;

package/src/assets/ArrowRightHeadIcon.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowRightHeadIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
+  </svg>
+);
+
+export default ArrowRightHeadIcon;

package/src/assets/ArrowRightIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowRightIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
+    />
+  </svg>
+);
+
+export default ArrowRightIcon;

package/src/assets/ArrowUpHeadIcon.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowUpHeadIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path fill="currentColor" d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" />
+  </svg>
+);
+
+export default ArrowUpHeadIcon;

package/src/assets/ArrowUpIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowUpIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"
+    />
+  </svg>
+);
+
+export default ArrowUpIcon;

package/src/assets/ArrowUpRightIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ArrowUpRightIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      fill="currentColor"
+      d="M16.004 9.414l-8.607 8.607-1.414-1.414L14.589 8H7.004V6h11v11h-2V9.414z"
+    />
+  </svg>
+);
+
+export default ArrowUpRightIcon;

package/src/assets/CalendarIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const CalendarIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path
+      fillRule="evenodd"
+      d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default CalendarIcon;

package/src/assets/DoubleArrowLeftHeadIcon.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const DoubleArrowLeftHeadIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path id="svg_1" d="m0,0l24,0l0,24l-24,0l0,-24z" fill="none" />
+    <path
+      id="svg_2"
+      d="m14.1247,12l4.95,4.95l-1.414,1.414l-6.364,-6.364l6.364,-6.364l1.414,1.414l-4.95,4.95z"
+    />
+    <path
+      id="svg_3"
+      d="m7.31152,12l4.95,4.95l-1.414,1.414l-6.364,-6.364l6.364,-6.364l1.414,1.414l-4.95,4.95z"
+    />
+  </svg>
+);
+
+export default DoubleArrowLeftHeadIcon;

package/src/assets/DoubleArrowRightHeadIcon.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const DoubleArrowRightHeadIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path id="svg_1" d="m0,0l24,0l0,24l-24,0l0,-24z" fill="none" />
+    <path
+      transform="rotate(180 15.1857 12)"
+      id="svg_2"
+      d="m14.1247,12l4.95,4.95l-1.414,1.414l-6.364,-6.364l6.364,-6.364l1.414,1.414l-4.95,4.95z"
+    />
+    <path
+      transform="rotate(180 8.37252 12)"
+      id="svg_3"
+      d="m7.31152,12l4.95,4.95l-1.414,1.414l-6.364,-6.364l6.364,-6.364l1.414,1.414l-4.95,4.95z"
+    />
+  </svg>
+);
+
+export default DoubleArrowRightHeadIcon;

package/src/assets/ExclamationFilledIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const ExclamationFilledIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fillRule="evenodd"
+      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default ExclamationFilledIcon;

package/src/assets/LoadingSpinner.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const LoadingSpinner = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path d="M18.364 5.636L16.95 7.05A7 7 0 1 0 19 12h2a9 9 0 1 1-2.636-6.364z" />
+  </svg>
+);
+
+export default LoadingSpinner;

package/src/assets/SearchIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const SearchIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path
+      fillRule="evenodd"
+      d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default SearchIcon;

package/src/assets/XCircleIcon.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+import React from "react";
+
+const XCircleIcon = ({ ...props }) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+    <path
+      fillRule="evenodd"
+      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default XCircleIcon;

package/src/assets/index.ts

@@ -0,0 +1,16 @@
+export { default as ArrowDownHeadIcon } from "./ArrowDownHeadIcon";
+export { default as ArrowDownRightIcon } from "./ArrowDownRightIcon";
+export { default as ArrowDownIcon } from "./ArrowDownIcon";
+export { default as ArrowRightIcon } from "./ArrowRightIcon";
+export { default as ArrowRightHeadIcon } from "./ArrowRightHeadIcon";
+export { default as ArrowLeftHeadIcon } from "./ArrowLeftHeadIcon";
+export { default as DoubleArrowLeftHeadIcon } from "./DoubleArrowLeftHeadIcon";
+export { default as DoubleArrowRightHeadIcon } from "./DoubleArrowRightHeadIcon";
+export { default as ArrowUpHeadIcon } from "./ArrowUpHeadIcon";
+export { default as ArrowUpIcon } from "./ArrowUpIcon";
+export { default as ArrowUpRightIcon } from "./ArrowUpRightIcon";
+export { default as CalendarIcon } from "./CalendarIcon";
+export { default as ExclamationFilledIcon } from "./ExclamationFilledIcon";
+export { default as LoadingSpinner } from "./LoadingSpinner";
+export { default as SearchIcon } from "./SearchIcon";
+export { default as XCircleIcon } from "./XCircleIcon";

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,179 @@
+/* eslint-disable react/display-name */
+import React, { useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { HoveredValueContext, SelectedValueContext } from '../../contexts';
+
+import { useInternalState, useSelectOnKeyDown } from '../../hooks';
+
+import { ArrowDownHeadIcon } from '../../assets';
+
+import {
+  BaseColors,
+  border,
+  borderRadius,
+  boxShadow,
+  fontSize,
+  fontWeight,
+  getColorClassNames,
+  makeClassName,
+  mergeRefs,
+  sizing,
+  spacing,
+} from '../../lib';
+import {
+  constructValueToNameMapping,
+  getSelectButtonColors,
+  hasValue,
+} from '../selectUtils';
+import { DropdownItemProps } from './DropdownItem';
+import Modal from '../Modal';
+import { DEFAULT_COLOR, colorPalette } from '../../lib/theme';
+
+const makeDropdownClassName = makeClassName('Dropdown');
+
+export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  icon?: React.JSXElementConstructor<any>;
+  children: React.ReactElement[] | React.ReactElement;
+}
+
+const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
+  (props, ref) => {
+    const {
+      defaultValue,
+      value,
+      onValueChange,
+      placeholder = 'Select...',
+      disabled = false,
+      icon,
+      children,
+      className,
+      ...other
+    } = props;
+    const [selectedValue, setSelectedValue] = useInternalState(
+      defaultValue,
+      value
+    );
+    const [isFocused, setIsFocused] = useState(false);
+
+    const dropdownRef = useRef(null);
+
+    const Icon = icon;
+    const valueToNameMapping = constructValueToNameMapping(children);
+    const optionValues = React.Children.map(
+      children,
+      (child: { props: DropdownItemProps }) => child.props.value
+    );
+
+    const handleValueChange = (value: string) => {
+      setSelectedValue(value);
+      setIsFocused(false);
+      onValueChange?.(value);
+    };
+
+    const [hoveredValue, handleKeyDown] = useSelectOnKeyDown(
+      handleValueChange,
+      optionValues,
+      isFocused,
+      setIsFocused,
+      selectedValue
+    );
+
+    const hasSelection = hasValue(selectedValue);
+
+    return (
+      <div
+        ref={mergeRefs([dropdownRef, ref])}
+        onKeyDown={handleKeyDown}
+        className={twMerge(
+          makeDropdownClassName('root'),
+          'relative w-full min-w-[10rem]',
+          className
+        )}
+        {...other}
+      >
+        <button
+          type="button"
+          className={twMerge(
+            makeDropdownClassName('button'),
+            'flex justify-between items-center w-full focus:outline-none focus:ring-2',
+            getSelectButtonColors(hasSelection, disabled),
+            getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
+              .focusRingColor,
+            Icon ? spacing.xl.paddingLeft : spacing.twoXl.paddingLeft,
+            spacing.twoXl.paddingRight,
+            spacing.sm.paddingY,
+            borderRadius.md.all,
+            border.sm.all,
+            boxShadow.sm
+          )}
+          onClick={() => setIsFocused(!isFocused)}
+          disabled={disabled}
+        >
+          <div className="flex justify-start items-center truncate">
+            {Icon ? (
+              <Icon
+                className={twMerge(
+                  makeDropdownClassName('icon'),
+                  'shrink-0',
+                  sizing.lg.height,
+                  sizing.lg.width,
+                  getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
+                    .textColor,
+                  spacing.lg.marginRight
+                )}
+                aria-hidden="true"
+              />
+            ) : null}
+            <p
+              className={twMerge(
+                makeDropdownClassName('text'),
+                'whitespace-nowrap truncate',
+                fontSize.sm,
+                fontWeight.md
+              )}
+            >
+              {selectedValue
+                ? valueToNameMapping.get(selectedValue)
+                : placeholder}
+            </p>
+          </div>
+          <ArrowDownHeadIcon
+            className={twMerge(
+              makeDropdownClassName('arrowDownIcon'),
+              'flex-none',
+              sizing.lg.height,
+              sizing.lg.width,
+              spacing.twoXs.negativeMarginRight,
+              getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
+                .textColor
+            )}
+            aria-hidden="true"
+          />
+        </button>
+        <Modal
+          showModal={isFocused}
+          setShowModal={setIsFocused}
+          parentRef={dropdownRef}
+        >
+          <SelectedValueContext.Provider
+            value={{ selectedValue, handleValueChange }}
+          >
+            <HoveredValueContext.Provider value={{ hoveredValue }}>
+              {React.Children.map(children, (child: React.ReactElement) =>
+                React.cloneElement(child)
+              )}
+            </HoveredValueContext.Provider>
+          </SelectedValueContext.Provider>
+        </Modal>
+      </div>
+    );
+  }
+);
+
+export default Dropdown;

package/src/components/Dropdown/DropdownItem.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable react/display-name */
+import React, { useContext } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { HoveredValueContext, SelectedValueContext } from '../../contexts';
+
+import { fontSize } from '../../lib/font';
+import { sizing } from '../../lib/sizing';
+import { spacing } from '../../lib/spacing';
+
+import { getColorClassNames, makeClassName } from '../../lib';
+import { DEFAULT_COLOR, colorPalette } from '../../lib/theme';
+
+const makeDropdownItemClassName = makeClassName('DropdownItem');
+
+export interface DropdownItemProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+  text?: string;
+  icon?: React.ElementType;
+}
+
+const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
+  (props, ref) => {
+    const { value, text, icon, className, ...other } = props;
+    const { selectedValue, handleValueChange } =
+      useContext(SelectedValueContext);
+    const { hoveredValue } = useContext(HoveredValueContext);
+    const isActive = selectedValue === value;
+    const isHovered = hoveredValue === value;
+    const bgColor = isActive
+      ? getColorClassNames(DEFAULT_COLOR, colorPalette.lightBackground).bgColor
+      : isHovered
+      ? getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground).bgColor
+      : getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
+          .hoverBgColor;
+    const textColor = isActive
+      ? getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText).textColor
+      : getColorClassNames(DEFAULT_COLOR, colorPalette.darkText).textColor;
+
+    const Icon = icon ? icon : null;
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={() => handleValueChange?.(value)}
+        className={twMerge(
+          makeDropdownItemClassName('root'),
+          'flex items-center justify-start w-full truncate',
+          spacing.twoXl.paddingX,
+          spacing.md.paddingY,
+          fontSize.sm,
+          bgColor,
+          textColor,
+          className
+        )}
+        {...other}
+      >
+        {Icon ? (
+          <Icon
+            className={twMerge(
+              makeDropdownItemClassName('icon'),
+              'flex-none',
+              sizing.lg.height,
+              sizing.lg.width,
+              spacing.lg.marginRight,
+              getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
+                .textColor
+            )}
+            aria-hidden="true"
+          />
+        ) : null}
+        <p
+          className={twMerge(
+            makeDropdownItemClassName('text'),
+            'text-sm whitespace-nowrap truncate'
+          )}
+        >
+          {text ?? value}
+        </p>
+      </button>
+    );
+  }
+);
+
+export default DropdownItem;

package/src/components/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from "./Dropdown";
+export { default as DropdownItem } from "./DropdownItem";

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable react/display-name */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import { useOnClickOutside, useOnWindowResize } from '../../hooks';
+
+import { HorizontalPosition } from '../../lib/inputTypes';
+import {
+  border,
+  borderRadius,
+  boxShadow,
+  getColorClassNames,
+  mergeRefs,
+  spacing,
+} from '../../lib';
+import { DEFAULT_COLOR, colorPalette } from '../../lib/theme';
+
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+  showModal: boolean;
+  setShowModal:
+    | React.Dispatch<React.SetStateAction<boolean>>
+    | ((nextState: boolean) => void);
+  parentRef: React.RefObject<HTMLElement>;
+  width?: number;
+  maxHeight?: string;
+  anchorPosition?: HorizontalPosition;
+  children: React.ReactNode;
+}
+
+const Modal = React.forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
+  const {
+    showModal,
+    setShowModal,
+    parentRef,
+    width,
+    maxHeight = 'max-h-72',
+    children,
+    className,
+    ...other
+  } = props;
+  const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
+
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const checkModalExceedsWindow = useCallback(
+    (modalWidth: number, windowWidth: number): boolean => {
+      if (!parentRef.current) {
+        return false;
+      }
+      const modalBoundingRight =
+        parentRef.current.getBoundingClientRect().left + modalWidth;
+      return windowWidth - modalBoundingRight < 0;
+    },
+    [parentRef]
+  );
+
+  const getAbsoluteSpacing = () => {
+    if (!modalExceedsWindow) {
+      return spacing.none.left;
+    }
+    return spacing.none.right;
+  };
+
+  useOnClickOutside(modalRef, e => {
+    // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
+    const isTriggerElem = parentRef
+      ? parentRef.current?.contains(e.target)
+      : false;
+    if (!isTriggerElem) {
+      setShowModal(false);
+    }
+  });
+
+  // Execute only when modal is of absolute size
+  useEffect(() => {
+    if (width) {
+      setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+    }
+  }, [checkModalExceedsWindow, parentRef, width]);
+
+  useOnWindowResize(() => {
+    if (width) {
+      setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
+    }
+  });
+
+  return showModal ? (
+    <div
+      ref={mergeRefs([modalRef, ref])}
+      className={twMerge(
+        'absolute z-10 divide-y overflow-y-auto',
+        width ? '' : 'w-full',
+        getAbsoluteSpacing(),
+        maxHeight,
+        getColorClassNames('white').bgColor,
+        getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder).borderColor,
+        getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder).divideColor,
+        spacing.twoXs.marginTop,
+        spacing.twoXs.marginBottom,
+        borderRadius.md.all,
+        border.sm.all,
+        boxShadow.lg,
+        className
+      )}
+      style={{ width }}
+      {...other}
+    >
+      {children}
+    </div>
+  ) : null;
+});
+
+export default Modal;

package/src/components/Modal/index.ts

@@ -0,0 +1 @@
+export { default } from "./Modal";