# Function Line

A visual separator

- Line(
  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 };
  },
  >;
  },
  ): null
  | ReactElement

- #### 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

  - Defined in src/components/ui/line/Line.tsx:6
- Line<
  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 = {},
  >(
  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
  };
  },
  >,
  ): 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

  - Defined in src/components/ui/line/Line.tsx:6
- Line(
  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 };
  },
  >;
  },
  ): ReactNode

- #### 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

  - Defined in src/components/ui/line/Line.tsx:6

#####
Index

### Properties

[$$StyledComponentMedia]
[$$StyledComponentProps]
[$$StyledComponentType]
$$typeof
className
defaultProps?
displayName?
propTypes?
selector

##
Properties

### [$$StyledComponentMedia]

"[$$StyledComponentMedia]": {}

- Defined in node_modules/.pnpm/@stitches+react@1.2.8_react@18.3.1/node_modules/@stitches/react/types/styled-component.d.ts:54

### [$$StyledComponentProps]

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

- Defined in node_modules/.pnpm/@stitches+react@1.2.8_react@18.3.1/node_modules/@stitches/react/types/styled-component.d.ts:53

### [$$StyledComponentType]

"[$$StyledComponentType]": "hr"

- Defined in node_modules/.pnpm/@stitches+react@1.2.8_react@18.3.1/node_modules/@stitches/react/types/styled-component.d.ts:52

### `Readonly`$$typeof

$$typeof: symbol

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:644

### className

className: string

- Defined in node_modules/.pnpm/@stitches+react@1.2.8_react@18.3.1/node_modules/@stitches/react/types/styled-component.d.ts:49

### `Optional` defaultProps

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 };
},
>;
},
>

#### Deprecated

Use values for destructuring assignments instead.

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:1582

### `Optional` displayName

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

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:660

### `Optional` propTypes

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 };
},
>;
},
>

- Defined in node_modules/.pnpm/@types+react@18.3.28/node_modules/@types/react/index.d.ts:1583

### selector

selector: string

- Defined in node_modules/.pnpm/@stitches+react@1.2.8_react@18.3.1/node_modules/@stitches/react/types/styled-component.d.ts:50