paris 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # paris
 
+## 0.4.4
+
+### Patch Changes
+
+- fd52101: Explicitly define each component export in `package.json` for TypeScript support without needing a tsconfig update
+- 94c847a: feat: Add weight and fontStyle props to Text component
+- a90ddd3: Drawer: Add overlay greyed style option
+  Field: Allow for custom label and description components to be passed as props
+
+## 0.4.3
+
+### Patch Changes
+
+- 49f9ee4: Prop typing fixes
+
 ## 0.4.2
 
 ### Patch Changes

package/README.md

@@ -76,16 +76,6 @@ export default function RootLayout({
 }
 ```
 
-Finally, map our types in your `.tsconfig.json` file (this is a temporary workaround that we'll fix soon):
-
-```json
-{
-    "paths": {
-        "paris/*": ["./node_modules/paris/src/stories/*"]
-    }
-}
-```
-
 That's it! You can now import any component from Paris:
 
 ```tsx

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,24 @@
     "pnpm": "^8.x"
   },
   "exports": {
-    "./*": "./src/stories/*"
+    "./*": "./src/stories/*",
+    "./button": "./src/stories/button/index.ts",
+    "./card": "./src/stories/card/index.ts",
+    "./checkbox": "./src/stories/checkbox/index.ts",
+    "./combobox": "./src/stories/combobox/index.ts",
+    "./dialog": "./src/stories/dialog/index.ts",
+    "./drawer": "./src/stories/drawer/index.ts",
+    "./dropdown": "./src/stories/dropdown/index.ts",
+    "./field": "./src/stories/field/index.ts",
+    "./icon": "./src/stories/icon/index.ts",
+    "./input": "./src/stories/input/index.ts",
+    "./pagination": "./src/stories/pagination/index.ts",
+    "./select": "./src/stories/select/index.ts",
+    "./text": "./src/stories/text/index.ts",
+    "./textarea": "./src/stories/textarea/index.ts",
+    "./theme": "./src/stories/theme/index.ts",
+    "./tilt": "./src/stories/tilt/index.ts",
+    "./utility": "./src/stories/utility/index.ts"
   },
   "dependencies": {
     "@ariakit/react": "^0.2.3",
@@ -91,19 +108,19 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "type-fest": "^3.10.0",
-    "typescript": "^5.0.2"
+    "typescript": "^5.2.2"
   },
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "pnpm generate:exports && next build",
     "start": "next start",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build",
     "create:component": "node ./scripts/createComponent.js",
-    "generate:entry": "node ./scripts/generateEntry.js",
+    "generate:exports": "node ./scripts/generateExports.js",
     "generate:theme": "pte export ./src/stories/theme/themes.ts LightTheme -o ./public/pte.css",
     "generate:text": "ts-node --esm ./scripts/text.ts",
-    "release": "pnpm changeset publish"
+    "release": "pnpm generate:exports && pnpm changeset publish"
   }
 }

package/src/stories/Tokens.mdx

@@ -36,7 +36,7 @@ Tokens are the smallest pieces of design language that can be used to build comp
                 }}
             />
             <div style={{ color: pvar('colors.contentPrimary') }}>
-                <span style={{ fontWeight: pvar('typography.boldFontWeight') }}>{key}</span>
+                <span style={{ fontWeight: pvar('typography.fontWeights.medium') }}>{key}</span>
                 <br />
                 <pre style={{ fontSize: '14px' }}>{pget(`colors.${key}`)}</pre>
             </div>

package/src/stories/button/Button.tsx

@@ -65,7 +65,7 @@ export type ButtonProps = {
      *
      * This should be text. When Button shape is `circle` or `square`, the action description should still be passed here for screen readers.
      */
-    children: string;
+    children: ReactNode | ReactNode[];
 } & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
 
 /**
@@ -105,7 +105,7 @@ export const Button: FC<ButtonProps> = ({
         )}
         aria-disabled={disabled ?? false}
         type={type}
-        aria-details={children}
+        aria-details={typeof children === 'string' ? children : undefined}
         onClick={!disabled && !href ? onClick : () => {}}
         disabled={false}
         {...href ? {

package/src/stories/checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { useId } from 'react';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import styles from './Checkbox.module.scss';
@@ -9,7 +9,7 @@ export type CheckboxProps = {
     onChange?: (checked: boolean | 'indeterminate') => void;
     disabled?: boolean;
     /** The contents of the Checkbox. */
-    children?: string;
+    children?: ReactNode | ReactNode[];
 };
 
 /**

package/src/stories/drawer/Drawer.module.scss

@@ -26,12 +26,20 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
 .overlay {
     position: absolute;
     inset: 0;
-    background-color: var(--pte-colors-backgroundOverlayDark);
-    will-change: backdrop-filter, opacity;
-    backdrop-filter: blur(0);
+
+    &.overlayBlured {
+        backdrop-filter: blur(0);
+        background-color: var(--pte-colors-backgroundOverlayDark);
+        will-change: backdrop-filter, opacity;
+    }
+
+    &.overlayGreyed {
+        background-color: rgba(175, 175, 175, 0); // Non-transparent backgroundOverlayGrey
+        will-change: background-color, opacity;
+    }
 }
 
-.overlayContainer {
+.overlayBluredContainer {
     .enterFrom {
         backdrop-filter: blur(0);
     }
@@ -49,6 +57,25 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     }
 }
 
+.overlayGreyedContainer {
+    .enterFrom {
+        background-color: rgba(175, 175, 175, 0);
+    }
+    .enterTo {
+        background-color: var(--pte-colors-backgroundOverlayGrey);
+    }
+    .leave {
+        transition-delay: $panelAnimationDelay;
+    }
+    .leaveFrom {
+        background-color: var(--pte-colors-backgroundOverlayGrey);
+    }
+    .leaveTo {
+        background-color: rgba(175, 175, 175, 0);
+    }
+    
+}
+
 .panelContainer {
     position: fixed;
 

package/src/stories/drawer/Drawer.tsx

@@ -91,6 +91,12 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
      * @default false
      */
     pagination?: PaginationState<T>;
+    /**
+     * The overlay style of the Drawer, either 'greyed' or 'blur'.
+     *
+     * @default 'blur'
+     */
+    overlayStyle?: 'greyed' | 'blur';
     /** The contents of the Drawer. */
     children?: ReactNode | ReactNode[];
 };
@@ -116,6 +122,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     from = 'right',
     size = 'default',
     pagination,
+    overlayStyle = 'blur',
     children,
 }: DrawerProps<T>) => {
     // Check if the drawer is on the x-axis.
@@ -164,7 +171,10 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                 onClose={onClose}
             >
                 <div
-                    className={styles.overlayContainer}
+                    className={clsx(
+                        overlayStyle === 'blur' && styles.overlayBluredContainer,
+                        overlayStyle === 'greyed' && styles.overlayGreyedContainer,
+                    )}
                 >
                     <Transition.Child
                         as={Fragment}
@@ -178,6 +188,8 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         <Dialog.Overlay
                             className={clsx(
                                 styles.overlay,
+                                overlayStyle === 'blur' && styles.overlayBlured,
+                                overlayStyle === 'greyed' && styles.overlayGreyed,
                             )}
                         />
                     </Transition.Child>

package/src/stories/field/Field.tsx

@@ -1,5 +1,8 @@
-import type { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
+import {
+    type FC, type PropsWithChildren, type ComponentPropsWithoutRef, cloneElement,
+} from 'react';
 import clsx from 'clsx';
+import React from 'react';
 import styles from '../input/Input.module.scss';
 import type { TextProps } from '../text';
 import { Text } from '../text';
@@ -12,7 +15,7 @@ export type FieldProps = {
     /**
      * A label for the field. Can be visually hidden using the `hideLabel` prop.
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Visually hide the label (while keeping it accessible to screen readers).
      * @default false
@@ -21,7 +24,7 @@ export type FieldProps = {
     /**
      * A description of the field. Can be visually hidden using the `hideDescription` prop.
      */
-    description?: string;
+    description?: React.ReactNode;
     /**
      * Visually hide the description while keeping it accessible to screen readers.
      * @default false
@@ -76,31 +79,47 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
             }
         }}
     >
-        <Text
-            {...props.overrides?.label}
-            as="label"
-            kind="paragraphSmall"
-            htmlFor={htmlFor}
-            className={clsx(
-                styles.label,
-                { [styles.hidden]: props.hideLabel },
+        {typeof props.label === 'string'
+            ? (
+                <Text
+                    {...props.overrides?.label}
+                    as="label"
+                    kind="paragraphSmall"
+                    htmlFor={htmlFor}
+                    className={clsx(
+                        styles.label,
+                        { [styles.hidden]: props.hideLabel },
+                    )}
+                >
+                    {props.label}
+                </Text>
+            )
+            : (
+                <label htmlFor={htmlFor}>
+                    {props.label}
+                </label>
             )}
-        >
-            {props.label}
-        </Text>
         {children}
-        <Text
-            id={`${htmlFor}-description`}
-            {...props.overrides?.description}
-            as="p"
-            kind="paragraphXSmall"
-            className={clsx(
-                styles.description,
-                { [styles.hidden]: !props.description || props.hideDescription },
-                props.overrides?.description?.className,
+        {typeof props.description === 'string'
+            ? (
+                <Text
+                    id={`${htmlFor}-description`}
+                    {...props.overrides?.description}
+                    as="p"
+                    kind="paragraphXSmall"
+                    className={clsx(
+                        styles.description,
+                        { [styles.hidden]: !props.description || props.hideDescription },
+                        props.overrides?.description?.className,
+                    )}
+                >
+                    {props.description}
+                </Text>
+            )
+            : (
+                <div id={`${htmlFor}-description`}>
+                    {props.description}
+                </div>
             )}
-        >
-            {props.description}
-        </Text>
     </div>
 );

package/src/stories/input/Input.module.scss

@@ -63,7 +63,8 @@
         }
     }
 
-    & input, & textarea {
+    & input,
+    & textarea {
         width: 100%;
         background-color: transparent;
         padding: 0;
@@ -122,7 +123,7 @@
 // Use double selector to ensure specificity is higher than the default styles
 .label.label {
     color: var(--pte-colors-contentPrimary);
-    font-weight: var(--pte-typography-boldFontWeight);
+    font-weight: var(--pte-typography-fontWeights-medium);
 }
 
 // Use double selector to ensure specificity is higher than the default styles
@@ -132,4 +133,4 @@
 
 .hidden {
     display: none;
-}
+}

package/src/stories/input/Input.stories.ts

@@ -87,3 +87,29 @@ export const WithEndEnhancer: Story = {
         }),
     },
 };
+
+export const WithCustomLabel: Story = {
+    args: {
+        placeholder: 'Billie Eilish',
+        label: createElement(
+            'span',
+            null,
+            [
+                createElement('b', null, 'Name'),
+                createElement('i', null, ' (optional)'),
+            ],
+        ),
+        'aria-label': 'Name (optional)',
+        description: createElement(
+            'span',
+            null,
+            [
+                createElement('b', {
+                    style: {
+                        color: 'red',
+                    },
+                }, 'My custom description'),
+            ],
+        ),
+    },
+};

package/src/stories/input/Input.tsx

@@ -14,9 +14,9 @@ import { Field } from '../field';
 
 export type InputProps = {
     /**
-     * A label for the input field. This is required for accessibility, but can be visually hidden using the `hideLabel` prop.
+     * This is required for accessibility. If the label is not a string, you should provide an `aria-label` prop directly to specify the text used for accessibility
      */
-    label: string;
+    label: React.ReactNode;
     /**
      * The status of the input field.
      * @default default
@@ -112,7 +112,7 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({
                     {...props}
                     id={inputID}
                     type={type || 'text'}
-                    aria-label={label}
+                    aria-label={typeof label === 'string' ? label : props['aria-label']}
                     aria-describedby={`${inputID}-description`}
                     aria-disabled={disabled}
                     readOnly={disabled}

package/src/stories/text/Text.module.scss

@@ -1,3 +1,38 @@
 .text {
     font-family: var(--pte-typography-fontFamily);
 }
+
+/* Font weight theme values */
+$text-weights: (
+    "thin": var(--pte-typography-fontWeights-thin),
+    "extraLight": var(--pte-typography-fontWeights-extraLight),
+    "light": var(--pte-typography-fontWeights-light),
+    "normal": var(--pte-typography-fontWeights-normal),
+    "medium": var(--pte-typography-fontWeights-medium),
+    "semiBold": var(--pte-typography-fontWeights-semiBold),
+    "bold": var(--pte-typography-fontWeights-bold),
+    "extraBold": var(--pte-typography-fontWeights-extraBold),
+    "black": var(--pte-typography-fontWeights-black),
+    "extraBlack": var(--pte-typography-fontWeights-extraBlack),
+);
+
+
+@each $weight-name,
+$weight-value in $text-weights {
+    .weight-#{$weight-name} {
+        font-weight: $weight-value;
+    }
+}
+
+/* Font style theme values */
+$font-styles: (
+    "normal": var(--pte-typography-fontStyles-normal),
+    "italic": var(--pte-typography-fontStyles-italic),
+);
+
+@each $style-name,
+$style-value in $font-styles {
+    .fontStyle-#{$style-name} {
+        font-style: $style-value;
+    }
+}

package/src/stories/text/Text.stories.ts

@@ -152,4 +152,44 @@ export const ParagraphXXSmall: Story = {
     },
 };
 
+export const ParagraphLargeBold: Story = {
+    args: {
+        children: 'In an alleyway, drinking champagne',
+        kind: 'paragraphLarge',
+        weight: 'medium',
+    },
+};
+
+export const ParagraphMediumBold: Story = {
+    args: {
+        children: 'In an alleyway, drinking champagne',
+        kind: 'paragraphMedium',
+        weight: 'medium',
+    },
+};
+
+export const ParagraphSmallBold: Story = {
+    args: {
+        children: 'In an alleyway, drinking champagne',
+        kind: 'paragraphSmall',
+        weight: 'medium',
+    },
+};
+
+export const ParagraphXSmallBold: Story = {
+    args: {
+        children: 'In an alleyway, drinking champagne',
+        kind: 'paragraphXSmall',
+        weight: 'medium',
+    },
+};
+
+export const ParagraphLargeItalic: Story = {
+    args: {
+        children: 'In an alleyway, drinking champagne',
+        kind: 'paragraphLarge',
+        fontStyle: 'italic',
+    },
+};
+
 // @auto-generated-end

package/src/stories/text/Text.tsx

@@ -1,22 +1,36 @@
 import type { ComponentProps, FC, ReactNode } from 'react';
 import { createElement } from 'react';
 import clsx from 'clsx';
-import styles from './Text.module.scss';
 import typography from './Typography.module.css';
-import type { LightTheme } from '../theme';
+import styles from './Text.module.scss';
+import type { LightTheme, Theme } from '../theme';
 
 export type TextElement = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'caption' | 'small';
+export type GlobalCSSValues = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+
 export type TextProps<T extends TextElement = 'span'> = {
     /**
      * The font class to use.
      * @default paragraphMedium
      */
     kind?: keyof typeof LightTheme.typography.styles;
+
     /**
      * The HTML text tag to use.
      * @default span
      */
     as?: T;
+
+    /**
+     * The font weight to apply.
+     */
+    weight?: keyof typeof LightTheme.typography.fontWeights;
+
+    /**
+     * The font style to apply.
+     */
+    fontStyle?: keyof typeof LightTheme.typography.fontStyles;
+
     /** The contents of the Text element. */
     children: ReactNode;
 } & ComponentProps<T>;
@@ -32,18 +46,20 @@ export type TextProps<T extends TextElement = 'span'> = {
  * import { Text } from 'paris/text';
  *
  * export const ExampleHeading: FC = () => (
- *     <Text as="h1" format="headingLarge">Hello World!</Text>
+ *     <Text as="h1" kind="headingLarge" weight="bold" fontStyle="italic">Hello World!</Text>
  * );
  * ```
  *
  * @example ```tsx
- * <Text as="h1" format="headingLarge">Hello World!</Text>
+ * <Text as="h1" kind="headingLarge">Hello World!</Text>
  * ```
  * @constructor
  */
 export function Text<T extends TextElement>({
     kind,
     as,
+    weight,
+    fontStyle,
     children,
     ...props
 }: TextProps<T>): JSX.Element {
@@ -54,6 +70,8 @@ export function Text<T extends TextElement>({
             className: clsx(
                 styles.text,
                 typography[kind || 'paragraphMedium'],
+                weight && styles[`weight-${weight}`],
+                fontStyle && styles[`fontStyle-${fontStyle}`],
                 props?.className,
             ),
         },

package/src/stories/text/Typography.module.css

@@ -1,4 +1,4 @@
-/* Auto-generated with `pnpm generate:text` on Sat May 20 2023 19:55:10 GMT-0700 (Pacific Daylight Time) */
+/* Auto-generated with `pnpm generate:text` on Wed Jun 21 2023 15:22:53 GMT-0700 (Pacific Daylight Time) */
 /* Do not edit manually; instead, edit the `generateTextClasses` function in `scripts/text.ts` and run `pnpm generate:text -c`. */
 
 .displayLarge {

package/src/stories/textarea/TextArea.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { createElement } from 'react';
 import { TextArea } from './TextArea';
 
 const meta: Meta<typeof TextArea> = {
@@ -17,3 +18,29 @@ export const Default: Story = {
         description: 'Type your full name here.',
     },
 };
+
+export const WithCustomLabel: Story = {
+    args: {
+        placeholder: 'Billie Eilish',
+        label: createElement(
+            'span',
+            {},
+            [
+                createElement('b', null, 'Name'),
+                createElement('i', null, ' (optional)'),
+            ],
+        ),
+        'aria-label': 'Name (optional)',
+        description: createElement(
+            'span',
+            null,
+            [
+                createElement('b', {
+                    style: {
+                        color: 'red',
+                    },
+                }, 'My custom description'),
+            ],
+        ),
+    },
+};

package/src/stories/textarea/TextArea.tsx

@@ -6,6 +6,7 @@ import styles from '../input/Input.module.scss';
 import { Text } from '../text';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pget, theme } from '../theme';
+import { Field } from '../field';
 
 /**
  * A `textarea` input field.
@@ -19,50 +20,44 @@ import { pget, theme } from '../theme';
  * ```
  * @constructor
  */
-export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = ({ status, disabled, ...props }) => {
-    const inputID = useId();
+export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = ({
+    label,
+    status,
+    type,
+    hideLabel,
+    description,
+    hideDescription,
+    startEnhancer,
+    endEnhancer,
+    disabled,
+    overrides,
+    ...props
+}) => {
+    const textareaID = useId();
     return (
-        // Disable a11y rules because the container doesn't need to be focusable for screen readers; the input itself should receive focus instead.
-        // The container is only made clickable for usability purposes.
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        <div
-            {...props.overrides?.container}
-            className={clsx(
-                props.overrides?.container?.className,
-                styles.container,
-            )}
-            onClick={(e) => {
-                if (disabled) e.preventDefault();
-                if (typeof window !== 'undefined') {
-                    const input = document.getElementById(inputID);
-                    if (input && !disabled) {
-                        input.focus();
-                    }
-                }
+        <Field
+            htmlFor={textareaID}
+            label={label}
+            hideLabel={hideLabel}
+            description={description}
+            hideDescription={hideDescription}
+            disabled={disabled}
+            overrides={{
+                container: overrides?.container,
+                label: overrides?.label,
+                description: overrides?.description,
             }}
         >
-            <Text
-                {...props.overrides?.label}
-                as="label"
-                kind="paragraphSmall"
-                htmlFor={inputID}
-                className={clsx(
-                    styles.label,
-                    { [styles.hidden]: props.hideLabel },
-                )}
-            >
-                {props.label}
-            </Text>
             <div
                 className={styles.inputContainer}
                 data-status={status}
                 data-disabled={disabled}
             >
-                {!!props.startEnhancer && (
-                    <div {...props.overrides?.startEnhancerContainer} className={clsx(styles.enhancer, props.overrides?.startEnhancerContainer?.className)}>
-                        {!!props.startEnhancer && (
+                {!!startEnhancer && (
+                    <div {...overrides?.startEnhancerContainer} className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                        {!!startEnhancer && (
                             <MemoizedEnhancer
-                                enhancer={props.startEnhancer}
+                                enhancer={startEnhancer}
                                 size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
                             />
                         )}
@@ -70,9 +65,9 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
                 )}
                 <textarea
                     {...props}
-                    id={inputID}
-                    aria-label={props.label}
-                    aria-describedby={`${inputID}-description`}
+                    id={textareaID}
+                    aria-label={typeof label === 'string' ? label : props['aria-label']}
+                    aria-describedby={`${textareaID}-description`}
                     aria-disabled={disabled}
                     readOnly={disabled}
                     className={clsx(
@@ -80,41 +75,17 @@ export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = (
                         styles.input,
                     )}
                 />
-                {!!props.endEnhancer && (
-                    <div {...props.overrides?.endEnhancerContainer} className={clsx(styles.enhancer, props.overrides?.endEnhancerContainer?.className)}>
-                        {!!props.endEnhancer && (
+                {!!endEnhancer && (
+                    <div {...overrides?.endEnhancerContainer} className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                        {!!endEnhancer && (
                             <MemoizedEnhancer
-                                enhancer={props.endEnhancer}
+                                enhancer={endEnhancer}
                                 size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
                             />
                         )}
                     </div>
                 )}
             </div>
-            <Text
-                id={`${inputID}-description`}
-                {...props.overrides?.description}
-                as="p"
-                kind="paragraphXSmall"
-                className={clsx(
-                    styles.description,
-                    { [styles.hidden]: !props.description || props.hideDescription },
-                    props.overrides?.description?.className,
-                )}
-            >
-                {props.description}
-            </Text>
-        </div>
+        </Field>
     );
-    // return (
-    //     <div
-    //         className={clsx(
-    //             styles.inputContainer,
-    //         )}
-    //     >
-    //         <textarea
-    //             {...props}
-    //         />
-    //     </div>
-    // );
 };

package/src/stories/theme/themes.ts

@@ -119,10 +119,27 @@ export type Theme = {
     },
     typography: {
         fontFamily: string,
-        boldFontWeight: number,
         italicLetterSpacing: CSSLength,
         verticalMetricsAdjust: CSSLength;
 
+        fontWeights: {
+            thin: number,
+            extraLight: number,
+            light: number,
+            normal: number,
+            medium: number,
+            semiBold: number,
+            bold: number,
+            extraBold: number,
+            black: number,
+            extraBlack: number,
+        },
+
+        fontStyles: {
+            normal: string,
+            italic: string,
+        }
+
         styles: {
             // Display
 
@@ -321,10 +338,27 @@ export const LightTheme: Theme = {
     },
     typography: {
         fontFamily: '"Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
-        boldFontWeight: 500,
         italicLetterSpacing: '-0.01em',
         verticalMetricsAdjust: '1px',
 
+        fontWeights: {
+            thin: 100,
+            extraLight: 200,
+            light: 300,
+            normal: 400,
+            medium: 500,
+            semiBold: 600,
+            bold: 700,
+            extraBold: 800,
+            black: 900,
+            extraBlack: 950,
+        },
+
+        fontStyles: {
+            italic: 'italic',
+            normal: 'normal',
+        },
+
         styles: {
             // Display
 

package/src/stories/theme/util.scss

@@ -4,5 +4,5 @@
 }
 
 .bold {
-    font-weight: var(--pte-typography-boldFontWeight);
-}
+    font-weight: var(--pte-typography-fontWeights-medium);
+}