@oatfi/ui 0.1.0

package/dist/index.cjs.js

@@ -0,0 +1,1659 @@
+'use strict';
+
+var styles = require('@mui/material/styles');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styled = require('styled-components');
+var material = require('@mui/material');
+var CalendarMonthIcon = require('@mui/icons-material/CalendarMonth');
+var CloudUploadIcon = require('@mui/icons-material/CloudUpload');
+var CloseIcon = require('@mui/icons-material/Close');
+var IconButton = require('@mui/material/IconButton');
+var Menu = require('@mui/material/Menu');
+var MenuItem = require('@mui/material/MenuItem');
+var MoreVertIcon = require('@mui/icons-material/MoreVert');
+
+const defaultTheme = {
+  colors: {
+    primary: "#111827",
+    secondary: "#6B7280",
+    accent: "#2563EB",
+    background: "#FFFFFF",
+    surface: "#F3F4F6",
+    border: "#E5E7EB",
+    success: "#10B981",
+    default: "#6B7280",
+    warning: "#F59E42",
+    error: "#EF4444",
+    buttonPrimary: "#111827",
+    buttonSecondary: "#6B7280"
+  },
+  border: {
+    radius: "8px",
+    width: "1px",
+    color: "#E5E7EB"
+  },
+  typography: {
+    fontFamily: '"Geist", "Geist Sans", Arial, sans-serif'
+  }
+};
+
+const toPx = (value) => `${value}px`;
+function mergeBranding(branding) {
+  const b = branding ?? {};
+  const primary = b.primaryColor ?? defaultTheme.colors.primary;
+  const secondary = b.secondaryColor ?? defaultTheme.colors.secondary;
+  return {
+    ...defaultTheme,
+    colors: {
+      ...defaultTheme.colors,
+      primary,
+      secondary,
+      buttonPrimary: b.primaryButtonColor ?? primary,
+      buttonSecondary: b.secondaryButtonColor ?? secondary
+    },
+    border: {
+      ...defaultTheme.border,
+      radius: b.borderRadius != null ? toPx(b.borderRadius) : defaultTheme.border.radius,
+      width: b.borderWidth != null ? toPx(b.borderWidth) : defaultTheme.border.width
+    },
+    typography: {
+      ...defaultTheme.typography,
+      fontFamily: b.fontFamily ?? defaultTheme.typography.fontFamily
+    }
+  };
+}
+
+function buildMuiTheme(theme) {
+  const { colors, border, typography } = theme;
+  return styles.createTheme({
+    palette: {
+      primary: {
+        main: colors.accent,
+        contrastText: colors.background
+      },
+      secondary: {
+        main: colors.secondary
+      },
+      error: {
+        main: colors.error
+      },
+      warning: {
+        main: colors.warning
+      },
+      success: {
+        main: colors.success
+      },
+      background: {
+        default: colors.background,
+        paper: colors.surface
+      },
+      text: {
+        primary: colors.primary,
+        secondary: colors.secondary
+      }
+    },
+    typography: {
+      fontFamily: typography.fontFamily,
+      fontSize: 14
+    },
+    shape: {
+      borderRadius: parseInt(border.radius, 10)
+    },
+    components: {
+      MuiFormControlLabel: {
+        styleOverrides: {
+          label: {
+            fontSize: "12px",
+            fontWeight: 400
+          }
+        }
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            backgroundColor: colors.background,
+            border: `${border.width} solid ${border.color}`
+          }
+        },
+        defaultProps: {
+          elevation: 0
+        }
+      },
+      MuiLink: {
+        styleOverrides: {
+          root: {
+            cursor: "pointer",
+            fontSize: "16px",
+            fontWeight: 600,
+            fontFamily: typography.fontFamily
+          }
+        }
+      },
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": {
+                borderColor: border.color,
+                borderWidth: border.width
+              },
+              "&:hover fieldset": {
+                borderColor: colors.accent
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: colors.accent
+              },
+              "&.Mui-error fieldset": {
+                borderColor: colors.error
+              }
+            },
+            "& .MuiInputLabel-root, & .MuiFormLabel-root, & .MuiInputLabel-formControl": {
+              color: colors.secondary,
+              fontSize: "14px",
+              "&.Mui-focused": {
+                color: colors.accent
+              },
+              "&.Mui-error": {
+                color: colors.error
+              }
+            },
+            "& .MuiInputBase-input": {
+              fontSize: 14,
+              color: colors.primary,
+              "&::placeholder": {
+                color: colors.secondary,
+                opacity: 1
+              }
+            }
+          }
+        }
+      },
+      MuiSelect: {
+        styleOverrides: {
+          select: {
+            fontSize: 14
+          }
+        }
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          root: {
+            fontSize: 14,
+            '& input[type="date"]::-webkit-calendar-picker-indicator': {
+              display: "none"
+            },
+            "& .Mui-error": {
+              color: colors.error
+            },
+            '& input[type="date"]::-webkit-inner-spin-button': {
+              display: "none"
+            },
+            '& input[type="date"]::-webkit-clear-button': {
+              display: "none"
+            }
+          }
+        }
+      },
+      MuiFormControl: {
+        styleOverrides: {
+          root: {
+            "& input::-webkit-datetime-edit": {
+              color: colors.secondary
+            },
+            "& .Mui-error": {
+              input: {
+                color: colors.error
+              },
+              label: {
+                color: colors.error
+              }
+            }
+          }
+        }
+      }
+    }
+  });
+}
+
+const GlobalStyle = styled.createGlobalStyle`
+  * {
+    font-family: ${({ theme }) => theme.typography.fontFamily};
+    box-sizing: border-box;
+  }
+`;
+function ThemeProvider({ branding, children }) {
+  const theme = react.useMemo(() => mergeBranding(branding), [branding]);
+  const muiTheme = react.useMemo(() => buildMuiTheme(theme), [theme]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.ThemeProvider, { theme, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, { theme: muiTheme, children })
+  ] });
+}
+
+const useTheme = () => styled.useTheme();
+
+const chevronDataUri = (color) => `data:image/svg+xml;utf8,<svg fill="${encodeURIComponent(
+  color
+)}" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>`;
+const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 100%;
+
+  span.icon {
+    position: absolute;
+    right: 1rem;
+    top: 51%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  &.Werror span.icon {
+    top: 42%;
+  }
+`;
+const InputLabel = styled.label`
+  color: ${({ theme }) => theme.colors.primary};
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+`;
+const InputError = styled.span`
+  color: ${({ theme }) => theme.colors.error};
+  font-size: 12px;
+  font-weight: 500;
+  margin-top: -4px;
+  padding-left: 5px;
+`;
+const BaseInput = styled.input`
+  display: flex;
+  padding: 9px;
+  border: ${({ theme }) => theme.border.width} solid ${({ theme }) => theme.border.color};
+  border-radius: ${({ theme }) => theme.border.radius};
+  background: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.primary};
+  font-size: 14px;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  outline: none;
+  transition: border-color 0.2s;
+
+  &[type='date'] {
+    &::-webkit-calendar-picker-indicator {
+      opacity: 0;
+      pointer-events: none;
+    }
+    &::-moz-calendar-picker-indicator {
+      opacity: 0;
+      pointer-events: none;
+    }
+    &::-ms-input-placeholder {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  &:focus {
+    border-color: ${({ theme }) => theme.colors.accent};
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.secondary};
+    opacity: 1;
+  }
+
+  &.error {
+    border-color: ${({ theme }) => theme.colors.error};
+    color: ${({ theme }) => theme.colors.error};
+
+    &::placeholder {
+      color: ${({ theme }) => theme.colors.error};
+      opacity: 1;
+    }
+  }
+`;
+const SelectInput = styled(BaseInput)`
+  appearance: none;
+  background-image: url('${({ theme }) => chevronDataUri(theme.colors.default)}');
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 20px 20px;
+`;
+const DropdownContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+const AutocompleteInput = styled(BaseInput)`
+  cursor: pointer;
+  background-image: url('${({ theme }) => chevronDataUri(theme.colors.default)}');
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 20px 20px;
+  width: 100%;
+`;
+const DropdownList = styled.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: ${({ theme }) => theme.colors.background};
+  border: ${({ theme }) => theme.border.width} solid ${({ theme }) => theme.border.color};
+  border-top: none;
+  border-radius: 0 0 ${({ theme }) => theme.border.radius} ${({ theme }) => theme.border.radius};
+  z-index: 1000;
+  display: ${({ $isOpen }) => $isOpen ? "block" : "none"};
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+`;
+const DropdownItem = styled.div`
+  padding: 8px 12px;
+  cursor: pointer;
+  background: ${({ $isSelected, theme }) => $isSelected ? theme.colors.accent + "20" : "transparent"};
+  color: ${({ theme }) => theme.colors.primary};
+  font-size: 14px;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color};
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.accent + "10"};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+const NoResults = styled.div`
+  padding: 12px;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.secondary};
+  font-size: 14px;
+`;
+
+const H3 = styled.h3`
+  font-size: 18px;
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const H2 = styled.h2`
+  font-size: 24px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const H1 = styled.h1`
+  font-size: 32px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const Body100 = styled.p`
+  font-size: 12px;
+  font-weight: 400;
+  text-align: justify;
+  color: ${({ color, theme }) => color === "secondary" ? theme.colors.secondary : theme.colors.primary};
+  a {
+    font-size: 12px;
+    color: ${({ theme }) => theme.colors.primary};
+    text-decoration-color: ${({ theme }) => theme.colors.primary};
+  }
+  &.bold {
+    font-weight: 600;
+  }
+  span {
+    font-weight: 400;
+  }
+`;
+const Body200 = styled.p`
+  font-size: 14px;
+  font-weight: 400;
+  text-align: justify;
+  color: ${({ color, theme }) => color === "secondary" ? theme.colors.secondary : theme.colors.primary};
+  a {
+    font-size: 14px;
+    color: ${({ theme }) => theme.colors.primary};
+    text-decoration-color: ${({ theme }) => theme.colors.primary};
+  }
+  &.bold {
+    font-weight: 600;
+  }
+  span {
+    font-weight: 400;
+  }
+`;
+const Body400 = styled.p`
+  font-size: 11px;
+  font-weight: 400;
+  text-align: justify;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const Container = styled.div`
+  padding: 2rem;
+  border-radius: ${({ theme }) => theme.border.radius};
+  background-color: ${({ theme }) => theme.colors.background};
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 1000px;
+  margin: 0 auto;
+`;
+const Content = styled.div`
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+`;
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1rem;
+  &.space-between {
+    justify-content: space-between;
+  }
+`;
+const Button = styled.button`
+  align-items: center;
+  background-color: ${({ theme }) => theme.colors.buttonPrimary};
+  border: none;
+  border-radius: ${({ theme }) => theme.border.radius};
+  color: ${({ theme }) => theme.colors.background};
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  gap: 0.25rem;
+  justify-content: center;
+  margin-top: 1rem;
+  padding: 0.75rem 1.5rem;
+  transition: background-color 0.2s ease;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.35;
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => `${theme.colors.buttonPrimary}CC`};
+  }
+
+  &.secondary {
+    background-color: ${({ theme }) => theme.colors.background};
+    color: ${({ theme }) => theme.colors.buttonSecondary};
+    border: 1px solid ${({ theme }) => theme.colors.buttonSecondary};
+    &:hover {
+      background-color: ${({ theme }) => `${theme.colors.buttonSecondary}10`};
+    }
+  }
+
+  &.link {
+    background-color: transparent;
+    color: ${({ theme }) => theme.colors.accent};
+    border: none;
+    cursor: pointer;
+    margin: 0;
+  }
+  &.link:hover {
+    color: ${({ theme }) => theme.colors.accent};
+    text-decoration: underline;
+  }
+  &.no-padding {
+    padding: 0;
+  }
+`;
+const FlexRowWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  .flex-row-item {
+    flex: 1;
+  }
+`;
+const FlexColumnWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+const DetailsContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  justify-content: space-between;
+  button {
+    color: ${({ theme }) => theme.colors.primary};
+    text-decoration-color: ${({ theme }) => theme.colors.primary};
+  }
+`;
+const DetailRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const DetailElement = styled.div`
+  flex: 1;
+  p {
+    margin: 5px 0 0 0;
+  }
+`;
+const TermsList = styled.ul`
+  list-style-type: disc;
+  padding-left: 20px;
+  p {
+    margin: 0;
+  }
+`;
+const StatusTag = styled.div`
+  padding: 4px 8px;
+  border-radius: 4px;
+  color: ${({ theme }) => theme.colors.background};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  text-transform: capitalize;
+  &.small {
+    font-size: 10px;
+    padding: 2px 4px;
+  }
+  &.success {
+    background-color: ${({ theme }) => theme.colors.success};
+  }
+  &.error {
+    background-color: ${({ theme }) => theme.colors.error};
+  }
+  &.warning {
+    background-color: ${({ theme }) => theme.colors.warning};
+  }
+`;
+
+const Form = styled.form`
+  max-width: 1000px;
+  margin: 0 auto;
+`;
+const FormTitle = styled.h2`
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 2rem;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const FormSubtitle = styled.h3`
+  font-size: 14px;
+  font-weight: 500;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const FormRow = styled.div`
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+const FormColumn = styled.div`
+  flex: 1;
+  min-width: 200px;
+`;
+const FormCheckboxLabel = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.primary};
+  font-size: 0.875rem;
+
+  input[type='checkbox'] {
+    margin: 0;
+  }
+`;
+const FormActions = styled.div`
+  margin-top: 2rem;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+function TextInput({
+  label,
+  error,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+  required = false,
+  disabled = false,
+  className,
+  name,
+  testId,
+  max,
+  ignoreNumbers = false,
+  onlyNumbers = false
+}) {
+  const handleChange = (e) => {
+    let newValue = e.target.value;
+    if (ignoreNumbers) {
+      newValue = newValue.replace(/[0-9]/g, "");
+    }
+    if (onlyNumbers) {
+      newValue = newValue.replace(/[^0-9]/g, "");
+    }
+    if (type === "number" && max !== void 0 && newValue !== "") {
+      const numericValue = parseFloat(newValue);
+      if (!isNaN(numericValue) && numericValue > max) {
+        return;
+      }
+    }
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TextField,
+    {
+      label,
+      value,
+      onChange: handleChange,
+      placeholder,
+      type,
+      required,
+      disabled,
+      className,
+      name,
+      error: !!error,
+      helperText: error,
+      fullWidth: true,
+      variant: "outlined",
+      size: "small",
+      slotProps: {
+        htmlInput: {
+          ...type === "number" ? { max } : { maxLength: max },
+          "data-testid": testId
+        }
+      }
+    }
+  );
+}
+
+function EmailInput({ placeholder = "Enter email address", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TextInput, { ...props, type: "email", placeholder });
+}
+
+const formatPhoneNumber = (value) => {
+  if (!value) return "";
+  const phoneNumber = value.replace(/\D/g, "");
+  if (phoneNumber.length <= 3) {
+    return phoneNumber;
+  } else if (phoneNumber.length <= 6) {
+    return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
+  }
+  return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 10)}`;
+};
+function PhoneInput({
+  placeholder = "(XXX) XXX-XXXX",
+  value,
+  onChange,
+  ...props
+}) {
+  const handleChange = (maskedValue) => {
+    onChange(maskedValue.replace(/\D/g, "").slice(0, 10));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextInput,
+    {
+      ...props,
+      value: formatPhoneNumber(value),
+      onChange: handleChange,
+      placeholder,
+      max: 14
+    }
+  );
+}
+
+const formatDisplayValue$2 = (rawValue) => {
+  if (!rawValue) return "";
+  const digits = rawValue.replace(/[^\d]/g, "");
+  if (digits.length <= 3) return digits;
+  if (digits.length <= 5) return `${digits.slice(0, 3)}-${digits.slice(3)}`;
+  return `${digits.slice(0, 3)}-${digits.slice(3, 5)}-${digits.slice(5, 9)}`;
+};
+function SSNInput({
+  placeholder = "XXX-XX-XXXX",
+  value,
+  onChange,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextInput,
+    {
+      ...props,
+      value: formatDisplayValue$2(value),
+      onChange,
+      placeholder,
+      max: 11
+    }
+  );
+}
+
+const formatDisplayValue$1 = (rawValue) => {
+  if (!rawValue) return "";
+  const digits = rawValue.replace(/[^\d]/g, "");
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 9) return `${digits.slice(0, 2)}-${digits.slice(2)}`;
+  return `${digits.slice(0, 2)}-${digits.slice(2, 9)}`;
+};
+function TaxIdInput({
+  placeholder = "XX-XXXXXXX",
+  value,
+  onChange,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TextInput,
+    {
+      ...props,
+      value: formatDisplayValue$1(value),
+      onChange,
+      placeholder,
+      max: 10
+    }
+  );
+}
+
+const CurrencyInputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+const CurrencyPrefix = styled.span`
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: ${({ theme, $hasError }) => $hasError ? theme.colors.error : theme.colors.primary};
+  font-size: 14px;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  pointer-events: none;
+  z-index: 1;
+`;
+const StyledBaseInput = styled(BaseInput)`
+  padding-left: calc(15px + 1ch);
+  width: 100%;
+`;
+const formatDisplayValue = (rawValue) => {
+  if (!rawValue || rawValue === "") return "";
+  const numericValue = rawValue.toString().replace(/[^\d.]/g, "");
+  if (numericValue === "" || numericValue === ".") return "";
+  const parts = numericValue.split(".");
+  const integerPart = parts[0] || "";
+  const decimalPart = parts[1] || "";
+  const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  const formattedDecimal = decimalPart.slice(0, 2);
+  if (formattedDecimal) {
+    return `${formattedInteger}.${formattedDecimal}`;
+  } else if (numericValue.includes(".")) {
+    return `${formattedInteger}.`;
+  }
+  return `${formattedInteger}`;
+};
+const extractRawValue = (formattedValue) => {
+  if (!formattedValue) return "";
+  const raw = formattedValue.replace(/[^\d.]/g, "");
+  const parts = raw.split(".");
+  if (parts.length > 2) {
+    return parts[0] + "." + parts.slice(1).join("");
+  }
+  return raw;
+};
+function CurrencyInput({
+  label,
+  value,
+  onChange,
+  placeholder,
+  required,
+  disabled,
+  error,
+  className,
+  name,
+  testId
+}) {
+  const reactId = react.useId();
+  const inputId = `${reactId}-input`;
+  const errorId = `${reactId}-error`;
+  const handleChange = (e) => {
+    onChange(extractRawValue(e.target.value));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputWrapper, { className, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: inputId, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CurrencyInputWrapper, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CurrencyPrefix, { $hasError: !!error, children: "$" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StyledBaseInput,
+        {
+          id: inputId,
+          name,
+          type: "text",
+          value: formatDisplayValue(value || ""),
+          onChange: handleChange,
+          placeholder,
+          required,
+          disabled,
+          className: error ? "error" : "",
+          "aria-invalid": !!error,
+          "aria-describedby": error ? errorId : void 0,
+          "data-testid": testId
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx(InputError, { id: errorId, children: error })
+  ] });
+}
+
+function DateInput({
+  label,
+  error,
+  value,
+  onChange,
+  required = false,
+  disabled = false,
+  className,
+  name,
+  testId,
+  min,
+  max
+}) {
+  const inputRef = react.useRef(null);
+  const handleIconClick = () => {
+    const input = inputRef.current;
+    if (!input) return;
+    if (typeof input.showPicker === "function") {
+      input.showPicker();
+    } else {
+      input.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TextField,
+    {
+      label,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      type: "date",
+      required,
+      disabled,
+      className,
+      name,
+      error: !!error,
+      helperText: error,
+      fullWidth: true,
+      variant: "outlined",
+      size: "small",
+      inputRef,
+      slotProps: {
+        inputLabel: { shrink: true },
+        htmlInput: { min, max, "data-testid": testId },
+        input: {
+          endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: handleIconClick,
+              edge: "end",
+              "aria-label": "Open date picker",
+              size: "small",
+              disabled,
+              children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon, { fontSize: "small" })
+            }
+          ) })
+        }
+      }
+    }
+  );
+}
+
+function DropDown({
+  label,
+  error,
+  value,
+  onChange,
+  options = [],
+  required = false,
+  disabled = false,
+  className,
+  name,
+  testId
+}) {
+  const reactId = react.useId();
+  const labelId = `${reactId}-label`;
+  const selectId = `${reactId}-select`;
+  const selectDisplayProps = {
+    "data-testid": testId
+  };
+  const handleChange = (event) => {
+    onChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.FormControl,
+    {
+      fullWidth: true,
+      error: !!error,
+      required,
+      disabled,
+      className,
+      size: "small",
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { id: labelId, sx: { fontSize: "14px" }, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.Select,
+          {
+            labelId: label ? labelId : void 0,
+            id: selectId,
+            name,
+            value: value || "",
+            onChange: handleChange,
+            label,
+            variant: "outlined",
+            SelectDisplayProps: selectDisplayProps,
+            children: options.map((opt, index) => /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { value: opt.value, children: opt.label }, opt.value + index))
+          }
+        ),
+        error && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: error })
+      ]
+    }
+  );
+}
+
+function SearchDropdown({
+  label,
+  error,
+  value,
+  onChange,
+  options,
+  placeholder = "Search...",
+  required = false,
+  disabled = false,
+  className,
+  multiple = false,
+  noResultsMessage = "No results found",
+  name,
+  testId
+}) {
+  const getSelectedOption = () => {
+    if (!value) return multiple ? [] : null;
+    if (multiple) {
+      const selectedValues = Array.isArray(value) ? value : value.split(",").filter((v) => v.trim());
+      return options.filter((opt) => selectedValues.includes(opt.value));
+    }
+    const stringValue = Array.isArray(value) ? value[0] : value;
+    return options.find((opt) => opt.value === stringValue) || null;
+  };
+  const handleChange = (_event, newValue) => {
+    if (multiple) {
+      onChange(Array.isArray(newValue) ? newValue.map((opt) => opt.value) : []);
+    } else {
+      onChange(newValue && !Array.isArray(newValue) ? newValue.value : "");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Autocomplete,
+    {
+      options,
+      value: getSelectedOption(),
+      onChange: handleChange,
+      getOptionLabel: (option) => option.label,
+      isOptionEqualToValue: (option, val) => option.value === val.value,
+      "data-testid": testId,
+      renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          ...params,
+          label,
+          placeholder,
+          required,
+          error: !!error,
+          helperText: error,
+          className,
+          variant: "outlined",
+          name
+        }
+      ),
+      noOptionsText: noResultsMessage,
+      size: "small",
+      fullWidth: true,
+      multiple,
+      disabled,
+      clearOnBlur: false,
+      selectOnFocus: true,
+      autoHighlight: true
+    }
+  );
+}
+
+const FileInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const FileInputWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  border-color: ${({ theme, $dragOver }) => $dragOver ? theme.colors.accent : void 0};
+  background-color: ${({ theme, $dragOver }) => $dragOver ? theme.colors.surface : void 0};
+
+  &:hover {
+    border-color: ${({ theme, $hasError }) => $hasError ? theme.colors.error : theme.colors.accent};
+  }
+
+  &:focus-within {
+    border-color: ${({ theme, $hasError }) => $hasError ? theme.colors.error : theme.colors.accent};
+  }
+`;
+const HiddenFileInput = styled.input`
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+`;
+const UploadButton = styled.button`
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.colors.primary};
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.accent};
+  }
+`;
+const FileName = styled.span`
+  color: ${({ theme }) => theme.colors.primary};
+  font-size: 14px;
+  flex: 1;
+`;
+const UploadIcon = styled.span`
+  color: ${({ theme }) => theme.colors.primary};
+  display: flex;
+  align-items: center;
+`;
+const FileSize = styled.span`
+  color: ${({ theme }) => theme.colors.secondary};
+  font-size: 12px;
+`;
+const ClearButton = styled.button`
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.colors.secondary};
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.error};
+    background-color: ${({ theme }) => theme.colors.error}20;
+  }
+`;
+const FileRequirements = styled.div`
+  margin-top: 8px;
+  padding: 8px 12px;
+  background: ${({ theme }) => theme.colors.background};
+  border: 1px solid ${({ theme }) => theme.border.color};
+  border-radius: ${({ theme }) => theme.border.radius};
+`;
+const formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+function FileInput({
+  label,
+  error,
+  value,
+  onChange,
+  placeholder = "Upload document",
+  accept = ".png,.jpg,.jpeg,.pdf",
+  maxSize = 10 * 1024 * 1024,
+  required = false,
+  className,
+  showRequirements = true,
+  name,
+  testId
+}) {
+  const fileInputRef = react.useRef(null);
+  const [dragOver, setDragOver] = react.useState(false);
+  const reactId = react.useId();
+  const inputId = `${reactId}-input`;
+  const errorId = `${reactId}-error`;
+  const requirementsId = `${reactId}-requirements`;
+  const describedBy = [error ? errorId : null, showRequirements ? requirementsId : null].filter(Boolean).join(" ");
+  const validateFile = (file) => {
+    const validTypes = accept.split(",").map((type) => type.trim().toLowerCase());
+    const fileExtension = "." + (file.name.split(".").pop() ?? "").toLowerCase();
+    if (!validTypes.includes(fileExtension)) {
+      return `Invalid file type. Accepted types: ${accept}`;
+    }
+    if (file.size > maxSize) {
+      return `File size too large. Maximum size: ${formatFileSize(maxSize)}`;
+    }
+    return null;
+  };
+  const handleFileSelect = (file) => {
+    const validationError = validateFile(file);
+    if (validationError) {
+      onChange(null, validationError);
+      return;
+    }
+    onChange(file, null);
+  };
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file) handleFileSelect(file);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) handleFileSelect(file);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange(null, null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+  const acceptedTypesText = accept.split(",").map((type) => type.trim().toUpperCase().replace(".", "")).join(", ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(FileInputContainer, { className, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: inputId, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      FileInputWrapper,
+      {
+        $hasError: !!error,
+        $dragOver: dragOver,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": label ? `${label}. ${placeholder}` : placeholder,
+        "aria-invalid": !!error,
+        "aria-describedby": describedBy || void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(CloudUploadIcon, { fontSize: "small" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(UploadButton, { as: "span", children: placeholder }),
+          value && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(FileName, { children: [
+              value.name,
+              /* @__PURE__ */ jsxRuntime.jsxs(FileSize, { children: [
+                " (",
+                formatFileSize(value.size),
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ClearButton,
+              {
+                type: "button",
+                onClick: handleClear,
+                title: "Clear file",
+                "aria-label": "Clear file",
+                children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { fontSize: "small" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HiddenFileInput,
+            {
+              ref: fileInputRef,
+              id: inputId,
+              name,
+              type: "file",
+              accept,
+              onChange: handleFileChange,
+              required,
+              tabIndex: -1,
+              "data-testid": testId
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx(InputError, { id: errorId, children: error }),
+    showRequirements && /* @__PURE__ */ jsxRuntime.jsx(FileRequirements, { id: requirementsId, children: /* @__PURE__ */ jsxRuntime.jsxs(Body200, { children: [
+      "File types accepted are ",
+      acceptedTypesText,
+      ", with a max. size of",
+      " ",
+      formatFileSize(maxSize)
+    ] }) })
+  ] });
+}
+
+const RadioInput = styled.input.attrs({ type: "radio" })`
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: 2px solid ${({ theme }) => theme.border.color};
+  border-radius: 50%;
+  margin: 0 0.5rem 0 0;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+
+  &:checked {
+    border-color: ${({ theme }) => theme.colors.primary};
+    border-width: 6px;
+  }
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: 2px solid ${({ theme }) => theme.border.color};
+  border-radius: 4px;
+  margin: 0 0.5rem 0 0;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s;
+
+  &:checked {
+    border-color: ${({ theme }) => theme.colors.primary};
+    background-color: ${({ theme }) => theme.colors.primary};
+  }
+
+  &:checked::after {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 1px;
+    width: 6px;
+    height: 11px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  &:hover {
+    border-color: ${({ theme }) => theme.colors.primary};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+const StepperContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+const StepsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+`;
+const StepContent = styled.div``;
+const Step = styled.div`
+  position: relative;
+  z-index: 2;
+  background: ${({ theme }) => theme.colors.background};
+  padding: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  transition: all 0.2s ease-in-out;
+  padding-bottom: 1rem;
+  flex: 1;
+  border-bottom: 1px solid;
+  border-color: ${({ theme, $active, $completed }) => $active || $completed ? theme.colors.primary : theme.colors.border};
+`;
+const StepNumber = styled.div`
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${({ theme, $active, $completed }) => $completed ? theme.colors.primary : $active ? "white" : theme.colors.surface};
+  color: ${({ theme, $active, $completed }) => $completed ? theme.colors.background : $active ? theme.colors.primary : theme.colors.secondary};
+  font-weight: 500;
+  transition: all 0.2s ease-in-out;
+  border: 2px solid
+    ${({ theme, $active, $completed }) => $active || $completed ? theme.colors.primary : theme.colors.border};
+`;
+const StepLabel = styled.span`
+  color: ${({ theme, $active }) => $active ? theme.colors.primary : theme.colors.secondary};
+  font-size: 0.875rem;
+  font-weight: ${({ $active }) => $active ? 500 : 400};
+  transition: all 0.2s ease-in-out;
+  text-align: center;
+  white-space: nowrap;
+`;
+function Stepper({ steps, currentStep, className, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(StepperContainer, { className, "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StepsContainer, { children: steps.map((step, index) => {
+      const active = index === currentStep;
+      const completed = index < currentStep;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Step,
+        {
+          $active: active,
+          $completed: completed,
+          "aria-current": active ? "step" : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StepNumber, { $active: active, $completed: completed, children: index + 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx(StepLabel, { $active: active, children: step.label })
+          ]
+        },
+        "stepper-step-" + index
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(StepContent, { children: steps[currentStep]?.component })
+  ] });
+}
+
+const TabsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const TabList = styled.div`
+  display: flex;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+  margin-bottom: 1rem;
+`;
+const TabButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: ${({ theme, $active }) => $active ? theme.colors.primary : theme.colors.secondary};
+  border-bottom: 2px solid ${({ theme, $active }) => $active ? theme.colors.primary : "transparent"};
+  transition: all 0.2s ease-in-out;
+  position: relative;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary};
+    background-color: ${({ theme }) => theme.colors.surface};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.accent};
+    outline-offset: -2px;
+  }
+`;
+const TabContent = styled.div`
+  padding: 1rem 0;
+  min-height: 100px;
+`;
+function Tabs({
+  tabs = [],
+  defaultActiveTab = 0,
+  className,
+  onTabChange,
+  testId
+}) {
+  const [activeTab, setActiveTab] = react.useState(defaultActiveTab);
+  const baseId = react.useId();
+  const handleTabClick = (index) => {
+    setActiveTab(index);
+    onTabChange?.(index);
+  };
+  if (!tabs || tabs.length === 0) {
+    return null;
+  }
+  const tabId = (i) => `${baseId}-tab-${i}`;
+  const panelId = (i) => `${baseId}-panel-${i}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(TabsContainer, { className, "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TabList, { role: "tablist", children: tabs.map((tab, index) => {
+      const active = index === activeTab;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TabButton,
+        {
+          id: tabId(index),
+          role: "tab",
+          type: "button",
+          $active: active,
+          "aria-selected": active,
+          "aria-controls": panelId(index),
+          tabIndex: active ? 0 : -1,
+          onClick: () => handleTabClick(index),
+          children: tab.name
+        },
+        `tab-${index}`
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TabContent, { role: "tabpanel", id: panelId(activeTab), "aria-labelledby": tabId(activeTab), children: tabs[activeTab]?.content })
+  ] });
+}
+
+function Loader({ className, size, label = "Loading", testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      className,
+      "data-testid": testId,
+      sx: { display: "flex", justifyContent: "center", alignItems: "center" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size, "aria-label": label })
+    }
+  );
+}
+
+function DotsMenu({
+  options,
+  iconSize = "medium",
+  ariaLabel = "more",
+  testId
+}) {
+  const [anchorEl, setAnchorEl] = react.useState(null);
+  const open = Boolean(anchorEl);
+  const baseId = react.useId();
+  const buttonId = `${baseId}-button`;
+  const menuId = `${baseId}-menu`;
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleOptionClick = (action) => {
+    action();
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton,
+      {
+        "aria-label": ariaLabel,
+        id: buttonId,
+        "data-testid": testId,
+        "aria-controls": open ? menuId : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        onClick: handleClick,
+        size: iconSize,
+        children: /* @__PURE__ */ jsxRuntime.jsx(MoreVertIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Menu,
+      {
+        id: menuId,
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          list: { "aria-labelledby": buttonId },
+          paper: { style: { maxHeight: 200, width: "20ch" } }
+        },
+        children: options.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { onClick: () => handleOptionClick(option.action), children: option.label }, option.label + idx))
+      }
+    )
+  ] });
+}
+
+const PreviewCard = styled.div`
+  display: flex;
+  gap: 2rem;
+  padding: 1.5rem;
+  background: ${({ theme }) => theme.colors.background};
+  border: ${({ theme }) => theme.border.width} solid ${({ theme }) => theme.border.color};
+  border-radius: ${({ theme }) => theme.border.radius};
+`;
+const MainColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+  min-width: 0;
+`;
+const HeaderRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+`;
+const SideColumn = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+function PreviewContent() {
+  const [name, setName] = react.useState("Acme Corporation");
+  const [plan, setPlan] = react.useState("growth");
+  const [autopay, setAutopay] = react.useState(true);
+  return /* @__PURE__ */ jsxRuntime.jsxs(PreviewCard, { "data-testid": "oatfi-ui-preview", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(MainColumn, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Body100, { className: "bold", children: "Partner" }),
+        /* @__PURE__ */ jsxRuntime.jsx(StatusTag, { className: "success small", children: "Active" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextInput, { label: "Business name", value: name, onChange: setName }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DropDown,
+        {
+          label: "Plan",
+          value: plan,
+          onChange: setPlan,
+          options: [
+            { value: "starter", label: "Starter" },
+            { value: "growth", label: "Growth" },
+            { value: "scale", label: "Scale" }
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(FormCheckboxLabel, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CheckboxInput, { checked: autopay, onChange: (e) => setAutopay(e.target.checked) }),
+        "Enable automatic payments"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonContainer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "secondary", children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { children: "Save changes" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SideColumn, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      Stepper,
+      {
+        currentStep: 1,
+        steps: [{ label: "Connect" }, { label: "Verify" }, { label: "Done" }]
+      }
+    ) })
+  ] });
+}
+function Preview({ branding, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { branding, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(PreviewContent, {}) }) });
+}
+
+exports.AutocompleteInput = AutocompleteInput;
+exports.BaseInput = BaseInput;
+exports.Body100 = Body100;
+exports.Body200 = Body200;
+exports.Body400 = Body400;
+exports.Button = Button;
+exports.ButtonContainer = ButtonContainer;
+exports.CheckboxInput = CheckboxInput;
+exports.Container = Container;
+exports.Content = Content;
+exports.CurrencyInput = CurrencyInput;
+exports.DateInput = DateInput;
+exports.DetailElement = DetailElement;
+exports.DetailRow = DetailRow;
+exports.DetailsContainer = DetailsContainer;
+exports.DotsMenu = DotsMenu;
+exports.DropDown = DropDown;
+exports.DropdownContainer = DropdownContainer;
+exports.DropdownItem = DropdownItem;
+exports.DropdownList = DropdownList;
+exports.EmailInput = EmailInput;
+exports.FileInput = FileInput;
+exports.FlexColumnWrapper = FlexColumnWrapper;
+exports.FlexRowWrapper = FlexRowWrapper;
+exports.Form = Form;
+exports.FormActions = FormActions;
+exports.FormCheckboxLabel = FormCheckboxLabel;
+exports.FormColumn = FormColumn;
+exports.FormRow = FormRow;
+exports.FormSubtitle = FormSubtitle;
+exports.FormTitle = FormTitle;
+exports.H1 = H1;
+exports.H2 = H2;
+exports.H3 = H3;
+exports.InputError = InputError;
+exports.InputLabel = InputLabel;
+exports.InputWrapper = InputWrapper;
+exports.Loader = Loader;
+exports.NoResults = NoResults;
+exports.PhoneInput = PhoneInput;
+exports.Preview = Preview;
+exports.RadioInput = RadioInput;
+exports.SSNInput = SSNInput;
+exports.SearchDropdown = SearchDropdown;
+exports.SelectInput = SelectInput;
+exports.StatusTag = StatusTag;
+exports.Stepper = Stepper;
+exports.Tabs = Tabs;
+exports.TaxIdInput = TaxIdInput;
+exports.TermsList = TermsList;
+exports.TextInput = TextInput;
+exports.ThemeProvider = ThemeProvider;
+exports.buildMuiTheme = buildMuiTheme;
+exports.defaultTheme = defaultTheme;
+exports.mergeBranding = mergeBranding;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.cjs.js.map