@atlaskit/primitives 12.2.6 → 13.0.0

package/dist/esm/compiled/components/grid.js

@@ -0,0 +1,120 @@
+/* grid.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./grid.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, memo } from 'react';
+var rowGapMap = {
+  'space.0': "_1p57ze3t",
+  'space.025': "_1p57v77o",
+  'space.050': "_1p571b66",
+  'space.075': "_1p5712x7",
+  'space.100': "_1p57u2gc",
+  'space.150': "_1p57utpp",
+  'space.200': "_1p57pxbi",
+  'space.250': "_1p57v47k",
+  'space.300': "_1p571ejb",
+  'space.400': "_1p57xy5q",
+  'space.500': "_1p571jfw",
+  'space.600': "_1p57oahv",
+  'space.800': "_1p57xncg",
+  'space.1000': "_1p571epz"
+};
+var columnGapMap = {
+  'space.0': "_gy1pze3t",
+  'space.025': "_gy1pv77o",
+  'space.050': "_gy1p1b66",
+  'space.075': "_gy1p12x7",
+  'space.100': "_gy1pu2gc",
+  'space.150': "_gy1putpp",
+  'space.200': "_gy1ppxbi",
+  'space.250': "_gy1pv47k",
+  'space.300': "_gy1p1ejb",
+  'space.400': "_gy1pxy5q",
+  'space.500': "_gy1p1jfw",
+  'space.600': "_gy1poahv",
+  'space.800': "_gy1pxncg",
+  'space.1000': "_gy1p1epz"
+};
+var justifyContentMap = {
+  start: "_1bahv2br",
+  center: "_1bah1h6o",
+  end: "_1bahh9n0",
+  'space-between': "_1bah1yb4",
+  'space-around': "_1bah1b1v",
+  'space-evenly': "_1bahitcz",
+  stretch: "_1bah1fhb"
+};
+var alignContentMap = {
+  start: "_ae4vv2br",
+  center: "_ae4v1h6o",
+  end: "_ae4vh9n0",
+  'space-between': "_ae4v1yb4",
+  'space-around': "_ae4v1b1v",
+  'space-evenly': "_ae4vitcz",
+  stretch: "_ae4v1fhb"
+};
+var alignItemsMap = {
+  start: "_4cvrv2br",
+  center: "_4cvr1h6o",
+  baseline: "_4cvr1q9y",
+  end: "_4cvrh9n0",
+  stretch: "_4cvr1fhb"
+};
+var baseStyles = {
+  root: "_1e0c11p5 _vchhusvi"
+};
+var gridAutoFlowMap = {
+  row: "_wij2vrvc",
+  column: "_wij21bp4",
+  dense: "_wij218l3",
+  'row dense': "_wij2j5tq",
+  'column dense': "_wij2adhi"
+};
+
+/**
+ * __Grid__
+ *
+ * `Grid` is a primitive component that implements the CSS Grid API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/grid/examples)
+ * - [Code](https://atlassian.design/components/primitives/grid/code)
+ *
+ * @example
+ * ```tsx
+ * import { Grid, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Grid gap="space.100" gridColumns="1fr 1fr">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Grid>
+ * )
+ * ```
+ */
+var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var as = _ref.as,
+    alignItems = _ref.alignItems,
+    alignContent = _ref.alignContent,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    columnGap = _ref.columnGap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    id = _ref.id,
+    role = _ref.role,
+    testId = _ref.testId,
+    autoFlow = _ref.autoFlow,
+    xcss = _ref.xcss;
+  var Component = as || 'div';
+  return /*#__PURE__*/React.createElement(Component, {
+    id: id,
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+    ,
+    className: ax([baseStyles.root, gap && columnGapMap[gap], columnGap && columnGapMap[columnGap], gap && rowGapMap[gap], rowGap && rowGapMap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow], xcss]),
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Grid.displayName = 'Grid';
+export default Grid;

package/dist/esm/compiled/components/inline.compiled.css

@@ -0,0 +1,8 @@
+
+._195g1i6y{margin-inline:var(--ds-space-negative-025,-2px)}
+._1mouze3t{margin-block:var(--ds-space-0,0)}._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}
+._lcxvglyw{pointer-events:none}
+._syazjjyb{color:var(--ds-text-subtle,#42526e)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

package/dist/esm/compiled/components/inline.js

@@ -0,0 +1,73 @@
+/* inline.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./inline.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Children, forwardRef, Fragment, memo } from 'react';
+import { cx } from '@atlaskit/css';
+import Flex from './flex';
+var styles = {
+  separator: "_syazjjyb _1mouze3t _195g1i6y _lcxvglyw _uiztglyw",
+  hug: "_16jlidpf",
+  fill: "_1bsb1osq _16jlkb7n"
+};
+var Separator = function Separator(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax([styles.separator])
+  }, children);
+};
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on CSS Flexbox that manages the horizontal layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Inline>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Inline>
+ * ```
+ *
+ */
+var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var as = _ref2.as,
+    alignInline = _ref2.alignInline,
+    _ref2$alignBlock = _ref2.alignBlock,
+    alignItems = _ref2$alignBlock === void 0 ? 'start' : _ref2$alignBlock,
+    _ref2$shouldWrap = _ref2.shouldWrap,
+    shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
+    spread = _ref2.spread,
+    grow = _ref2.grow,
+    space = _ref2.space,
+    rowSpace = _ref2.rowSpace,
+    separator = _ref2.separator,
+    xcss = _ref2.xcss,
+    testId = _ref2.testId,
+    role = _ref2.role,
+    rawChildren = _ref2.children;
+  var separatorComponent = typeof separator === 'string' ? /*#__PURE__*/React.createElement(Separator, null, separator) : separator;
+  var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: index
+    }, separator && index > 0 ? separatorComponent : null, child);
+  }) : rawChildren;
+  return /*#__PURE__*/React.createElement(Flex, {
+    as: as,
+    role: role,
+    alignItems: alignItems,
+    justifyContent: spread || alignInline,
+    direction: "row",
+    gap: space,
+    rowGap: rowSpace,
+    wrap: shouldWrap ? 'wrap' : undefined,
+    xcss: cx(grow === 'hug' && styles.hug, grow === 'fill' && styles.fill,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- TODO: We need to handle pass-through `xcss` => `xcss` here.
+    xcss),
+    testId: testId,
+    ref: ref
+  }, children);
+}));
+Inline.displayName = 'Inline';
+export default Inline;

package/dist/esm/compiled/components/internal/surface-provider.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export var SurfaceContext = /*#__PURE__*/createContext('elevation.surface');
+
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+export var useSurface = function useSurface() {
+  return useContext(SurfaceContext);
+};
+SurfaceContext.displayName = 'SurfaceProvider';

package/dist/esm/compiled/components/pressable.compiled.css

@@ -0,0 +1,13 @@
+._19itglyw{border:none}
+._80om13gf{cursor:not-allowed}
+._80omtlke{cursor:pointer}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._vchhusvi{box-sizing:border-box}
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}
+._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
+._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}

package/dist/esm/compiled/components/pressable.js

@@ -0,0 +1,77 @@
+/* pressable.tsx generated by @compiled/babel-plugin v0.32.2 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss"],
+  _excluded2 = ["className"];
+import "./pressable.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, useCallback, useContext } from 'react';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import noop from '@atlaskit/ds-lib/noop';
+import InteractionContext from '@atlaskit/interaction-context';
+var styles = {
+  root: "_vchhusvi _r06hglyw _19itglyw _80omtlke",
+  disabled: "_80om13gf",
+  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+};
+
+/**
+ * __Pressable__
+ *
+ * A primitive for building custom buttons.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/pressable/examples)
+ * - [Code](https://atlassian.design/components/primitives/pressable/code)
+ * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
+ */
+var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    isDisabled = _ref.isDisabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$onClick = _ref.onClick,
+    providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
+    interactionName = _ref.interactionName,
+    componentName = _ref.componentName,
+    analyticsContext = _ref.analyticsContext,
+    style = _ref.style,
+    testId = _ref.testId,
+    xcss = _ref.xcss,
+    htmlAttributes = _objectWithoutProperties(_ref, _excluded);
+  var interactionContext = useContext(InteractionContext);
+  var handleClick = useCallback(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  var onClick = usePlatformLeafEventHandler({
+    fn: handleClick,
+    action: 'clicked',
+    componentName: componentName || 'Pressable',
+    packageName: "@atlaskit/primitives",
+    packageVersion: "13.0.0",
+    analyticsData: analyticsContext,
+    actionSubject: 'button'
+  });
+
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error 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);
+  return /*#__PURE__*/React.createElement("button", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+    className: ax([styles.root, styles.focusRing, isDisabled && styles.disabled, xcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
+    ,
+    style: style
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    // eslint-disable-next-line react/button-has-type
+    type: type,
+    onClick: onClick,
+    disabled: isDisabled,
+    "data-testid": testId,
+    ref: ref
+  }), children);
+});
+export default Pressable;

package/dist/esm/compiled/components/stack.compiled.css

@@ -0,0 +1,3 @@
+._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._1bsb1osq{width:100%}

package/dist/esm/compiled/components/stack.js

@@ -0,0 +1,54 @@
+/* stack.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./stack.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, memo } from 'react';
+import { cx } from '@atlaskit/css';
+import Flex from './flex';
+var styles = {
+  hug: "_16jlidpf",
+  fill: "_1bsb1osq _16jlkb7n"
+};
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
+ *
+ * @example
+ * ```tsx
+ *  <Stack>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *    <Box padding="space.100" backgroundColor="neutral"></Box>
+ *  </Stack>
+ * ```
+ *
+ */
+var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var as = _ref.as,
+    alignItems = _ref.alignInline,
+    _ref$alignBlock = _ref.alignBlock,
+    alignBlock = _ref$alignBlock === void 0 ? 'stretch' : _ref$alignBlock,
+    spread = _ref.spread,
+    grow = _ref.grow,
+    space = _ref.space,
+    children = _ref.children,
+    testId = _ref.testId,
+    xcss = _ref.xcss,
+    role = _ref.role;
+  return /*#__PURE__*/React.createElement(Flex, {
+    as: as,
+    role: role,
+    gap: space,
+    direction: "column",
+    alignItems: alignItems,
+    justifyContent: spread || alignBlock,
+    xcss: cx(grow === 'hug' && styles.hug, grow === 'fill' && styles.fill,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- TODO: We need to handle pass-through `xcss` => `xcss` here.
+    xcss),
+    testId: testId,
+    ref: ref
+  }, children);
+}));
+Stack.displayName = 'Stack';
+export default Stack;

package/dist/esm/compiled/components/text.compiled.css

@@ -0,0 +1,60 @@
+._11c81doa{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._18u0idpf{margin-left:0}
+._19pkidpf{margin-top:0}
+._1e0ccj1k{display:-webkit-box}
+._1i4qfg65{overflow-wrap:anywhere}
+._1nmz9jpi{word-break:break-all}
+._1reo15vq{overflow-x:hidden}
+._2hwxidpf{margin-right:0}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._k48p8n31{font-weight:bold}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._otyridpf{margin-bottom:0}
+._sudp1e54{-webkit-box-orient:vertical}
+._syaz10m5{color:var(--ds-text-accent-purple,#5e4db2)}
+._syaz12v7{color:var(--ds-text-accent-teal-bolder,#164555)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._syaz16c2{color:var(--ds-link-pressed,#05c)}
+._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
+._syaz1dyx{color:var(--ds-text-accent-gray,#44546f)}
+._syaz1e6v{color:var(--ds-text-brand,#0c66e4)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._syaz1ik3{color:var(--ds-text-accent-lime-bolder,#37471f)}
+._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
+._syaz1q28{color:var(--ds-text-accent-orange,#a54800)}
+._syaz1qur{color:var(--ds-text-accent-magenta-bolder,#50253f)}
+._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}
+._syaz1tco{color:var(--ds-text-accent-lime,#4c6b1f)}
+._syaz1tmw{color:var(--ds-text-danger,#ae2e24)}
+._syaz1vps{color:var(--ds-text-accent-orange-bolder,#702e00)}
+._syaz1x9z{color:var(--ds-text-accent-gray-bolder,#091e42)}
+._syaz1y78{color:var(--ds-text-accent-green-bolder,#164b35)}
+._syaz2ibx{color:var(--ds-text-accent-purple-bolder,#352c63)}
+._syaz9lu1{color:var(--ds-text-accent-red,#ae2e24)}
+._syazal3n{color:var(--ds-text-warning-inverse,#172b4d)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._syaze0os{color:var(--ds-text-information,#05c)}
+._syazekll{color:var(--ds-text-accent-yellow-bolder,#533f04)}
+._syazfb2s{color:var(--ds-text-accent-yellow,#7f5f01)}
+._syazg3x0{color:var(--ds-link-visited-pressed,#352c63)}
+._syazh55r{color:var(--ds-text-accent-green,#216e4e)}
+._syazhwvp{color:var(--ds-text-accent-red-bolder,#5d1f1a)}
+._syazpnps{color:var(--ds-text-accent-blue,#05c)}
+._syazsc1o{color:var(--ds-text-accent-blue-bolder,#09326c)}
+._syazw7te{color:var(--ds-link-visited,#5e4db2)}
+._syazwx40{color:var(--ds-text-warning,#a54800)}
+._syazy73q{color:var(--ds-text-success,#216e4e)}
+._syazzjem{color:var(--ds-text-discovery,#5e4db2)}
+._y3gn1h6o{text-align:center}
+._y3gnh9n0{text-align:end}
+._y3gnv2br{text-align:start}
+._zg8l1m30{font-style:italic}

package/dist/esm/compiled/components/text.js

@@ -0,0 +1,167 @@
+/* text.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./text.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { createContext, forwardRef, useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { useSurface } from './internal/surface-provider';
+var asAllowlist = ['span', 'p', 'strong', 'em'];
+var HasTextAncestorContext = /*#__PURE__*/createContext(false);
+var useHasTextAncestor = function useHasTextAncestor() {
+  return useContext(HasTextAncestorContext);
+};
+
+/**
+ * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
+ */
+var useColor = function useColor(colorProp, hasTextAncestor) {
+  var surface = useSurface();
+
+  /*
+   * Where the color of the surface is inverted we always override the color
+   * as there is no valid choice that is not covered by the override.
+   */
+  if (surface in inverseColorMap) {
+    return inverseColorMap[surface];
+  }
+  if (colorProp === 'inherit') {
+    return undefined;
+  }
+  if (!colorProp && hasTextAncestor) {
+    return undefined;
+  }
+  return colorProp || 'color.text';
+};
+var styles = {
+  root: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1i4qfg65",
+  'as.strong': "_k48p8n31",
+  'as.em': "_zg8l1m30",
+  'textAlign.center': "_y3gn1h6o",
+  'textAlign.end': "_y3gnh9n0",
+  'textAlign.start': "_y3gnv2br",
+  truncation: "_1e0ccj1k _1reo15vq _18m915vq _sudp1e54",
+  breakAll: "_1nmz9jpi"
+};
+var fontSizeMap = {
+  medium: "_11c81oud",
+  UNSAFE_small: "_11c8qk37",
+  large: "_11c81doa",
+  small: "_11c81vlj"
+};
+var fontWeightMap = {
+  bold: "_k48pmoej",
+  medium: "_k48p1wq8",
+  regular: "_k48pi7a9",
+  semibold: "_k48p1pd9"
+};
+var textColorMap = {
+  'color.text': "_syaz1fxt",
+  'color.text.accent.lime': "_syaz1tco",
+  'color.text.accent.lime.bolder': "_syaz1ik3",
+  'color.text.accent.red': "_syaz9lu1",
+  'color.text.accent.red.bolder': "_syazhwvp",
+  'color.text.accent.orange': "_syaz1q28",
+  'color.text.accent.orange.bolder': "_syaz1vps",
+  'color.text.accent.yellow': "_syazfb2s",
+  'color.text.accent.yellow.bolder': "_syazekll",
+  'color.text.accent.green': "_syazh55r",
+  'color.text.accent.green.bolder': "_syaz1y78",
+  'color.text.accent.teal': "_syaz17qg",
+  'color.text.accent.teal.bolder': "_syaz12v7",
+  'color.text.accent.blue': "_syazpnps",
+  'color.text.accent.blue.bolder': "_syazsc1o",
+  'color.text.accent.purple': "_syaz10m5",
+  'color.text.accent.purple.bolder': "_syaz2ibx",
+  'color.text.accent.magenta': "_syaz1s8m",
+  'color.text.accent.magenta.bolder': "_syaz1qur",
+  'color.text.accent.gray': "_syaz1dyx",
+  'color.text.accent.gray.bolder': "_syaz1x9z",
+  'color.text.disabled': "_syaz1lh4",
+  'color.text.inverse': "_syaz15cr",
+  'color.text.selected': "_syazaqb7",
+  'color.text.brand': "_syaz1e6v",
+  'color.text.danger': "_syaz1tmw",
+  'color.text.warning': "_syazwx40",
+  'color.text.warning.inverse': "_syazal3n",
+  'color.text.success': "_syazy73q",
+  'color.text.discovery': "_syazzjem",
+  'color.text.information': "_syaze0os",
+  'color.text.subtlest': "_syaz131l",
+  'color.text.subtle': "_syaz1gjq",
+  'color.link': "_syaz14q2",
+  'color.link.pressed': "_syaz16c2",
+  'color.link.visited': "_syazw7te",
+  'color.link.visited.pressed': "_syazg3x0"
+};
+export var inverseColorMap = {
+  'color.background.neutral.bold': 'color.text.inverse',
+  'color.background.neutral.bold.hovered': 'color.text.inverse',
+  'color.background.neutral.bold.pressed': 'color.text.inverse',
+  'color.background.selected.bold': 'color.text.inverse',
+  'color.background.selected.bold.hovered': 'color.text.inverse',
+  'color.background.selected.bold.pressed': 'color.text.inverse',
+  'color.background.brand.bold': 'color.text.inverse',
+  'color.background.brand.bold.hovered': 'color.text.inverse',
+  'color.background.brand.bold.pressed': 'color.text.inverse',
+  'color.background.brand.boldest': 'color.text.inverse',
+  'color.background.brand.boldest.hovered': 'color.text.inverse',
+  'color.background.brand.boldest.pressed': 'color.text.inverse',
+  'color.background.danger.bold': 'color.text.inverse',
+  'color.background.danger.bold.hovered': 'color.text.inverse',
+  'color.background.danger.bold.pressed': 'color.text.inverse',
+  'color.background.warning.bold': 'color.text.warning.inverse',
+  'color.background.warning.bold.hovered': 'color.text.warning.inverse',
+  'color.background.warning.bold.pressed': 'color.text.warning.inverse',
+  'color.background.success.bold': 'color.text.inverse',
+  'color.background.success.bold.hovered': 'color.text.inverse',
+  'color.background.success.bold.pressed': 'color.text.inverse',
+  'color.background.discovery.bold': 'color.text.inverse',
+  'color.background.discovery.bold.hovered': 'color.text.inverse',
+  'color.background.discovery.bold.pressed': 'color.text.inverse',
+  'color.background.information.bold': 'color.text.inverse',
+  'color.background.information.bold.hovered': 'color.text.inverse',
+  'color.background.information.bold.pressed': 'color.text.inverse'
+};
+
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'span' : _ref$as,
+    colorProp = _ref.color,
+    align = _ref.align,
+    testId = _ref.testId,
+    id = _ref.id,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    weight = _ref.weight,
+    maxLines = _ref.maxLines,
+    children = _ref.children;
+  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
+  var hasTextAncestor = useHasTextAncestor();
+  var color = useColor(colorProp, hasTextAncestor);
+  var component = /*#__PURE__*/React.createElement(Component, {
+    id: id,
+    style: {
+      WebkitLineClamp: maxLines
+    },
+    "data-testid": testId,
+    ref: ref,
+    className: ax([styles.root, fontSizeMap[size], color && textColorMap[color], maxLines && styles.truncation, maxLines === 1 && styles.breakAll, align && styles["textAlign.".concat(align)], weight && fontWeightMap[weight], Component === 'em' && styles['as.em'], Component === 'strong' && styles['as.strong']])
+  }, children);
+  if (hasTextAncestor) {
+    // no need to re-apply context if the text is already wrapped
+    return component;
+  }
+  return /*#__PURE__*/React.createElement(HasTextAncestorContext.Provider, {
+    value: true
+  }, component);
+});
+export default Text;

package/dist/esm/compiled/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/compiled/index.js

@@ -0,0 +1,13 @@
+export { default as Box } from './components/box';
+export { default as Inline } from './components/inline';
+export { default as Stack } from './components/stack';
+export { default as Flex } from './components/flex';
+export { default as Grid } from './components/grid';
+export { default as Bleed } from './components/bleed';
+export { default as Text } from './components/text';
+export { default as Pressable } from './components/pressable';
+export { default as Anchor } from './components/anchor';
+export { media } from './responsive';
+
+// TODO: This is still not figured out from before…
+export { useSurface as UNSAFE_useSurface } from './components/internal/surface-provider';

package/dist/esm/compiled/responsive/hide.compiled.css

@@ -0,0 +1,11 @@
+
+@media (min-width:30rem){._114bglyw{display:none}}
+@media not all and (min-width:30rem){._1m0aglyw{display:none}}
+@media (min-width:48rem){._181nglyw{display:none}}
+@media not all and (min-width:48rem){._sugaglyw{display:none}}
+@media (min-width:64rem){._dm25glyw{display:none}}
+@media not all and (min-width:64rem){._1mjbglyw{display:none}}
+@media (min-width:90rem){._je3oglyw{display:none}}
+@media not all and (min-width:90rem){._liwcglyw{display:none}}
+@media (min-width:110.5rem){._1uxvglyw{display:none}}
+@media not all and (min-width:110.5rem){._14wzglyw{display:none}}