@atlaskit/primitives 0.5.0 → 0.7.0

package/dist/cjs/components/internal/base-box.partial.js

@@ -1,843 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BaseBox = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-var _constants = require("../../constants");
-var _responsive = require("../../helpers/responsive");
-var _types = require("./types");
-var _utils = require("./utils");
-var _excluded = ["as", "className", "children", "color", "backgroundColor", "shadow", "borderStyle", "borderWidth", "borderRadius", "borderColor", "layer", "flex", "flexGrow", "flexShrink", "alignSelf", "overflow", "overflowInline", "overflowBlock", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "height", "width", "display", "position", "style", "testId"];
-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) { (0, _defineProperty2.default)(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; }
-var responsiveRules = _types.BOX_RESPONSIVE_PROPS.reduce(function (mapping, cssProperty) {
-  return Object.assign(mapping, (0, _defineProperty2.default)({}, cssProperty, _objectSpread({
-    static: (0, _react2.css)((0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-static-".concat(cssProperty, ")")))
-  }, (0, _responsive.UNSAFE_buildAboveMediaQueryCSS)(function (breakpoint) {
-    return (0, _defineProperty2.default)({}, cssProperty, "var(--ds-box-responsive-".concat(cssProperty, "-").concat(breakpoint, ")"));
-  }))));
-}, {});
-var getResponsiveVars = function getResponsiveVars(propertyName, propertyValue, mapping) {
-  if ((0, _utils.isResponsiveStyleProp)(propertyValue)) {
-    return Object.keys(propertyValue).reduce(function (vars, breakpoint) {
-      return _objectSpread(_objectSpread({}, vars), {}, (0, _defineProperty2.default)({}, "--ds-box-responsive-".concat(propertyName, "-").concat(breakpoint), mapping[propertyValue[breakpoint]]));
-    }, {});
-  } else if ((0, _utils.isStaticStyleProp)(propertyValue)) {
-    return (0, _defineProperty2.default)({}, "--ds-box-static-".concat(propertyName), mapping[propertyValue]);
-  }
-};
-var getResponsiveStyles = function getResponsiveStyles(propertyName, propertyValue) {
-  (0, _tinyInvariant.default)(typeof responsiveRules[propertyName] !== 'undefined', "Responsive rules for \"".concat(propertyName, "\" have not been statically defined."));
-  if ((0, _utils.isResponsiveStyleProp)(propertyValue)) {
-    return Object.keys(propertyValue).map(function (breakpoint) {
-      return responsiveRules[propertyName][breakpoint];
-    });
-  } else if ((0, _utils.isStaticStyleProp)(propertyValue)) {
-    return responsiveRules[propertyName].static;
-  }
-};
-
-// Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
-
-/**
- * __Box__
- *
- * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
- * Renders a `div` by default.
- *
- * @internal
- */
-var BaseBox = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
-  var as = _ref3.as,
-    className = _ref3.className,
-    children = _ref3.children,
-    color = _ref3.color,
-    backgroundColor = _ref3.backgroundColor,
-    shadow = _ref3.shadow,
-    borderStyle = _ref3.borderStyle,
-    borderWidth = _ref3.borderWidth,
-    borderRadius = _ref3.borderRadius,
-    borderColor = _ref3.borderColor,
-    layer = _ref3.layer,
-    flex = _ref3.flex,
-    flexGrow = _ref3.flexGrow,
-    flexShrink = _ref3.flexShrink,
-    alignSelf = _ref3.alignSelf,
-    overflow = _ref3.overflow,
-    overflowInline = _ref3.overflowInline,
-    overflowBlock = _ref3.overflowBlock,
-    padding = _ref3.padding,
-    paddingBlock = _ref3.paddingBlock,
-    paddingBlockStart = _ref3.paddingBlockStart,
-    paddingBlockEnd = _ref3.paddingBlockEnd,
-    paddingInline = _ref3.paddingInline,
-    paddingInlineStart = _ref3.paddingInlineStart,
-    paddingInlineEnd = _ref3.paddingInlineEnd,
-    height = _ref3.height,
-    width = _ref3.width,
-    _ref3$display = _ref3.display,
-    display = _ref3$display === void 0 ? displayMap.block : _ref3$display,
-    _ref3$position = _ref3.position,
-    position = _ref3$position === void 0 ? 'static' : _ref3$position,
-    style = _ref3.style,
-    testId = _ref3.testId,
-    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-  var Component = as || 'div';
-  var inlineStyles = Object.assign({}, style, getResponsiveVars('borderWidth', borderWidth, borderWidthMap), getResponsiveVars('display', display, displayMap), getResponsiveVars('padding', padding, paddingMap), getResponsiveVars('paddingBlock', paddingBlock, paddingMap), getResponsiveVars('paddingBlockStart', paddingBlockStart, paddingMap), getResponsiveVars('paddingBlockEnd', paddingBlockEnd, paddingMap), getResponsiveVars('paddingInline', paddingInline, paddingMap), getResponsiveVars('paddingInlineStart', paddingInlineStart, paddingMap), getResponsiveVars('paddingInlineEnd', paddingInlineEnd, paddingMap));
-  var node = (0, _react2.jsx)(Component, (0, _extends2.default)({
-    style: inlineStyles,
-    ref: ref
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, htmlAttributes, {
-    className: className,
-    css: [baseStyles].concat([getResponsiveStyles('borderWidth', borderWidth), getResponsiveStyles('display', display), getResponsiveStyles('padding', padding), getResponsiveStyles('paddingBlock', paddingBlock), getResponsiveStyles('paddingBlockStart', paddingBlockStart), getResponsiveStyles('paddingBlockEnd', paddingBlockEnd), getResponsiveStyles('paddingInline', paddingInline), getResponsiveStyles('paddingInlineStart', paddingInlineStart), getResponsiveStyles('paddingInlineEnd', paddingInlineEnd)], [backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], color && textColorMap[color], flex && flexMap[flex], flexGrow && flexGrowMap[flexGrow], flexShrink && flexShrinkMap[flexShrink], alignSelf && alignSelfMap[alignSelf], overflow && overflowMap[overflow], overflowInline && overflowInlineMap[overflowInline], overflowBlock && overflowBlockMap[overflowBlock], position && positionMap[position], borderStyle && borderStyleMap[borderStyle], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]]),
-    "data-testid": testId
-  }), children);
-  return node;
-});
-exports.BaseBox = BaseBox;
-BaseBox.displayName = 'BaseBox';
-var _default = BaseBox; // <<< STYLES GO HERE >>>
-exports.default = _default;
-var borderStyleMap = {
-  none: (0, _react2.css)({
-    borderStyle: 'none'
-  }),
-  solid: (0, _react2.css)({
-    borderStyle: 'solid'
-  })
-};
-var borderWidthMap = {
-  'size.0': "var(--ds-width-0, 0)",
-  'size.050': "var(--ds-width-050, 1px)",
-  'size.100': "var(--ds-width-100, 2px)"
-};
-var borderRadiusMap = {
-  'radius.100': (0, _react2.css)({
-    borderRadius: "var(--ds-radius-200, 2px)"
-  }),
-  'radius.200': (0, _react2.css)({
-    borderRadius: "var(--ds-radius-200, 3px)"
-  }),
-  'radius.round': (0, _react2.css)({
-    borderRadius: "var(--ds-radius-round, 50%)"
-  }),
-  'radius.300': (0, _react2.css)({
-    borderRadius: "var(--ds-radius-300, 8px)"
-  }),
-  'radius.400': (0, _react2.css)({
-    borderRadius: "var(--ds-radius-400, 16px)"
-  })
-};
-var flexMap = {
-  '1': (0, _react2.css)({
-    flex: 1
-  })
-};
-var flexGrowMap = {
-  '0': (0, _react2.css)({
-    flexGrow: 0
-  }),
-  '1': (0, _react2.css)({
-    flexGrow: 1
-  })
-};
-var flexShrinkMap = {
-  '0': (0, _react2.css)({
-    flexShrink: 0
-  }),
-  '1': (0, _react2.css)({
-    flexShrink: 1
-  })
-};
-var alignSelfMap = {
-  center: (0, _react2.css)({
-    alignSelf: 'center'
-  }),
-  start: (0, _react2.css)({
-    alignSelf: 'start'
-  }),
-  stretch: (0, _react2.css)({
-    alignSelf: 'stretch'
-  }),
-  end: (0, _react2.css)({
-    alignSelf: 'end'
-  }),
-  baseline: (0, _react2.css)({
-    alignSelf: 'baseline'
-  })
-};
-var displayMap = {
-  block: 'block',
-  inline: 'inline',
-  flex: 'flex',
-  'inline-flex': 'inline-flex',
-  'inline-block': 'inline-block'
-};
-var positionMap = {
-  absolute: (0, _react2.css)({
-    position: 'absolute'
-  }),
-  fixed: (0, _react2.css)({
-    position: 'fixed'
-  }),
-  relative: (0, _react2.css)({
-    position: 'relative'
-  }),
-  static: (0, _react2.css)({
-    position: 'static'
-  })
-};
-var overflowMap = {
-  auto: (0, _react2.css)({
-    overflow: 'auto'
-  }),
-  hidden: (0, _react2.css)({
-    overflow: 'hidden'
-  })
-};
-var overflowInlineMap = {
-  auto: (0, _react2.css)({
-    overflowInline: 'auto'
-  }),
-  hidden: (0, _react2.css)({
-    overflowInline: 'hidden'
-  })
-};
-var overflowBlockMap = {
-  auto: (0, _react2.css)({
-    overflowBlock: 'auto'
-  }),
-  hidden: (0, _react2.css)({
-    overflowBlock: 'hidden'
-  })
-};
-var baseStyles = (0, _react2.css)({
-  boxSizing: 'border-box',
-  appearance: 'none',
-  border: 'none'
-});
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::50178e05b73e6c8ed21bfbc8e6d87a13>>
- * @codegenId dimensions
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight"]
- */
-var widthMap = {
-  '100%': (0, _react2.css)({
-    width: '100%'
-  }),
-  'size.100': (0, _react2.css)({
-    width: '16px'
-  }),
-  'size.200': (0, _react2.css)({
-    width: '24px'
-  }),
-  'size.300': (0, _react2.css)({
-    width: '32px'
-  }),
-  'size.400': (0, _react2.css)({
-    width: '40px'
-  }),
-  'size.500': (0, _react2.css)({
-    width: '48px'
-  }),
-  'size.600': (0, _react2.css)({
-    width: '96px'
-  }),
-  'size.1000': (0, _react2.css)({
-    width: '192px'
-  })
-};
-var heightMap = {
-  '100%': (0, _react2.css)({
-    height: '100%'
-  }),
-  'size.100': (0, _react2.css)({
-    height: '16px'
-  }),
-  'size.200': (0, _react2.css)({
-    height: '24px'
-  }),
-  'size.300': (0, _react2.css)({
-    height: '32px'
-  }),
-  'size.400': (0, _react2.css)({
-    height: '40px'
-  }),
-  'size.500': (0, _react2.css)({
-    height: '48px'
-  }),
-  'size.600': (0, _react2.css)({
-    height: '96px'
-  }),
-  'size.1000': (0, _react2.css)({
-    height: '192px'
-  })
-};
-var minWidthMap = {
-  '100%': (0, _react2.css)({
-    minWidth: '100%'
-  }),
-  'size.100': (0, _react2.css)({
-    minWidth: '16px'
-  }),
-  'size.200': (0, _react2.css)({
-    minWidth: '24px'
-  }),
-  'size.300': (0, _react2.css)({
-    minWidth: '32px'
-  }),
-  'size.400': (0, _react2.css)({
-    minWidth: '40px'
-  }),
-  'size.500': (0, _react2.css)({
-    minWidth: '48px'
-  }),
-  'size.600': (0, _react2.css)({
-    minWidth: '96px'
-  }),
-  'size.1000': (0, _react2.css)({
-    minWidth: '192px'
-  })
-};
-var maxWidthMap = {
-  '100%': (0, _react2.css)({
-    maxWidth: '100%'
-  }),
-  'size.100': (0, _react2.css)({
-    maxWidth: '16px'
-  }),
-  'size.200': (0, _react2.css)({
-    maxWidth: '24px'
-  }),
-  'size.300': (0, _react2.css)({
-    maxWidth: '32px'
-  }),
-  'size.400': (0, _react2.css)({
-    maxWidth: '40px'
-  }),
-  'size.500': (0, _react2.css)({
-    maxWidth: '48px'
-  }),
-  'size.600': (0, _react2.css)({
-    maxWidth: '96px'
-  }),
-  'size.1000': (0, _react2.css)({
-    maxWidth: '192px'
-  })
-};
-var minHeightMap = {
-  '100%': (0, _react2.css)({
-    minHeight: '100%'
-  }),
-  'size.100': (0, _react2.css)({
-    minHeight: '16px'
-  }),
-  'size.200': (0, _react2.css)({
-    minHeight: '24px'
-  }),
-  'size.300': (0, _react2.css)({
-    minHeight: '32px'
-  }),
-  'size.400': (0, _react2.css)({
-    minHeight: '40px'
-  }),
-  'size.500': (0, _react2.css)({
-    minHeight: '48px'
-  }),
-  'size.600': (0, _react2.css)({
-    minHeight: '96px'
-  }),
-  'size.1000': (0, _react2.css)({
-    minHeight: '192px'
-  })
-};
-var maxHeightMap = {
-  '100%': (0, _react2.css)({
-    maxHeight: '100%'
-  }),
-  'size.100': (0, _react2.css)({
-    maxHeight: '16px'
-  }),
-  'size.200': (0, _react2.css)({
-    maxHeight: '24px'
-  }),
-  'size.300': (0, _react2.css)({
-    maxHeight: '32px'
-  }),
-  'size.400': (0, _react2.css)({
-    maxHeight: '40px'
-  }),
-  'size.500': (0, _react2.css)({
-    maxHeight: '48px'
-  }),
-  'size.600': (0, _react2.css)({
-    maxHeight: '96px'
-  }),
-  'size.1000': (0, _react2.css)({
-    maxHeight: '192px'
-  })
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::84fd352b0e6509d380a0dcf8ad023ca2>>
- * @codegenId spacing
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding"]
- * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
- */
-var paddingMap = {
-  'space.0': "var(--ds-space-0, 0px)",
-  'space.025': "var(--ds-space-025, 2px)",
-  'space.050': "var(--ds-space-050, 4px)",
-  'space.075': "var(--ds-space-075, 6px)",
-  'space.100': "var(--ds-space-100, 8px)",
-  'space.150': "var(--ds-space-150, 12px)",
-  'space.200': "var(--ds-space-200, 16px)",
-  'space.250': "var(--ds-space-250, 20px)",
-  'space.300': "var(--ds-space-300, 24px)",
-  'space.400': "var(--ds-space-400, 32px)",
-  'space.500': "var(--ds-space-500, 40px)",
-  'space.600': "var(--ds-space-600, 48px)",
-  'space.800': "var(--ds-space-800, 64px)",
-  'space.1000': "var(--ds-space-1000, 80px)"
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1e77e4e502cd4d951550637bdce2f3ca>>
- * @codegenId colors
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow", "text"]
- * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
- */
-var borderColorMap = {
-  'color.border': (0, _react2.css)({
-    borderColor: "var(--ds-border, #091e4221)"
-  }),
-  'accent.red': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-red, #FF5630)"
-  }),
-  'accent.orange': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-orange, #D94008)"
-  }),
-  'accent.yellow': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-yellow, #FFAB00)"
-  }),
-  'accent.green': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-green, #36B37E)"
-  }),
-  'accent.teal': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-teal, #00B8D9)"
-  }),
-  'accent.blue': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-blue, #0065FF)"
-  }),
-  'accent.purple': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-purple, #6554C0)"
-  }),
-  'accent.magenta': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-magenta, #CD519D)"
-  }),
-  'accent.gray': (0, _react2.css)({
-    borderColor: "var(--ds-border-accent-gray, #5E6C84)"
-  }),
-  disabled: (0, _react2.css)({
-    borderColor: "var(--ds-border-disabled, #FAFBFC)"
-  }),
-  focused: (0, _react2.css)({
-    borderColor: "var(--ds-border-focused, #4C9AFF)"
-  }),
-  input: (0, _react2.css)({
-    borderColor: "var(--ds-border-input, #FAFBFC)"
-  }),
-  inverse: (0, _react2.css)({
-    borderColor: "var(--ds-border-inverse, #FFFFFF)"
-  }),
-  selected: (0, _react2.css)({
-    borderColor: "var(--ds-border-selected, #0052CC)"
-  }),
-  brand: (0, _react2.css)({
-    borderColor: "var(--ds-border-brand, #0052CC)"
-  }),
-  danger: (0, _react2.css)({
-    borderColor: "var(--ds-border-danger, #FF5630)"
-  }),
-  warning: (0, _react2.css)({
-    borderColor: "var(--ds-border-warning, #FFC400)"
-  }),
-  success: (0, _react2.css)({
-    borderColor: "var(--ds-border-success, #00875A)"
-  }),
-  discovery: (0, _react2.css)({
-    borderColor: "var(--ds-border-discovery, #998DD9)"
-  }),
-  information: (0, _react2.css)({
-    borderColor: "var(--ds-border-information, #0065FF)"
-  }),
-  bold: (0, _react2.css)({
-    borderColor: "var(--ds-border-bold, #344563)"
-  })
-};
-var backgroundColorMap = {
-  'accent.red.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-red-subtlest, #FF8F73)"
-  }),
-  'accent.red.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-red-subtler, #FF7452)"
-  }),
-  'accent.red.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-red-subtle, #DE350B)"
-  }),
-  'accent.red.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-red-bolder, #DE350B)"
-  }),
-  'accent.orange.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-orange-subtlest, #F18D13)"
-  }),
-  'accent.orange.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-orange-subtler, #B65C02)"
-  }),
-  'accent.orange.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-orange-subtle, #5F3811)"
-  }),
-  'accent.orange.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-orange-bolder, #43290F)"
-  }),
-  'accent.yellow.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFE380)"
-  }),
-  'accent.yellow.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-yellow-subtler, #FFC400)"
-  }),
-  'accent.yellow.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-yellow-subtle, #FF991F)"
-  }),
-  'accent.yellow.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-yellow-bolder, #FF991F)"
-  }),
-  'accent.green.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-green-subtlest, #79F2C0)"
-  }),
-  'accent.green.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-green-subtler, #57D9A3)"
-  }),
-  'accent.green.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-green-subtle, #00875A)"
-  }),
-  'accent.green.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-green-bolder, #00875A)"
-  }),
-  'accent.teal.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-teal-subtlest, #79E2F2)"
-  }),
-  'accent.teal.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-teal-subtler, #00C7E6)"
-  }),
-  'accent.teal.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-teal-subtle, #00A3BF)"
-  }),
-  'accent.teal.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-teal-bolder, #00A3BF)"
-  }),
-  'accent.blue.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #4C9AFF)"
-  }),
-  'accent.blue.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-blue-subtler, #2684FF)"
-  }),
-  'accent.blue.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-blue-subtle, #0052CC)"
-  }),
-  'accent.blue.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-blue-bolder, #0052CC)"
-  }),
-  'accent.purple.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-purple-subtlest, #998DD9)"
-  }),
-  'accent.purple.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-purple-subtler, #8777D9)"
-  }),
-  'accent.purple.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-purple-subtle, #5243AA)"
-  }),
-  'accent.purple.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-purple-bolder, #5243AA)"
-  }),
-  'accent.magenta.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-magenta-subtlest, #E774BB)"
-  }),
-  'accent.magenta.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-magenta-subtler, #E774BB)"
-  }),
-  'accent.magenta.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
-  }),
-  'accent.magenta.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-magenta-bolder, #E774BB)"
-  }),
-  'accent.gray.subtlest': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-gray-subtlest, #6B778C)"
-  }),
-  'accent.gray.subtler': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-gray-subtler, #5E6C84)"
-  }),
-  'accent.gray.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-gray-subtle, #42526E)"
-  }),
-  'accent.gray.bolder': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-accent-gray-bolder, #505F79)"
-  }),
-  disabled: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-disabled, #091e4289)"
-  }),
-  input: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-input, #FAFBFC)"
-  }),
-  'inverse.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
-  }),
-  neutral: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
-  }),
-  'neutral.subtle': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
-  }),
-  'neutral.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
-  }),
-  selected: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-selected, #DEEBFF)"
-  }),
-  'selected.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
-  }),
-  'brand.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
-  }),
-  danger: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-danger, #FFEBE6)"
-  }),
-  'danger.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-danger-bold, #DE350B)"
-  }),
-  warning: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-warning, #FFFAE6)"
-  }),
-  'warning.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-warning-bold, #FFAB00)"
-  }),
-  success: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-success, #E3FCEF)"
-  }),
-  'success.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-success-bold, #00875A)"
-  }),
-  discovery: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-discovery, #EAE6FF)"
-  }),
-  'discovery.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-discovery-bold, #5243AA)"
-  }),
-  information: (0, _react2.css)({
-    backgroundColor: "var(--ds-background-information, #DEEBFF)"
-  }),
-  'information.bold': (0, _react2.css)({
-    backgroundColor: "var(--ds-background-information-bold, #0052CC)"
-  }),
-  'color.blanket': (0, _react2.css)({
-    backgroundColor: "var(--ds-blanket, #091e4289)"
-  }),
-  'color.blanket.selected': (0, _react2.css)({
-    backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
-  }),
-  'color.blanket.danger': (0, _react2.css)({
-    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
-  }),
-  'elevation.surface': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface, #FFFFFF)"
-  }),
-  'elevation.surface.overlay': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
-  }),
-  'elevation.surface.raised': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
-  }),
-  'elevation.surface.sunken': (0, _react2.css)({
-    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
-  })
-};
-var shadowMap = {
-  overflow: (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
-  }),
-  'overflow.perimeter': (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
-  }),
-  'overflow.spread': (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
-  }),
-  overlay: (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
-  }),
-  raised: (0, _react2.css)({
-    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
-  })
-};
-var textColorMap = {
-  'color.text': (0, _react2.css)({
-    color: "var(--ds-text, #172B4D)"
-  }),
-  'accent.red': (0, _react2.css)({
-    color: "var(--ds-text-accent-red, #DE350B)"
-  }),
-  'accent.red.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-red-bolder, #BF2600)"
-  }),
-  'accent.orange': (0, _react2.css)({
-    color: "var(--ds-text-accent-orange, #F18D13)"
-  }),
-  'accent.orange.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-orange-bolder, #B65C02)"
-  }),
-  'accent.yellow': (0, _react2.css)({
-    color: "var(--ds-text-accent-yellow, #FF991F)"
-  }),
-  'accent.yellow.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-yellow-bolder, #FF8B00)"
-  }),
-  'accent.green': (0, _react2.css)({
-    color: "var(--ds-text-accent-green, #00875A)"
-  }),
-  'accent.green.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-green-bolder, #006644)"
-  }),
-  'accent.teal': (0, _react2.css)({
-    color: "var(--ds-text-accent-teal, #00A3BF)"
-  }),
-  'accent.teal.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-teal-bolder, #008DA6)"
-  }),
-  'accent.blue': (0, _react2.css)({
-    color: "var(--ds-text-accent-blue, #0052CC)"
-  }),
-  'accent.blue.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-blue-bolder, #0747A6)"
-  }),
-  'accent.purple': (0, _react2.css)({
-    color: "var(--ds-text-accent-purple, #5243AA)"
-  }),
-  'accent.purple.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-purple-bolder, #403294)"
-  }),
-  'accent.magenta': (0, _react2.css)({
-    color: "var(--ds-text-accent-magenta, #E774BB)"
-  }),
-  'accent.magenta.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-magenta-bolder, #DA62AC)"
-  }),
-  'accent.gray': (0, _react2.css)({
-    color: "var(--ds-text-accent-gray, #505F79)"
-  }),
-  'accent.gray.bolder': (0, _react2.css)({
-    color: "var(--ds-text-accent-gray-bolder, #172B4D)"
-  }),
-  disabled: (0, _react2.css)({
-    color: "var(--ds-text-disabled, #A5ADBA)"
-  }),
-  inverse: (0, _react2.css)({
-    color: "var(--ds-text-inverse, #FFFFFF)"
-  }),
-  selected: (0, _react2.css)({
-    color: "var(--ds-text-selected, #0052CC)"
-  }),
-  brand: (0, _react2.css)({
-    color: "var(--ds-text-brand, #0065FF)"
-  }),
-  danger: (0, _react2.css)({
-    color: "var(--ds-text-danger, #DE350B)"
-  }),
-  warning: (0, _react2.css)({
-    color: "var(--ds-text-warning, #974F0C)"
-  }),
-  'warning.inverse': (0, _react2.css)({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  }),
-  success: (0, _react2.css)({
-    color: "var(--ds-text-success, #006644)"
-  }),
-  discovery: (0, _react2.css)({
-    color: "var(--ds-text-discovery, #403294)"
-  }),
-  information: (0, _react2.css)({
-    color: "var(--ds-text-information, #0052CC)"
-  }),
-  subtlest: (0, _react2.css)({
-    color: "var(--ds-text-subtlest, #7A869A)"
-  }),
-  subtle: (0, _react2.css)({
-    color: "var(--ds-text-subtle, #42526E)"
-  })
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8006c040aa4392025298be138271ceae>>
- * @codegenId misc
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["layer"]
- */
-var layerMap = {
-  card: (0, _react2.css)({
-    zIndex: _constants.LAYERS['card']
-  }),
-  navigation: (0, _react2.css)({
-    zIndex: _constants.LAYERS['navigation']
-  }),
-  dialog: (0, _react2.css)({
-    zIndex: _constants.LAYERS['dialog']
-  }),
-  layer: (0, _react2.css)({
-    zIndex: _constants.LAYERS['layer']
-  }),
-  blanket: (0, _react2.css)({
-    zIndex: _constants.LAYERS['blanket']
-  }),
-  modal: (0, _react2.css)({
-    zIndex: _constants.LAYERS['modal']
-  }),
-  flag: (0, _react2.css)({
-    zIndex: _constants.LAYERS['flag']
-  }),
-  spotlight: (0, _react2.css)({
-    zIndex: _constants.LAYERS['spotlight']
-  }),
-  tooltip: (0, _react2.css)({
-    zIndex: _constants.LAYERS['tooltip']
-  })
-};
-
-/**
- * @codegenEnd
- */