property-practice-ui 0.2.0 → 0.3.0

package/dist/molecules.cjs

@@ -0,0 +1,2457 @@
+'use strict';
+
+var react = require('react');
+var styled40 = require('styled-components');
+var jsxRuntime = require('react/jsx-runtime');
+var fa = require('react-icons/fa');
+var fa6 = require('react-icons/fa6');
+var hi2 = require('react-icons/hi2');
+var hi = require('react-icons/hi');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styled40__default = /*#__PURE__*/_interopDefault(styled40);
+
+// src/molecules/Accordion/Accordion.tsx
+
+// src/tokens/colors.ts
+var colors = {
+  background: {
+    primary: "#FFFFFF",
+    secondary: "#EEF1F5",
+    tertiary: "#1E4384",
+    subtle: "rgba(102, 153, 153, 1)",
+    blue: "#36b8e7",
+    brand: "#1D3C77",
+    success: "#00ab3fff",
+    error: "#F87171",
+    light: "#cacbcc"
+  },
+  border: {
+    primary: "#669999",
+    secondary: "rgba(30, 67, 132, 0.2)",
+    hover: "#cacbcc",
+    active: "#828282",
+    error: "#F87171",
+    focus: "#3B82F6",
+    brand: "#1D3C77",
+    light: "#f3f3f3"
+  },
+  text: {
+    brand: "#1D3C77",
+    primary: "#262626",
+    secondary: "#FFFFFF",
+    tertiary: "#669999",
+    subtle: "#919EB0",
+    light: "#b5b6b8ff",
+    error: "#F87171",
+    blue: "#3B82F6"
+  },
+  button: {
+    primary: "rgba(30, 67, 132, 0.2)",
+    hover: "rgba(30, 67, 132, 0.5)",
+    active: "rgba(30, 67, 132, 0.8)",
+    secondary: "rgba(30, 67, 132, 1)"
+  }
+};
+
+// src/tokens/radii.ts
+var radii = {
+  sm: "4px",
+  md: "8px",
+  lg: "10px",
+  xl: "16px"
+};
+
+// src/tokens/spaces.ts
+var spaces = {
+  0: "0px",
+  0.5: "2px",
+  1: "4px",
+  1.5: "6px",
+  2: "8px",
+  2.5: "10px",
+  3: "12px",
+  3.5: "14px",
+  4: "16px",
+  4.5: "18px",
+  5: "20px",
+  5.5: "22px",
+  6: "24px",
+  6.5: "28px",
+  7: "34px",
+  7.5: "38px",
+  8: "44px",
+  9: "56px",
+  20: "150px"
+};
+var Container = styled40__default.default.div`
+  width: 100%;
+  padding: ${spaces[4]};
+`;
+var AccordionContent = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, { children });
+};
+var variants = ["brand", "teal", "blue"];
+var StyledContainer = styled40__default.default.button`
+  padding: 0.75rem;
+  ${(props) => props.as === "button" ? `
+    width: 2.5rem;
+    height: 2.5rem;
+  ` : ""}
+  flex-shrink: 0;
+  background-color: ${(props) => {
+  switch (props.variant) {
+    case "brand":
+      return colors.background.brand;
+    case "teal":
+      return colors.background.subtle;
+    case "blue":
+      return colors.background.blue;
+    default:
+      return colors.background.brand;
+  }
+}};
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover svg {
+    transform: rotate(45deg);
+  }
+`;
+var StyledIcon = styled40__default.default(hi2.HiArrowUpRight)`
+  width: 1rem;
+  height: 1rem;
+  color: ${colors.text.secondary};
+  transition: transform 0.2s;
+`;
+var ArrowButton = ({
+  onClick,
+  asChild = false,
+  variant = "brand"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledContainer,
+    {
+      as: asChild ? "div" : "button",
+      onClick,
+      variant,
+      children: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { "aria-hidden": true })
+    }
+  );
+};
+ArrowButton.variants = variants;
+var spin = styled40.keyframes`
+  to { transform: rotate(360deg); }
+`;
+var Ring = styled40__default.default.span`
+  display: inline-block;
+  width: ${({ size }) => typeof size === "number" ? `${size}px` : size};
+  height: ${({ size }) => typeof size === "number" ? `${size}px` : size};
+  border-radius: 50%;
+  box-sizing: border-box;
+
+  border: ${({ thickness }) => thickness}px solid ${colors.background.brand};
+
+  border-top-color: ${colors.border.active};
+
+  animation: ${spin} ${({ speed }) => speed} linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    border-top-color: ${colors.border.active};
+  }
+`;
+var Loader = ({
+  size = 32,
+  thickness = 3,
+  speed = "0.8s"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Ring,
+    {
+      role: "status",
+      "aria-live": "polite",
+      size,
+      thickness,
+      speed
+    }
+  );
+};
+var ButtonTypes = ["submit", "reset", "button"];
+var StyledButton = styled40__default.default.button`
+  padding: ${spaces[2]} ${spaces[4]};
+  background-color: ${(props) => props.variant === "light" ? colors.button.primary : colors.button.secondary};
+  border-radius: ${radii.lg};
+  color: ${(props) => props.variant === "light" ? colors.text.primary : colors.text.secondary};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${spaces[2]};
+  max-height: 34px;
+
+  &:hover {
+    background-color: ${colors.button.hover};
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: ${colors.button.active};
+    color: ${colors.text.secondary};
+  }
+
+  &:disabled {
+    background-color: ${colors.button.primary};
+    cursor: not-allowed;
+    color: ${colors.text.primary};
+  }
+`;
+var ButtonText = styled40__default.default.span`
+  font-size: 12px;
+  font-weight: 700;
+`;
+var Button = ({
+  onClick,
+  text,
+  type = "button",
+  disabled,
+  icon = void 0,
+  variant = "light",
+  isLoading
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledButton,
+    {
+      type,
+      onClick,
+      disabled: disabled || isLoading,
+      variant,
+      children: !isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        typeof icon !== "undefined" && icon,
+        /* @__PURE__ */ jsxRuntime.jsx(ButtonText, { children: text })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(Loader, { size: "20px" })
+    }
+  );
+};
+Button.types = ButtonTypes;
+var variants2 = ["primary", "secondary", "subtle", "error"];
+var StyledDescription = styled40__default.default.p`
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.primary;
+    case "secondary":
+      return colors.text.secondary;
+    case "subtle":
+      return colors.text.subtle;
+    case "error":
+      return colors.text.error;
+    default:
+      return colors.text.primary;
+  }
+}};
+`;
+var Description = ({
+  children,
+  variant = "primary"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledDescription, { variant, children });
+};
+Description.variants = variants2;
+var StyledButton2 = styled40__default.default.button`
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  padding: 0;
+  background: transparent;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+var ExtendedButton = ({
+  text,
+  onClick,
+  arrowVariant = "teal",
+  textBgVariant = "brand",
+  textVariant = "secondary"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledButton2, { onClick, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ArrowButton, { asChild: true, variant: arrowVariant }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextButton, { asChild: true, text, bgVariant: textBgVariant, textVariant, uppercase: false })
+  ] });
+};
+var Container2 = styled40__default.default.div`
+  display: flex;
+  gap: 1rem;
+  background-color: transparent;
+`;
+var ThumbnailWrapper = styled40__default.default.div`
+  width: ${(props) => props.$size || "3rem"};
+  height: ${(props) => props.$size || "3rem"};
+  border-radius: 50%;
+  background-color: ${(props) => colors.background[props.thumbnailBgColor]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+var Content = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+`;
+var Title = styled40__default.default.h3`
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: ${(props) => colors.text[props.titleColor]};
+`;
+var Description2 = styled40__default.default.p`
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: ${(props) => colors.text[props.descriptionColor]};
+`;
+var FeatureItem = ({
+  thumbnail,
+  title,
+  description,
+  thumbnailSize,
+  thumbnailBgColor = "brand",
+  titleColor = "primary",
+  descriptionVariant = "subtle"
+}) => {
+  const getDescriptionColor = () => {
+    switch (descriptionVariant) {
+      case "primary":
+        return "primary";
+      case "secondary":
+        return "secondary";
+      case "subtle":
+        return "subtle";
+      case "error":
+        return "error";
+      default:
+        return "subtle";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ThumbnailWrapper, { $size: thumbnailSize, thumbnailBgColor, children: thumbnail }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Title, { titleColor, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Description2, { descriptionColor: getDescriptionColor(), children: description })
+    ] })
+  ] });
+};
+
+// src/tokens/breakpoints.ts
+var breakpoints = {
+  sm: "640px",
+  lg: "1024px"};
+styled40__default.default.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${spaces[4]};
+  width: 100%;
+  max-width: ${breakpoints.lg};
+  gap: ${(props) => spaces[props.space]};
+`;
+var variants3 = {
+  h1: {
+    fontSize: "24px",
+    fontWeight: 700,
+    letterSpacing: "0.6px",
+    lineHeight: "32px"
+  },
+  h2: {
+    fontSize: "20px",
+    fontWeight: 700,
+    lineHeight: "28px",
+    letterSpacing: "0.4px"
+  },
+  h3: {
+    fontSize: "18px",
+    fontWeight: 600,
+    lineHeight: "28px",
+    letterSpacing: "0.2px"
+  }
+};
+var StyledText = styled40__default.default.h1`
+  color: ${(props) => colors.text[props?.color]};
+  font-size: ${(props) => variants3[props.variant].fontSize};
+  font-weight: ${(props) => variants3[props.variant].fontWeight};
+  letter-spacing: ${(props) => variants3[props.variant].letterSpacing};
+  line-height: ${(props) => variants3[props.variant].lineHeight};
+`;
+var Header = ({
+  children,
+  variant = "h1",
+  color = "primary"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledText, { variant, color, children });
+};
+
+// src/types.ts
+var InputTypes = ["number", "text", "email", "date"];
+var StyledInput = styled40__default.default.input`
+  display: block;
+  height: 100%;
+  width: 100%;
+  outline: none;
+  background-color: transparent;
+  color: ${colors.text.subtle};
+  font-weight: 600;
+`;
+var Input = ({ name, onChange, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledInput, { name, onChange, ...rest });
+};
+Input.types = InputTypes;
+
+// src/tokens/sizes.ts
+var sizes = {
+  sm: "12px",
+  lg: "18px",
+  xl: "24px",
+  0: "1px"};
+var StyledLabel = styled40__default.default.span`
+  color: ${(props) => colors.text[props?.color]};
+  font-size: ${sizes.sm};
+  font-weight: ${(props) => props.fontWeight};
+`;
+var StyledFloatingLabel = styled40__default.default(StyledLabel)`
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  margin-left: ${spaces[3]};
+  margin-bottom: -${spaces[2.5]};
+  transform: translateY(-${spaces[0.5]});
+  background-color: ${colors.background.primary};
+  padding: 0 ${spaces[1]};
+`;
+var Label = ({
+  value,
+  color = "subtle",
+  fontWeight = "500"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { color, fontWeight, children: value });
+};
+var FloatingLabel = ({
+  value,
+  color = "subtle",
+  fontWeight = "500"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledFloatingLabel, { color, fontWeight, children: value });
+};
+styled40__default.default.span`
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background-color: ${(props) => {
+  if (props.$inverse) return "transparent";
+  switch (props.variant) {
+    case "primary":
+      return colors.text.brand;
+    case "secondary":
+      return colors.text.blue;
+    case "subtle":
+      return colors.text.subtle;
+    case "error":
+      return colors.text.error;
+    default:
+      return colors.text.brand;
+  }
+}};
+  color: ${(props) => {
+  if (props.$inverse) {
+    switch (props.variant) {
+      case "primary":
+        return colors.text.brand;
+      case "secondary":
+        return colors.text.blue;
+      case "subtle":
+        return colors.text.subtle;
+      case "error":
+        return colors.text.error;
+      default:
+        return colors.text.brand;
+    }
+  }
+  return colors.text.secondary;
+}};
+  border: ${(props) => {
+  if (!props.$inverse) return "none";
+  switch (props.variant) {
+    case "primary":
+      return `1px solid ${colors.text.brand}`;
+    case "secondary":
+      return `1px solid ${colors.text.blue}`;
+    case "subtle":
+      return `1px solid ${colors.text.subtle}`;
+    case "error":
+      return `1px solid ${colors.text.error}`;
+    default:
+      return `1px solid ${colors.text.brand}`;
+  }
+}};
+`;
+var Container4 = styled40__default.default.div`
+  border-radius: ${radii.md};
+  padding: ${spaces["3"]};
+  display: flex;
+  flex: 1;
+  gap: ${spaces[2]};
+  background-color: white;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px;
+  border-color: ${colors.border.active};
+  transition:
+    background-color 0.25s ease,
+    box-shadow 0.35s ease,
+    transform 0.25s ease;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.96);
+    border-color: ${colors.border.hover};
+    cursor: pointer;
+  }
+
+  &:active {
+    background-color: rgba(255, 255, 255, 0.92);
+  }
+`;
+var Label2 = styled40__default.default.span`
+  font-size: 16px;
+  font-weight: ${(props) => props.isSelected ? "800" : "400"};
+  text-align: center;
+`;
+var RadioItem = ({ label, isSelected, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container4, { onClick, children: [
+    isSelected && /* @__PURE__ */ jsxRuntime.jsx(fa.FaCheckCircle, { color: colors.background.blue }),
+    /* @__PURE__ */ jsxRuntime.jsx(Label2, { isSelected, children: label })
+  ] });
+};
+styled40__default.default.div`
+  width: 100%;
+`;
+styled40__default.default.label`
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: ${(props) => props.$color ? colors.text[props.$color] : colors.text.primary};
+  opacity: 0.8;
+  margin-bottom: 0.5rem;
+`;
+styled40__default.default.input`
+  box-sizing: border-box;
+  height: 2.75rem;
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid ${(props) => props.$borderColor || "#d1d5db"};
+  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.secondary};
+  padding: 0 0.75rem;
+  font-size: 15px;
+  color: ${(props) => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
+  outline: none;
+  
+  &::placeholder {
+    color: ${(props) => props.$placeholderColor ? colors.text[props.$placeholderColor] : colors.text.secondary};
+  }
+  
+  &:focus {
+    box-shadow: 0 0 0 2px ${(props) => {
+  const color = props.$focusRingColor ? colors.text[props.$focusRingColor] : colors.text.primary;
+  return `${color}33`;
+}};
+  }
+`;
+styled40__default.default.textarea`
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid ${(props) => props.$borderColor || "#d1d5db"};
+  background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.secondary};
+  padding: 0.75rem;
+  font-size: 15px;
+  color: ${(props) => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
+  outline: none;
+  
+  &::placeholder {
+    color: ${(props) => props.$placeholderColor ? colors.text[props.$placeholderColor] : colors.text.secondary};
+  }
+  
+  &:focus {
+    box-shadow: 0 0 0 2px ${(props) => {
+  const color = props.$focusRingColor ? colors.text[props.$focusRingColor] : colors.text.primary;
+  return `${color}33`;
+}};
+  }
+`;
+styled40__default.default.button`
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background-color: ${(props) => {
+  switch (props.variant) {
+    case "filled":
+      return colors.background.brand;
+    case "primary":
+    case "secondary":
+    case "inverse":
+    default:
+      return "transparent";
+  }
+}};
+  border: 2px solid ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.brand;
+    case "secondary":
+      return colors.text.blue;
+    case "inverse":
+      return colors.text.secondary;
+    case "filled":
+      return colors.background.brand;
+    default:
+      return colors.text.brand;
+  }
+}};
+  color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.brand;
+    case "secondary":
+      return colors.text.blue;
+    case "inverse":
+      return colors.text.secondary;
+    case "filled":
+      return colors.text.secondary;
+    default:
+      return colors.text.brand;
+  }
+}};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+`;
+styled40__default.default.label`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.5;
+`;
+styled40__default.default.input.attrs({ type: "checkbox" })`
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+`;
+styled40__default.default.div`
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid ${(props) => {
+  if (props.$checked) {
+    switch (props.variant) {
+      case "primary":
+        return colors.text.brand;
+      case "secondary":
+        return colors.text.blue;
+      case "subtle":
+        return colors.text.subtle;
+      default:
+        return colors.text.brand;
+    }
+  }
+  return colors.text.subtle;
+}};
+  border-radius: 4px;
+  background-color: ${(props) => {
+  if (props.$checked) {
+    switch (props.variant) {
+      case "primary":
+        return colors.text.brand;
+      case "secondary":
+        return colors.text.blue;
+      case "subtle":
+        return colors.text.subtle;
+      default:
+        return colors.text.brand;
+    }
+  }
+  return "transparent";
+}};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 0.2s;
+
+  &::after {
+    content: '✓';
+    color: ${colors.text.secondary}; // white checkmark
+    font-size: 0.875rem;
+    font-weight: bold;
+    display: ${(props) => props.$checked ? "block" : "none"};
+  }
+`;
+styled40__default.default.span`
+  color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.primary;
+    case "secondary":
+      return colors.text.blue;
+    case "subtle":
+      return colors.text.subtle;
+    default:
+      return colors.text.primary;
+  }
+}};
+`;
+styled40__default.default.a`
+  color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.brand;
+    case "secondary":
+      return colors.text.blue;
+    case "subtle":
+      return colors.text.subtle;
+    default:
+      return colors.text.brand;
+  }
+}};
+  font-weight: 700;
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+var variants7 = {
+  sm: {
+    fontSize: "14px",
+    fontWeight: 500
+  },
+  md: {
+    fontSize: "16px",
+    fontWeight: 500
+  },
+  lg: {
+    fontSize: "18px",
+    fontWeight: 500
+  }
+};
+styled40__default.default.h1`
+  color: ${(props) => colors.text[props?.color]};
+  font-size: ${(props) => variants7[props.variant].fontSize};
+  font-weight: ${(props) => variants7[props.variant].fontWeight};
+`;
+var StyledTextarea = styled40__default.default.textarea`
+  display: block;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  background-color: transparent;
+  color: ${colors.text.subtle};
+  font-weight: 600;
+  resize: vertical;
+`;
+var Textarea = ({
+  name,
+  onChange,
+  rows = 3,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledTextarea, { name, onChange, rows, ...rest });
+};
+Textarea.types = InputTypes;
+var bgVariants = ["primary", "secondary", "tertiary", "subtle", "blue", "brand", "light", "transparent"];
+var textVariants = ["brand", "primary", "secondary", "tertiary", "subtle", "light", "error", "blue"];
+var StyledContainer2 = styled40__default.default.button`
+  padding: 0 1rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  flex-shrink:0;
+  white-space: nowrap;
+  background-color: ${(props) => {
+  if (props.bgVariant === "transparent") return "transparent";
+  return colors.background[props.bgVariant];
+}};
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+var StyledText3 = styled40__default.default.span`
+  color: ${(props) => colors.text[props.textVariant]};
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  text-transform: ${(props) => props.$uppercase ? "uppercase" : "none"};
+  font-weight: ${(props) => props.$bold ? 700 : 600};
+`;
+var TextButton = ({
+  text,
+  onClick,
+  asChild = false,
+  bgVariant = "brand",
+  textVariant = "secondary",
+  uppercase = true,
+  bold = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledContainer2,
+    {
+      as: asChild ? "div" : "button",
+      onClick,
+      bgVariant,
+      children: /* @__PURE__ */ jsxRuntime.jsx(StyledText3, { textVariant, $uppercase: uppercase, $bold: bold, children: text })
+    }
+  );
+};
+TextButton.bgVariants = bgVariants;
+TextButton.textVariants = textVariants;
+styled40__default.default.div`
+  display: inline-flex;
+  background-color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.background.secondary;
+    case "secondary":
+      return colors.background.light;
+    case "subtle":
+      return colors.background.subtle;
+    default:
+      return colors.background.secondary;
+  }
+}};
+  border-radius: 9999px;
+  padding: 0.25rem;
+  gap: 0.25rem;
+`;
+styled40__default.default.button`
+  padding: 0.5rem 1.5rem;
+  border-radius: 9999px;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  
+  background-color: ${(props) => {
+  if (!props.$isActive) return "transparent";
+  switch (props.variant) {
+    case "primary":
+      return colors.background.brand;
+    case "secondary":
+      return colors.background.blue;
+    case "subtle":
+      return colors.background.subtle;
+    default:
+      return colors.background.brand;
+  }
+}};
+  
+  color: ${(props) => {
+  if (props.$isActive) {
+    return colors.text.secondary;
+  }
+  switch (props.variant) {
+    case "primary":
+      return colors.text.brand;
+    case "secondary":
+      return colors.text.blue;
+    case "subtle":
+      return colors.text.subtle;
+    default:
+      return colors.text.brand;
+  }
+}};
+
+  &:hover {
+    opacity: ${(props) => props.$isActive ? 1 : 0.7};
+  }
+`;
+var Container6 = styled40__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+var HeaderContainer = styled40__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: ${spaces[2]};
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+var AccordionHeader = ({
+  title,
+  isOpen,
+  buttonText,
+  onAccordionPress,
+  onButtonPress,
+  rightElement
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container6, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { onClick: onAccordionPress, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(fa.FaMinus, { color: colors.text.primary, size: sizes.lg }) : /* @__PURE__ */ jsxRuntime.jsx(fa.FaPlus, { color: colors.text.primary, size: sizes.lg }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h2", children: title })
+    ] }),
+    rightElement ? rightElement : /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        text: buttonText,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(fa6.FaPlus, { fontSize: "10px" }),
+        onClick: onButtonPress
+      }
+    )
+  ] });
+};
+var Container7 = styled40__default.default.div`
+  border-radius: ${radii.lg};
+  background-color: ${colors.background.secondary};
+  padding: ${spaces[4]};
+`;
+var Accordion = ({
+  buttonText,
+  onButtonPress,
+  title,
+  children,
+  rightElement
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container7, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AccordionHeader,
+      {
+        isOpen,
+        buttonText,
+        onButtonPress,
+        onAccordionPress: () => setIsOpen((previousState) => !previousState),
+        title,
+        rightElement
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children })
+  ] });
+};
+var variants9 = ["primary", "inverse", "subtle"];
+var AddressContainer = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  padding: 2rem;
+  
+  /* Desktop: normal spacing */
+  @media (min-width: 768px) {
+    gap: 1rem;
+  }
+  
+  /* Mobile: no gap, handled by collapse */
+  @media (max-width: 767px) {
+    padding: 1rem;
+    gap: 0;
+  }
+`;
+var HeaderWrapper = styled40__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  
+  /* Desktop: not clickable */
+  @media (min-width: 768px) {
+    cursor: default;
+  }
+  
+  /* Mobile: clickable */
+  @media (max-width: 767px) {
+    cursor: ${(props) => props.$isClickable ? "pointer" : "default"};
+    padding: 0.5rem 0;
+    user-select: none;
+  }
+`;
+var ToggleIcon = styled40__default.default.div`
+  display: none;
+  
+  /* Only show on mobile */
+  @media (max-width: 767px) {
+    display: flex;
+    align-items: center;
+    font-size: 1.5rem;
+    
+    color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.primary;
+    case "inverse":
+      return colors.text.secondary;
+    case "subtle":
+      return colors.text.subtle;
+    default:
+      return colors.text.primary;
+  }
+}};
+  }
+`;
+var CollapseContent = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  
+  /* Desktop: always visible */
+  @media (min-width: 768px) {
+    display: flex;
+  }
+  
+  /* Mobile: collapsible */
+  @media (max-width: 767px) {
+    max-height: ${(props) => props.$isOpen ? "500px" : "0"};
+    opacity: ${(props) => props.$isOpen ? "1" : "0"};
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    padding-top: ${(props) => props.$isOpen ? "1rem" : "0"};
+  }
+`;
+var InfoSection = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+var InfoText = styled40__default.default.p`
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.primary;
+    case "inverse":
+      return colors.text.secondary;
+    case "subtle":
+      return colors.text.subtle;
+    default:
+      return colors.text.primary;
+  }
+}};
+  font-weight: ${(props) => props.$bold ? 600 : 400};
+`;
+var ButtonWrapper = styled40__default.default.div`
+  margin-top: 0.5rem;
+`;
+var Address = ({
+  title,
+  phone,
+  email,
+  addressLines,
+  directionsText = "GET DIRECTIONS",
+  onDirectionsClick,
+  variant = "primary"
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const handleDirectionsClick = () => {
+    if (onDirectionsClick) {
+      onDirectionsClick();
+    } else {
+      const fullAddress = addressLines.join(", ");
+      const encodedAddress = encodeURIComponent(fullAddress);
+      const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
+      window.open(mapsUrl, "_blank");
+    }
+  };
+  const getHeaderVariant = () => {
+    switch (variant) {
+      case "primary":
+        return "primary";
+      case "inverse":
+        return "secondary";
+      case "subtle":
+        return "subtle";
+      default:
+        return "primary";
+    }
+  };
+  const getButtonBgVariant = () => {
+    return "transparent";
+  };
+  const getButtonTextVariant = () => {
+    switch (variant) {
+      case "primary":
+        return "primary";
+      case "inverse":
+        return "secondary";
+      case "subtle":
+        return "subtle";
+      default:
+        return "primary";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(AddressContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      HeaderWrapper,
+      {
+        $isClickable: true,
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h1", color: getHeaderVariant(), children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToggleIcon, { variant, children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(hi2.HiMinus, {}) : /* @__PURE__ */ jsxRuntime.jsx(hi2.HiPlus, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(CollapseContent, { $isOpen: isOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(InfoSection, { children: [
+        phone && /* @__PURE__ */ jsxRuntime.jsx(InfoText, { variant, children: phone }),
+        email && /* @__PURE__ */ jsxRuntime.jsx(InfoText, { variant, $bold: true, children: email.toUpperCase() }),
+        addressLines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(InfoText, { variant, children: line }, index))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        TextButton,
+        {
+          text: directionsText,
+          onClick: handleDirectionsClick,
+          bgVariant: getButtonBgVariant(),
+          textVariant: getButtonTextVariant(),
+          uppercase: true
+        }
+      ) })
+    ] })
+  ] });
+};
+Address.variants = variants9;
+var CheckboxWrapper = styled40__default.default.label`
+  display: flex;
+  align-items: center;
+  gap: ${spaces[2]};
+  cursor: pointer;
+  font-size: 16px;
+  color: ${colors.text.subtle};
+`;
+var HiddenCheckbox2 = styled40__default.default.input.attrs({ type: "checkbox" })`
+  display: none;
+`;
+var StyledCheckbox2 = styled40__default.default.span`
+  width: ${sizes.lg};
+  height: ${sizes.lg};
+  border: 1.5px solid ${colors.background.tertiary};
+  border-radius: ${radii.md};
+  background-color: ${({ checked }) => checked ? colors.background.tertiary : "transparent"};
+  transition: all 0.2s ease-in-out;
+`;
+var CheckboxItem = ({
+  label,
+  onClick,
+  checked
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(CheckboxWrapper, { onClick, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(HiddenCheckbox2, { checked, readOnly: true }),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledCheckbox2, { checked }),
+    label
+  ] });
+};
+var Container8 = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+var OptionsContainer = styled40__default.default.div`
+  display: flex;
+  gap: ${spaces[4]};
+`;
+var Checkbox = ({
+  error,
+  label,
+  onChange,
+  options,
+  value
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container8, { children: [
+    typeof label === "string" && label?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+      Label,
+      {
+        value: label,
+        color: typeof error === "string" && error?.length ? "error" : void 0,
+        fontWeight: "600"
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(OptionsContainer, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxItem,
+      {
+        checked: value === option.value,
+        label: option.label,
+        onClick: () => onChange(option.value),
+        value: option.value
+      }
+    )) })
+  ] });
+};
+var Container9 = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: #ffffff;
+  width: 284px;
+  height: 482px;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+  
+  @media (max-width: 767px) {
+    width: 70vw;
+  }
+`;
+var ThumbnailWrapper2 = styled40__default.default.div`
+  width: 180px;
+  height: 180px;
+  border-radius: 50%;
+  background-color: ${(props) => colors.background[props.thumbnailBgColor]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: center;
+`;
+var ButtonWrapper2 = styled40__default.default.div`
+  display: flex;
+  justify-content: flex-start;
+  margin-top: auto;
+`;
+var ContentCard = ({
+  thumbnail,
+  title,
+  description,
+  onArrowClick,
+  headerVariant = "h2",
+  titleColor = "brand",
+  descriptionVariant = "subtle",
+  arrowVariant = "teal",
+  thumbnailBgColor = "brand"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container9, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ThumbnailWrapper2, { thumbnailBgColor, children: thumbnail }),
+    /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: headerVariant, color: titleColor, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(Description, { variant: descriptionVariant, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      ArrowButton,
+      {
+        onClick: onArrowClick,
+        variant: arrowVariant
+      }
+    ) })
+  ] });
+};
+var variants10 = ["primary", "secondary", "transparent"];
+var Container10 = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 3rem 2rem;
+  max-width: 500px;
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1rem;
+    max-width: 100%;
+  }
+`;
+var Header2 = styled40__default.default.h1`
+  margin: 0;
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: ${(props) => colors.text[props.textColor]};
+  
+  /* Responsive font size */
+  @media (max-width: 767px) {
+    font-size: 2rem;
+  }
+  
+  @media (max-width: 480px) {
+    font-size: 1.75rem;
+  }
+`;
+var Description3 = styled40__default.default.p`
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.6;
+  color: ${(props) => colors.text[props.textColor]};
+  
+  /* Responsive font size */
+  @media (max-width: 767px) {
+    font-size: 1rem;
+  }
+`;
+var ButtonGroup = styled40__default.default.div`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  
+  /* Stack vertically on mobile */
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+`;
+var CTAContainer = ({
+  header,
+  description,
+  primaryButtonText,
+  secondaryButtonText,
+  onPrimaryClick,
+  onSecondaryClick,
+  variant = "transparent",
+  headerTextColor = "secondary",
+  descriptionTextColor = "secondary",
+  primaryArrowVariant = "teal",
+  primaryTextBgVariant = "brand",
+  primaryTextVariant = "secondary",
+  secondaryBgVariant = "transparent",
+  secondaryTextVariant = "secondary"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container10, { variant, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Header2, { textColor: headerTextColor, children: header }),
+    /* @__PURE__ */ jsxRuntime.jsx(Description3, { textColor: descriptionTextColor, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ExtendedButton,
+        {
+          text: primaryButtonText,
+          onClick: onPrimaryClick,
+          arrowVariant: primaryArrowVariant,
+          textBgVariant: primaryTextBgVariant,
+          textVariant: primaryTextVariant
+        }
+      ),
+      secondaryButtonText && /* @__PURE__ */ jsxRuntime.jsx(
+        TextButton,
+        {
+          text: secondaryButtonText,
+          onClick: onSecondaryClick,
+          bgVariant: secondaryBgVariant,
+          textVariant: secondaryTextVariant
+        }
+      )
+    ] })
+  ] });
+};
+CTAContainer.variants = variants10;
+var Container11 = styled40__default.default.div`
+  width: 100%;
+`;
+var InnerContainer2 = styled40__default.default.div`
+  position: relative;
+  width: 100%;
+  min-height: 58px;
+  display: flex;
+  align-items: center;
+
+  border-style: solid;
+  border-width: ${(props) => props?.variant === "outline" ? sizes[0] : "0px"};
+  border-color: ${(props) => props?.error ? colors.border.error : colors.border.active};
+  border-radius: ${radii.lg};
+
+  padding: ${spaces[3]} ${spaces[3]} ${spaces[2]};
+
+  &:hover {
+    border-color: ${colors.border.hover};
+    cursor: text;
+  }
+
+  &:focus-within {
+    border-color: ${colors.border.focus};
+  }
+`;
+var InputContainer = ({
+  error,
+  children,
+  variant = "outline"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container11, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(InnerContainer2, { error, variant, children }),
+    typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Label, { value: error, color: "error" })
+  ] });
+};
+var Select = styled40__default.default.select`
+  width: 100%;
+  color: ${colors.text.subtle};
+  background: transparent;
+  font-weight: 600;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+
+  &:focus,
+  &:active,
+  &:hover {
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:invalid {
+    color: ${colors.text.subtle};
+  }
+`;
+var OptionItem = styled40__default.default.option`
+  color: ${(props) => props.disabled ? colors.text.light : colors.text.subtle};
+`;
+var Dropdown = ({
+  error,
+  onChange,
+  options,
+  value,
+  label,
+  name,
+  placeholder = "Select an option",
+  disabled
+}) => {
+  const isInvalid = react.useMemo(
+    () => error ? typeof error === "string" && error?.length > 0 : false,
+    [error]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputContainer, { error, children: [
+    typeof label === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingLabel,
+      {
+        value: label,
+        color: isInvalid ? "error" : "subtle",
+        fontWeight: "600"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Select,
+      {
+        name,
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value),
+        isInvalid,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(OptionItem, { value: "", disabled: true, hidden: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(OptionItem, { value: option.value, children: option.label }, option.value))
+        ]
+      }
+    )
+  ] });
+};
+var AccordionContainer = styled40__default.default.div`
+  border-bottom: 1px solid ${colors.text.light};
+  padding: 1.5rem 0;
+`;
+var AccordionHeader2 = styled40__default.default.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  padding: 0;
+`;
+var NumberBadge = styled40__default.default.span`
+  font-size: 1rem;
+  font-weight: 600;
+  color: ${(props) => colors.text[props.numberColor]};
+  flex-shrink: 0;
+`;
+var HeaderWrapper2 = styled40__default.default.div`
+  flex-grow: 1;
+`;
+var IconWrapper = styled40__default.default.div`
+  color: ${(props) => colors.text[props.iconColor]};
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var AccordionContent2 = styled40__default.default.div`
+  max-height: ${(props) => props.$isOpen ? "1000px" : "0"};
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  padding-left: 2.5rem;
+  margin-top: ${(props) => props.$isOpen ? "1rem" : "0"};
+`;
+var FAQAccordion = ({
+  number,
+  title,
+  content,
+  defaultOpen = false,
+  headerVariant = "h3",
+  numberColor = "brand",
+  titleColor = "brand",
+  iconColor = "brand",
+  contentVariant = "primary"
+}) => {
+  const [isOpen, setIsOpen] = react.useState(defaultOpen);
+  return /* @__PURE__ */ jsxRuntime.jsxs(AccordionContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AccordionHeader2, { onClick: () => setIsOpen(!isOpen), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(NumberBadge, { numberColor, children: number }),
+      /* @__PURE__ */ jsxRuntime.jsx(HeaderWrapper2, { children: /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: headerVariant, color: titleColor, children: title }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { iconColor, children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(hi2.HiMinus, { size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(hi2.HiPlus, { size: 24 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(AccordionContent2, { $isOpen: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Description, { variant: contentVariant, children: content }) })
+  ] });
+};
+var Container12 = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+var FeatureWrapper = styled40__default.default.div`
+  padding: 1rem 0;
+  border-bottom: 1px solid #e5e7eb;
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+var FeatureContainer = ({
+  items,
+  thumbnailBgColor = "brand",
+  titleColor = "primary",
+  descriptionVariant = "subtle"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container12, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    FeatureItem,
+    {
+      thumbnail: item.thumbnail,
+      title: item.title,
+      description: item.description,
+      thumbnailSize: item.thumbnailSize,
+      thumbnailBgColor,
+      titleColor,
+      descriptionVariant
+    }
+  ) }, index)) });
+};
+var FileButton = ({
+  onFileSelect,
+  accept = [".pdf"],
+  multiple = false,
+  ...rest
+}) => {
+  const fileInputRef = react.useRef(null);
+  const handleClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+  const handleFileChange = (event) => {
+    const files = event.target.files;
+    if (files && files.length > 0 && onFileSelect) {
+      Array.from(files).forEach((file) => onFileSelect(file));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        ...rest,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(fa6.FaPlus, { fontSize: "10px" }),
+        onClick: handleClick
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "file",
+        ref: fileInputRef,
+        style: { display: "none" },
+        onChange: handleFileChange,
+        accept: accept?.map((item) => item).join(","),
+        multiple
+      }
+    )
+  ] });
+};
+var Input2 = ({ label, error, ...rest }) => {
+  const isInvalid = react.useMemo(
+    () => typeof error === "string" && error.length > 0,
+    [error]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputContainer, { error, children: [
+    typeof label === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingLabel,
+      {
+        color: isInvalid ? "error" : "subtle",
+        value: label,
+        fontWeight: "600"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Input, { ...rest })
+  ] });
+};
+Input2.types = Input.types;
+var fadeIn = styled40.keyframes`
+  from { opacity: 0 }
+  to { opacity: 1 }
+`;
+styled40.keyframes`
+  from { transform: translateY(8px) scale(.98); opacity: 0 }
+  to { transform: translateY(0) scale(1); opacity: 1 }
+`;
+var Overlay = styled40__default.default.div`
+  height: 100vh;
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: ${(props) => props.contentPosition === "center" ? "center" : props.contentPosition === "bottom" ? "flex-end" : "flex-start"};
+  justify-content: center;
+  animation: ${fadeIn} 160ms ease-out;
+`;
+var ContentContainer = styled40__default.default.div`
+  position: relative;
+  width: min(${breakpoints.sm}, 92vw);
+  max-height: 86vh;
+  overflow: auto;
+  border-radius: ${radii.xl};
+  padding: ${spaces[6]};
+  background-color: ${colors.background.primary};
+`;
+var Modal = ({
+  visible,
+  contentPosition = "center",
+  dismissable = true,
+  onClose,
+  children
+}) => {
+  function onDismiss() {
+    if (dismissable) {
+      onClose();
+    }
+  }
+  if (!visible) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(Overlay, { contentPosition, onClick: onDismiss, children: /* @__PURE__ */ jsxRuntime.jsx(ContentContainer, { onClick: (e) => e.stopPropagation(), children }) });
+};
+var Container13 = styled40__default.default.div`
+display: flex;
+align-items: center ;
+justify-content: space-between;
+padding: ${spaces[2]} ${spaces[3]};
+background-color: ${(props) => props.isComplete ? colors.background.blue : colors.background.light};
+border-radius: ${radii.sm};
+`;
+var Row = styled40__default.default.div`
+    display: flex;
+    align-items: center;
+    gap: ${spaces[2]};
+`;
+var OverviewRowItem = ({ isComplete, isMainHeader, title }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container13, { isComplete, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: isMainHeader ? "h2" : "h3", color: isComplete ? "secondary" : "primary", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h3", color: isComplete ? "secondary" : "primary", children: isComplete ? "Complete" : "Information Outstanding" }),
+      isComplete ? /* @__PURE__ */ jsxRuntime.jsx(fa6.FaCircleCheck, { color: colors.background.success }) : /* @__PURE__ */ jsxRuntime.jsx(fa6.FaCircleExclamation, { color: colors.background.error })
+    ] })
+  ] });
+};
+function Spinner(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600",
+      viewBox: "0 0 100 101",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+            fill: "currentFill"
+          }
+        )
+      ]
+    }
+  ) });
+}
+var Container14 = styled40__default.default.div`
+  width: '100%';
+  min-height: '100vh';
+  padding-bottom: ${spaces[9]};
+`;
+var HeaderContainer2 = styled40__default.default.div`
+  padding: ${spaces[4.5]} ${spaces[6]};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+var ContentContainer2 = styled40__default.default.div`
+  border-top: 1px solid ${colors.border.hover};
+`;
+var SpinnerContainer = styled40__default.default.div`
+  display: flex;
+  width: 100%;
+  padding: ${spaces[6]};
+  align-items: center;
+  justify-content: center;
+`;
+var PageLayout = ({
+  title,
+  children,
+  isLoading = false,
+  rightElement
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container14, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Header, { color: "subtle", children: title }),
+      " ",
+      rightElement && rightElement
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx(SpinnerContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(ContentContainer2, { children })
+  ] });
+};
+var variants11 = ["documents", "properties"];
+var Container15 = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  gap: ${spaces[4]};
+  padding: ${spaces[8]};
+`;
+var EmptyState = ({ variant, message }) => {
+  const size = sizes.xl;
+  const color = colors.text.primary;
+  const Icon = react.useMemo(() => {
+    switch (variant) {
+      case "documents":
+        return /* @__PURE__ */ jsxRuntime.jsx(fa6.FaRegFolderOpen, { size, color });
+      case "properties":
+        return /* @__PURE__ */ jsxRuntime.jsx(fa6.FaHouse, { size, color });
+    }
+  }, [variant]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container15, { children: [
+    Icon,
+    /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h3", children: message })
+  ] });
+};
+EmptyState.variants = variants11;
+var Container16 = styled40__default.default.div`
+  width: 100%;
+  height: 100%;
+`;
+var PDFPreviewer = ({ url }) => {
+  const [error, setError] = react.useState(null);
+  react.useEffect(() => {
+    setError(null);
+    try {
+      new URL(url);
+    } catch {
+      setError("Invalid preview URL");
+    }
+  }, [url]);
+  if (typeof error === "string")
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { message: "Failed to load this document", variant: "documents" });
+  return /* @__PURE__ */ jsxRuntime.jsx(Container16, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      src: `${url}#view=FitH&toolbar=1&navpanes=0`,
+      title: "Document preview",
+      allow: "clipboard-read; clipboard-write",
+      referrerPolicy: "no-referrer",
+      style: { width: "100%", height: "100%", border: "0" }
+    }
+  ) });
+};
+var Container17 = styled40__default.default.div`
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  max-width: 600px;
+  
+  /* Mobile: stack vertically */
+  @media (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+    max-width: 100%;
+  }
+`;
+var ImageWrapper = styled40__default.default.div`
+  flex-shrink: 0;
+  width: 180px;
+  height: 180px;
+  border-radius: 8px;
+  overflow: hidden;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  /* Mobile: full width */
+  @media (max-width: 767px) {
+    width: 100%;
+    height: 200px;
+  }
+`;
+var ContentWrapper = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  
+  /* Mobile: full width */
+  @media (max-width: 767px) {
+    width: 100%;
+  }
+`;
+var LogoWrapper = styled40__default.default.div`
+  max-width: 200px;
+  
+  img {
+    width: 100%;
+    height: auto;
+  }
+`;
+var ProductInfo = ({
+  image,
+  logoImage,
+  title,
+  buttonText,
+  onButtonClick,
+  titleVariant = "h2",
+  titleColor = "brand",
+  buttonArrowVariant = "teal",
+  buttonTextBgVariant = "brand",
+  buttonTextVariant = "secondary"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container17, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ImageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: "Product" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LogoWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoImage, alt: "Logo" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: titleVariant, color: titleColor, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ExtendedButton,
+        {
+          text: buttonText,
+          onClick: onButtonClick,
+          arrowVariant: buttonArrowVariant,
+          textBgVariant: buttonTextBgVariant,
+          textVariant: buttonTextVariant
+        }
+      )
+    ] })
+  ] });
+};
+var Container18 = styled40__default.default.div``;
+var OptionsContainer2 = styled40__default.default.div`
+  margin-top: ${spaces[2]};
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  gap: ${spaces[2]};
+`;
+var LabelContainer = styled40__default.default.div`
+  padding-left: ${spaces[1]};
+`;
+var RadioGroup = ({
+  label,
+  options,
+  value,
+  onClick,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container18, { className, children: [
+    typeof label === "string" && /* @__PURE__ */ jsxRuntime.jsx(LabelContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Label, { value: label, fontWeight: "600" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(OptionsContainer2, { children: options.map((option, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      RadioItem,
+      {
+        isSelected: value === option.value,
+        label: option.label,
+        disabled: option.disabled,
+        onClick: () => onClick(option.value)
+      },
+      idx
+    )) })
+  ] });
+};
+var variants12 = ["primary", "secondary", "subtle"];
+var Overlay2 = styled40__default.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+`;
+var ChartContainer = styled40__default.default.div`
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 2rem;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+`;
+var HeaderSection = styled40__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+`;
+var CloseButton = styled40__default.default.button`
+  background-color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.background.brand;
+    case "secondary":
+      return colors.background.blue;
+    case "subtle":
+      return colors.background.subtle;
+    default:
+      return colors.background.brand;
+  }
+}};
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+var Table = styled40__default.default.table`
+  width: 100%;
+  border-collapse: collapse;
+`;
+var TableHeader = styled40__default.default.thead`
+  border-bottom: 2px solid #e5e7eb;
+`;
+var TableHeaderCell = styled40__default.default.th`
+  text-align: left;
+  padding: 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+      return colors.text.brand;
+    case "secondary":
+      return colors.text.blue;
+    case "subtle":
+      return colors.text.subtle;
+    default:
+      return colors.text.brand;
+  }
+}};
+`;
+var TableBody = styled40__default.default.tbody``;
+var TableRow = styled40__default.default.tr`
+  border-bottom: 1px solid #f3f4f6;
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+var TableCell = styled40__default.default.td`
+  padding: 0.75rem 0;
+  font-size: 0.875rem;
+  color: ${(props) => {
+  switch (props.variant) {
+    case "primary":
+    case "secondary":
+      return colors.text.primary;
+    case "subtle":
+      return colors.text.subtle;
+    default:
+      return colors.text.primary;
+  }
+}};
+`;
+var RatesChart = ({
+  title = "Rates chart",
+  rates,
+  onClose,
+  variant = "primary"
+}) => {
+  const getHeaderColor = () => {
+    switch (variant) {
+      case "primary":
+        return "brand";
+      case "secondary":
+        return "primary";
+      case "subtle":
+        return "subtle";
+      default:
+        return "brand";
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(ChartContainer, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HeaderSection, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h2", color: getHeaderColor(), children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, variant, children: /* @__PURE__ */ jsxRuntime.jsx(hi.HiX, { size: 20 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { variant, children: "Transaction type" }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { variant, children: "Price" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: rates.map((rate, index) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant, children: rate.transactionType }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableCell, { variant, children: rate.price })
+      ] }, index)) })
+    ] })
+  ] }) });
+};
+RatesChart.variants = variants12;
+var Backdrop = styled40__default.default.div`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: ${(props) => props.$isOpen ? "block" : "none"};
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9998;
+  }
+`;
+var BackToTopWrapper = styled40__default.default.div`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+var StyledNav = styled40__default.default.nav`
+  width: 195px;
+  display: flex;
+  flex-direction: column;
+  min-height: 500px;
+  height: 100vh;
+  padding-bottom: 15px;
+  
+  @media (min-width: 768px) {
+    position: relative;
+    background-color: #ffffff;
+    border-right: 1px solid #e5e7eb;
+  }
+  
+  @media (max-width: 767px) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+    background-color: ${(props) => colors.background[props.$mobileBgVariant]};
+    border-right: 1px solid ${(props) => colors.border[props.$borderVariant]};
+    transform: translateX(${(props) => props.$isOpen ? "0" : "-100%"});
+    transition: transform 0.3s ease-in-out;
+    box-shadow: ${(props) => props.$isOpen ? "2px 0 8px rgba(0, 0, 0, 0.15)" : "none"};
+  }
+`;
+var CloseButton2 = styled40__default.default.button`
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  color: ${(props) => colors.border[props.$textVariant]};
+  
+  &:hover {
+    opacity: 0.7;
+  }
+`;
+var MobileHeader = styled40__default.default.div`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+  }
+`;
+var NavList = styled40__default.default.ul`
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+var DesktopNavList = styled40__default.default(NavList)`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+var MobileNavList = styled40__default.default(NavList)`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+  }
+`;
+var NavItem = styled40__default.default.li`
+  display: flex;
+`;
+var NavLink = styled40__default.default.a`
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  width: 100%;
+  padding-left: 0.5rem;
+  
+  ${(props) => !props.$isActive && `
+    &:hover {
+      font-weight: 100;
+    }
+  `}
+`;
+var ActiveTriangle = styled40__default.default.div`
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-left: 6px solid ${(props) => colors.border[props.triangleColor]};
+  border-bottom: 4px solid transparent;
+  flex-shrink: 0;
+  margin-left: 1.5rem;
+`;
+var InactiveSpacer = styled40__default.default.span`
+  width: 6px;
+  margin-right: 0.5rem;
+  flex-shrink: 0;
+`;
+var Divider = styled40__default.default.div`
+  height: 1px;
+  background-color: ${(props) => colors.border[props.dividerColor]};
+  margin: 1rem;
+`;
+var Spacer = styled40__default.default.div`
+  flex-grow: 1;
+`;
+var DesktopOnlySpacer = styled40__default.default(Spacer)`
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+var MobileButtonsWrapper = styled40__default.default.div`
+  display: none;
+  
+  @media (max-width: 767px) {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    padding: 0 1rem;
+    margin-top: auto;
+    margin-bottom: 20px;
+  }
+`;
+var SideNav = ({
+  logo,
+  items,
+  activeItem,
+  onBackToTop,
+  isOpen = true,
+  onClose,
+  mobileButtons = [],
+  mobileBgVariant = "tertiary",
+  borderVariant = "primary",
+  closeButtonVariant = "light",
+  mobileActiveTextBgVariant = "transparent",
+  mobileActiveTextVariant = "light",
+  mobileInactiveTextBgVariant = "transparent",
+  mobileInactiveTextVariant = "light",
+  triangleColor = "primary",
+  dividerColor = "light",
+  activeTextBgVariant = "transparent",
+  activeTextVariant = "brand",
+  inactiveTextBgVariant = "transparent",
+  inactiveTextVariant = "subtle",
+  backToTopBgVariant = "transparent",
+  backToTopTextVariant = "subtle"
+}) => {
+  const renderNavItems = (isMobile) => items.map((item) => {
+    const isActive = activeItem === item.href;
+    return /* @__PURE__ */ jsxRuntime.jsx(NavItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavLink, { href: item.href, $isActive: isActive, children: [
+      isActive ? /* @__PURE__ */ jsxRuntime.jsx(ActiveTriangle, { triangleColor }) : /* @__PURE__ */ jsxRuntime.jsx(InactiveSpacer, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TextButton,
+        {
+          asChild: true,
+          text: item.label,
+          bgVariant: isActive ? isMobile && mobileActiveTextBgVariant ? mobileActiveTextBgVariant : activeTextBgVariant : isMobile && mobileInactiveTextBgVariant ? mobileInactiveTextBgVariant : inactiveTextBgVariant,
+          textVariant: isActive ? isMobile && mobileActiveTextVariant ? mobileActiveTextVariant : activeTextVariant : isMobile && mobileInactiveTextVariant ? mobileInactiveTextVariant : inactiveTextVariant,
+          uppercase: false,
+          bold: isActive
+        }
+      )
+    ] }) }, item.href);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Backdrop, { $isOpen: isOpen, onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledNav,
+      {
+        $isOpen: isOpen,
+        $mobileBgVariant: mobileBgVariant,
+        $borderVariant: borderVariant,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(MobileHeader, { children: [
+            logo,
+            /* @__PURE__ */ jsxRuntime.jsx(CloseButton2, { onClick: onClose, "aria-label": "Close menu", $textVariant: closeButtonVariant, children: "\u2715" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(DesktopOnlySpacer, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(DesktopNavList, { children: renderNavItems(false) }),
+          /* @__PURE__ */ jsxRuntime.jsx(MobileNavList, { children: renderNavItems(true) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Divider, { dividerColor }),
+          /* @__PURE__ */ jsxRuntime.jsx(Spacer, {}),
+          mobileButtons.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Divider, { dividerColor }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileButtonsWrapper, { children: mobileButtons.map((button, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              ExtendedButton,
+              {
+                text: button.text,
+                onClick: button.onClick,
+                textBgVariant: button.bgVariant || "transparent",
+                textVariant: button.textVariant || "subtle",
+                arrowVariant: button.arrowButton || "blue"
+              },
+              index
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(BackToTopWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            TextButton,
+            {
+              text: "Back to top",
+              onClick: onBackToTop,
+              bgVariant: backToTopBgVariant,
+              textVariant: backToTopTextVariant,
+              uppercase: false
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+var Overlay3 = styled40__default.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: ${(props) => props.$isOpen ? "flex" : "none"};
+  justify-content: flex-end;
+  z-index: 1000;
+`;
+var PanelContainer = styled40__default.default.div`
+  background-color: #ffffff;
+  width: 100%;
+  max-width: 400px;
+  height: 100vh;
+  padding: 3rem 2rem;
+  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  transform: ${(props) => props.$isOpen ? "translateX(0)" : "translateX(100%)"};
+  transition: transform 0.3s ease-in-out;
+  overflow-y: auto;
+`;
+var CloseButton3 = styled40__default.default.button`
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  background-color: ${(props) => colors.background[props.closeButtonBgColor]};
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  z-index: 10;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+var IconWrapper2 = styled40__default.default.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
+
+  svg {
+    width: 150px;
+    height: 150px;
+  }
+
+  img {
+    width: 150px;
+    height: 150px;
+    object-fit: contain;
+  }
+`;
+var ContentWrapper2 = styled40__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
+var SidePanel = ({
+  isOpen,
+  onClose,
+  icon,
+  title,
+  description,
+  buttonText,
+  onButtonClick,
+  closeButtonBgColor = "subtle",
+  titleColor = "brand",
+  descriptionVariant = "primary",
+  buttonArrowVariant = "teal",
+  buttonTextBgVariant = "brand",
+  buttonTextVariant = "secondary"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Overlay3, { $isOpen: isOpen, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PanelContainer, { $isOpen: isOpen, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CloseButton3, { onClick: onClose, closeButtonBgColor, children: /* @__PURE__ */ jsxRuntime.jsx(hi.HiX, { size: 24 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(IconWrapper2, { children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h2", color: titleColor, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Description, { variant: descriptionVariant, children: description }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ExtendedButton,
+        {
+          text: buttonText,
+          onClick: onButtonClick,
+          arrowVariant: buttonArrowVariant,
+          textBgVariant: buttonTextBgVariant,
+          textVariant: buttonTextVariant
+        }
+      )
+    ] })
+  ] }) });
+};
+var Container19 = styled40__default.default.div`
+  width: 100%;
+  background-color: ${(props) => props.isSelected ? colors.background.blue : colors.background.primary};
+  border: 1px solid ${colors.background.blue};
+  border-radius: ${radii.lg};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${spaces[2]} ${spaces[3]};
+  cursor: pointer;
+`;
+var StyledLabel2 = styled40__default.default.span`
+  color: ${(props) => props.isSelected ? colors.text.secondary : colors.text.blue};
+  font-size: ${sizes.sm};
+  font-weight: 700;
+`;
+var StepperHeaderTab = ({
+  title,
+  isSelected,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Container19, { isSelected, onClick, children: /* @__PURE__ */ jsxRuntime.jsx(StyledLabel2, { isSelected, children: title }) });
+};
+var Textarea2 = ({ label, error, ...rest }) => {
+  const isInvalid = react.useMemo(
+    () => typeof error === "string" && error.length > 0,
+    [error]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputContainer, { children: [
+    typeof label === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+      FloatingLabel,
+      {
+        color: isInvalid ? "error" : "subtle",
+        value: label,
+        fontWeight: "600"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Textarea, { ...rest })
+  ] });
+};
+
+exports.Accordion = Accordion;
+exports.Address = Address;
+exports.CTAContainer = CTAContainer;
+exports.Checkbox = Checkbox;
+exports.ContentCard = ContentCard;
+exports.Dropdown = Dropdown;
+exports.FAQAccordion = FAQAccordion;
+exports.FeatureContainer = FeatureContainer;
+exports.FileButton = FileButton;
+exports.Input = Input2;
+exports.Modal = Modal;
+exports.OverviewRowItem = OverviewRowItem;
+exports.PDFPreviewer = PDFPreviewer;
+exports.PageLayout = PageLayout;
+exports.ProductInfo = ProductInfo;
+exports.RadioGroup = RadioGroup;
+exports.RatesChart = RatesChart;
+exports.SideNav = SideNav;
+exports.SidePanel = SidePanel;
+exports.StepperHeaderTab = StepperHeaderTab;
+exports.Textarea = Textarea2;
+//# sourceMappingURL=molecules.cjs.map
+//# sourceMappingURL=molecules.cjs.map