@newtonschool/grauity 0.0.13 → 0.1.10

package/ui/elements/Typography/constants.ts

@@ -0,0 +1,292 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,11 @@
+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/index.ts

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

package/ui/index.ts

@@ -1,9 +1,48 @@
 import './css/index.scss';
 
 export { ICON_TAGS, TAG_ICONS } from './core';
-
 export type { GrauityInitProps } from './init';
 export { GrauityInit } from './init';
 
-export type { IconProps } from './elements';
-export { Icon } from './elements';
+// 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,7 +1,6 @@
-import * as React from 'react';
 import PropTypes from 'prop-types';
-
-import { getElementTypeFromProps } from '../helpers';
+import * as React from 'react';
+import styled from 'styled-components';
 
 export interface GrauityInitProps {
     /**
@@ -12,30 +11,50 @@ export interface GrauityInitProps {
     /**
      * The font size to be applied on this element and so will act as standard for the `ems` of all grauity components.
      * */
-    fontSize: string;
+    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, children }: GrauityInitProps) {
-    const ElementType = getElementTypeFromProps({ as });
+function GrauityInit({
+    as,
+    fontSize,
+    multiplier,
+    className,
+    style,
+    children,
+}: GrauityInitProps) {
+    const ElementType = styled.div.attrs(() => ({
+        as: as || 'div',
+    }))<GrauityInitProps>``;
 
     return (
         <ElementType
-            className="grauity-init"
+            className={className}
             style={{
+                ...style,
                 fontSize,
                 '--multiplier': multiplier,
             }}
@@ -49,6 +68,8 @@ GrauityInit.propTypes = {
     as: PropTypes.elementType,
     fontSize: PropTypes.string,
     multiplier: PropTypes.number,
+    className: PropTypes.string,
+    style: PropTypes.object,
     children: PropTypes.node,
 };
 
@@ -56,6 +77,8 @@ GrauityInit.defaultProps = {
     as: 'div',
     fontSize: '16px',
     multiplier: 1,
+    className: 'grauity-init',
+    style: {},
     children: null,
 };
 

package/ui/init/index.ts

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