@carrier-dpx/air-react-library 0.3.0 → 0.5.0

package/README.md

@@ -104,6 +104,45 @@ function App() {
 - **Caps**: `caps1`, `caps1Bold`, `caps2`, `caps2Bold`, `caps3`, `caps3Bold`, `caps4`, `caps4Bold`
 - All standard Material-UI Typography props
 
+### TextField Component
+
+```tsx
+import { TextField } from '@carrier-dpx/air-react-library';
+
+function App() {
+  return (
+    <>
+      <TextField
+        label="Email"
+        placeholder="Enter your email"
+        size="large"
+        showBorder
+      />
+      <TextField
+        label="Password"
+        type="password"
+        placeholder="Enter your password"
+        size="large"
+        error
+        helperText="Password is required"
+      />
+    </>
+  );
+}
+```
+
+#### Available TextField Props
+
+- **size**: `xlarge`, `large` (default), `medium`, `small`
+- **color**: `primary`, `error`, `success`, `warning`, `info`
+- **error**: `boolean` - Shows error state
+- **disabled**: `boolean` - Disables the field
+- **showBorder**: `boolean` - Shows border around field
+- **hideBackgroundColor**: `boolean` - Removes background color
+- **characterCounter**: `boolean` - Shows character count
+- **characterMax**: `number` - Max character limit
+- All standard Material-UI TextField props
+
 ## Figma Integration
 
 This library is integrated with Figma Code Connect. When using Figma Make, components from this library will be automatically suggested and used in generated code.
@@ -114,6 +153,10 @@ Currently available components:
 
 - **Button** - Material-UI based button component with Carrier DPX design system styling
 - **Typography** - Text component with all Carrier DPX typography variants (h1-h6, body1-3, caps, etc.)
+- **TextField** - Input field component with Carrier DPX styling (supports multiple sizes, colors, validation states)
+- **Link** - Hyperlink component with typography variants and underline options
+- **Divider** - Horizontal and vertical divider lines (with optional text labels)
+- **Copyright** - Copyright notice component (automatically adds © and current year)
 
 More components coming soon!
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carrier-dpx/air-react-library",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Air web React component library for Figma Make",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,19 +32,22 @@
   "author": "Carrier DPX",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@mui/material": "^5.0.0",
     "@emotion/react": "^11.0.0",
-    "@emotion/styled": "^11.0.0"
+    "@emotion/styled": "^11.0.0",
+    "@mui/material": "^5.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@figma/code-connect": "^1.0.0",
-    "@mui/material": "^5.15.0",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@figma/code-connect": "^1.0.0",
+    "@mui/material": "^5.15.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
   }
 }

package/src/components/Copyright/Copyright.figma.tsx

@@ -0,0 +1,27 @@
+/**
+ * Figma Code Connect Configuration for Copyright Component
+ */
+
+import figma from "@figma/code-connect";
+import Copyright from "./Copyright";
+
+figma.connect(
+  Copyright,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=37592-67050",
+  {
+    props: {
+      /**
+       * TEXT CONTENT
+       * Copyright component shows © {year} {text}
+       * The year is automatically generated, so we just need the text
+       */
+      text: figma.string("*"),
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * Copyright automatically adds © symbol and current year
+     */
+    example: ({ text }) => <Copyright text={text || "Carrier"} />,
+  }
+);

package/src/components/Copyright/Copyright.tsx

@@ -0,0 +1,36 @@
+import { FC, useMemo } from "react";
+import { CSSObject, styled } from "@mui/material/styles";
+import Typography from "../Typography";
+import { CopyrightProps } from "./types";
+import clsx from "clsx";
+import styles from "./styles";
+import { getSxStyles } from "../utils/styles";
+
+const CopyrightStyled = styled(Typography)(styles);
+const baseClassName = "copyright";
+
+/** The Copyright pattern provides legal confirmation for time of ownership.
+ *  //Default Import
+ * `import Copyright from '@carrier-io/air-react/Copyright'`
+ *  //Named Import
+ *  `import { Copyright } from '@carrier-io/air-react'`
+ */
+const Copyright: FC<CopyrightProps> = ({ text, sx, className }) => {
+  const currentYear = useMemo(() => {
+    return new Date().getFullYear();
+  }, []);
+
+  return (
+    <CopyrightStyled
+      variant="body3"
+      sx={(theme) =>
+        ({ fontSize: "12px", ...getSxStyles(theme, sx) } as CSSObject)
+      }
+      className={clsx(baseClassName, className)}
+    >
+      © {currentYear} {text}
+    </CopyrightStyled>
+  );
+};
+
+export default Copyright;

package/src/components/Copyright/index.ts

@@ -0,0 +1,3 @@
+export * from "./Copyright";
+export * from "./types";
+export { default } from "./Copyright";

package/src/components/Copyright/styles.ts

@@ -0,0 +1,8 @@
+import { lighten } from "@mui/material";
+import { StyledComponentDefaultProps } from "../types/common";
+
+const styles = ({ theme }: StyledComponentDefaultProps) => ({
+  color: lighten(theme.palette.common.black, 0.6),
+});
+
+export default styles;

package/src/components/Copyright/types.ts

@@ -0,0 +1,8 @@
+import { StylesExtendable } from "../types/props";
+
+export interface CopyrightProps extends StylesExtendable {
+  /**
+   * The content rendered within the component.
+   */
+  text: string;
+}

package/src/components/Divider/Divider.horizontal.figma.tsx

@@ -0,0 +1,50 @@
+/**
+ * Figma Code Connect Configuration for Divider Component (Horizontal)
+ */
+
+import figma from "@figma/code-connect";
+import Divider from "./Divider";
+
+figma.connect(
+  Divider,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=15518-67418",
+  {
+    props: {
+      /**
+       * VARIANT MAPPING
+       */
+      variant: figma.enum("variant", {
+        full: "full",
+        padded: "padded",
+      }),
+
+      /**
+       * TEXT ALIGN MAPPING
+       */
+      textAlign: figma.enum("textAlign", {
+        center: "center",
+        left: "left",
+        right: "right",
+      }),
+
+      /**
+       * TEXT CONTENT
+       * When text boolean is true, shows Typography children
+       */
+      children: figma.boolean("text") ? figma.children("*") : undefined,
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * Horizontal divider (default orientation)
+     */
+    example: ({ variant, textAlign, children }) =>
+      children ? (
+        <Divider variant={variant} textAlign={textAlign}>
+          {children}
+        </Divider>
+      ) : (
+        <Divider variant={variant} />
+      ),
+  }
+);

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,57 @@
+import { forwardRef } from "react";
+
+import MuiDivider, {
+  DividerProps as MuiDividerProps,
+} from "@mui/material/Divider";
+import { styled } from "@mui/material/styles";
+
+import { styleTokens } from "../theme/constants/styleTokens";
+
+export interface DividerProps extends Omit<MuiDividerProps, "light"> {}
+
+declare module "@mui/material/Divider" {
+  interface DividerPropsVariantOverrides {
+    padded: true;
+    middle: false;
+    full: true;
+    fullWidth: false;
+    inset: false;
+  }
+}
+
+/** The Divider component is a thin line that groups content in lists and layouts.
+ *
+ * // Default import
+ * import Divider from '@carrier-io/air-react/Divider'
+ *
+ * // Named import
+ * import { Divider } from '@carrier-io/air-react'
+ */
+
+const MuiDividerStyled = styled(MuiDivider)(({ theme }) => ({
+  "&.MuiDivider-padded": {
+    marginLeft: styleTokens.margin.large,
+    marginRight: styleTokens.margin.large,
+    paddingTop: "8px",
+    paddingBottom: "8px",
+  },
+  "& .MuiDivider-wrapper": {
+    paddingLeft: styleTokens.padding.xsmall,
+    paddingRight: styleTokens.padding.xsmall,
+    color: theme.palette.base?.text.primary,
+  },
+  "&.MuiDivider-root": {
+    borderColor: theme.palette.base?.divider,
+    "&:before, &:after": {
+      borderTop: `thin solid ${theme.palette.base?.divider}`,
+    },
+  },
+}));
+
+const Divider = forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
+  return <MuiDividerStyled {...props} ref={ref} />;
+});
+
+Divider.displayName = "Divider";
+
+export default Divider;

package/src/components/Divider/Divider.vertical.figma.tsx

@@ -0,0 +1,54 @@
+/**
+ * Figma Code Connect Configuration for Divider Component (Vertical)
+ */
+
+import figma from "@figma/code-connect";
+import Divider from "./Divider";
+
+figma.connect(
+  Divider,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=15556-68596",
+  {
+    props: {
+      /**
+       * VARIANT MAPPING
+       */
+      variant: figma.enum("variant", {
+        full: "full",
+        padded: "padded",
+      }),
+
+      /**
+       * TEXT ALIGN MAPPING
+       */
+      textAlign: figma.enum("textAlign", {
+        center: "center",
+        left: "left",
+        right: "right",
+      }),
+
+      /**
+       * TEXT CONTENT
+       * When text boolean is true, shows Typography children
+       */
+      children: figma.boolean("text") ? figma.children("*") : undefined,
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * Vertical divider - sets orientation="vertical"
+     */
+    example: ({ variant, textAlign, children }) =>
+      children ? (
+        <Divider
+          orientation="vertical"
+          variant={variant}
+          textAlign={textAlign}
+        >
+          {children}
+        </Divider>
+      ) : (
+        <Divider orientation="vertical" variant={variant} />
+      ),
+  }
+);

package/src/components/Divider/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./Divider";
+export * from "./Divider";
+export type { DividerProps } from "./Divider";

package/src/components/Link/Link.figma.tsx

@@ -0,0 +1,70 @@
+/**
+ * Figma Code Connect Configuration for Link Component
+ */
+
+import figma from "@figma/code-connect";
+import Link from "./Link";
+
+figma.connect(
+  Link,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=6574-50682",
+  {
+    props: {
+      /**
+       * VARIANT MAPPING
+       * Same variants as Typography component
+       */
+      variant: figma.enum("variant", {
+        body1: "body1",
+        "body1 semibold": "body1Semibold",
+        "body1 bold": "body1Bold",
+        body2: "body2",
+        "body2 semibold": "body2Semibold",
+        "body2 bold": "body2Bold",
+        body3: "body3",
+        "body3 semibold": "body3Semibold",
+        "body3 bold": "body3Bold",
+        h1: "h1",
+        h2: "h2",
+        h3: "h3",
+        h4: "h4",
+        h5: "h5",
+        h6: "h6",
+        caps1: "caps1",
+        "caps1 bold": "caps1Bold",
+        caps2: "caps2",
+        "caps2 bold": "caps2Bold",
+        caps3: "caps3",
+        "caps3 bold": "caps3Bold",
+        caps4: "caps4",
+        "caps4 bold": "caps4Bold",
+      }),
+
+      /**
+       * UNDERLINE MAPPING
+       * Maps Figma underline style to React underline prop
+       */
+      underline: figma.enum("underline", {
+        always: "always",
+        hover: "hover",
+        none: "none",
+      }),
+
+      /**
+       * TEXT CONTENT
+       * Maps the link text from "Label" layer
+       */
+      children: figma.children("Label"),
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * Note: href is a runtime prop, not configured in static Figma component
+     */
+    example: ({ variant, underline, children }) => (
+      <Link variant={variant} underline={underline} href="#">
+        {children}
+      </Link>
+    ),
+  }
+);

package/src/components/Link/Link.tsx

@@ -0,0 +1,69 @@
+import { forwardRef } from "react";
+
+import MuiLink, { LinkProps as MuiLinkProps } from "@mui/material/Link";
+import { AllSystemCSSProperties, ResponsiveStyleValue } from "@mui/system";
+import { useTheme } from "@mui/material";
+import { TypographyProps } from "@mui/material/Typography";
+
+// List of variants we want to exclude
+type ExcludedVariants =
+  | "overline"
+  | "avatarLetter"
+  | "buttonLarge"
+  | "buttonMedium"
+  | "buttonSmall"
+  | "caption"
+  | "inputLabel"
+  | "inputText1"
+  | "inputText2"
+  | "helperText"
+  | "alertTitle"
+  | "tableHeader1"
+  | "tableHeader2"
+  | "badge"
+  | "chip"
+  | "tooltip";
+
+// Get all valid variant options from MUI's Typography component
+type MUIValidVariants = Exclude<TypographyProps["variant"], ExcludedVariants>;
+
+export interface LinkProps extends Omit<MuiLinkProps, "variant"> {
+  /**
+   * Specifies how to capitalize an element's text
+   */
+  textTransform?: ResponsiveStyleValue<AllSystemCSSProperties["textTransform"]>;
+  /**
+   * The target attribute specifies where to open the linked document:
+   */
+  target?: string;
+  /**
+   * Applies the theme typography styles.
+   */
+  variant?: MUIValidVariants;
+}
+
+/** The Link component allows you to easily customize anchor elements with your theme colors and typography styles.
+ *
+ * `import Link from '@carrier-io/air-react/Link'`
+ */
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ color, variant = "body2", ...rest }, ref) => {
+    const theme = useTheme();
+    const resolvedColor = color ?? theme.palette.primary.main;
+
+    return (
+      <MuiLink
+        {...rest}
+        color={resolvedColor}
+        ref={ref}
+        variant={variant}
+        sx={{ cursor: "pointer", textUnderlineOffset: "4px" }}
+      />
+    );
+  }
+);
+
+Link.displayName = "Link";
+
+export default Link;

package/src/components/Link/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./Link";
+export * from "./Link";
+export type { LinkProps } from "./Link";

package/src/components/TextField/TextField.figma.tsx

@@ -0,0 +1,76 @@
+/**
+ * Figma Code Connect Configuration for TextField Component
+ * 
+ * Maps Figma TextField component to React TextField component
+ */
+
+import figma from "@figma/code-connect";
+import TextField from "./TextField";
+
+figma.connect(
+  TextField,
+  "https://www.figma.com/design/vkoHdM6rchIhH9IWetZeP0/Air--Components?node-id=18128-89412",
+  {
+    props: {
+      /**
+       * SIZE MAPPING
+       * Maps Figma size format (with px values) to React size prop
+       */
+      size: figma.enum("size", {
+        "xlarge-56px": "xlarge",
+        "large-48px": "large",
+        "medium-40px": "medium",
+        "small-32px": "small",
+      }),
+
+      /**
+       * COLOR MAPPING
+       * Maps Figma color variants to React color prop
+       */
+      color: figma.enum("color", {
+        primary: "primary",
+        error: "error",
+        success: "success",
+        warning: "warning",
+        info: "info",
+      }),
+
+      /**
+       * ERROR STATE
+       * Maps Figma error boolean to React error prop
+       */
+      error: figma.boolean("error"),
+
+      /**
+       * DISABLED STATE
+       * Maps Figma disabled boolean to React disabled prop
+       */
+      disabled: figma.boolean("disabled"),
+
+      /**
+       * SHOW BORDER
+       * Maps Figma showBorder boolean to React showBorder prop
+       */
+      showBorder: figma.boolean("showBorder"),
+    },
+
+    /**
+     * CODE EXAMPLE TEMPLATE
+     * 
+     * Shows how TextField should be used in React code
+     * Note: label, placeholder, value, onChange etc. are runtime props
+     * that aren't configured in Figma's static component
+     */
+    example: ({ size, color, error, disabled, showBorder }) => (
+      <TextField
+        size={size}
+        color={color}
+        error={error}
+        disabled={disabled}
+        showBorder={showBorder}
+        label="Email"
+        placeholder="Enter your email"
+      />
+    ),
+  }
+);

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,253 @@
+import { forwardRef, useState, ChangeEvent } from "react";
+
+import MuiTextField, {
+  StandardTextFieldProps as MuiTextFieldProps,
+} from "@mui/material/TextField";
+import { InputProps } from "@mui/material/Input";
+import { InputMaxHeightMap } from "../utils/HeightUtils";
+import { getSxStyles } from "../utils/styles";
+import { CSSObject } from "@mui/material";
+import { fleetPalette } from "../theme";
+import { styleTokens } from "../theme/constants/styleTokens";
+
+declare module "@mui/material/TextField" {
+  interface TextFieldPropsSizeOverrides {
+    xlarge: true;
+    large: true;
+  }
+}
+export interface TextFieldInputProps
+  extends Omit<InputProps, "disableUnderline"> {}
+
+export interface TextFieldProps
+  extends Omit<
+    MuiTextFieldProps,
+    "variant" | "margin" | "classes" | "hiddenLabel"
+  > {
+  /** Set to true to remove background color. */
+  hideBackgroundColor?: boolean;
+
+  /** Input Node for Child Input. */
+  inputSetting?: TextFieldInputProps;
+
+  // Renamed 'hiddenLabel' to hideLabel for consistency.
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hideLabel?: boolean;
+
+  /** Set to true to show a border around the TextField.*/
+  showBorder?: boolean;
+
+  /** Toggles the counter visibility. Setting to `true` will display the counter and respect the characterMax if set. `false` will hide the counter and ignore `characterMax`.
+   * @default false
+   */
+  characterCounter?: boolean;
+
+  /** Sets a counter character limit while `characterCounter` is enabled. */
+  characterMax?: number;
+}
+
+/** The TextField component allows users to enter or edit free-form text data.
+ *
+ * `import TextField from '@carrier-io/air-react/TextField'`
+ */
+
+const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
+  (
+    {
+      hideBackgroundColor = false,
+      inputSetting = {},
+      InputProps = {},
+      label,
+      showBorder = false,
+      size = "large",
+      type = "text",
+      sx = {},
+      hideLabel,
+      InputLabelProps = {},
+      FormHelperTextProps = {},
+      helperText,
+      characterCounter,
+      characterMax,
+      defaultValue,
+      onChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const [value, setValue] = useState<string | number>(
+      defaultValue as string | number
+    );
+
+    const handleChange = (event: ChangeEvent) => {
+      const targetValue = (event.target as HTMLInputElement).value;
+      if (
+        characterCounter &&
+        characterMax &&
+        targetValue?.length > characterMax
+      ) {
+        return;
+      }
+      if (onChange) {
+        onChange(event as ChangeEvent<HTMLInputElement>);
+      }
+      setValue(targetValue);
+    };
+
+    const joinInputLabelProps = {
+      sx: {
+        ...(showBorder ? { paddingLeft: "2px" } : { paddingLeft: "0px" }),
+        "& .MuiInputLabel-asterisk": {
+          color: fleetPalette.base?.filledInput.required,
+        },
+        "&.Mui-focused .MuiInputLabel-asterisk": {
+          color: "inherit",
+        },
+
+        ...InputLabelProps.sx,
+      },
+      ...InputLabelProps,
+    };
+
+    const joinFormHelperTextProps: typeof FormHelperTextProps = {
+      sx: {
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        m: "2px",
+        pl: "2px",
+        ...FormHelperTextProps.sx,
+      },
+      ...FormHelperTextProps,
+    };
+
+    const input = {
+      ...InputProps,
+      ...inputSetting,
+      disableUnderline: true,
+      size: size,
+    };
+
+    const inputSx = input.sx;
+
+    input.sx = (theme) =>
+      ({
+        ...getSxStyles(theme, inputSx),
+        // Conditionally apply properties
+        ...(!rest.multiline && { height: InputMaxHeightMap[size] }),
+        ...(!showBorder && !rest.error && { border: "0px!important" }),
+        ...(hideBackgroundColor && { backgroundColor: "inherit!important" }),
+        borderRadius: `${styleTokens.borderRadius.large}`,
+        "&.MuiInputBase-root": {
+          "&:hover": {
+            backgroundColor: `${fleetPalette.base?.filledInput.backgroundHover} !important`,
+          },
+        },
+      } as CSSObject);
+
+    const getHelperText = () => {
+      return (
+        <>
+          {helperText}
+          {characterCounter && (
+            <span
+              style={{
+                float: "right",
+                padding: `0px 2px`,
+              }}
+            >
+              {value ? value?.toString().length : "0"}
+              {!!characterMax && `/${characterMax}`}
+            </span>
+          )}
+        </>
+      );
+    };
+
+    let largeSizeLabelValue: string | number;
+    if (size === "large") {
+      largeSizeLabelValue = "16px";
+    } else if (size === "xlarge") {
+      largeSizeLabelValue = "24px";
+    } else {
+      largeSizeLabelValue = 0;
+    }
+
+    const largeSizeLabelSX = {
+      "& .MuiFormLabel-root": {
+        lineHeight: largeSizeLabelValue,
+      },
+    };
+
+    return (
+      <MuiTextField
+        variant="filled"
+        type={type}
+        margin={size === "medium" ? "dense" : "none"}
+        color={rest.error ? "error" : rest.color}
+        hiddenLabel={size === "small" || size === "medium" || hideLabel}
+        InputProps={input}
+        InputLabelProps={joinInputLabelProps}
+        FormHelperTextProps={joinFormHelperTextProps}
+        helperText={getHelperText()}
+        onChange={handleChange}
+        value={value}
+        sx={(theme) =>
+          ({
+            ...getSxStyles(theme, sx),
+            "& .MuiInputBase-root.MuiFilledInput-root": {
+              borderRadius: `${styleTokens.borderRadius.large}`,
+              "& .MuiInputBase-input::placeholder": {
+                color: fleetPalette.base?.filledInput.placeholderLabel,
+              },
+              "& .MuiInputBase-input.MuiFilledInput-input::-webkit-input-placeholder":
+                {
+                  opacity: "unset",
+                },
+            },
+
+            ...((size === "large" || size === "xlarge") && largeSizeLabelSX),
+            "& .MuiInputBase-root.Mui-focused": {
+              backgroundColor:
+                fleetPalette.base?.background.paper + " !important",
+              ...((rest.error === false || rest.error === undefined) && {
+                "&.MuiInputBase-colorPrimary": {
+                  border: `1px solid ${theme.palette.primary.main} !important`,
+                },
+                "&.MuiInputBase-colorSecondary": {
+                  border: `1px solid ${theme.palette.secondary.main} !important`,
+                },
+                "&.MuiInputBase-colorBase": {
+                  border: `1px solid ${theme.palette.base?.main} !important`,
+                },
+                "&.MuiInputBase-colorWarning": {
+                  border: `1px solid ${theme.palette.warning.main} !important`,
+                },
+                "&.MuiInputBase-colorSuccess": {
+                  border: `1px solid ${theme.palette.success.main} !important`,
+                },
+                "&.MuiInputBase-colorInfo": {
+                  border: `1px solid ${theme.palette.info.main} !important`,
+                },
+                "&.MuiInputBase-colorError": {
+                  border: `1px solid ${theme.palette.error.main} !important`,
+                },
+              }),
+            },
+          } as CSSObject)
+        }
+        label={!(size === "small" || size === "medium" || hideLabel) && label}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+TextField.displayName = "TextField";
+
+export default TextField;

package/src/components/TextField/index.ts

@@ -0,0 +1,3 @@
+export { default } from "./TextField";
+export * from "./TextField";
+export type { TextFieldProps, TextFieldInputProps } from "./TextField";

package/src/components/theme/constants/styleTokens.ts

@@ -1,6 +1,42 @@
+import { Theme } from "@mui/material";
+
 export const styleTokens = {
   borderRadius: {
+    small: "2px",
+    medium: "4px",
     large: "8px",
-    circular: "50%",
+    xlarge: "10px",
+    none: "0px",
+    circular: "999px",
   },
+  border: {
+    standard: (theme: Theme) =>
+      `1px solid ${theme.palette.base?.filledInput.outlinedBorder}`,
+    divider: (theme: Theme) => `1px solid ${theme.palette.base?.divider}`,
+  },
+  padding: {
+    none: "0px",
+    xsmall: "8px",
+    small: "10px",
+    medium: "12px",
+    large: "14px",
+    xlarge: "16px",
+  },
+
+  margin: {
+    none: "0px",
+    xsmall: "8px",
+    small: "10px",
+    medium: "12px",
+    large: "16px",
+    xlarge: "20px",
+  },
+  height: {
+    large: "20px",
+    xlarge: "24px",
+  },
+  paddingTop: {
+    large: "18px",
+  },
+  paddingItem: "4px",
 };

package/src/components/types/common.ts

@@ -0,0 +1,5 @@
+import { Theme } from "@mui/material/styles";
+
+export interface StyledComponentDefaultProps {
+  theme: Theme;
+}

package/src/components/types/props.ts

@@ -0,0 +1,6 @@
+import { SxProps, Theme } from "@mui/material/styles";
+
+export interface StylesExtendable {
+  sx?: SxProps<Theme>;
+  className?: string;
+}

package/src/components/utils/HeightUtils.ts

@@ -0,0 +1,38 @@
+export const heightMap = {
+  small: 32,
+  medium: 40,
+  large: 48,
+};
+
+export const InputMaxHeightMap = {
+  small: 32,
+  medium: 40,
+  large: 48,
+  xlarge: 56,
+};
+
+export const InputMaxDividerHeightMap = {
+  small: 16,
+  medium: 24,
+  large: 32,
+  xlarge: 40,
+};
+
+export const AutocompleteInternalHeightMap = {
+  small: "26px",
+  medium: 40,
+  large: 48,
+  xlarge: 56,
+};
+
+export const ChipHeightMap = {
+  micro: 20,
+  xsmall: 24,
+  small: 32,
+};
+
+export const RangeChartHeightMap = {
+  xsmall: 8,
+  small: 16,
+  medium: 24,
+};

package/src/index.ts

@@ -2,4 +2,12 @@ export { default as Button } from "./components/Button";
 export type { ButtonProps } from "./components/Button";
 export { default as Typography } from "./components/Typography";
 export type { TypographyProps } from "./components/Typography";
+export { default as TextField } from "./components/TextField";
+export type { TextFieldProps, TextFieldInputProps } from "./components/TextField";
+export { default as Link } from "./components/Link";
+export type { LinkProps } from "./components/Link";
+export { default as Divider } from "./components/Divider";
+export type { DividerProps } from "./components/Divider";
+export { default as Copyright } from "./components/Copyright";
+export type { CopyrightProps } from "./components/Copyright";
 export * from "./components/theme";