@newtonschool/grauity 0.1.10 → 1.0.0

package/ui/elements/Typography/constants.ts

@@ -1,292 +0,0 @@
-import { TypographyAsType, TypographyVariantType } from './types';
-
-export const TYPOGRAPHY_VARIANTS_ENUM: { [x: string]: TypographyVariantType } =
-    {
-        HEADING_SEMIBOLD_H40: 'heading-semibold-h40',
-        HEADING_SEMIBOLD_H36: 'heading-semibold-h36',
-        HEADING_SEMIBOLD_H28: 'heading-semibold-h28',
-        HEADING_SEMIBOLD_H24: 'heading-semibold-h24',
-        HEADING_SEMIBOLD_H20: 'heading-semibold-h20',
-        HEADING_SEMIBOLD_H16: 'heading-semibold-h16',
-
-        PARAGRAPH_SEMIBOLD_BODY1: 'paragraph-semibold-body1',
-        PARAGRAPH_SEMIBOLD_BODY2: 'paragraph-semibold-body2',
-        PARAGRAPH_SEMIBOLD_BODY3: 'paragraph-semibold-body3',
-        PARAGRAPH_SEMIBOLD_BODY4: 'paragraph-semibold-body4',
-        PARAGRAPH_SEMIBOLD_LABEL: 'paragraph-semibold-label',
-        PARAGRAPH_SEMIBOLD_LABEL2: 'paragraph-semibold-label2',
-        PARAGRAPH_SEMIBOLD_CALLOUT: 'paragraph-semibold-callout',
-
-        PARAGRAPH_MEDIUM_BODY1: 'paragraph-medium-body1',
-        PARAGRAPH_MEDIUM_BODY2: 'paragraph-medium-body2',
-        PARAGRAPH_MEDIUM_BODY3: 'paragraph-medium-body3',
-        PARAGRAPH_MEDIUM_BODY4: 'paragraph-medium-body4',
-
-        PARAGRAPH_MEDIUM_LABEL: 'paragraph-medium-label',
-        PARAGRAPH_MEDIUM_LABEL2: 'paragraph-medium-label2',
-        PARAGRAPH_MEDIUM_CALLOUT: 'paragraph-medium-callout',
-
-        PARAGRAPH_MEDIUM_CODE: 'paragraph-medium-code',
-
-        HEADING_SEMIBOLD_OVERLINE1: 'heading-semibold-overline1',
-        HEADING_SEMIBOLD_OVERLINE2: 'heading-semibold-overline2',
-
-        ACTION_SEMIBOLD_PRIMARY: 'action-semibold-primary',
-        ACTION_SEMIBOLD_LINK: 'action-semibold-link',
-
-        BLOG_SEMIBOLD_TITLE: 'blog-semibold-title',
-        BLOG_MEDIUM_REGULAR: 'blog-medium-regular',
-        BLOG_MEDIUM_BOLD: 'blog-medium-bold',
-        BLOG_MEDIUM_ITALIC: 'blog-medium-italic',
-    };
-
-export const TYPOGRAPHY_VARIANTS = Object.freeze(
-    Object.values(TYPOGRAPHY_VARIANTS_ENUM)
-);
-
-export const TYPOGRAPHY_AS_ENUM: { [x: string]: TypographyAsType } = {
-    H1: 'h1',
-    H2: 'h2',
-    H3: 'h3',
-    H4: 'h4',
-    H5: 'h5',
-    H6: 'h6',
-    P: 'p',
-    SPAN: 'span',
-    DIV: 'div',
-    LABEL: 'label',
-    CAPTION: 'caption',
-    CODE: 'code',
-    AUTO: 'auto',
-};
-
-export const TYPOGRAPHY_AS_LIST = Object.freeze(
-    Object.values(TYPOGRAPHY_AS_ENUM)
-);
-
-/**
- * Mapping of Typography `variant` to CSS styles.
- */
-export const TYPOGRAPHY_VARIANT_STYLES_MAPPING = {
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H40]: `
-        font-size: var(--font-size-40px, 40px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H36]: `
-        font-size: var(--font-size-36px, 36px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H28]: `
-        font-size: var(--font-size-28px, 28px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H24]: `
-        font-size: var(--font-size-24px, 24px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H20]: `
-        font-size: var(--font-size-20px, 20px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-        letter-spacing: 0.25px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H16]: `
-        font-size: var(--font-size-16px, 16px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-        letter-spacing: 0.25px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY1]: `
-        font-size: var(--font-size-18px, 18px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 160%;
-        letter-spacing: 0.1px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY2]: `
-        font-size: var(--font-size-16px, 16px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 160%;
-        letter-spacing: 0.1px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY3]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 160%;
-        letter-spacing: 0.1px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY4]: `
-        font-size: var(--font-size-12px, 12px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 160%;
-        letter-spacing: 0.1px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_LABEL]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-        letter-spacing: 0.5px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_LABEL2]: `
-        font-size: var(--font-size-12px, 12px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-        letter-spacing: 0.4px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_CALLOUT]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-        letter-spacing: 0.15px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY1]: `
-        font-size: var(--font-size-18px, 18px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 160%;
-        letter-spacing: 0.1px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY2]: `
-        font-size: var(--font-size-16px, 16px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 160%;
-        letter-spacing: 0.1px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY3]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 160%;
-        letter-spacing: 0.1px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY4]: `
-        font-size: var(--font-size-12px, 12px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 160%;
-        letter-spacing: 0.1px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_LABEL]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 120%;
-        letter-spacing: 0.5px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_LABEL2]: `
-        font-size: var(--font-size-12px, 12px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 120%;
-        letter-spacing: 0.4px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_CALLOUT]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 120%;
-        letter-spacing: 0.15px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_CODE]: `
-        font-family: var(--font-family-code, 'Fira Code');
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 16px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_OVERLINE1]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-650, 650);
-        line-height: 120%;
-        letter-spacing: 1.6px;
-        text-transform: uppercase;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_OVERLINE2]: `
-        font-size: var(--font-size-11px, 11px);
-        font-weight: var(--font-weight-650, 650);
-        line-height: 120%;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.ACTION_SEMIBOLD_PRIMARY]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 160%;
-        letter-spacing: 0.4px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.ACTION_SEMIBOLD_LINK]: `
-        font-size: var(--font-size-14px, 14px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-        letter-spacing: 2px;
-        text-decoration: underline;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_SEMIBOLD_TITLE]: `
-        font-size: var(--font-size-48px, 48px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 120%;
-        letter-spacing: 0.4px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_REGULAR]: `
-        font-size: var(--font-size-18px, 18px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 32px;
-        letter-spacing: 0.2px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_BOLD]: `
-        font-size: var(--font-size-18px, 18px);
-        font-weight: var(--font-weight-semibold, 600);
-        line-height: 32px;
-        letter-spacing: 0.2px;
-    `,
-    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_ITALIC]: `
-        font-size: var(--font-size-18px, 18px);
-        font-weight: var(--font-weight-medium, 500);
-        line-height: 32px;
-        letter-spacing: 0.2px;
-        font-style: italic;
-    `,
-};
-
-/**
- * Mapping of typography `variant` to `as` type, will be useful when Typography `as` is set to `auto`.
- */
-export const TYPOGRAPHY_VARIANT_AS_MAPPING = {
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H40]: TYPOGRAPHY_AS_ENUM.H1,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H36]: TYPOGRAPHY_AS_ENUM.H2,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H28]: TYPOGRAPHY_AS_ENUM.H3,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H24]: TYPOGRAPHY_AS_ENUM.H4,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H20]: TYPOGRAPHY_AS_ENUM.H5,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_H16]: TYPOGRAPHY_AS_ENUM.H6,
-
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY1]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY2]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY3]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_BODY4]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_LABEL]:
-        TYPOGRAPHY_AS_ENUM.LABEL,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_LABEL2]:
-        TYPOGRAPHY_AS_ENUM.LABEL,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_SEMIBOLD_CALLOUT]: TYPOGRAPHY_AS_ENUM.P,
-
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY1]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY2]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY3]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_BODY4]: TYPOGRAPHY_AS_ENUM.P,
-
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_LABEL]: TYPOGRAPHY_AS_ENUM.LABEL,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_LABEL2]:
-        TYPOGRAPHY_AS_ENUM.LABEL,
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_CALLOUT]: TYPOGRAPHY_AS_ENUM.P,
-
-    [TYPOGRAPHY_VARIANTS_ENUM.PARAGRAPH_MEDIUM_CODE]: TYPOGRAPHY_AS_ENUM.CODE,
-
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_OVERLINE1]:
-        TYPOGRAPHY_AS_ENUM.H6,
-    [TYPOGRAPHY_VARIANTS_ENUM.HEADING_SEMIBOLD_OVERLINE2]:
-        TYPOGRAPHY_AS_ENUM.H6,
-
-    [TYPOGRAPHY_VARIANTS_ENUM.ACTION_SEMIBOLD_PRIMARY]: TYPOGRAPHY_AS_ENUM.SPAN,
-    [TYPOGRAPHY_VARIANTS_ENUM.ACTION_SEMIBOLD_LINK]: TYPOGRAPHY_AS_ENUM.SPAN,
-
-    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_SEMIBOLD_TITLE]: TYPOGRAPHY_AS_ENUM.H1,
-    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_REGULAR]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_BOLD]: TYPOGRAPHY_AS_ENUM.P,
-    [TYPOGRAPHY_VARIANTS_ENUM.BLOG_MEDIUM_ITALIC]: TYPOGRAPHY_AS_ENUM.P,
-};

package/ui/elements/Typography/index.ts

@@ -1,9 +0,0 @@
-export {
-    TYPOGRAPHY_AS_ENUM,
-    TYPOGRAPHY_AS_LIST,
-    TYPOGRAPHY_VARIANTS,
-    TYPOGRAPHY_VARIANTS_ENUM,
-} from './constants';
-export { TYPOGRAPHY_VARIANT_AS_MAPPING } from './constants';
-export type { TypographyProps } from './types';
-export { default } from './Typography';

package/ui/elements/Typography/types.ts

@@ -1,116 +0,0 @@
-import React from 'react';
-
-export type TypographyAsType =
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'p'
-    | 'span'
-    | 'div'
-    | 'label'
-    | 'caption'
-    | 'code'
-    | 'auto';
-
-export type TypographyVariantType =
-    // <h1> through <h6>
-    | 'heading-semibold-h40'
-    | 'heading-semibold-h36'
-    | 'heading-semibold-h28'
-    | 'heading-semibold-h24'
-    | 'heading-semibold-h20'
-    | 'heading-semibold-h16'
-
-    // <p>
-    | 'paragraph-semibold-body1'
-    | 'paragraph-semibold-body2'
-    | 'paragraph-semibold-body3'
-    | 'paragraph-semibold-body4'
-    | 'paragraph-semibold-label'
-    | 'paragraph-semibold-label2'
-    | 'paragraph-semibold-callout'
-
-    // <p>
-    | 'paragraph-medium-body1'
-    | 'paragraph-medium-body2'
-    | 'paragraph-medium-body3'
-    | 'paragraph-medium-body4'
-
-    // <label>
-    | 'paragraph-medium-label'
-    | 'paragraph-medium-label2'
-    | 'paragraph-medium-callout'
-
-    // <code>
-    | 'paragraph-medium-code'
-
-    // <h6>
-    | 'heading-semibold-overline1'
-    | 'heading-semibold-overline2'
-
-    // <span>
-    | 'action-semibold-primary'
-    | 'action-semibold-link'
-
-    // <p>
-    | 'blog-semibold-title'
-    | 'blog-medium-regular'
-    | 'blog-medium-bold'
-    | 'blog-medium-italic';
-
-export interface StyledTypographyInterface {
-    variant?: TypographyVariantType;
-    as?: TypographyAsType;
-    color?: string;
-    textAlign?: string;
-    textTransform?: string;
-    fontSize?: string;
-    children: React.ReactNode;
-}
-
-export interface TypographyProps {
-    /**
-     * Variant of the Typography element
-     *
-     * Available choices:
-     *
-     * Default: `paragraph-medium-body1`
-     * */
-    variant?: TypographyVariantType;
-
-    /**
-     * Color of the Typography element
-     * */
-    color?: string;
-
-    /**
-     * Determines the type of the element rendered
-     * Available choices:
-     *
-     * Default: `p`
-     * */
-    as?: TypographyAsType;
-
-    /**
-     * Text alignment of the Typography element
-     * */
-    textAlign?: string;
-
-    /**
-     * Text transformation of the Typography element
-     * */
-    textTransform?: string;
-
-    /**
-     * Font size of the Typography element
-     * */
-    fontSize?: string;
-
-    /**
-     * Children of the component
-     * */
-    children: React.ReactNode;
-}

package/ui/elements/Typography/utils.ts

@@ -1,11 +0,0 @@
-import {
-    TYPOGRAPHY_VARIANT_STYLES_MAPPING,
-    TYPOGRAPHY_VARIANTS_ENUM,
-} from './constants';
-
-export const getTypographyVariantStyles = (variant: string) =>
-    variant
-        ? TYPOGRAPHY_VARIANT_STYLES_MAPPING[variant]
-        : TYPOGRAPHY_VARIANT_STYLES_MAPPING[
-            TYPOGRAPHY_VARIANTS_ENUM.BODY_REGULAR
-        ];

package/ui/helpers/README.md

@@ -1,3 +0,0 @@
-# helpers
-
-The purpose fo the directory is to contain all the common utils required by the library

package/ui/helpers/classNameBuilders.ts

@@ -1,48 +0,0 @@
-/*
- * There are 3 prop patterns used to build up the className for a component.
- * Each utility here is meant for use in a classnames() argument.
- *
- * There is no util for valueOnly() because it would simply return val.
- * Use the prop value inline instead.
- *   <Label size='big' />
- *   <div class="ui big label"></div>
- */
-
-/**
- * Props where only the prop key is used in the className.
- * @param {*} val A props value
- * @param {string} key A props key
- *
- * @example
- * <Label tag />
- * <div class="ui tag label"></div>
- */
-export const useKeyOnly = (val: any, key: string) => val && key;
-
-/**
- * Props that require both a key and value to create a className.
- * @param {*} val A props value
- * @param {string} key A props key
- *
- * @example
- * <Label corner='left' />
- * <div class="ui left corner label"></div>
- */
-export const useValueAndKey = (val: any, key: string) =>
-    val && val !== true && `${val}-${key}`;
-
-/**
- * Props whose key will be used in className, or value and key.
- * @param {*} val A props value
- * @param {string} key A props key
- *
- * @example Key Only
- * <Label pointing />
- * <div class="ui pointing label"></div>
- *
- * @example Key and Value
- * <Label pointing='left' />
- * <div class="ui left pointing label"></div>
- */
-export const useKeyOrValueAndKey = (val: any, key: string) =>
-    val && (val === true ? key : `${val}-${key}`);

package/ui/helpers/index.ts

@@ -1,7 +0,0 @@
-import {
-    useKeyOnly,
-    useKeyOrValueAndKey,
-    useValueAndKey,
-} from './classNameBuilders';
-
-export { useKeyOnly, useKeyOrValueAndKey, useValueAndKey };

package/ui/index.ts

@@ -1,48 +0,0 @@
-import './css/index.scss';
-
-export { ICON_TAGS, TAG_ICONS } from './core';
-export type { GrauityInitProps } from './init';
-export { GrauityInit } from './init';
-
-// Theme
-export {
-    ThemeConsumer,
-    ThemeContext,
-    ThemeWrapper,
-} from './themes/ThemeContext';
-
-// Icon
-export { Icon, type IconProps } from './elements/Icon';
-
-// NSButton
-export {
-    BUTTON_ICON_POSITIONS_ENUM,
-    BUTTON_SIZES_ENUM,
-    BUTTON_VARIANTS,
-    BUTTON_VARIANTS_ENUM,
-    type ButtonProps,
-    default as NSButton,
-    ButtonGroup as NSButtonGroup,
-} from './elements/Button';
-
-// NSTypography
-export {
-    default as NSTypography,
-    TYPOGRAPHY_AS_ENUM,
-    TYPOGRAPHY_AS_LIST,
-    TYPOGRAPHY_VARIANTS,
-    TYPOGRAPHY_VARIANTS_ENUM,
-    type TypographyProps,
-} from './elements/Typography';
-
-// NSTable
-export { default as NSTable, type TableProps } from './elements/Table';
-
-// NSModal
-export {
-    type ConfirmationDialogProps,
-    type ModalProps,
-    ConfirmationDialog as NSConfirmationDialog,
-    default as NSModal,
-    MultiStepModal as NSMultiStepModal,
-} from './elements/Modal';

package/ui/init/GrauityInit.tsx

@@ -1,85 +0,0 @@
-import PropTypes from 'prop-types';
-import * as React from 'react';
-import styled from 'styled-components';
-
-export interface GrauityInitProps {
-    /**
-     * An element type to render as (string or function).
-     * */
-    as: React.ElementType;
-
-    /**
-     * The font size to be applied on this element and so will act as standard for the `ems` of all grauity components.
-     * */
-    fontSize?: string;
-
-    /**
-     * The multiplier is multiplied will all the `ems` of the grauity components.
-     * */
-    multiplier?: number;
-
-    /**
-     * Additional classes to be added to the component
-     * */
-    className?: string;
-
-    /**
-     * The children to be rendered inside this component.
-     * */
-    children?: React.ReactNode;
-
-    /**
-     * Additional styles to be added to the component
-     * */
-    style?: object;
-}
-
-/**
- * This component is used to initialize the Grauity library. Ideally, it should be the root component of your application.
- * But nonetheless all the grauity components should be the children of this component.
- * */
-function GrauityInit({
-    as,
-    fontSize,
-    multiplier,
-    className,
-    style,
-    children,
-}: GrauityInitProps) {
-    const ElementType = styled.div.attrs(() => ({
-        as: as || 'div',
-    }))<GrauityInitProps>``;
-
-    return (
-        <ElementType
-            className={className}
-            style={{
-                ...style,
-                fontSize,
-                '--multiplier': multiplier,
-            }}
-        >
-            {children}
-        </ElementType>
-    );
-}
-
-GrauityInit.propTypes = {
-    as: PropTypes.elementType,
-    fontSize: PropTypes.string,
-    multiplier: PropTypes.number,
-    className: PropTypes.string,
-    style: PropTypes.object,
-    children: PropTypes.node,
-};
-
-GrauityInit.defaultProps = {
-    as: 'div',
-    fontSize: '16px',
-    multiplier: 1,
-    className: 'grauity-init',
-    style: {},
-    children: null,
-};
-
-export default GrauityInit;

package/ui/init/index.ts

@@ -1,2 +0,0 @@
-export type { GrauityInitProps } from './GrauityInit';
-export { default as GrauityInit } from './GrauityInit';