Function Section

A section is a container that can be used to group related content.

You should use it along with the Section.Container component. Container stretches to fill the available space and has darker background color, sections are lighter and have a gap between them.

  • Section(
        props: Omit<
            Omit<
                DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
                "ref",
            > & {
                ref?:
                    | null
                    | (instance: null | HTMLDivElement) => void
                    | RefObject<HTMLDivElement>;
            },
            "horizontal"
            | "vertical"
            | "css"
            | "as",
        > & TransformProps<
            { horizontal?: boolean
            | "true"; 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 };
                },
            >;
        },
    ): null
    | ReactElement

  • Parameters

    • props: Omit<
          Omit<
              DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
              "ref",
          > & {
              ref?:
                  | null
                  | (instance: null | HTMLDivElement) => void
                  | RefObject<HTMLDivElement>;
          },
          "horizontal"
          | "vertical"
          | "css"
          | "as",
      > & TransformProps<
          { horizontal?: boolean
          | "true"; 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

  • Section<
        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> = "div",
        InnerProps = {},
    >(
        props: Assign<
            ComponentPropsWithRef<
                As extends (keyof IntrinsicElements)
                | ComponentType<any>
                    ? As<As>
                    : never,
            >,
            TransformProps<
                Assign<
                    InnerProps,
                    { horizontal?: boolean
                    | "true"; 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
                };
            },
        >,
    ): 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> = "div"
    • InnerProps = {}

    Parameters

    • props: Assign<
          ComponentPropsWithRef<
              As extends (keyof IntrinsicElements)
              | ComponentType<any>
                  ? As<As>
                  : never,
          >,
          TransformProps<
              Assign<
                  InnerProps,
                  { horizontal?: boolean
                  | "true"; 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

  • Section(
        props: Omit<
            Omit<
                DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
                "ref",
            > & {
                ref?:
                    | null
                    | (instance: null | HTMLDivElement) => void
                    | RefObject<HTMLDivElement>;
            },
            "horizontal"
            | "vertical"
            | "css",
        > & TransformProps<
            { horizontal?: boolean
            | "true"; 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 };
                },
            >;
        },
    ): ReactNode

  • Parameters

    • props: Omit<
          Omit<
              DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
              "ref",
          > & {
              ref?:
                  | null
                  | (instance: null | HTMLDivElement) => void
                  | RefObject<HTMLDivElement>;
          },
          "horizontal"
          | "vertical"
          | "css",
      > & TransformProps<
          { horizontal?: boolean
          | "true"; 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] [$$StyledComponentType] $$typeof className Container defaultProps? displayName? propTypes? selector

Properties

[$$StyledComponentMedia]

"[$$StyledComponentMedia]": {}

[$$StyledComponentProps]

"[$$StyledComponentProps]": {
    horizontal?: boolean | "true";
    vertical?: boolean | "true";
}

[$$StyledComponentType]

"[$$StyledComponentType]": "div"

Readonly$$typeof

$$typeof: symbol

className

className: string

Container

Container: StyledComponent<
    "div",
    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 };
        },
    >,
> = SectionContainer

OptionaldefaultProps

defaultProps?: Partial<
    Omit<
        Omit<
            DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
            "ref",
        > & {
            ref?:
                | null
                | (instance: null | HTMLDivElement) => void
                | RefObject<HTMLDivElement>;
        },
        "horizontal"
        | "vertical"
        | "css",
    > & TransformProps<
        { horizontal?: boolean
        | "true"; 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 };
            },
        >;
    },
>

Deprecated

Use values for destructuring assignments instead.

OptionaldisplayName

displayName?: string

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

See

Legacy React Docs

OptionalpropTypes

propTypes?: WeakValidationMap<
    Omit<
        Omit<
            DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
            "ref",
        > & {
            ref?:
                | null
                | (instance: null | HTMLDivElement) => void
                | RefObject<HTMLDivElement>;
        },
        "horizontal"
        | "vertical"
        | "css",
    > & TransformProps<
        { horizontal?: boolean
        | "true"; 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

selector: string

Settings

Member Visibility

On This Page

Properties