Function Line

A visual separator

  • Parameters

    • props: Omit<
          Omit<
              DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
              "ref",
          > & {
              ref?:
                  | null
                  | (instance: null | HTMLHRElement) => void
                  | RefObject<HTMLHRElement>;
          },
          "vertical"
          | "css"
          | "as",
      > & TransformProps<{ vertical?: boolean | "true" }, {}> & {
          as?: undefined;
          css?: CSS<
              {},
              {
                  colors: {
                      activeBg: "#e7e7e7";
                      background: "white";
                      blue1: "#038bf4";
                      blue2: "#b7d6f5";
                      blue3: "#dbe6ff";
                      blue4: "#33b4ff";
                      blue5: "#30a2e6";
                      border: "#d5d5d5";
                      buttonBorder: "#bababa";
                      choiceActiveBg: "#f3f3f3";
                      choiceActiveText: "#313131";
                      choiceBg: "#ffffff";
                      choiceBorder: "#cfcfcf";
                      choiceText: "#999999";
                      focusColor: "#dcaf00";
                      green1: "#3ec234";
                      green1Darker: "#38af2f";
                      grey1: "#737373";
                      headerBg: "#efeff0";
                      headerBorder: "#c8c8c9";
                      headerText: "#484848";
                      icon: "#636363";
                      inactiveBg: "#d3d3de";
                      inactiveDarkBg: "#999";
                      inputDisabledBg: "#f3f3f3";
                      inputDisabledText: "#959595";
                      mainColor: "#008ad2";
                      mainColorAlt: "#006AA9";
                      modalBg: "#f7f7f7";
                      modalButtonBg: "#f8f8f8";
                      modalButtonBorder: "#c2c2c2";
                      orange1: "#ff7200";
                      orange1Darker: "#cc5b00";
                      pink1: "#ff388f";
                      pinky1: "#f5c0b7";
                      pinky2: "#e07b67";
                      pinky3: "#ffe1db";
                      popText: "#666";
                      purple1: "#7357e8";
                      red1: "#ea2700";
                      scrollbarsBg: "transparent";
                      scrollbarsThumb: "#737373";
                      selectorActive: "#008ad2";
                      selectorText: "#606060";
                      sub: "#959595";
                      tableStripedBg: "#fafafa";
                      text: "#323232";
                      text2: "#181818";
                      text3: "#000000";
                      toggleBgDisabled: "#f0f0f0";
                      toggleHandleBg: "#e0e0e0";
                      toggleHandleBgDisabled: "#deae84";
                      toggleHandleBorder: "#cdcdcd";
                      toggleHandleBorderDisabled: "#c29f7d";
                      toolbarBg: "#f8f8f8";
                      toolbarBorder: "#ababab";
                      toolButtonText: "#666e80";
                      yellow1: "#ffde9d";
                      yellow2: "#e4a429";
                      yellow3: "#fff5db";
                  };
              },
              DefaultThemeMap,
              {
                  mx: (
                      value: string | number,
                  ) => { marginLeft: string | number; marginRight: string | number };
                  my: (
                      value: string | number,
                  ) => { marginBottom: string | number; marginTop: string | number };
                  px: (
                      value: string | number,
                  ) => { paddingLeft: string | number; paddingRight: string | number };
                  py: (
                      value: string | number,
                  ) => { paddingBottom: string | number; paddingTop: string | number };
                  size: (
                      value: string | number,
                  ) => { height: string | number; width: string | number };
              },
          >;
      }

    Returns null | ReactElement

  • Type Parameters

    • C extends CSS<
          {},
          {
              colors: {
                  activeBg: "#e7e7e7";
                  background: "white";
                  blue1: "#038bf4";
                  blue2: "#b7d6f5";
                  blue3: "#dbe6ff";
                  blue4: "#33b4ff";
                  blue5: "#30a2e6";
                  border: "#d5d5d5";
                  buttonBorder: "#bababa";
                  choiceActiveBg: "#f3f3f3";
                  choiceActiveText: "#313131";
                  choiceBg: "#ffffff";
                  choiceBorder: "#cfcfcf";
                  choiceText: "#999999";
                  focusColor: "#dcaf00";
                  green1: "#3ec234";
                  green1Darker: "#38af2f";
                  grey1: "#737373";
                  headerBg: "#efeff0";
                  headerBorder: "#c8c8c9";
                  headerText: "#484848";
                  icon: "#636363";
                  inactiveBg: "#d3d3de";
                  inactiveDarkBg: "#999";
                  inputDisabledBg: "#f3f3f3";
                  inputDisabledText: "#959595";
                  mainColor: "#008ad2";
                  mainColorAlt: "#006AA9";
                  modalBg: "#f7f7f7";
                  modalButtonBg: "#f8f8f8";
                  modalButtonBorder: "#c2c2c2";
                  orange1: "#ff7200";
                  orange1Darker: "#cc5b00";
                  pink1: "#ff388f";
                  pinky1: "#f5c0b7";
                  pinky2: "#e07b67";
                  pinky3: "#ffe1db";
                  popText: "#666";
                  purple1: "#7357e8";
                  red1: "#ea2700";
                  scrollbarsBg: "transparent";
                  scrollbarsThumb: "#737373";
                  selectorActive: "#008ad2";
                  selectorText: "#606060";
                  sub: "#959595";
                  tableStripedBg: "#fafafa";
                  text: "#323232";
                  text2: "#181818";
                  text3: "#000000";
                  toggleBgDisabled: "#f0f0f0";
                  toggleHandleBg: "#e0e0e0";
                  toggleHandleBgDisabled: "#deae84";
                  toggleHandleBorder: "#cdcdcd";
                  toggleHandleBorderDisabled: "#c29f7d";
                  toolbarBg: "#f8f8f8";
                  toolbarBorder: "#ababab";
                  toolButtonText: "#666e80";
                  yellow1: "#ffde9d";
                  yellow2: "#e4a429";
                  yellow3: "#fff5db";
              };
          },
          DefaultThemeMap,
          {
              mx: (
                  value: string | number,
              ) => { marginLeft: string | number; marginRight: string | number };
              my: (
                  value: string | number,
              ) => { marginBottom: string | number; marginTop: string | number };
              px: (
                  value: string | number,
              ) => { paddingLeft: string | number; paddingRight: string | number };
              py: (
                  value: string | number,
              ) => { paddingBottom: string | number; paddingTop: string | number };
              size: (
                  value: string | number,
              ) => { height: string | number; width: string | number };
          },
      >
    • As extends string | ComponentType<any> = "hr"
    • InnerProps = {}

    Parameters

    • props: Assign<
          ComponentPropsWithRef<
              As extends (keyof IntrinsicElements)
              | ComponentType<any>
                  ? As<As>
                  : never,
          >,
          TransformProps<Assign<InnerProps, { vertical?: boolean | "true" }>, {}> & {
              as?: As;
              css?: {
                  [K in string | number | symbol]: K extends string
                  | number
                      ? CSS<
                          {},
                          {
                              colors: {
                                  activeBg: "#e7e7e7";
                                  background: "white";
                                  blue1: "#038bf4";
                                  blue2: "#b7d6f5";
                                  blue3: "#dbe6ff";
                                  blue4: "#33b4ff";
                                  blue5: "#30a2e6";
                                  border: "#d5d5d5";
                                  buttonBorder: "#bababa";
                                  choiceActiveBg: "#f3f3f3";
                                  choiceActiveText: "#313131";
                                  choiceBg: "#ffffff";
                                  choiceBorder: "#cfcfcf";
                                  choiceText: "#999999";
                                  focusColor: "#dcaf00";
                                  green1: "#3ec234";
                                  green1Darker: "#38af2f";
                                  grey1: "#737373";
                                  headerBg: "#efeff0";
                                  headerBorder: "#c8c8c9";
                                  headerText: "#484848";
                                  icon: "#636363";
                                  inactiveBg: "#d3d3de";
                                  inactiveDarkBg: "#999";
                                  inputDisabledBg: "#f3f3f3";
                                  inputDisabledText: "#959595";
                                  mainColor: "#008ad2";
                                  mainColorAlt: "#006AA9";
                                  modalBg: "#f7f7f7";
                                  modalButtonBg: "#f8f8f8";
                                  modalButtonBorder: "#c2c2c2";
                                  orange1: "#ff7200";
                                  orange1Darker: "#cc5b00";
                                  pink1: "#ff388f";
                                  pinky1: "#f5c0b7";
                                  pinky2: "#e07b67";
                                  pinky3: "#ffe1db";
                                  popText: "#666";
                                  purple1: "#7357e8";
                                  red1: "#ea2700";
                                  scrollbarsBg: "transparent";
                                  scrollbarsThumb: "#737373";
                                  selectorActive: "#008ad2";
                                  selectorText: "#606060";
                                  sub: "#959595";
                                  tableStripedBg: "#fafafa";
                                  text: "#323232";
                                  text2: "#181818";
                                  text3: "#000000";
                                  toggleBgDisabled: "#f0f0f0";
                                  toggleHandleBg: "#e0e0e0";
                                  toggleHandleBgDisabled: "#deae84";
                                  toggleHandleBorder: "#cdcdcd";
                                  toggleHandleBorderDisabled: "#c29f7d";
                                  toolbarBg: "#f8f8f8";
                                  toolbarBorder: "#ababab";
                                  toolButtonText: "#666e80";
                                  yellow1: "#ffde9d";
                                  yellow2: "#e4a429";
                                  yellow3: "#fff5db";
                              };
                          },
                          DefaultThemeMap,
                          {
                              mx: (value: (...) | (...)) => { marginLeft: ...; marginRight: ... };
                              my: (value: (...) | (...)) => { marginBottom: ...; marginTop: ... };
                              px: (value: (...) | (...)) => { paddingLeft: ...; paddingRight: ... };
                              py: (value: (...) | (...)) => { paddingBottom: ...; paddingTop: ... };
                              size: (value: (...) | (...)) => { height: ...; width: ... };
                          },
                      >[K<K>]
                      : never
              };
          },
      >

    Returns null | ReactElement

  • Parameters

    • props: Omit<
          Omit<
              DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
              "ref",
          > & {
              ref?:
                  | null
                  | (instance: null | HTMLHRElement) => void
                  | RefObject<HTMLHRElement>;
          },
          "vertical"
          | "css",
      > & TransformProps<{ vertical?: boolean | "true" }, {}> & {
          css?: CSS<
              {},
              {
                  colors: {
                      activeBg: "#e7e7e7";
                      background: "white";
                      blue1: "#038bf4";
                      blue2: "#b7d6f5";
                      blue3: "#dbe6ff";
                      blue4: "#33b4ff";
                      blue5: "#30a2e6";
                      border: "#d5d5d5";
                      buttonBorder: "#bababa";
                      choiceActiveBg: "#f3f3f3";
                      choiceActiveText: "#313131";
                      choiceBg: "#ffffff";
                      choiceBorder: "#cfcfcf";
                      choiceText: "#999999";
                      focusColor: "#dcaf00";
                      green1: "#3ec234";
                      green1Darker: "#38af2f";
                      grey1: "#737373";
                      headerBg: "#efeff0";
                      headerBorder: "#c8c8c9";
                      headerText: "#484848";
                      icon: "#636363";
                      inactiveBg: "#d3d3de";
                      inactiveDarkBg: "#999";
                      inputDisabledBg: "#f3f3f3";
                      inputDisabledText: "#959595";
                      mainColor: "#008ad2";
                      mainColorAlt: "#006AA9";
                      modalBg: "#f7f7f7";
                      modalButtonBg: "#f8f8f8";
                      modalButtonBorder: "#c2c2c2";
                      orange1: "#ff7200";
                      orange1Darker: "#cc5b00";
                      pink1: "#ff388f";
                      pinky1: "#f5c0b7";
                      pinky2: "#e07b67";
                      pinky3: "#ffe1db";
                      popText: "#666";
                      purple1: "#7357e8";
                      red1: "#ea2700";
                      scrollbarsBg: "transparent";
                      scrollbarsThumb: "#737373";
                      selectorActive: "#008ad2";
                      selectorText: "#606060";
                      sub: "#959595";
                      tableStripedBg: "#fafafa";
                      text: "#323232";
                      text2: "#181818";
                      text3: "#000000";
                      toggleBgDisabled: "#f0f0f0";
                      toggleHandleBg: "#e0e0e0";
                      toggleHandleBgDisabled: "#deae84";
                      toggleHandleBorder: "#cdcdcd";
                      toggleHandleBorderDisabled: "#c29f7d";
                      toolbarBg: "#f8f8f8";
                      toolbarBorder: "#ababab";
                      toolButtonText: "#666e80";
                      yellow1: "#ffde9d";
                      yellow2: "#e4a429";
                      yellow3: "#fff5db";
                  };
              },
              DefaultThemeMap,
              {
                  mx: (
                      value: string | number,
                  ) => { marginLeft: string | number; marginRight: string | number };
                  my: (
                      value: string | number,
                  ) => { marginBottom: string | number; marginTop: string | number };
                  px: (
                      value: string | number,
                  ) => { paddingLeft: string | number; paddingRight: string | number };
                  py: (
                      value: string | number,
                  ) => { paddingBottom: string | number; paddingTop: string | number };
                  size: (
                      value: string | number,
                  ) => { height: string | number; width: string | number };
              },
          >;
      }

    Returns ReactNode

Properties

"[$$StyledComponentMedia]": {}
"[$$StyledComponentProps]": { vertical?: boolean | "true" }
"[$$StyledComponentType]": "hr"
$$typeof: symbol
className: string
defaultProps?: Partial<
    Omit<
        Omit<
            DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
            "ref",
        > & {
            ref?:
                | null
                | (instance: null | HTMLHRElement) => void
                | RefObject<HTMLHRElement>;
        },
        "vertical"
        | "css",
    > & TransformProps<{ vertical?: boolean | "true" }, {}> & {
        css?: CSS<
            {},
            {
                colors: {
                    activeBg: "#e7e7e7";
                    background: "white";
                    blue1: "#038bf4";
                    blue2: "#b7d6f5";
                    blue3: "#dbe6ff";
                    blue4: "#33b4ff";
                    blue5: "#30a2e6";
                    border: "#d5d5d5";
                    buttonBorder: "#bababa";
                    choiceActiveBg: "#f3f3f3";
                    choiceActiveText: "#313131";
                    choiceBg: "#ffffff";
                    choiceBorder: "#cfcfcf";
                    choiceText: "#999999";
                    focusColor: "#dcaf00";
                    green1: "#3ec234";
                    green1Darker: "#38af2f";
                    grey1: "#737373";
                    headerBg: "#efeff0";
                    headerBorder: "#c8c8c9";
                    headerText: "#484848";
                    icon: "#636363";
                    inactiveBg: "#d3d3de";
                    inactiveDarkBg: "#999";
                    inputDisabledBg: "#f3f3f3";
                    inputDisabledText: "#959595";
                    mainColor: "#008ad2";
                    mainColorAlt: "#006AA9";
                    modalBg: "#f7f7f7";
                    modalButtonBg: "#f8f8f8";
                    modalButtonBorder: "#c2c2c2";
                    orange1: "#ff7200";
                    orange1Darker: "#cc5b00";
                    pink1: "#ff388f";
                    pinky1: "#f5c0b7";
                    pinky2: "#e07b67";
                    pinky3: "#ffe1db";
                    popText: "#666";
                    purple1: "#7357e8";
                    red1: "#ea2700";
                    scrollbarsBg: "transparent";
                    scrollbarsThumb: "#737373";
                    selectorActive: "#008ad2";
                    selectorText: "#606060";
                    sub: "#959595";
                    tableStripedBg: "#fafafa";
                    text: "#323232";
                    text2: "#181818";
                    text3: "#000000";
                    toggleBgDisabled: "#f0f0f0";
                    toggleHandleBg: "#e0e0e0";
                    toggleHandleBgDisabled: "#deae84";
                    toggleHandleBorder: "#cdcdcd";
                    toggleHandleBorderDisabled: "#c29f7d";
                    toolbarBg: "#f8f8f8";
                    toolbarBorder: "#ababab";
                    toolButtonText: "#666e80";
                    yellow1: "#ffde9d";
                    yellow2: "#e4a429";
                    yellow3: "#fff5db";
                };
            },
            DefaultThemeMap,
            {
                mx: (
                    value: string | number,
                ) => { marginLeft: string | number; marginRight: string | number };
                my: (
                    value: string | number,
                ) => { marginBottom: string | number; marginTop: string | number };
                px: (
                    value: string | number,
                ) => { paddingLeft: string | number; paddingRight: string | number };
                py: (
                    value: string | number,
                ) => { paddingBottom: string | number; paddingTop: string | number };
                size: (
                    value: string | number,
                ) => { height: string | number; width: string | number };
            },
        >;
    },
>
displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

propTypes?: WeakValidationMap<
    Omit<
        Omit<
            DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
            "ref",
        > & {
            ref?:
                | null
                | (instance: null | HTMLHRElement) => void
                | RefObject<HTMLHRElement>;
        },
        "vertical"
        | "css",
    > & TransformProps<{ vertical?: boolean | "true" }, {}> & {
        css?: CSS<
            {},
            {
                colors: {
                    activeBg: "#e7e7e7";
                    background: "white";
                    blue1: "#038bf4";
                    blue2: "#b7d6f5";
                    blue3: "#dbe6ff";
                    blue4: "#33b4ff";
                    blue5: "#30a2e6";
                    border: "#d5d5d5";
                    buttonBorder: "#bababa";
                    choiceActiveBg: "#f3f3f3";
                    choiceActiveText: "#313131";
                    choiceBg: "#ffffff";
                    choiceBorder: "#cfcfcf";
                    choiceText: "#999999";
                    focusColor: "#dcaf00";
                    green1: "#3ec234";
                    green1Darker: "#38af2f";
                    grey1: "#737373";
                    headerBg: "#efeff0";
                    headerBorder: "#c8c8c9";
                    headerText: "#484848";
                    icon: "#636363";
                    inactiveBg: "#d3d3de";
                    inactiveDarkBg: "#999";
                    inputDisabledBg: "#f3f3f3";
                    inputDisabledText: "#959595";
                    mainColor: "#008ad2";
                    mainColorAlt: "#006AA9";
                    modalBg: "#f7f7f7";
                    modalButtonBg: "#f8f8f8";
                    modalButtonBorder: "#c2c2c2";
                    orange1: "#ff7200";
                    orange1Darker: "#cc5b00";
                    pink1: "#ff388f";
                    pinky1: "#f5c0b7";
                    pinky2: "#e07b67";
                    pinky3: "#ffe1db";
                    popText: "#666";
                    purple1: "#7357e8";
                    red1: "#ea2700";
                    scrollbarsBg: "transparent";
                    scrollbarsThumb: "#737373";
                    selectorActive: "#008ad2";
                    selectorText: "#606060";
                    sub: "#959595";
                    tableStripedBg: "#fafafa";
                    text: "#323232";
                    text2: "#181818";
                    text3: "#000000";
                    toggleBgDisabled: "#f0f0f0";
                    toggleHandleBg: "#e0e0e0";
                    toggleHandleBgDisabled: "#deae84";
                    toggleHandleBorder: "#cdcdcd";
                    toggleHandleBorderDisabled: "#c29f7d";
                    toolbarBg: "#f8f8f8";
                    toolbarBorder: "#ababab";
                    toolButtonText: "#666e80";
                    yellow1: "#ffde9d";
                    yellow2: "#e4a429";
                    yellow3: "#fff5db";
                };
            },
            DefaultThemeMap,
            {
                mx: (
                    value: string | number,
                ) => { marginLeft: string | number; marginRight: string | number };
                my: (
                    value: string | number,
                ) => { marginBottom: string | number; marginTop: string | number };
                px: (
                    value: string | number,
                ) => { paddingLeft: string | number; paddingRight: string | number };
                py: (
                    value: string | number,
                ) => { paddingBottom: string | number; paddingTop: string | number };
                size: (
                    value: string | number,
                ) => { height: string | number; width: string | number };
            },
        >;
    },
>
selector: string