@atlaskit/primitives 12.2.7 → 13.0.0

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

@@ -0,0 +1,46 @@
+._1bah1b1v{justify-content:space-around}
+._1bah1fhb{justify-content:stretch}
+._1bah1h6o{justify-content:center}
+._1bah1yb4{justify-content:space-between}
+._1bahh9n0{justify-content:end}
+._1bahitcz{justify-content:space-evenly}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1n261q9c{flex-wrap:nowrap}
+._1p5712x7{row-gap:var(--ds-space-075,6px)}
+._1p571b66{row-gap:var(--ds-space-050,4px)}
+._1p571ejb{row-gap:var(--ds-space-300,24px)}
+._1p571epz{row-gap:var(--ds-space-1000,5pc)}
+._1p571jfw{row-gap:var(--ds-space-500,40px)}
+._1p57oahv{row-gap:var(--ds-space-600,3pc)}
+._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
+._1p57u2gc{row-gap:var(--ds-space-100,8px)}
+._1p57utpp{row-gap:var(--ds-space-150,9pt)}
+._1p57v47k{row-gap:var(--ds-space-250,20px)}
+._1p57v77o{row-gap:var(--ds-space-025,2px)}
+._1p57xncg{row-gap:var(--ds-space-800,4pc)}
+._1p57xy5q{row-gap:var(--ds-space-400,2pc)}
+._1p57ze3t{row-gap:var(--ds-space-0,0)}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._4cvr1fhb{align-items:stretch}
+._4cvr1h6o{align-items:center}
+._4cvr1q9y{align-items:baseline}
+._4cvrh9n0{align-items:end}
+._4cvrv2br{align-items:start}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
+._gy1p1b66{column-gap:var(--ds-space-050,4px)}
+._gy1p1ejb{column-gap:var(--ds-space-300,24px)}
+._gy1p1epz{column-gap:var(--ds-space-1000,5pc)}
+._gy1p1jfw{column-gap:var(--ds-space-500,40px)}
+._gy1poahv{column-gap:var(--ds-space-600,3pc)}
+._gy1ppxbi{column-gap:var(--ds-space-200,1pc)}
+._gy1pu2gc{column-gap:var(--ds-space-100,8px)}
+._gy1putpp{column-gap:var(--ds-space-150,9pt)}
+._gy1pv47k{column-gap:var(--ds-space-250,20px)}
+._gy1pv77o{column-gap:var(--ds-space-025,2px)}
+._gy1pxncg{column-gap:var(--ds-space-800,4pc)}
+._gy1pxy5q{column-gap:var(--ds-space-400,2pc)}
+._gy1pze3t{column-gap:var(--ds-space-0,0)}
+._vchhusvi{box-sizing:border-box}

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

@@ -0,0 +1,110 @@
+/* flex.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./flex.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 flexDirectionMap = {
+  column: "_2lx21bp4",
+  row: "_2lx2vrvc"
+};
+var flexWrapMap = {
+  wrap: "_1n261g80",
+  nowrap: "_1n261q9c"
+};
+var alignItemsMap = {
+  start: "_4cvrv2br",
+  center: "_4cvr1h6o",
+  baseline: "_4cvr1q9y",
+  end: "_4cvrh9n0",
+  stretch: "_4cvr1fhb"
+};
+var styles = {
+  root: "_1e0c1txw _vchhusvi"
+};
+
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'div' : _ref$as,
+    role = _ref.role,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    columnGap = _ref.columnGap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    testId = _ref.testId,
+    direction = _ref.direction,
+    wrap = _ref.wrap,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement(Component, {
+    role: role
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: ax([styles.root, gap && columnGapMap[gap], columnGap && columnGapMap[columnGap], gap && rowGapMap[gap], rowGap && rowGapMap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap], xcss]),
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Flex.displayName = 'Flex';
+export default Flex;

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

@@ -0,0 +1,54 @@
+._1bah1b1v{justify-content:space-around}
+._1bah1fhb{justify-content:stretch}
+._1bah1h6o{justify-content:center}
+._1bah1yb4{justify-content:space-between}
+._1bahh9n0{justify-content:end}
+._1bahitcz{justify-content:space-evenly}
+._1bahv2br{justify-content:start}
+._1e0c11p5{display:grid}
+._1p5712x7{row-gap:var(--ds-space-075,6px)}
+._1p571b66{row-gap:var(--ds-space-050,4px)}
+._1p571ejb{row-gap:var(--ds-space-300,24px)}
+._1p571epz{row-gap:var(--ds-space-1000,5pc)}
+._1p571jfw{row-gap:var(--ds-space-500,40px)}
+._1p57oahv{row-gap:var(--ds-space-600,3pc)}
+._1p57pxbi{row-gap:var(--ds-space-200,1pc)}
+._1p57u2gc{row-gap:var(--ds-space-100,8px)}
+._1p57utpp{row-gap:var(--ds-space-150,9pt)}
+._1p57v47k{row-gap:var(--ds-space-250,20px)}
+._1p57v77o{row-gap:var(--ds-space-025,2px)}
+._1p57xncg{row-gap:var(--ds-space-800,4pc)}
+._1p57xy5q{row-gap:var(--ds-space-400,2pc)}
+._1p57ze3t{row-gap:var(--ds-space-0,0)}
+._4cvr1fhb{align-items:stretch}
+._4cvr1h6o{align-items:center}
+._4cvr1q9y{align-items:baseline}
+._4cvrh9n0{align-items:end}
+._4cvrv2br{align-items:start}
+._ae4v1b1v{align-content:space-around}
+._ae4v1fhb{align-content:stretch}
+._ae4v1h6o{align-content:center}
+._ae4v1yb4{align-content:space-between}
+._ae4vh9n0{align-content:end}
+._ae4vitcz{align-content:space-evenly}
+._ae4vv2br{align-content:start}
+._gy1p12x7{column-gap:var(--ds-space-075,6px)}
+._gy1p1b66{column-gap:var(--ds-space-050,4px)}
+._gy1p1ejb{column-gap:var(--ds-space-300,24px)}
+._gy1p1epz{column-gap:var(--ds-space-1000,5pc)}
+._gy1p1jfw{column-gap:var(--ds-space-500,40px)}
+._gy1poahv{column-gap:var(--ds-space-600,3pc)}
+._gy1ppxbi{column-gap:var(--ds-space-200,1pc)}
+._gy1pu2gc{column-gap:var(--ds-space-100,8px)}
+._gy1putpp{column-gap:var(--ds-space-150,9pt)}
+._gy1pv47k{column-gap:var(--ds-space-250,20px)}
+._gy1pv77o{column-gap:var(--ds-space-025,2px)}
+._gy1pxncg{column-gap:var(--ds-space-800,4pc)}
+._gy1pxy5q{column-gap:var(--ds-space-400,2pc)}
+._gy1pze3t{column-gap:var(--ds-space-0,0)}
+._vchhusvi{box-sizing:border-box}
+._wij218l3{grid-auto-flow:dense}
+._wij21bp4{grid-auto-flow:column}
+._wij2adhi{grid-auto-flow:column dense}
+._wij2j5tq{grid-auto-flow:row dense}
+._wij2vrvc{grid-auto-flow:row}

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}