@atlaskit/primitives 0.1.0 → 0.2.0

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

@@ -1,597 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import { LAYERS } from '../../constants';
-/**
- * __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 Box = /*#__PURE__*/forwardRef(({
-  children,
-  as,
-  className,
-  display = 'flex',
-  flexDirection,
-  alignItems,
-  justifyContent,
-  backgroundColor,
-  borderColor,
-  borderStyle,
-  borderWidth,
-  borderRadius,
-  shadow,
-  layer,
-  padding,
-  paddingBlock,
-  paddingInline,
-  position = 'relative',
-  height,
-  overflow,
-  width,
-  UNSAFE_style,
-  testId,
-  ...htmlAttributes
-}, ref) => {
-  const Component = as || 'div';
-  const node = jsx(Component, _extends({
-    style: UNSAFE_style,
-    ref: ref
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, htmlAttributes, {
-    className: className,
-    css: [baseStyles, display && displayMap[display], padding && paddingMap[padding], position && positionMap[position], paddingBlock && paddingBlockMap[paddingBlock], paddingInline && paddingInlineMap[paddingInline], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], backgroundColor && backgroundColorMap[backgroundColor], borderColor && borderColorMap[borderColor], borderStyle && borderStyleMap[borderStyle], borderWidth && borderWidthMap[borderWidth], borderRadius && borderRadiusMap[borderRadius], shadow && shadowMap[shadow], layer && layerMap[layer], flexDirection && flexDirectionMap[flexDirection], overflow && overflowMap[overflow], width && widthMap[width], height && heightMap[height]],
-    "data-testid": testId
-  }), children);
-  return node;
-});
-Box.displayName = 'Box';
-export default Box;
-
-// <<< STYLES GO HERE >>>
-
-const borderStyleMap = {
-  none: css({
-    borderStyle: 'none'
-  }),
-  solid: css({
-    borderStyle: 'solid'
-  }),
-  dashed: css({
-    borderStyle: 'dashed'
-  }),
-  dotted: css({
-    borderStyle: 'dotted'
-  })
-};
-const borderWidthMap = {
-  '0px': css({
-    borderWidth: '0px'
-  }),
-  '1px': css({
-    borderWidth: '1px'
-  }),
-  '2px': css({
-    borderWidth: '2px'
-  }),
-  '3px': css({
-    borderWidth: '3px'
-  })
-};
-const borderRadiusMap = {
-  normal: css({
-    borderRadius: '3px'
-  }),
-  rounded: css({
-    borderRadius: '50%'
-  }),
-  badge: css({
-    borderRadius: '8px'
-  })
-};
-
-/**
- * @experimental - this is likely to be removed
- */
-
-const flexDirectionMap = {
-  column: css({
-    flexDirection: 'column'
-  }),
-  row: css({
-    flexDirection: 'row'
-  })
-};
-
-/**
- * @experimental - this is likely to be removed
- */
-
-const flexAlignItemsMap = {
-  center: css({
-    alignItems: 'center'
-  }),
-  baseline: css({
-    alignItems: 'baseline'
-  }),
-  flexStart: css({
-    alignItems: 'flex-start'
-  }),
-  flexEnd: css({
-    alignItems: 'flex-end'
-  }),
-  start: css({
-    alignItems: 'start'
-  }),
-  end: css({
-    alignItems: 'end'
-  })
-};
-
-/**
- * @experimental - this is likely to be removed
- */
-
-const flexJustifyContentMap = {
-  center: css({
-    justifyContent: 'center'
-  }),
-  flexStart: css({
-    justifyContent: 'flex-start'
-  }),
-  flexEnd: css({
-    justifyContent: 'flex-end'
-  }),
-  start: css({
-    alignItems: 'start'
-  }),
-  end: css({
-    alignItems: 'end'
-  })
-};
-const displayMap = {
-  block: css({
-    display: 'block'
-  }),
-  inline: css({
-    display: 'inline'
-  }),
-  flex: css({
-    display: 'flex'
-  }),
-  inlineFlex: css({
-    display: 'inline-flex'
-  }),
-  inlineBlock: css({
-    display: '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 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::327e769aaa3da9422a919a0ca9490070>>
- * @codegenId dimensions
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["width", "height"]
- */
-const widthMap = {
-  '100%': css({
-    width: '100%'
-  }),
-  'size.100': css({
-    width: '16px'
-  }),
-  'size.1000': css({
-    width: '192px'
-  }),
-  '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'
-  })
-};
-const heightMap = {
-  '100%': css({
-    height: '100%'
-  }),
-  'size.100': css({
-    height: '16px'
-  }),
-  'size.1000': css({
-    height: '192px'
-  }),
-  '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'
-  })
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::bb003484c6ad12a718912942b07dbf6e>>
- * @codegenId spacing
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "paddingBlock", "paddingInline"]
- * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
- */
-const paddingMap = {
-  'space.0': css({
-    padding: "var(--ds-space-0, 0px)"
-  }),
-  'space.025': css({
-    padding: "var(--ds-space-025, 2px)"
-  }),
-  'space.050': css({
-    padding: "var(--ds-space-050, 4px)"
-  }),
-  'space.075': css({
-    padding: "var(--ds-space-075, 6px)"
-  }),
-  'space.100': css({
-    padding: "var(--ds-space-100, 8px)"
-  }),
-  'space.1000': css({
-    padding: "var(--ds-space-1000, 80px)"
-  }),
-  'space.150': css({
-    padding: "var(--ds-space-150, 12px)"
-  }),
-  'space.200': css({
-    padding: "var(--ds-space-200, 16px)"
-  }),
-  'space.250': css({
-    padding: "var(--ds-space-250, 20px)"
-  }),
-  'space.300': css({
-    padding: "var(--ds-space-300, 24px)"
-  }),
-  'space.400': css({
-    padding: "var(--ds-space-400, 32px)"
-  }),
-  'space.500': css({
-    padding: "var(--ds-space-500, 40px)"
-  }),
-  'space.600': css({
-    padding: "var(--ds-space-600, 48px)"
-  }),
-  'space.800': css({
-    padding: "var(--ds-space-800, 64px)"
-  })
-};
-const paddingBlockMap = {
-  'space.0': css({
-    paddingBlock: "var(--ds-space-0, 0px)"
-  }),
-  'space.025': css({
-    paddingBlock: "var(--ds-space-025, 2px)"
-  }),
-  'space.050': css({
-    paddingBlock: "var(--ds-space-050, 4px)"
-  }),
-  'space.075': css({
-    paddingBlock: "var(--ds-space-075, 6px)"
-  }),
-  'space.100': css({
-    paddingBlock: "var(--ds-space-100, 8px)"
-  }),
-  'space.1000': css({
-    paddingBlock: "var(--ds-space-1000, 80px)"
-  }),
-  'space.150': css({
-    paddingBlock: "var(--ds-space-150, 12px)"
-  }),
-  'space.200': css({
-    paddingBlock: "var(--ds-space-200, 16px)"
-  }),
-  'space.250': css({
-    paddingBlock: "var(--ds-space-250, 20px)"
-  }),
-  'space.300': css({
-    paddingBlock: "var(--ds-space-300, 24px)"
-  }),
-  'space.400': css({
-    paddingBlock: "var(--ds-space-400, 32px)"
-  }),
-  'space.500': css({
-    paddingBlock: "var(--ds-space-500, 40px)"
-  }),
-  'space.600': css({
-    paddingBlock: "var(--ds-space-600, 48px)"
-  }),
-  'space.800': css({
-    paddingBlock: "var(--ds-space-800, 64px)"
-  })
-};
-const paddingInlineMap = {
-  'space.0': css({
-    paddingInline: "var(--ds-space-0, 0px)"
-  }),
-  'space.025': css({
-    paddingInline: "var(--ds-space-025, 2px)"
-  }),
-  'space.050': css({
-    paddingInline: "var(--ds-space-050, 4px)"
-  }),
-  'space.075': css({
-    paddingInline: "var(--ds-space-075, 6px)"
-  }),
-  'space.100': css({
-    paddingInline: "var(--ds-space-100, 8px)"
-  }),
-  'space.1000': css({
-    paddingInline: "var(--ds-space-1000, 80px)"
-  }),
-  'space.150': css({
-    paddingInline: "var(--ds-space-150, 12px)"
-  }),
-  'space.200': css({
-    paddingInline: "var(--ds-space-200, 16px)"
-  }),
-  'space.250': css({
-    paddingInline: "var(--ds-space-250, 20px)"
-  }),
-  'space.300': css({
-    paddingInline: "var(--ds-space-300, 24px)"
-  }),
-  'space.400': css({
-    paddingInline: "var(--ds-space-400, 32px)"
-  }),
-  'space.500': css({
-    paddingInline: "var(--ds-space-500, 40px)"
-  }),
-  'space.600': css({
-    paddingInline: "var(--ds-space-600, 48px)"
-  }),
-  'space.800': css({
-    paddingInline: "var(--ds-space-800, 64px)"
-  })
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::997d215fff7bb2f824f7a0f600fe892e>>
- * @codegenId colors
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background", "shadow"]
- * @codegenDependency ../../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
- */
-const borderColorMap = {
-  'color.border': css({
-    borderColor: "var(--ds-border, #091e4221)"
-  }),
-  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 = {
-  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)"
-  })
-};
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::bacbea271b30ec7d2f61306c9a8a9e63>>
- * @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
- */