@atlaskit/primitives 0.5.0 → 0.7.0

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

@@ -1,838 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
-import { LAYERS } from '../../constants';
-import { UNSAFE_buildAboveMediaQueryCSS } from '../../helpers/responsive';
-import { BOX_RESPONSIVE_PROPS } from './types';
-import { isResponsiveStyleProp, isStaticStyleProp } from './utils';
-const responsiveRules = BOX_RESPONSIVE_PROPS.reduce((mapping, cssProperty) => {
-  return Object.assign(mapping, {
-    [cssProperty]: {
-      static: css({
-        [cssProperty]: `var(--ds-box-static-${cssProperty})`
-      }),
-      ...UNSAFE_buildAboveMediaQueryCSS(breakpoint => ({
-        [cssProperty]: `var(--ds-box-responsive-${cssProperty}-${breakpoint})`
-      }))
-    }
-  });
-}, {});
-const getResponsiveVars = (propertyName, propertyValue, mapping) => {
-  if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).reduce((vars, breakpoint) => ({
-      ...vars,
-      [`--ds-box-responsive-${propertyName}-${breakpoint}`]: mapping[propertyValue[breakpoint]]
-    }), {});
-  } else if (isStaticStyleProp(propertyValue)) {
-    return {
-      [`--ds-box-static-${propertyName}`]: mapping[propertyValue]
-    };
-  }
-};
-const getResponsiveStyles = (propertyName, propertyValue) => {
-  invariant(typeof responsiveRules[propertyName] !== 'undefined', `Responsive rules for "${propertyName}" have not been statically defined.`);
-  if (isResponsiveStyleProp(propertyValue)) {
-    return Object.keys(propertyValue).map(breakpoint => responsiveRules[propertyName][breakpoint]);
-  } else if (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
- */
-export const BaseBox = /*#__PURE__*/forwardRef(({
-  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 = displayMap.block,
-  position = 'static',
-  style,
-  testId,
-  ...htmlAttributes
-}, ref) => {
-  const Component = as || 'div';
-  const 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));
-  const node = jsx(Component, _extends({
-    style: inlineStyles,
-    ref: ref
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, htmlAttributes, {
-    className: className,
-    css: [baseStyles, ...[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;
-});
-BaseBox.displayName = 'BaseBox';
-export default BaseBox;
-
-// <<< STYLES GO HERE >>>
-
-const borderStyleMap = {
-  none: css({
-    borderStyle: 'none'
-  }),
-  solid: css({
-    borderStyle: 'solid'
-  })
-};
-const borderWidthMap = {
-  'size.0': "var(--ds-width-0, 0)",
-  'size.050': "var(--ds-width-050, 1px)",
-  'size.100': "var(--ds-width-100, 2px)"
-};
-const borderRadiusMap = {
-  'radius.100': css({
-    borderRadius: "var(--ds-radius-200, 2px)"
-  }),
-  'radius.200': css({
-    borderRadius: "var(--ds-radius-200, 3px)"
-  }),
-  'radius.round': css({
-    borderRadius: "var(--ds-radius-round, 50%)"
-  }),
-  'radius.300': css({
-    borderRadius: "var(--ds-radius-300, 8px)"
-  }),
-  'radius.400': css({
-    borderRadius: "var(--ds-radius-400, 16px)"
-  })
-};
-const flexMap = {
-  '1': css({
-    flex: 1
-  })
-};
-const flexGrowMap = {
-  '0': css({
-    flexGrow: 0
-  }),
-  '1': css({
-    flexGrow: 1
-  })
-};
-const flexShrinkMap = {
-  '0': css({
-    flexShrink: 0
-  }),
-  '1': css({
-    flexShrink: 1
-  })
-};
-const alignSelfMap = {
-  center: css({
-    alignSelf: 'center'
-  }),
-  start: css({
-    alignSelf: 'start'
-  }),
-  stretch: css({
-    alignSelf: 'stretch'
-  }),
-  end: css({
-    alignSelf: 'end'
-  }),
-  baseline: css({
-    alignSelf: 'baseline'
-  })
-};
-const displayMap = {
-  block: 'block',
-  inline: 'inline',
-  flex: 'flex',
-  'inline-flex': 'inline-flex',
-  'inline-block': 'inline-block'
-};
-const positionMap = {
-  absolute: css({
-    position: 'absolute'
-  }),
-  fixed: css({
-    position: 'fixed'
-  }),
-  relative: css({
-    position: 'relative'
-  }),
-  static: css({
-    position: 'static'
-  })
-};
-const overflowMap = {
-  auto: css({
-    overflow: 'auto'
-  }),
-  hidden: css({
-    overflow: 'hidden'
-  })
-};
-const overflowInlineMap = {
-  auto: css({
-    overflowInline: 'auto'
-  }),
-  hidden: css({
-    overflowInline: 'hidden'
-  })
-};
-const overflowBlockMap = {
-  auto: css({
-    overflowBlock: 'auto'
-  }),
-  hidden: css({
-    overflowBlock: 'hidden'
-  })
-};
-const baseStyles = 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"]
- */
-const widthMap = {
-  '100%': css({
-    width: '100%'
-  }),
-  'size.100': css({
-    width: '16px'
-  }),
-  'size.200': css({
-    width: '24px'
-  }),
-  'size.300': css({
-    width: '32px'
-  }),
-  'size.400': css({
-    width: '40px'
-  }),
-  'size.500': css({
-    width: '48px'
-  }),
-  'size.600': css({
-    width: '96px'
-  }),
-  'size.1000': css({
-    width: '192px'
-  })
-};
-const heightMap = {
-  '100%': css({
-    height: '100%'
-  }),
-  'size.100': css({
-    height: '16px'
-  }),
-  'size.200': css({
-    height: '24px'
-  }),
-  'size.300': css({
-    height: '32px'
-  }),
-  'size.400': css({
-    height: '40px'
-  }),
-  'size.500': css({
-    height: '48px'
-  }),
-  'size.600': css({
-    height: '96px'
-  }),
-  'size.1000': css({
-    height: '192px'
-  })
-};
-const minWidthMap = {
-  '100%': css({
-    minWidth: '100%'
-  }),
-  'size.100': css({
-    minWidth: '16px'
-  }),
-  'size.200': css({
-    minWidth: '24px'
-  }),
-  'size.300': css({
-    minWidth: '32px'
-  }),
-  'size.400': css({
-    minWidth: '40px'
-  }),
-  'size.500': css({
-    minWidth: '48px'
-  }),
-  'size.600': css({
-    minWidth: '96px'
-  }),
-  'size.1000': css({
-    minWidth: '192px'
-  })
-};
-const maxWidthMap = {
-  '100%': css({
-    maxWidth: '100%'
-  }),
-  'size.100': css({
-    maxWidth: '16px'
-  }),
-  'size.200': css({
-    maxWidth: '24px'
-  }),
-  'size.300': css({
-    maxWidth: '32px'
-  }),
-  'size.400': css({
-    maxWidth: '40px'
-  }),
-  'size.500': css({
-    maxWidth: '48px'
-  }),
-  'size.600': css({
-    maxWidth: '96px'
-  }),
-  'size.1000': css({
-    maxWidth: '192px'
-  })
-};
-const minHeightMap = {
-  '100%': css({
-    minHeight: '100%'
-  }),
-  'size.100': css({
-    minHeight: '16px'
-  }),
-  'size.200': css({
-    minHeight: '24px'
-  }),
-  'size.300': css({
-    minHeight: '32px'
-  }),
-  'size.400': css({
-    minHeight: '40px'
-  }),
-  'size.500': css({
-    minHeight: '48px'
-  }),
-  'size.600': css({
-    minHeight: '96px'
-  }),
-  'size.1000': css({
-    minHeight: '192px'
-  })
-};
-const maxHeightMap = {
-  '100%': css({
-    maxHeight: '100%'
-  }),
-  'size.100': css({
-    maxHeight: '16px'
-  }),
-  'size.200': css({
-    maxHeight: '24px'
-  }),
-  'size.300': css({
-    maxHeight: '32px'
-  }),
-  'size.400': css({
-    maxHeight: '40px'
-  }),
-  'size.500': css({
-    maxHeight: '48px'
-  }),
-  'size.600': css({
-    maxHeight: '96px'
-  }),
-  'size.1000': 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>>
- */
-const 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>>
- */
-const borderColorMap = {
-  'color.border': css({
-    borderColor: "var(--ds-border, #091e4221)"
-  }),
-  'accent.red': css({
-    borderColor: "var(--ds-border-accent-red, #FF5630)"
-  }),
-  'accent.orange': css({
-    borderColor: "var(--ds-border-accent-orange, #D94008)"
-  }),
-  'accent.yellow': css({
-    borderColor: "var(--ds-border-accent-yellow, #FFAB00)"
-  }),
-  'accent.green': css({
-    borderColor: "var(--ds-border-accent-green, #36B37E)"
-  }),
-  'accent.teal': css({
-    borderColor: "var(--ds-border-accent-teal, #00B8D9)"
-  }),
-  'accent.blue': css({
-    borderColor: "var(--ds-border-accent-blue, #0065FF)"
-  }),
-  'accent.purple': css({
-    borderColor: "var(--ds-border-accent-purple, #6554C0)"
-  }),
-  'accent.magenta': css({
-    borderColor: "var(--ds-border-accent-magenta, #CD519D)"
-  }),
-  'accent.gray': css({
-    borderColor: "var(--ds-border-accent-gray, #5E6C84)"
-  }),
-  disabled: css({
-    borderColor: "var(--ds-border-disabled, #FAFBFC)"
-  }),
-  focused: css({
-    borderColor: "var(--ds-border-focused, #4C9AFF)"
-  }),
-  input: css({
-    borderColor: "var(--ds-border-input, #FAFBFC)"
-  }),
-  inverse: css({
-    borderColor: "var(--ds-border-inverse, #FFFFFF)"
-  }),
-  selected: css({
-    borderColor: "var(--ds-border-selected, #0052CC)"
-  }),
-  brand: css({
-    borderColor: "var(--ds-border-brand, #0052CC)"
-  }),
-  danger: css({
-    borderColor: "var(--ds-border-danger, #FF5630)"
-  }),
-  warning: css({
-    borderColor: "var(--ds-border-warning, #FFC400)"
-  }),
-  success: css({
-    borderColor: "var(--ds-border-success, #00875A)"
-  }),
-  discovery: css({
-    borderColor: "var(--ds-border-discovery, #998DD9)"
-  }),
-  information: css({
-    borderColor: "var(--ds-border-information, #0065FF)"
-  }),
-  bold: css({
-    borderColor: "var(--ds-border-bold, #344563)"
-  })
-};
-const backgroundColorMap = {
-  'accent.red.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-red-subtlest, #FF8F73)"
-  }),
-  'accent.red.subtler': css({
-    backgroundColor: "var(--ds-background-accent-red-subtler, #FF7452)"
-  }),
-  'accent.red.subtle': css({
-    backgroundColor: "var(--ds-background-accent-red-subtle, #DE350B)"
-  }),
-  'accent.red.bolder': css({
-    backgroundColor: "var(--ds-background-accent-red-bolder, #DE350B)"
-  }),
-  'accent.orange.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-orange-subtlest, #F18D13)"
-  }),
-  'accent.orange.subtler': css({
-    backgroundColor: "var(--ds-background-accent-orange-subtler, #B65C02)"
-  }),
-  'accent.orange.subtle': css({
-    backgroundColor: "var(--ds-background-accent-orange-subtle, #5F3811)"
-  }),
-  'accent.orange.bolder': css({
-    backgroundColor: "var(--ds-background-accent-orange-bolder, #43290F)"
-  }),
-  'accent.yellow.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FFE380)"
-  }),
-  'accent.yellow.subtler': css({
-    backgroundColor: "var(--ds-background-accent-yellow-subtler, #FFC400)"
-  }),
-  'accent.yellow.subtle': css({
-    backgroundColor: "var(--ds-background-accent-yellow-subtle, #FF991F)"
-  }),
-  'accent.yellow.bolder': css({
-    backgroundColor: "var(--ds-background-accent-yellow-bolder, #FF991F)"
-  }),
-  'accent.green.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-green-subtlest, #79F2C0)"
-  }),
-  'accent.green.subtler': css({
-    backgroundColor: "var(--ds-background-accent-green-subtler, #57D9A3)"
-  }),
-  'accent.green.subtle': css({
-    backgroundColor: "var(--ds-background-accent-green-subtle, #00875A)"
-  }),
-  'accent.green.bolder': css({
-    backgroundColor: "var(--ds-background-accent-green-bolder, #00875A)"
-  }),
-  'accent.teal.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-teal-subtlest, #79E2F2)"
-  }),
-  'accent.teal.subtler': css({
-    backgroundColor: "var(--ds-background-accent-teal-subtler, #00C7E6)"
-  }),
-  'accent.teal.subtle': css({
-    backgroundColor: "var(--ds-background-accent-teal-subtle, #00A3BF)"
-  }),
-  'accent.teal.bolder': css({
-    backgroundColor: "var(--ds-background-accent-teal-bolder, #00A3BF)"
-  }),
-  'accent.blue.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-blue-subtlest, #4C9AFF)"
-  }),
-  'accent.blue.subtler': css({
-    backgroundColor: "var(--ds-background-accent-blue-subtler, #2684FF)"
-  }),
-  'accent.blue.subtle': css({
-    backgroundColor: "var(--ds-background-accent-blue-subtle, #0052CC)"
-  }),
-  'accent.blue.bolder': css({
-    backgroundColor: "var(--ds-background-accent-blue-bolder, #0052CC)"
-  }),
-  'accent.purple.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-purple-subtlest, #998DD9)"
-  }),
-  'accent.purple.subtler': css({
-    backgroundColor: "var(--ds-background-accent-purple-subtler, #8777D9)"
-  }),
-  'accent.purple.subtle': css({
-    backgroundColor: "var(--ds-background-accent-purple-subtle, #5243AA)"
-  }),
-  'accent.purple.bolder': css({
-    backgroundColor: "var(--ds-background-accent-purple-bolder, #5243AA)"
-  }),
-  'accent.magenta.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-magenta-subtlest, #E774BB)"
-  }),
-  'accent.magenta.subtler': css({
-    backgroundColor: "var(--ds-background-accent-magenta-subtler, #E774BB)"
-  }),
-  'accent.magenta.subtle': css({
-    backgroundColor: "var(--ds-background-accent-magenta-subtle, #E774BB)"
-  }),
-  'accent.magenta.bolder': css({
-    backgroundColor: "var(--ds-background-accent-magenta-bolder, #E774BB)"
-  }),
-  'accent.gray.subtlest': css({
-    backgroundColor: "var(--ds-background-accent-gray-subtlest, #6B778C)"
-  }),
-  'accent.gray.subtler': css({
-    backgroundColor: "var(--ds-background-accent-gray-subtler, #5E6C84)"
-  }),
-  'accent.gray.subtle': css({
-    backgroundColor: "var(--ds-background-accent-gray-subtle, #42526E)"
-  }),
-  'accent.gray.bolder': css({
-    backgroundColor: "var(--ds-background-accent-gray-bolder, #505F79)"
-  }),
-  disabled: css({
-    backgroundColor: "var(--ds-background-disabled, #091e4289)"
-  }),
-  input: css({
-    backgroundColor: "var(--ds-background-input, #FAFBFC)"
-  }),
-  'inverse.subtle': css({
-    backgroundColor: "var(--ds-background-inverse-subtle, #00000029)"
-  }),
-  neutral: css({
-    backgroundColor: "var(--ds-background-neutral, #DFE1E6)"
-  }),
-  'neutral.subtle': css({
-    backgroundColor: "var(--ds-background-neutral-subtle, transparent)"
-  }),
-  'neutral.bold': css({
-    backgroundColor: "var(--ds-background-neutral-bold, #42526E)"
-  }),
-  selected: css({
-    backgroundColor: "var(--ds-background-selected, #DEEBFF)"
-  }),
-  'selected.bold': css({
-    backgroundColor: "var(--ds-background-selected-bold, #0052CC)"
-  }),
-  'brand.bold': css({
-    backgroundColor: "var(--ds-background-brand-bold, #0052CC)"
-  }),
-  danger: css({
-    backgroundColor: "var(--ds-background-danger, #FFEBE6)"
-  }),
-  'danger.bold': css({
-    backgroundColor: "var(--ds-background-danger-bold, #DE350B)"
-  }),
-  warning: css({
-    backgroundColor: "var(--ds-background-warning, #FFFAE6)"
-  }),
-  'warning.bold': css({
-    backgroundColor: "var(--ds-background-warning-bold, #FFAB00)"
-  }),
-  success: css({
-    backgroundColor: "var(--ds-background-success, #E3FCEF)"
-  }),
-  'success.bold': css({
-    backgroundColor: "var(--ds-background-success-bold, #00875A)"
-  }),
-  discovery: css({
-    backgroundColor: "var(--ds-background-discovery, #EAE6FF)"
-  }),
-  'discovery.bold': css({
-    backgroundColor: "var(--ds-background-discovery-bold, #5243AA)"
-  }),
-  information: css({
-    backgroundColor: "var(--ds-background-information, #DEEBFF)"
-  }),
-  'information.bold': css({
-    backgroundColor: "var(--ds-background-information-bold, #0052CC)"
-  }),
-  'color.blanket': css({
-    backgroundColor: "var(--ds-blanket, #091e4289)"
-  }),
-  'color.blanket.selected': css({
-    backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
-  }),
-  'color.blanket.danger': css({
-    backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
-  }),
-  'elevation.surface': css({
-    backgroundColor: "var(--ds-surface, #FFFFFF)"
-  }),
-  'elevation.surface.overlay': css({
-    backgroundColor: "var(--ds-surface-overlay, #FFFFFF)"
-  }),
-  'elevation.surface.raised': css({
-    backgroundColor: "var(--ds-surface-raised, #FFFFFF)"
-  }),
-  'elevation.surface.sunken': css({
-    backgroundColor: "var(--ds-surface-sunken, #F4F5F7)"
-  })
-};
-const shadowMap = {
-  overflow: css({
-    boxShadow: "var(--ds-shadow-overflow, 0px 0px 8px #091e423f, 0px 0px 1px #091e424f)"
-  }),
-  'overflow.perimeter': css({
-    boxShadow: "var(--ds-shadow-overflow-perimeter, #091e421f)"
-  }),
-  'overflow.spread': css({
-    boxShadow: "var(--ds-shadow-overflow-spread, #091e4229)"
-  }),
-  overlay: css({
-    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091e423f, 0px 0px 1px #091e424f)"
-  }),
-  raised: css({
-    boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091e423f, 0px 0px 1px #091e4221)"
-  })
-};
-const textColorMap = {
-  'color.text': css({
-    color: "var(--ds-text, #172B4D)"
-  }),
-  'accent.red': css({
-    color: "var(--ds-text-accent-red, #DE350B)"
-  }),
-  'accent.red.bolder': css({
-    color: "var(--ds-text-accent-red-bolder, #BF2600)"
-  }),
-  'accent.orange': css({
-    color: "var(--ds-text-accent-orange, #F18D13)"
-  }),
-  'accent.orange.bolder': css({
-    color: "var(--ds-text-accent-orange-bolder, #B65C02)"
-  }),
-  'accent.yellow': css({
-    color: "var(--ds-text-accent-yellow, #FF991F)"
-  }),
-  'accent.yellow.bolder': css({
-    color: "var(--ds-text-accent-yellow-bolder, #FF8B00)"
-  }),
-  'accent.green': css({
-    color: "var(--ds-text-accent-green, #00875A)"
-  }),
-  'accent.green.bolder': css({
-    color: "var(--ds-text-accent-green-bolder, #006644)"
-  }),
-  'accent.teal': css({
-    color: "var(--ds-text-accent-teal, #00A3BF)"
-  }),
-  'accent.teal.bolder': css({
-    color: "var(--ds-text-accent-teal-bolder, #008DA6)"
-  }),
-  'accent.blue': css({
-    color: "var(--ds-text-accent-blue, #0052CC)"
-  }),
-  'accent.blue.bolder': css({
-    color: "var(--ds-text-accent-blue-bolder, #0747A6)"
-  }),
-  'accent.purple': css({
-    color: "var(--ds-text-accent-purple, #5243AA)"
-  }),
-  'accent.purple.bolder': css({
-    color: "var(--ds-text-accent-purple-bolder, #403294)"
-  }),
-  'accent.magenta': css({
-    color: "var(--ds-text-accent-magenta, #E774BB)"
-  }),
-  'accent.magenta.bolder': css({
-    color: "var(--ds-text-accent-magenta-bolder, #DA62AC)"
-  }),
-  'accent.gray': css({
-    color: "var(--ds-text-accent-gray, #505F79)"
-  }),
-  'accent.gray.bolder': css({
-    color: "var(--ds-text-accent-gray-bolder, #172B4D)"
-  }),
-  disabled: css({
-    color: "var(--ds-text-disabled, #A5ADBA)"
-  }),
-  inverse: css({
-    color: "var(--ds-text-inverse, #FFFFFF)"
-  }),
-  selected: css({
-    color: "var(--ds-text-selected, #0052CC)"
-  }),
-  brand: css({
-    color: "var(--ds-text-brand, #0065FF)"
-  }),
-  danger: css({
-    color: "var(--ds-text-danger, #DE350B)"
-  }),
-  warning: css({
-    color: "var(--ds-text-warning, #974F0C)"
-  }),
-  'warning.inverse': css({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
-  }),
-  success: css({
-    color: "var(--ds-text-success, #006644)"
-  }),
-  discovery: css({
-    color: "var(--ds-text-discovery, #403294)"
-  }),
-  information: css({
-    color: "var(--ds-text-information, #0052CC)"
-  }),
-  subtlest: css({
-    color: "var(--ds-text-subtlest, #7A869A)"
-  }),
-  subtle: 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"]
- */
-const layerMap = {
-  card: css({
-    zIndex: LAYERS['card']
-  }),
-  navigation: css({
-    zIndex: LAYERS['navigation']
-  }),
-  dialog: css({
-    zIndex: LAYERS['dialog']
-  }),
-  layer: css({
-    zIndex: LAYERS['layer']
-  }),
-  blanket: css({
-    zIndex: LAYERS['blanket']
-  }),
-  modal: css({
-    zIndex: LAYERS['modal']
-  }),
-  flag: css({
-    zIndex: LAYERS['flag']
-  }),
-  spotlight: css({
-    zIndex: LAYERS['spotlight']
-  }),
-  tooltip: css({
-    zIndex: LAYERS['tooltip']
-  })
-};
-
-/**
- * @codegenEnd
- */