@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
353 lines (349 loc) • 17.7 kB
JavaScript
/* box.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["as", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "style", "testId", "xcss"],
_excluded2 = ["className"];
import "./box.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef } from 'react';
import { SurfaceContext } from '../../utils/surface-provider';
// Can either Exclude or Extract - here we're excluding all SVG-related elements, <button> elements (handled by Pressable), and <a> elements (handled by Anchor)
// Basically just ElementType but without ComponentType, it makes sense to keep the "Type" suffix
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
var baseStyles = null;
var backgroundColorMap = {
'color.background.accent.lime.subtlest': "_bfhkm890",
'color.background.accent.lime.subtlest.hovered': "_bfhkd4y8",
'color.background.accent.lime.subtlest.pressed': "_bfhkkuup",
'color.background.accent.lime.subtler': "_bfhkz2ec",
'color.background.accent.lime.subtler.hovered': "_bfhk1gf0",
'color.background.accent.lime.subtler.pressed': "_bfhk2kxc",
'color.background.accent.lime.subtle': "_bfhkbq5w",
'color.background.accent.lime.subtle.hovered': "_bfhkfoww",
'color.background.accent.lime.subtle.pressed': "_bfhk1jbd",
'color.background.accent.lime.bolder': "_bfhktde4",
'color.background.accent.lime.bolder.hovered': "_bfhknzpa",
'color.background.accent.lime.bolder.pressed': "_bfhkh0j0",
'color.background.accent.red.subtlest': "_bfhk1vk5",
'color.background.accent.red.subtlest.hovered': "_bfhk1i6i",
'color.background.accent.red.subtlest.pressed': "_bfhknbir",
'color.background.accent.red.subtler': "_bfhk1rtt",
'color.background.accent.red.subtler.hovered': "_bfhkaffd",
'color.background.accent.red.subtler.pressed': "_bfhk1j5a",
'color.background.accent.red.subtle': "_bfhkkrt9",
'color.background.accent.red.subtle.hovered': "_bfhk1sou",
'color.background.accent.red.subtle.pressed': "_bfhk1fnn",
'color.background.accent.red.bolder': "_bfhkuibq",
'color.background.accent.red.bolder.hovered': "_bfhk100f",
'color.background.accent.red.bolder.pressed': "_bfhk1cl6",
'color.background.accent.orange.subtlest': "_bfhkf5uh",
'color.background.accent.orange.subtlest.hovered': "_bfhk19yr",
'color.background.accent.orange.subtlest.pressed': "_bfhkf90x",
'color.background.accent.orange.subtler': "_bfhk165s",
'color.background.accent.orange.subtler.hovered': "_bfhk1ei0",
'color.background.accent.orange.subtler.pressed': "_bfhkdpo3",
'color.background.accent.orange.subtle': "_bfhk1kkj",
'color.background.accent.orange.subtle.hovered': "_bfhk9mfs",
'color.background.accent.orange.subtle.pressed': "_bfhkaxpp",
'color.background.accent.orange.bolder': "_bfhk1qg1",
'color.background.accent.orange.bolder.hovered': "_bfhk12qo",
'color.background.accent.orange.bolder.pressed': "_bfhk1fyq",
'color.background.accent.yellow.subtlest': "_bfhkibhp",
'color.background.accent.yellow.subtlest.hovered': "_bfhkaetg",
'color.background.accent.yellow.subtlest.pressed': "_bfhk1o1l",
'color.background.accent.yellow.subtler': "_bfhk1773",
'color.background.accent.yellow.subtler.hovered': "_bfhk1uw7",
'color.background.accent.yellow.subtler.pressed': "_bfhk1r9w",
'color.background.accent.yellow.subtle': "_bfhk8y3s",
'color.background.accent.yellow.subtle.hovered': "_bfhk819w",
'color.background.accent.yellow.subtle.pressed': "_bfhk1jx0",
'color.background.accent.yellow.bolder': "_bfhk1vop",
'color.background.accent.yellow.bolder.hovered': "_bfhkkjqf",
'color.background.accent.yellow.bolder.pressed': "_bfhk1okt",
'color.background.accent.green.subtlest': "_bfhkn729",
'color.background.accent.green.subtlest.hovered': "_bfhk3utz",
'color.background.accent.green.subtlest.pressed': "_bfhkyfny",
'color.background.accent.green.subtler': "_bfhk1wnw",
'color.background.accent.green.subtler.hovered': "_bfhk1e2h",
'color.background.accent.green.subtler.pressed': "_bfhkybhx",
'color.background.accent.green.subtle': "_bfhk1rsu",
'color.background.accent.green.subtle.hovered': "_bfhk12e3",
'color.background.accent.green.subtle.pressed': "_bfhk1g86",
'color.background.accent.green.bolder': "_bfhk1e5c",
'color.background.accent.green.bolder.hovered': "_bfhka5yi",
'color.background.accent.green.bolder.pressed': "_bfhk1j68",
'color.background.accent.teal.subtlest': "_bfhk7xuz",
'color.background.accent.teal.subtlest.hovered': "_bfhk108c",
'color.background.accent.teal.subtlest.pressed': "_bfhk1cxp",
'color.background.accent.teal.subtler': "_bfhk1a17",
'color.background.accent.teal.subtler.hovered': "_bfhkkwwr",
'color.background.accent.teal.subtler.pressed': "_bfhk1jb0",
'color.background.accent.teal.subtle': "_bfhktdv8",
'color.background.accent.teal.subtle.hovered': "_bfhkzh8h",
'color.background.accent.teal.subtle.pressed': "_bfhk16zl",
'color.background.accent.teal.bolder': "_bfhk2c8p",
'color.background.accent.teal.bolder.hovered': "_bfhkl3ve",
'color.background.accent.teal.bolder.pressed': "_bfhktor0",
'color.background.accent.blue.subtlest': "_bfhk1s93",
'color.background.accent.blue.subtlest.hovered': "_bfhkdaj9",
'color.background.accent.blue.subtlest.pressed': "_bfhkxm0g",
'color.background.accent.blue.subtler': "_bfhk1dy8",
'color.background.accent.blue.subtler.hovered': "_bfhk815t",
'color.background.accent.blue.subtler.pressed': "_bfhkrwxf",
'color.background.accent.blue.subtle': "_bfhk115i",
'color.background.accent.blue.subtle.hovered': "_bfhk9pr4",
'color.background.accent.blue.subtle.pressed': "_bfhknpx7",
'color.background.accent.blue.bolder': "_bfhk16e3",
'color.background.accent.blue.bolder.hovered': "_bfhk1vbm",
'color.background.accent.blue.bolder.pressed': "_bfhk1xwi",
'color.background.accent.purple.subtlest': "_bfhkp2ly",
'color.background.accent.purple.subtlest.hovered': "_bfhkkca2",
'color.background.accent.purple.subtlest.pressed': "_bfhk1jbm",
'color.background.accent.purple.subtler': "_bfhk1nm4",
'color.background.accent.purple.subtler.hovered': "_bfhkattl",
'color.background.accent.purple.subtler.pressed': "_bfhk3nfk",
'color.background.accent.purple.subtle': "_bfhk18ah",
'color.background.accent.purple.subtle.hovered': "_bfhk8bp1",
'color.background.accent.purple.subtle.pressed': "_bfhk1cd2",
'color.background.accent.purple.bolder': "_bfhkya33",
'color.background.accent.purple.bolder.hovered': "_bfhk1af5",
'color.background.accent.purple.bolder.pressed': "_bfhk6cze",
'color.background.accent.magenta.subtlest': "_bfhk8tvm",
'color.background.accent.magenta.subtlest.hovered': "_bfhkr3zd",
'color.background.accent.magenta.subtlest.pressed': "_bfhk1ckf",
'color.background.accent.magenta.subtler': "_bfhkv9ra",
'color.background.accent.magenta.subtler.hovered': "_bfhk1axx",
'color.background.accent.magenta.subtler.pressed': "_bfhk42ri",
'color.background.accent.magenta.subtle': "_bfhk1mi6",
'color.background.accent.magenta.subtle.hovered': "_bfhkrwyz",
'color.background.accent.magenta.subtle.pressed': "_bfhk6c15",
'color.background.accent.magenta.bolder': "_bfhkc3uk",
'color.background.accent.magenta.bolder.hovered': "_bfhk1ok8",
'color.background.accent.magenta.bolder.pressed': "_bfhkeawv",
'color.background.accent.gray.subtlest': "_bfhkysee",
'color.background.accent.gray.subtlest.hovered': "_bfhkwejn",
'color.background.accent.gray.subtlest.pressed': "_bfhk18ut",
'color.background.accent.gray.subtler': "_bfhk7qp0",
'color.background.accent.gray.subtler.hovered': "_bfhk10ef",
'color.background.accent.gray.subtler.pressed': "_bfhk1rk9",
'color.background.accent.gray.subtle': "_bfhk18j9",
'color.background.accent.gray.subtle.hovered': "_bfhk1nv3",
'color.background.accent.gray.subtle.pressed': "_bfhkq9tj",
'color.background.accent.gray.bolder': "_bfhk1i45",
'color.background.accent.gray.bolder.hovered': "_bfhkbyip",
'color.background.accent.gray.bolder.pressed': "_bfhk1van",
'color.background.disabled': "_bfhkby5v",
'color.background.input': "_bfhk1j9a",
'color.background.input.hovered': "_bfhkl4ek",
'color.background.input.pressed': "_bfhkr01l",
'color.background.inverse.subtle': "_bfhk1vck",
'color.background.inverse.subtle.hovered': "_bfhkmpja",
'color.background.inverse.subtle.pressed': "_bfhk1gii",
'color.background.neutral': "_bfhki8nm",
'color.background.neutral.hovered': "_bfhkplhp",
'color.background.neutral.pressed': "_bfhk1gdz",
'color.background.neutral.subtle': "_bfhksm61",
'color.background.neutral.subtle.hovered': "_bfhk1dpa",
'color.background.neutral.subtle.pressed': "_bfhkfcek",
'color.background.neutral.bold': "_bfhk1aqn",
'color.background.neutral.bold.hovered': "_bfhk1ibz",
'color.background.neutral.bold.pressed': "_bfhkof27",
'color.background.selected': "_bfhk15s3",
'color.background.selected.hovered': "_bfhkufnl",
'color.background.selected.pressed': "_bfhknozp",
'color.background.selected.bold': "_bfhkjmqp",
'color.background.selected.bold.hovered': "_bfhk1q28",
'color.background.selected.bold.pressed': "_bfhk12kk",
'color.background.brand.subtlest': "_bfhk1gmr",
'color.background.brand.subtlest.hovered': "_bfhk3v15",
'color.background.brand.subtlest.pressed': "_bfhku02c",
'color.background.brand.bold': "_bfhk1856",
'color.background.brand.bold.hovered': "_bfhkhf2y",
'color.background.brand.bold.pressed': "_bfhkg6ey",
'color.background.brand.boldest': "_bfhk1o4i",
'color.background.brand.boldest.hovered': "_bfhklefx",
'color.background.brand.boldest.pressed': "_bfhk16k6",
'color.background.danger': "_bfhk1gly",
'color.background.danger.hovered': "_bfhk1yvi",
'color.background.danger.pressed': "_bfhk1r4b",
'color.background.danger.bold': "_bfhkybec",
'color.background.danger.bold.hovered': "_bfhks9hg",
'color.background.danger.bold.pressed': "_bfhk13a9",
'color.background.warning': "_bfhk1917",
'color.background.warning.hovered': "_bfhk19zu",
'color.background.warning.pressed': "_bfhkzr32",
'color.background.warning.bold': "_bfhk1kmu",
'color.background.warning.bold.hovered': "_bfhk1spp",
'color.background.warning.bold.pressed': "_bfhk4m4m",
'color.background.success': "_bfhk1y9u",
'color.background.success.hovered': "_bfhk1vfx",
'color.background.success.pressed': "_bfhk1wl5",
'color.background.success.bold': "_bfhkkcmj",
'color.background.success.bold.hovered': "_bfhky7x8",
'color.background.success.bold.pressed': "_bfhkwcbh",
'color.background.discovery': "_bfhk6vm6",
'color.background.discovery.hovered': "_bfhk12eq",
'color.background.discovery.pressed': "_bfhk18vq",
'color.background.discovery.bold': "_bfhku5tj",
'color.background.discovery.bold.hovered': "_bfhkfqeg",
'color.background.discovery.bold.pressed': "_bfhk1f1m",
'color.background.information': "_bfhk19ip",
'color.background.information.hovered': "_bfhk86z5",
'color.background.information.pressed': "_bfhk1c1j",
'color.background.information.bold': "_bfhkx4w0",
'color.background.information.bold.hovered': "_bfhkq2ii",
'color.background.information.bold.pressed': "_bfhkf89v",
'color.blanket': "_bfhk1i5c",
'color.blanket.selected': "_bfhk7wq0",
'color.blanket.danger': "_bfhkrprw",
'color.skeleton': "_bfhkizff",
'color.skeleton.subtle': "_bfhkvkf5",
'elevation.surface': "_bfhkvuon",
'elevation.surface.hovered': "_bfhk19i6",
'elevation.surface.pressed': "_bfhk13ro",
'elevation.surface.overlay': "_bfhk1bhr",
'elevation.surface.overlay.hovered': "_bfhk6o2t",
'elevation.surface.overlay.pressed': "_bfhkm8nx",
'elevation.surface.raised': "_bfhkhp5a",
'elevation.surface.raised.hovered': "_bfhk116u",
'elevation.surface.raised.pressed': "_bfhk14aj",
'elevation.surface.sunken': "_bfhkhfxm",
'utility.elevation.surface.current': "_bfhkchd4"
};
var CURRENT_SURFACE_CSS_VAR = "--ds-elevation-surface-current";
var setSurfaceTokenMap = {
'elevation.surface': "_1q1lvuon",
'elevation.surface.hovered': "_1q1l19i6",
'elevation.surface.pressed': "_1q1l13ro",
'elevation.surface.overlay': "_1q1l1bhr",
'elevation.surface.overlay.hovered': "_1q1l6o2t",
'elevation.surface.overlay.pressed': "_1q1lm8nx",
'elevation.surface.raised': "_1q1lhp5a",
'elevation.surface.raised.hovered': "_1q1l116u",
'elevation.surface.raised.pressed': "_1q1l14aj",
'elevation.surface.sunken': "_1q1lhfxm"
};
var paddingBlockStartMap = {
'space.0': "_1q51ze3t",
'space.025': "_1q51v77o",
'space.050': "_1q511b66",
'space.075': "_1q5112x7",
'space.100': "_1q51u2gc",
'space.150': "_1q51utpp",
'space.200': "_1q51pxbi",
'space.250': "_1q51v47k",
'space.300': "_1q511ejb",
'space.400': "_1q51xy5q",
'space.500': "_1q511jfw",
'space.600': "_1q51oahv",
'space.800': "_1q51xncg",
'space.1000': "_1q511epz"
};
var paddingBlockEndMap = {
'space.0': "_85i5ze3t",
'space.025': "_85i5v77o",
'space.050': "_85i51b66",
'space.075': "_85i512x7",
'space.100': "_85i5u2gc",
'space.150': "_85i5utpp",
'space.200': "_85i5pxbi",
'space.250': "_85i5v47k",
'space.300': "_85i51ejb",
'space.400': "_85i5xy5q",
'space.500': "_85i51jfw",
'space.600': "_85i5oahv",
'space.800': "_85i5xncg",
'space.1000': "_85i51epz"
};
var paddingInlineStartMap = {
'space.0': "_bozgze3t",
'space.025': "_bozgv77o",
'space.050': "_bozg1b66",
'space.075': "_bozg12x7",
'space.100': "_bozgu2gc",
'space.150': "_bozgutpp",
'space.200': "_bozgpxbi",
'space.250': "_bozgv47k",
'space.300': "_bozg1ejb",
'space.400': "_bozgxy5q",
'space.500': "_bozg1jfw",
'space.600': "_bozgoahv",
'space.800': "_bozgxncg",
'space.1000': "_bozg1epz"
};
var paddingInlineEndMap = {
'space.0': "_y4tize3t",
'space.025': "_y4tiv77o",
'space.050': "_y4ti1b66",
'space.075': "_y4ti12x7",
'space.100': "_y4tiu2gc",
'space.150': "_y4tiutpp",
'space.200': "_y4tipxbi",
'space.250': "_y4tiv47k",
'space.300': "_y4ti1ejb",
'space.400': "_y4tixy5q",
'space.500': "_y4ti1jfw",
'space.600': "_y4tioahv",
'space.800': "_y4tixncg",
'space.1000': "_y4ti1epz"
};
/**
* __Box__
*
* A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
* Renders a `div` by default.
*
* - [Examples](https://atlassian.design/components/primitives/box/examples)
* - [Code](https://atlassian.design/components/primitives/box/code)
* - [Usage](https://atlassian.design/components/primitives/box/usage)
*/
var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _ref$as = _ref.as,
Component = _ref$as === void 0 ? 'div' : _ref$as,
children = _ref.children,
backgroundColor = _ref.backgroundColor,
padding = _ref.padding,
_ref$paddingBlock = _ref.paddingBlock,
paddingBlock = _ref$paddingBlock === void 0 ? padding : _ref$paddingBlock,
_ref$paddingBlockStar = _ref.paddingBlockStart,
paddingBlockStart = _ref$paddingBlockStar === void 0 ? paddingBlock : _ref$paddingBlockStar,
_ref$paddingBlockEnd = _ref.paddingBlockEnd,
paddingBlockEnd = _ref$paddingBlockEnd === void 0 ? paddingBlock : _ref$paddingBlockEnd,
_ref$paddingInline = _ref.paddingInline,
paddingInline = _ref$paddingInline === void 0 ? padding : _ref$paddingInline,
_ref$paddingInlineSta = _ref.paddingInlineStart,
paddingInlineStart = _ref$paddingInlineSta === void 0 ? paddingInline : _ref$paddingInlineSta,
_ref$paddingInlineEnd = _ref.paddingInlineEnd,
paddingInlineEnd = _ref$paddingInlineEnd === void 0 ? paddingInline : _ref$paddingInlineEnd,
style = _ref.style,
testId = _ref.testId,
xcss = _ref.xcss,
htmlAttributes = _objectWithoutProperties(_ref, _excluded);
// This is to remove className from safeHtmlAttributes
// @ts-ignore -- not using expect since it causes issues with help-center local consumption - className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
var _spreadClass = htmlAttributes.className,
safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
var node = /*#__PURE__*/React.createElement(Component, _extends({
style: style
// @ts-ignore -- Expression produces a union type that is too complex to represent. We may be able to narrow the type here but unsure.
,
ref: ref,
className: ax(["_19itglyw _vchhusvi _r06hglyw", backgroundColor && backgroundColorMap[backgroundColor], backgroundColor && isSurfaceToken(backgroundColor) && setSurfaceTokenMap[backgroundColor], paddingBlockStart && paddingBlockStartMap[paddingBlockStart], paddingBlockEnd && paddingBlockEndMap[paddingBlockEnd], paddingInlineStart && paddingInlineStartMap[paddingInlineStart], paddingInlineEnd && paddingInlineEndMap[paddingInlineEnd], xcss])
}, safeHtmlAttributes, {
"data-testid": testId
}), children);
if (backgroundColor) {
return /*#__PURE__*/React.createElement(SurfaceContext.Provider, {
value: backgroundColor
}, node);
}
return node;
}
// @ts-ignore This typescript error has been surpessed while locally enrolling `@atlaskit/primitives` into Jira
// The return type of `BoxComponent` does not match the return type of `forwardRef` in React 18
);
export default Box;
function isSurfaceToken(backgroundColor) {
return backgroundColor in setSurfaceTokenMap;
}