function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import { transformSize } from '@codecademy/variance';
export var color = {
  color: {
    property: 'color',
    scale: 'colors'
  },
  textColor: {
    property: 'color',
    scale: 'colors'
  },
  bg: {
    property: 'backgroundColor',
    scale: 'colors'
  },
  borderColor: {
    property: 'borderColor',
    scale: 'colors'
  },
  borderColorX: {
    property: 'borderColor',
    properties: ['borderLeftColor', 'borderRightColor'],
    scale: 'colors'
  },
  borderColorY: {
    property: 'borderColor',
    properties: ['borderTopColor', 'borderBottomColor'],
    scale: 'colors'
  },
  borderColorLeft: {
    property: 'borderLeftColor',
    scale: 'colors'
  },
  borderColorRight: {
    property: 'borderRightColor',
    scale: 'colors'
  },
  borderColorTop: {
    property: 'borderTopColor',
    scale: 'colors'
  },
  borderColorBottom: {
    property: 'borderBottomColor',
    scale: 'colors'
  }
};
export var border = {
  // Border
  border: {
    property: 'border',
    scale: 'borders'
  },
  borderX: {
    property: 'border',
    properties: ['borderLeft', 'borderRight'],
    scale: 'borders'
  },
  borderY: {
    property: 'border',
    properties: ['borderTop', 'borderBottom'],
    scale: 'borders'
  },
  borderTop: {
    property: 'borderTop',
    scale: 'borders'
  },
  borderRight: {
    property: 'borderRight',
    scale: 'borders'
  },
  borderBottom: {
    property: 'borderBottom',
    scale: 'borders'
  },
  borderLeft: {
    property: 'borderLeft',
    scale: 'borders'
  },
  // Width
  borderWidth: {
    property: 'borderWidth'
  },
  borderWidthX: {
    property: 'borderWidth',
    properties: ['borderLeftWidth', 'borderRightWidth']
  },
  borderWidthY: {
    property: 'borderWidth',
    properties: ['borderTopWidth', 'borderBottomWidth']
  },
  borderWidthLeft: {
    property: 'borderLeftWidth'
  },
  borderWidthRight: {
    property: 'borderRightWidth'
  },
  borderWidthTop: {
    property: 'borderTopWidth'
  },
  borderWidthBottom: {
    property: 'borderBottomWidth'
  },
  // Radius
  borderRadius: {
    property: 'borderRadius',
    scale: 'borderRadii'
  },
  borderRadiusLeft: {
    property: 'borderRadius',
    properties: ['borderTopLeftRadius', 'borderBottomLeftRadius'],
    scale: 'borderRadii'
  },
  borderRadiusTop: {
    property: 'borderRadius',
    properties: ['borderTopLeftRadius', 'borderTopRightRadius'],
    scale: 'borderRadii'
  },
  borderRadiusBottom: {
    property: 'borderRadius',
    properties: ['borderBottomLeftRadius', 'borderBottomRightRadius'],
    scale: 'borderRadii'
  },
  borderRadiusRight: {
    property: 'borderRadius',
    properties: ['borderTopRightRadius', 'borderBottomRightRadius'],
    scale: 'borderRadii'
  },
  borderRadiusTopLeft: {
    property: 'borderTopLeftRadius',
    scale: 'borderRadii'
  },
  borderRadiusTopRight: {
    property: 'borderTopRightRadius',
    scale: 'borderRadii'
  },
  borderRadiusBottomRight: {
    property: 'borderBottomRightRadius',
    scale: 'borderRadii'
  },
  borderRadiusBottomLeft: {
    property: 'borderBottomLeftRadius',
    scale: 'borderRadii'
  },
  // Style
  borderStyle: {
    property: 'borderStyle'
  },
  borderStyleX: {
    property: 'borderStyle',
    properties: ['borderLeftStyle', 'borderRightStyle']
  },
  borderStyleY: {
    property: 'borderStyle',
    properties: ['borderTopStyle', 'borderBottomStyle']
  },
  borderStyleLeft: {
    property: 'borderLeftStyle'
  },
  borderStyleRight: {
    property: 'borderRightStyle'
  },
  borderStyleTop: {
    property: 'borderTopStyle'
  },
  borderStyleBottom: {
    property: 'borderBottomStyle'
  }
};
var selfAlignments = {
  justifySelf: {
    property: 'justifySelf'
  },
  alignSelf: {
    property: 'alignSelf'
  },
  gridArea: {
    property: 'gridArea'
  }
};
var alignments = _objectSpread({
  justifyContent: {
    property: 'justifyContent'
  },
  justifyItems: {
    property: 'justifyItems'
  },
  alignItems: {
    property: 'alignItems'
  },
  alignContent: {
    property: 'alignContent'
  }
}, selfAlignments);
var flexItems = {
  flexBasis: {
    property: 'flexBasis'
  },
  flexShrink: {
    property: 'flexShrink'
  },
  flexGrow: {
    property: 'flexGrow'
  },
  order: {
    property: 'order'
  }
};
export var flex = _objectSpread(_objectSpread({
  flexDirection: {
    property: 'flexDirection'
  },
  flexWrap: {
    property: 'flexWrap'
  },
  flex: {
    property: 'flex'
  }
}, alignments), flexItems);
var gridItems = {
  gridColumn: {
    property: 'gridColumn'
  },
  gridRow: {
    property: 'gridRow'
  },
  gridColumnStart: {
    property: 'gridColumnStart'
  },
  gridRowStart: {
    property: 'gridRowStart'
  },
  gridColumnEnd: {
    property: 'gridColumnEnd'
  },
  gridRowEnd: {
    property: 'gridRowEnd'
  }
};
export var grid = _objectSpread(_objectSpread({
  gridAutoColumns: {
    property: 'gridAutoColumns'
  },
  gridAutoRows: {
    property: 'gridAutoRows'
  },
  gridTemplateColumns: {
    property: 'gridTemplateColumns'
  },
  gridTemplateRows: {
    property: 'gridTemplateRows'
  },
  gridTemplateAreas: {
    property: 'gridTemplateAreas'
  },
  gridAutoFlow: {
    property: 'gridAutoFlow'
  },
  gap: {
    property: 'gap',
    scale: 'spacing'
  },
  rowGap: {
    property: 'rowGap',
    scale: 'spacing'
  },
  columnGap: {
    property: 'columnGap',
    scale: 'spacing'
  }
}, alignments), gridItems);
export var background = {
  background: {
    property: 'background'
  },
  backgroundImage: {
    property: 'backgroundImage'
  },
  backgroundSize: {
    property: 'backgroundSize'
  },
  backgroundRepeat: {
    property: 'backgroundRepeat'
  },
  backgroundPosition: {
    property: 'backgroundPosition'
  }
};
export var positioning = {
  position: {
    property: 'position'
  },
  inset: {
    property: 'inset',
    properties: ['top', 'right', 'bottom', 'left'],
    transform: transformSize
  },
  top: {
    property: 'top',
    transform: transformSize
  },
  right: {
    property: 'right',
    transform: transformSize
  },
  bottom: {
    property: 'bottom',
    transform: transformSize
  },
  left: {
    property: 'left',
    transform: transformSize
  },
  zIndex: {
    property: 'zIndex'
  },
  opacity: {
    property: 'opacity'
  }
};
export var shadows = {
  boxShadow: {
    property: 'boxShadow'
  },
  textShadow: {
    property: 'textShadow'
  }
};
export var layout = _objectSpread(_objectSpread(_objectSpread({
  display: {
    property: 'display'
  },
  overflow: {
    property: 'overflow'
  },
  overflowX: {
    property: 'overflowX'
  },
  overflowY: {
    property: 'overflowY'
  },
  dimensions: {
    property: 'width',
    properties: ['width', 'height'],
    transform: transformSize
  },
  width: {
    property: 'width',
    transform: transformSize
  },
  minWidth: {
    property: 'minWidth',
    transform: transformSize
  },
  maxWidth: {
    property: 'maxWidth',
    transform: transformSize
  },
  height: {
    property: 'height',
    transform: transformSize
  },
  minHeight: {
    property: 'minHeight',
    transform: transformSize
  },
  maxHeight: {
    property: 'maxHeight',
    transform: transformSize
  },
  verticalAlign: {
    property: 'verticalAlign'
  }
}, selfAlignments), gridItems), flexItems);
export var list = {
  listStyle: {
    property: 'listStyle'
  },
  listStyleType: {
    property: 'listStyleType'
  },
  listStylePosition: {
    property: 'listStylePosition'
  },
  listStyleImage: {
    property: 'listStyleImage'
  }
};
export var typography = {
  fontFamily: {
    property: 'fontFamily',
    scale: 'fontFamily'
  },
  fontWeight: {
    property: 'fontWeight',
    scale: 'fontWeight'
  },
  lineHeight: {
    property: 'lineHeight',
    scale: 'lineHeight'
  },
  fontSize: {
    property: 'fontSize',
    scale: 'fontSize'
  },
  letterSpacing: {
    property: 'letterSpacing'
  },
  textAlign: {
    property: 'textAlign'
  },
  fontStyle: {
    property: 'fontStyle'
  },
  textDecoration: {
    property: 'textDecoration'
  },
  textTransform: {
    property: 'textTransform'
  },
  whiteSpace: {
    property: 'whiteSpace'
  }
};
export var margin = {
  m: {
    property: 'margin',
    scale: 'spacing'
  },
  mx: {
    property: 'margin',
    properties: ['marginLeft', 'marginRight'],
    scale: 'spacing'
  },
  my: {
    property: 'margin',
    properties: ['marginTop', 'marginBottom'],
    scale: 'spacing'
  },
  mt: {
    property: 'marginTop',
    scale: 'spacing'
  },
  mb: {
    property: 'marginBottom',
    scale: 'spacing'
  },
  mr: {
    property: 'marginRight',
    scale: 'spacing'
  },
  ml: {
    property: 'marginLeft',
    scale: 'spacing'
  }
};
export var padding = {
  p: {
    property: 'padding',
    scale: 'spacing'
  },
  px: {
    property: 'padding',
    properties: ['paddingLeft', 'paddingRight'],
    scale: 'spacing'
  },
  py: {
    property: 'padding',
    properties: ['paddingTop', 'paddingBottom'],
    scale: 'spacing'
  },
  pt: {
    property: 'paddingTop',
    scale: 'spacing'
  },
  pb: {
    property: 'paddingBottom',
    scale: 'spacing'
  },
  pr: {
    property: 'paddingRight',
    scale: 'spacing'
  },
  pl: {
    property: 'paddingLeft',
    scale: 'spacing'
  }
};
export var space = _objectSpread(_objectSpread({}, margin), padding);
export var all = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, typography), space), shadows), grid), flex), layout), positioning), border), background), color), list);