const t = (i) => ({
  flex: `1 1 ${i}px`,
  minWidth: `min(100%, ${i}px)`,
  maxWidth: "100%"
}), a = {
  email: t(400),
  shortName: t(90),
  mediumName: t(260),
  bigName: t(520),
  shortId: t(44),
  mediumId: t(60),
  bigId: t(200),
  shortDescription: t(796),
  mediumDescription: t(1500),
  bigDescription: { maxWidth: "100%", width: "100%", minWidth: "0", flex: "1 1 100%" },
  shortNumber: t(50),
  mediumNumber: t(60),
  bigNumber: t(162),
  percentNumber: t(50),
  fullWidth: { maxWidth: "100%", width: "100%", minWidth: "0", flex: "1 1 100%" }
}, s = {
  /**
   * Styles for the RHFormProvider wrapper.
   */
  formProvider: () => ({
    width: "100%"
  }),
  /**
   * Styles for the form content container (inner div).
   * Uses flex-wrap so fields with `metadata.semanticWidth` flow side-by-side and wrap naturally,
   * equivalent to a ContainerFlow flex-wrap container with PropertyValue items.
   */
  contentRoot: ({ theme: i }) => ({
    display: "flex",
    alignItems: "flex-start",
    alignContent: "flex-start",
    flexWrap: "wrap",
    gap: i.vars.size.baseSpacings.sp4,
    width: "100%",
    padding: i.vars.size.baseSpacings.sp2,
    "& .MuiLinearProgress-root": {
      backgroundColor: i.vars.palette.primary.opacity
    }
  }),
  /**
   * Styles for each form field wrapper.
   * `ownerState.semanticWidth` drives a preferred flex-basis from `semanticStylesMap`
   * while still allowing rows to redistribute leftover space more naturally.
   */
  fieldWrapper: ({ theme: i, ownerState: n }) => {
    const e = n, o = e?.semanticWidth, r = o && a[o] ? a[o] : { maxWidth: "100%", width: "100%", minWidth: "0", flex: "1 1 100%" };
    return {
      display: "flex",
      flexDirection: "column",
      gap: i.vars.size.baseSpacings.sp1,
      alignSelf: "flex-start",
      minWidth: 0,
      ...r,
      "& > *": {
        width: "100%",
        maxWidth: "100%",
        minWidth: 0
      },
      ...e?.readOnly && {
        opacity: 0.7
      },
      ...e?.disabled && {
        pointerEvents: "none",
        opacity: 0.5
      }
    };
  },
  /**
   * Styles for the submit feedback chip container.
   * Full-width flex item so it always occupies its own row.
   */
  submitFeedback: () => ({
    width: "100%",
    flex: "1 1 100%",
    display: "flex",
    justifyContent: "flex-start",
    "& .M4LChip-root": {
      width: "100%",
      height: "fit-content",
      "& .MuiBox-root": {
        width: "100%",
        overflow: "hidden",
        justifyContent: "center",
        "& .MuiTypography-root": {
          lineHeight: "normal",
          width: "100%",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis"
        }
      }
    }
  }),
  /**
   * Styles for the actions row rendered at the end of decoupled forms.
   * Keeps actions in their own flex row without relying on inline styles.
   */
  actionsRow: () => ({
    width: "100%",
    flex: "1 1 100%",
    display: "flex",
    flexDirection: "column"
  }),
  /**
   * Styles for each field label.
   */
  label: () => ({
    width: "100%"
  }),
  /**
   * Styles for each field helper text.
   */
  helperText: () => ({
    width: "100%"
  }),
  /**
   * Styles for the section divider (for future use).
   */
  sectionDivider: ({ theme: i }) => ({
    width: "100%",
    height: i.vars.size.borderStroke.container,
    backgroundColor: i.vars.palette.border.main,
    marginTop: i.vars.size.baseSpacings.sp2,
    marginBottom: i.vars.size.baseSpacings.sp2
  }),
  /**
   * Styles for the CheckableList wrapper with fixed height.
   */
  checkableListWrapper: () => ({
    width: "100%",
    height: "400px",
    // Fixed height so CheckableList can calculate its container
    minHeight: "400px",
    display: "flex",
    flexDirection: "column"
  }),
  /**
   * Styles for the fallback warning Chip rendered in the endIcon slot of a text field
   * when the field component cannot be resolved. Caps width and forces text ellipsis.
   */
  fallbackEndIconChip: () => ({
    maxWidth: 160,
    "& .MuiBox-root": {
      minWidth: 0,
      overflow: "hidden"
    },
    "& .MuiTypography-root": {
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      width: "100%"
    }
  })
};
export {
  s as componentStyles
};
