@kiwicom/orbit-components/es/common/tailwind/spacing.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

import cx from "clsx";
import { QUERIES } from "../../utils/mediaQuery";
export let SPACING = /*#__PURE__*/function (SPACING) {
  SPACING["NONE"] = "none";
  SPACING["REVERSE"] = "reverse";
  SPACING["FIFTY"] = "50";
  SPACING["ONE_HUNDRED"] = "100";
  SPACING["ONE_HUNDRED_FIFTY"] = "150";
  SPACING["TWO_HUNDRED"] = "200";
  SPACING["THREE_HUNDRED"] = "300";
  SPACING["FOUR_HUNDRED"] = "400";
  SPACING["FIVE_HUNDRED"] = "500";
  SPACING["SIX_HUNDRED"] = "600";
  SPACING["EIGHT_HUNDRED"] = "800";
  SPACING["ONE_THOUSAND"] = "1000";
  SPACING["ONE_THOUSAND_TWO_HUNDRED"] = "1200";
  SPACING["ONE_THOUSAND_SIX_HUNDRED"] = "1600";
  return SPACING;
}({});
export const horizontalTokens = {
  [SPACING.REVERSE]: "space-x-reverse",
  [SPACING.NONE]: "space-x-none",
  [SPACING.FIFTY]: "space-x-50",
  [SPACING.ONE_HUNDRED]: "space-x-100",
  [SPACING.ONE_HUNDRED_FIFTY]: "space-x-150",
  [SPACING.TWO_HUNDRED]: "space-x-200",
  [SPACING.THREE_HUNDRED]: "space-x-300",
  [SPACING.FOUR_HUNDRED]: "space-x-400",
  [SPACING.FIVE_HUNDRED]: "space-x-500",
  [SPACING.SIX_HUNDRED]: "space-x-600",
  [SPACING.EIGHT_HUNDRED]: "space-x-800",
  [SPACING.ONE_THOUSAND]: "space-x-1000",
  [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "space-x-1200",
  [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "space-x-1600",
  [QUERIES.MEDIUMMOBILE]: {
    [SPACING.REVERSE]: "mm:space-x-reverse",
    [SPACING.NONE]: "mm:space-x-none",
    [SPACING.FIFTY]: "mm:space-x-50",
    [SPACING.ONE_HUNDRED]: "mm:space-x-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "mm:space-x-150",
    [SPACING.TWO_HUNDRED]: "mm:space-x-200",
    [SPACING.THREE_HUNDRED]: "mm:space-x-300",
    [SPACING.FOUR_HUNDRED]: "mm:space-x-400",
    [SPACING.FIVE_HUNDRED]: "mm:space-x-500",
    [SPACING.SIX_HUNDRED]: "mm:space-x-600",
    [SPACING.EIGHT_HUNDRED]: "mm:space-x-800",
    [SPACING.ONE_THOUSAND]: "mm:space-x-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "mm:space-x-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "mm:space-x-1600"
  },
  [QUERIES.LARGEMOBILE]: {
    [SPACING.REVERSE]: "lm:space-x-reverse",
    [SPACING.NONE]: "lm:space-x-none",
    [SPACING.FIFTY]: "lm:space-x-50",
    [SPACING.ONE_HUNDRED]: "lm:space-x-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "lm:space-x-150",
    [SPACING.TWO_HUNDRED]: "lm:space-x-200",
    [SPACING.THREE_HUNDRED]: "lm:space-x-300",
    [SPACING.FOUR_HUNDRED]: "lm:space-x-400",
    [SPACING.FIVE_HUNDRED]: "lm:space-x-500",
    [SPACING.SIX_HUNDRED]: "lm:space-x-600",
    [SPACING.EIGHT_HUNDRED]: "lm:space-x-800",
    [SPACING.ONE_THOUSAND]: "lm:space-x-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "lm:space-x-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "lm:space-x-1600"
  },
  [QUERIES.TABLET]: {
    [SPACING.REVERSE]: "tb:space-x-reverse",
    [SPACING.NONE]: "tb:space-x-none",
    [SPACING.FIFTY]: "tb:space-x-50",
    [SPACING.ONE_HUNDRED]: "tb:space-x-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "tb:space-x-150",
    [SPACING.TWO_HUNDRED]: "tb:space-x-200",
    [SPACING.THREE_HUNDRED]: "tb:space-x-300",
    [SPACING.FOUR_HUNDRED]: "tb:space-x-400",
    [SPACING.FIVE_HUNDRED]: "tb:space-x-500",
    [SPACING.SIX_HUNDRED]: "tb:space-x-600",
    [SPACING.EIGHT_HUNDRED]: "tb:space-x-800",
    [SPACING.ONE_THOUSAND]: "tb:space-x-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "tb:space-x-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "tb:space-x-1600"
  },
  [QUERIES.DESKTOP]: {
    [SPACING.REVERSE]: "de:space-x-reverse",
    [SPACING.NONE]: "de:space-x-none",
    [SPACING.FIFTY]: "de:space-x-50",
    [SPACING.ONE_HUNDRED]: "de:space-x-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "de:space-x-150",
    [SPACING.TWO_HUNDRED]: "de:space-x-200",
    [SPACING.THREE_HUNDRED]: "de:space-x-300",
    [SPACING.FOUR_HUNDRED]: "de:space-x-400",
    [SPACING.FIVE_HUNDRED]: "de:space-x-500",
    [SPACING.SIX_HUNDRED]: "de:space-x-600",
    [SPACING.EIGHT_HUNDRED]: "de:space-x-800",
    [SPACING.ONE_THOUSAND]: "de:space-x-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "de:space-x-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "de:space-x-1600"
  },
  [QUERIES.LARGEDESKTOP]: {
    [SPACING.REVERSE]: "ld:space-x-reverse",
    [SPACING.NONE]: "ld:space-x-none",
    [SPACING.FIFTY]: "ld:space-x-50",
    [SPACING.ONE_HUNDRED]: "ld:space-x-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "ld:space-x-150",
    [SPACING.TWO_HUNDRED]: "ld:space-x-200",
    [SPACING.THREE_HUNDRED]: "ld:space-x-300",
    [SPACING.FOUR_HUNDRED]: "ld:space-x-400",
    [SPACING.FIVE_HUNDRED]: "ld:space-x-500",
    [SPACING.SIX_HUNDRED]: "ld:space-x-600",
    [SPACING.EIGHT_HUNDRED]: "ld:space-x-800",
    [SPACING.ONE_THOUSAND]: "ld:space-x-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "ld:space-x-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "ld:space-x-1600"
  }
};
export const verticalTokens = {
  [SPACING.REVERSE]: "space-y-reverse",
  [SPACING.NONE]: "space-y-none",
  [SPACING.FIFTY]: "space-y-50",
  [SPACING.ONE_HUNDRED]: "space-y-100",
  [SPACING.ONE_HUNDRED_FIFTY]: "space-y-150",
  [SPACING.TWO_HUNDRED]: "space-y-200",
  [SPACING.THREE_HUNDRED]: "space-y-300",
  [SPACING.FOUR_HUNDRED]: "space-y-400",
  [SPACING.FIVE_HUNDRED]: "space-y-500",
  [SPACING.SIX_HUNDRED]: "space-y-600",
  [SPACING.EIGHT_HUNDRED]: "space-y-800",
  [SPACING.ONE_THOUSAND]: "space-y-1000",
  [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "space-y-1200",
  [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "space-y-1600",
  [QUERIES.MEDIUMMOBILE]: {
    [SPACING.REVERSE]: "mm:space-y-reverse",
    [SPACING.NONE]: "mm:space-y-none"
  },
  [QUERIES.LARGEMOBILE]: {
    [SPACING.REVERSE]: "lm:space-y-reverse",
    [SPACING.NONE]: "lm:space-y-none",
    [SPACING.FIFTY]: "lm:space-y-50",
    [SPACING.ONE_HUNDRED]: "lm:space-y-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "lm:space-y-150",
    [SPACING.TWO_HUNDRED]: "lm:space-y-200",
    [SPACING.THREE_HUNDRED]: "lm:space-y-300",
    [SPACING.FOUR_HUNDRED]: "lm:space-y-400",
    [SPACING.FIVE_HUNDRED]: "lm:space-y-500",
    [SPACING.SIX_HUNDRED]: "lm:space-y-600",
    [SPACING.EIGHT_HUNDRED]: "lm:space-y-800",
    [SPACING.ONE_THOUSAND]: "lm:space-y-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "lm:space-y-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "lm:space-y-1600"
  },
  [QUERIES.TABLET]: {
    [SPACING.REVERSE]: "tb:space-y-reverse",
    [SPACING.NONE]: "tb:space-y-none",
    [SPACING.FIFTY]: "tb:space-y-50",
    [SPACING.ONE_HUNDRED]: "tb:space-y-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "tb:space-y-150",
    [SPACING.TWO_HUNDRED]: "tb:space-y-200",
    [SPACING.THREE_HUNDRED]: "tb:space-y-300",
    [SPACING.FOUR_HUNDRED]: "tb:space-y-400",
    [SPACING.FIVE_HUNDRED]: "tb:space-y-500",
    [SPACING.SIX_HUNDRED]: "tb:space-y-600",
    [SPACING.EIGHT_HUNDRED]: "tb:space-y-800",
    [SPACING.ONE_THOUSAND]: "tb:space-y-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "tb:space-y-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "tb:space-y-1600"
  },
  [QUERIES.DESKTOP]: {
    [SPACING.REVERSE]: "de:space-y-reverse",
    [SPACING.NONE]: "de:space-y-none",
    [SPACING.FIFTY]: "de:space-y-50",
    [SPACING.ONE_HUNDRED]: "de:space-y-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "de:space-y-150",
    [SPACING.TWO_HUNDRED]: "de:space-y-200",
    [SPACING.THREE_HUNDRED]: "de:space-y-300",
    [SPACING.FOUR_HUNDRED]: "de:space-y-400",
    [SPACING.FIVE_HUNDRED]: "de:space-y-500",
    [SPACING.SIX_HUNDRED]: "de:space-y-600",
    [SPACING.EIGHT_HUNDRED]: "de:space-y-800",
    [SPACING.ONE_THOUSAND]: "de:space-y-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "de:space-y-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "de:space-y-1600"
  },
  [QUERIES.LARGEDESKTOP]: {
    [SPACING.REVERSE]: "ld:space-y-reverse",
    [SPACING.NONE]: "ld:space-y-none",
    [SPACING.FIFTY]: "ld:space-y-50",
    [SPACING.ONE_HUNDRED]: "ld:space-y-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "ld:space-y-150",
    [SPACING.TWO_HUNDRED]: "ld:space-y-200",
    [SPACING.THREE_HUNDRED]: "ld:space-y-300",
    [SPACING.FOUR_HUNDRED]: "ld:space-y-400",
    [SPACING.FIVE_HUNDRED]: "ld:space-y-500",
    [SPACING.SIX_HUNDRED]: "ld:space-y-600",
    [SPACING.EIGHT_HUNDRED]: "ld:space-y-800",
    [SPACING.ONE_THOUSAND]: "ld:space-y-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "ld:space-y-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "ld:space-y-1600"
  }
};
export const gapTokens = {
  [SPACING.NONE]: "gap-none",
  [SPACING.FIFTY]: "gap-50",
  [SPACING.ONE_HUNDRED]: "gap-100",
  [SPACING.ONE_HUNDRED_FIFTY]: "gap-150",
  [SPACING.TWO_HUNDRED]: "gap-200",
  [SPACING.THREE_HUNDRED]: "gap-300",
  [SPACING.FOUR_HUNDRED]: "gap-400",
  [SPACING.FIVE_HUNDRED]: "gap-500",
  [SPACING.SIX_HUNDRED]: "gap-600",
  [SPACING.EIGHT_HUNDRED]: "gap-800",
  [SPACING.ONE_THOUSAND]: "gap-1000",
  [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "gap-1200",
  [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "gap-1600",
  [QUERIES.MEDIUMMOBILE]: {
    [SPACING.NONE]: "mm:gap-none",
    [SPACING.FIFTY]: "mm:gap-50",
    [SPACING.ONE_HUNDRED]: "mm:gap-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "mm:gap-150",
    [SPACING.TWO_HUNDRED]: "mm:gap-200",
    [SPACING.THREE_HUNDRED]: "mm:gap-300",
    [SPACING.FOUR_HUNDRED]: "mm:gap-400",
    [SPACING.FIVE_HUNDRED]: "mm:gap-500",
    [SPACING.SIX_HUNDRED]: "mm:gap-600",
    [SPACING.EIGHT_HUNDRED]: "mm:gap-800",
    [SPACING.ONE_THOUSAND]: "mm:gap-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "mm:gap-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "mm:gap-1600"
  },
  [QUERIES.LARGEMOBILE]: {
    [SPACING.NONE]: "lm:gap-none",
    [SPACING.FIFTY]: "lm:gap-50",
    [SPACING.ONE_HUNDRED]: "lm:gap-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "lm:gap-150",
    [SPACING.TWO_HUNDRED]: "lm:gap-200",
    [SPACING.THREE_HUNDRED]: "lm:gap-300",
    [SPACING.FOUR_HUNDRED]: "lm:gap-400",
    [SPACING.FIVE_HUNDRED]: "lm:gap-500",
    [SPACING.SIX_HUNDRED]: "lm:gap-600",
    [SPACING.EIGHT_HUNDRED]: "lm:gap-800",
    [SPACING.ONE_THOUSAND]: "lm:gap-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "lm:gap-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "lm:gap-1600"
  },
  [QUERIES.TABLET]: {
    [SPACING.NONE]: "tb:gap-none",
    [SPACING.FIFTY]: "tb:gap-50",
    [SPACING.ONE_HUNDRED]: "tb:gap-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "tb:gap-150",
    [SPACING.TWO_HUNDRED]: "tb:gap-200",
    [SPACING.THREE_HUNDRED]: "tb:gap-300",
    [SPACING.FOUR_HUNDRED]: "tb:gap-400",
    [SPACING.FIVE_HUNDRED]: "tb:gap-500",
    [SPACING.SIX_HUNDRED]: "tb:gap-600",
    [SPACING.EIGHT_HUNDRED]: "tb:gap-800",
    [SPACING.ONE_THOUSAND]: "tb:gap-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "tb:gap-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "tb:gap-1600"
  },
  [QUERIES.DESKTOP]: {
    [SPACING.NONE]: "de:gap-none",
    [SPACING.FIFTY]: "de:gap-50",
    [SPACING.ONE_HUNDRED]: "de:gap-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "de:gap-150",
    [SPACING.TWO_HUNDRED]: "de:gap-200",
    [SPACING.THREE_HUNDRED]: "de:gap-300",
    [SPACING.FOUR_HUNDRED]: "de:gap-400",
    [SPACING.FIVE_HUNDRED]: "de:gap-500",
    [SPACING.SIX_HUNDRED]: "de:gap-600",
    [SPACING.EIGHT_HUNDRED]: "de:gap-800",
    [SPACING.ONE_THOUSAND]: "de:gap-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "de:gap-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "de:gap-1600"
  },
  [QUERIES.LARGEDESKTOP]: {
    [SPACING.NONE]: "ld:gap-none",
    [SPACING.FIFTY]: "ld:gap-50",
    [SPACING.ONE_HUNDRED]: "ld:gap-100",
    [SPACING.ONE_HUNDRED_FIFTY]: "ld:gap-150",
    [SPACING.TWO_HUNDRED]: "ld:gap-200",
    [SPACING.THREE_HUNDRED]: "ld:gap-300",
    [SPACING.FOUR_HUNDRED]: "ld:gap-400",
    [SPACING.FIVE_HUNDRED]: "ld:gap-500",
    [SPACING.SIX_HUNDRED]: "ld:gap-600",
    [SPACING.EIGHT_HUNDRED]: "ld:gap-800",
    [SPACING.ONE_THOUSAND]: "ld:gap-1000",
    [SPACING.ONE_THOUSAND_TWO_HUNDRED]: "ld:gap-1200",
    [SPACING.ONE_THOUSAND_SIX_HUNDRED]: "ld:gap-1600"
  }
};
const getSpacingClasses = (spacing, viewport, direction = "row", useMargins = false) => {
  if (useMargins) {
    const horizontalRoot = viewport ? horizontalTokens[viewport] : horizontalTokens;
    const verticalRoot = viewport ? verticalTokens[viewport] : verticalTokens;
    const tokens = cx((direction === "row" || direction === "row-reverse") && [horizontalRoot[spacing], verticalRoot.none, "rtl:space-x-reverse"], direction === "row-reverse" && horizontalRoot.reverse, (direction === "column" || direction === "column-reverse") && [verticalRoot[spacing], horizontalRoot.none], direction === "column-reverse" && verticalRoot.reverse);
    return tokens;
  }
  return viewport ? cx(gapTokens[viewport][spacing]) : cx(gapTokens[spacing]);
};
export default getSpacingClasses;