@atlaskit/primitives 7.0.1 → 7.0.3

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @atlaskit/primitives
 
+## 7.0.3
+
+### Patch Changes
+
+- [#110975](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110975)
+  [`c462a22b33940`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c462a22b33940) -
+  Removed type hinting for size values in the following properties in XCSS:
+
+  - blockSize
+  - height
+  - inlineSize
+  - maxBlockSize
+  - maxHeight
+  - maxInlineSize
+  - maxWidth
+  - minBlockSize
+  - minHeight
+  - minInlineSize
+  - minWidth
+  - width
+
+  These properties optionally accept size values like `width: 'size.100'`. However `size` will be
+  deprecated in the future. Therefore, the type hinting that displayed `size.XXX` has been removed
+  to discourage its usage until it is officially deprecated.
+
+  No changes in functionality have been introduced. The syntax `width: 'size.100'` remains valid for
+  now, so existing code will not be broken. However, consumers are encouraged to use hard-coded
+  values, like `width: '8px'`, instead.
+
+## 7.0.2
+
+### Patch Changes
+
+- [#110867](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110867)
+  [`dc7e72da70ef7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dc7e72da70ef7) -
+  Migrating instances of `UNSAFE_ANCHOR` primitive imports to the new safe import `Anchor`, in
+  preparation of Anchor open beta and removal of the unsafe export from `@atlaskit/primitives`
+
 ## 7.0.1
 
 ### Patch Changes

package/constellation/pressable/examples.mdx

@@ -23,25 +23,22 @@ import SectionMessage from '@atlaskit/section-message';
 	directoryName="primitives"
 />
 
-Pressable is a primitive used for building custom buttons with Atlassian Design System styling and
-built-in event tracking. It renders a `<button>` element.
-
-Only use Pressable when existing components such as [button](/components/button/examples) are
-unsuitable and unable to be customized to fit your needs.
+Pressable is a primitive for building custom buttons with Atlassian Design System styling and
+built-in event tracking. It renders a `<button>` element. Use pressable when existing
+[buttons](/components/button/examples) can't be customized to fit your needs.
 
 ## Default
 
-Pressable is unstyled by default.
+Pressable is unstyled by default, aside from basic focus styles.
 
 <Example Component={PressableDefault} packageName="@atlaskit/primitives/pressable" />
 
 ## Basic styling with XCSS
 
-Pressable can be styled using XCSS. Ensure styling indicates the interaction state using `:hover`
-and `:active` pseudo-classes. Pressable includes consistent Atlassian Design System `:focus` styles,
-so it's unnecessary to add your own.
+Pressable can be styled further using the design system styling API,
+[XCSS](/components/primitives/xcss).
 
-For more information on XCSS, see the [XCSS documentation](/components/primitives/xcss).
+Make sure styling indicates the interaction state using `:hover` and `:active` pseudo-classes.
 
 <Example Component={PressableBasic} packageName="@atlaskit/primitives/pressable" />
 
@@ -57,20 +54,26 @@ Use a combination of XCSS and other primitives for more complex designs.
 
 ## Disabled
 
-Pressable can be disabled using the `isDisabled` prop. Disabled styles should be conditionally
-applied and defined using XCSS.
+You can disable pressable buttons with the `isDisabled` prop. Disabled styles should be applied and
+defined conditionally using XCSS.
+
+Disabled buttons can cause accessibility issues (disabled elements are not in the tab order) so
+wherever possible, avoid using `isDisabled`. Instead, use validation or other techniques to show
+users how to proceed.
+
+<!-- todo: snippet for disabled a11y warnings? -->
 
 <Example Component={PressableDisabled} packageName="@atlaskit/primitives/pressable" />
 
 ## Buttons without visible labels
 
-For buttons without visible labels such as icon buttons, ensure an accessible label is still
-available by using [the visually hidden component](/components/visually-hidden/examples). This will
-render hidden text inside the button, which is preferable over the `aria-label` attribute because
-not all screen readers translate this between languages.
+For buttons without visible labels such as icon buttons, make an accessible label available using
+the [visually hidden component](/components/visually-hidden/examples). This renders hidden text
+inside the button for assistive technologies, which is preferable to an `aria-label` attribute
+because not all screen readers translate these between languages.
 
-Provide a tooltip to help sighted users understand the button's purpose rather than relying on
-iconography alone.
+Also, consider providing a [tooltip](/components/tooltip) to help sighted users understand the
+button's purpose.
 
 <Example
 	Component={PressableWithoutVisibleLabels}
@@ -80,8 +83,8 @@ iconography alone.
 
 ## HTML attributes
 
-Pressable passes through all valid HTML attributes to the underlying `<button>` element. It will
-default the `type` attribute to `button` to prevent buttons unintentionally submitting forms.
+Pressable passes all valid HTML attributes to the underlying `<button>` element. The `type`
+attribute defaults to `button` to prevent unintentionally submitting forms.
 
 <Example Component={PressableHtmlAttributes} packageName="@atlaskit/primitives/pressable" />
 

package/constellation/pressable/usage.mdx

@@ -9,10 +9,11 @@ import pressablePrimaryDont from './images/pressable-01b-dont.png';
 
 ## Usage
 
-Pressable is a button with consistent focus styles and analytics built in. Pressable works with
-design tokens to make it easy to compose Atlassian-styled clickable elements that aren't possible
-using existing [buttons](/components/button/examples), [menus](/components/menu/examples), or other
-existing design system components.
+Use pressable to make custom-styled buttons and other pressable elements. Pressable works similarly
+to an HTML `<button>`, but with Atlassian focus styles, analytics events, and styling APIs built in.
+
+For example, you could use pressable to make a colored square button that opens a color picker, or a
+basic card that shows more details when selected.
 
 ![Pressable anatomy](./images/pressable-anatomy.png)
 
@@ -23,18 +24,19 @@ existing design system components.
 3. **Accessible label:** Pressable should always include a clear label for accessibility. Use this
    to communicate the action that occurs when the button is pressed.
 
-### Use pressable when there aren't existing components that work for your experience
+### Use existing buttons and other components whenever possible
+
+Only use pressable when existing components such as [buttons](/components/button/examples) or
+[menus](/components/menu/examples) can't be customized to fit your case.
 
-Only use pressable when existing components such as
-[the button component](/components/button/examples), menus, or other existing design system
-components can't be customized to fit your case. Using existing components with safe customizations
-will prevent inconsistency as Atlassian UI evolves.
+Using [existing components](/components) with safe customizations is usually faster and keeps
+Atlassian UI more visually consistent as things change.
 
 <DoDont
 	type="do"
 	image={{
 		url: pressablePrimaryDo,
-		alt: "A set of custom buttons built with pressable that aren't possible using existing design system components",
+		alt: 'A set of custom buttons built with pressable that are not possible using existing design system components',
 	}}
 >
 	Use pressable to create buttons when there isn't an existing design system component to achieve
@@ -48,47 +50,47 @@ will prevent inconsistency as Atlassian UI evolves.
 		alt: 'A custom button build with Pressable that looks similar to Button, an existing design system component',
 	}}
 >
-	Don't use pressable in place of an element that already has a design system representation, such
-	as <a href="/components/button/examples">the button component</a>. This can cause visual and
-	behavioral inconsistencies in Atlassian products.
+	Don't use pressable to redesign elements that already exists in the Atlassian design system, such
+	as <a href="/components/button/examples">buttons</a>. This can cause visual and behavioral
+	inconsistency in products.
 </DoDont>
 
 ## Accessibility
 
 ### Use clear labels for assistive technology
 
-Pressable should always announce what action will happen once pressed.
+Pressable elements should always announce what action will happen once pressed, especially for
+elements with no visible label, such as icon buttons.
 
 ![Pressable labels](./images/pressable-labels.png)
 
-#### When no visible label is present
+Use [the visually hidden component](/components/visually-hidden/examples) to provide an accessible
+label. This will render hidden text inside the button, which is preferable over the `aria-label`
+attribute because not all screen readers translate this between languages.
 
-- Ensure an accessible label is still available by using
-  [the visually hidden component](/components/visually-hidden/examples) which will render hidden
-  text inside the button. This is preferable over the `aria-label` attribute because not all screen
-  readers translate this between languages.
-- Use [a tooltip](/components/tooltip/examples) to provide sighted users with the same information.
+Also consider [a tooltip](/components/tooltip/examples) to provide sighted users with the same
+information.
 
 ### Focus ring behavior
 
-Pressable creates buttons that are available in focus order, and provides a visual ring to clarify
-what is in focus. Adding additional focus styles is unnecessary.
+Pressable buttons are available in focus order, and include a visual ring to clarify what is in
+focus by default. Adding additional focus styles is unnecessary.
 
 ### Avoid disabling buttons
 
 Disabled buttons can cause accessibility problems. Avoid disabling buttons and
-[follow our disabled and tooltip button guidance](/components/button/usage#avoid-disabling-buttons).
+[follow our disabled button and tooltip guidance](/components/button/usage#avoid-disabling-buttons).
 
 ## Best practices
 
 ### Make it clear what can be pressed
 
-Custom buttons should be obviously interactable. Make sure they are clearly identifiable through
-styles, surrounding context, labels, or other cues.
+Custom buttons should look interactive. Make sure clickable elements are clearly identifiable
+through styles, surrounding context, labels, and other cues.
 
-### Don't use pressable for navigation
+### Use pressable for on-page actions, not navigation
 
-Pressable is meant for on-page actions such as opening modals, or submitting forms. If you're making
+Pressable is meant for on-page actions such as opening modals or submitting forms. If you're making
 something that navigates to a new page, use a component that renders a semantically correct HTML
 `<a>` element such as:
 
@@ -112,12 +114,12 @@ For example, _Change issue color to yellow_ instead of _yellow_.
 ### Follow other label and UI content guidance
 
 Follow label and content guidelines for [buttons](/components/button/usage#content-guidelines).
-Review our [general UI text guidance](/foundations/accessibility/#meaningful-text) for specific
-question.
+Review the [general UI text guidance](/foundations/accessibility/#meaningful-text) for specific
+questions.
 
 ## Related
 
-- [Counterpart anchor primitive for links](/components/primitives/button/usage)
-- Prefer to use existing components such as [buttons](/components/button/examples) or
-  [menus](/components/menu/examples) for most actions in Atlassian products
-- Pressable is built on the same API as [box](/components/primitives/box/usage)
+- Use existing components such as [buttons](/components/button/examples) or
+  [menus](/components/menu/examples) for most actions in Atlassian products.
+- Use the [anchor primitive for custom links](/components/primitives/button/usage).
+- Pressable is built on the same API as [box](/components/primitives/box/usage).

package/dist/cjs/components/anchor.js

@@ -46,7 +46,7 @@ var focusRingStyles = (0, _xcss.xcss)({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-var Anchor = function Anchor(_ref, ref) {
+var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -76,7 +76,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.1",
+    packageVersion: "7.0.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -138,5 +138,5 @@ var Anchor = function Anchor(_ref, ref) {
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-var UNSAFE_ANCHOR = /*#__PURE__*/(0, _react.forwardRef)(Anchor);
-var _default = exports.default = UNSAFE_ANCHOR;
+var Anchor = /*#__PURE__*/(0, _react.forwardRef)(AnchorNoRef);
+var _default = exports.default = Anchor;

package/dist/cjs/components/box.js

@@ -65,8 +65,26 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
-    css: [baseStyles, backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor], (0, _styleMaps.isSurfaceColorToken)(backgroundColor) && _styleMaps.surfaceColorStylesMap[backgroundColor], padding && _styleMaps.paddingStylesMap.padding[padding], paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    (0, _styleMaps.isSurfaceColorToken)(backgroundColor) && _styleMaps.surfaceColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    padding && _styleMaps.paddingStylesMap.padding[padding],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     resolvedStyles.emotion],
     "data-testid": testId
   }), children);

package/dist/cjs/components/flex.js

@@ -111,7 +111,13 @@ var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: resolvedStyles.static,
-    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    gap && _styleMaps.spaceStylesMap.gap[gap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     resolvedStyles.emotion],
     "data-testid": testId,

package/dist/cjs/components/grid.js

@@ -177,7 +177,13 @@ var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: resolvedStyles.static,
-    css: [baseStyles, gap && _styleMaps.spaceStylesMap.gap[gap], columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap], rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    gap && _styleMaps.spaceStylesMap.gap[gap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     resolvedStyles.emotion],
     "data-testid": testId,

package/dist/cjs/components/pressable.js

@@ -78,7 +78,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.1",
+    packageVersion: "7.0.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

@@ -32,7 +32,7 @@ const focusRingStyles = xcss({
 });
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-const Anchor = ({
+const AnchorNoRef = ({
   href,
   children,
   backgroundColor,
@@ -62,7 +62,7 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.1",
+    packageVersion: "7.0.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -124,5 +124,5 @@ const Anchor = ({
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-const UNSAFE_ANCHOR = /*#__PURE__*/forwardRef(Anchor);
-export default UNSAFE_ANCHOR;
+const Anchor = /*#__PURE__*/forwardRef(AnchorNoRef);
+export default Anchor;

package/dist/es2019/components/box.js

@@ -58,8 +58,26 @@ export const Box = /*#__PURE__*/forwardRef(({
     className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
-    css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    backgroundColor && backgroundColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    padding && paddingStylesMap.padding[padding],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInline && paddingStylesMap.paddingInline[paddingInline],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     resolvedStyles.emotion],
     "data-testid": testId
   }), children);

package/dist/es2019/components/flex.js

@@ -104,7 +104,13 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: resolvedStyles.static,
-    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    gap && spaceStylesMap.gap[gap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    columnGap && spaceStylesMap.columnGap[columnGap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     resolvedStyles.emotion],
     "data-testid": testId,

package/dist/es2019/components/grid.js

@@ -168,7 +168,13 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: resolvedStyles.static,
-    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    gap && spaceStylesMap.gap[gap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    columnGap && spaceStylesMap.columnGap[columnGap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     resolvedStyles.emotion],
     "data-testid": testId,

package/dist/es2019/components/pressable.js

@@ -64,7 +64,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.1",
+    packageVersion: "7.0.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/responsive/build-media-query-css.js

@@ -30,6 +30,7 @@ export const UNSAFE_buildAboveMediaQueryCSS = input => {
   return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => ({
     ...acc,
     [breakpoint]: css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       [media.above[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
     })
   }), {});
@@ -67,7 +68,7 @@ export const UNSAFE_buildBelowMediaQueryCSS = input => {
     return {
       ...acc,
       [breakpoint]: css({
-        // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+        // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         [UNSAFE_media.below[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
       })
     };

package/dist/es2019/xcss/style-maps.partial.js

@@ -531,6 +531,7 @@ const spacingProperties = [
 const getSerializedStylesMap = (cssProperty, tokenMap) => {
   return Object.keys(tokenMap).reduce((emotionSpacingMap, token) => {
     emotionSpacingMap[token] = css({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       [cssProperty]: tokenMap[token]
     });
     return emotionSpacingMap;

package/dist/es2019/xcss/xcss.js

@@ -136,6 +136,7 @@ const transformStyles = styleObj => {
 const baseXcss = style => {
   const transformedStyles = transformStyles(style);
   return {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     [uniqueSymbol]: cssEmotion(transformedStyles)
   };
 };

package/dist/esm/components/anchor.js

@@ -36,7 +36,7 @@ var focusRingStyles = xcss({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-var Anchor = function Anchor(_ref, ref) {
+var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -66,7 +66,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.1",
+    packageVersion: "7.0.3",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -128,5 +128,5 @@ var Anchor = function Anchor(_ref, ref) {
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-var UNSAFE_ANCHOR = /*#__PURE__*/forwardRef(Anchor);
-export default UNSAFE_ANCHOR;
+var Anchor = /*#__PURE__*/forwardRef(AnchorNoRef);
+export default Anchor;

package/dist/esm/components/box.js

@@ -59,8 +59,26 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: resolvedStyles.static
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, safeHtmlAttributes, {
-    css: [baseStyles, backgroundColor && backgroundColorStylesMap[backgroundColor], isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor], padding && paddingStylesMap.padding[padding], paddingBlock && paddingStylesMap.paddingBlock[paddingBlock], paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart], paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd], paddingInline && paddingStylesMap.paddingInline[paddingInline], paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart], paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    backgroundColor && backgroundColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    padding && paddingStylesMap.padding[padding],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInline && paddingStylesMap.paddingInline[paddingInline],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     resolvedStyles.emotion],
     "data-testid": testId
   }), children);

package/dist/esm/components/flex.js

@@ -104,7 +104,13 @@ var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: resolvedStyles.static,
-    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    gap && spaceStylesMap.gap[gap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    columnGap && spaceStylesMap.columnGap[columnGap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     resolvedStyles.emotion],
     "data-testid": testId,

package/dist/esm/components/grid.js

@@ -169,7 +169,13 @@ var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: resolvedStyles.static,
-    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    css: [baseStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    gap && spaceStylesMap.gap[gap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    columnGap && spaceStylesMap.columnGap[columnGap],
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     resolvedStyles.emotion],
     "data-testid": testId,

package/dist/esm/components/pressable.js

@@ -68,7 +68,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "7.0.1",
+    packageVersion: "7.0.3",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/types/components/anchor.d.ts

@@ -26,7 +26,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
      */
     analyticsContext?: Record<string, any>;
 };
-declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Anchor__
  *
@@ -40,7 +40,7 @@ declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ h
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: AnchorProps<RouterLinkConfig> & {
+declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>(props: AnchorProps<RouterLinkConfig> & {
     ref?: Ref<HTMLAnchorElement>;
-}) => ReturnType<typeof Anchor>;
-export default UNSAFE_ANCHOR;
+}) => ReturnType<typeof AnchorNoRef>;
+export default Anchor;

package/dist/types/xcss/style-maps.partial.d.ts

@@ -552,7 +552,7 @@ type MarginSpace = AllSpace | 'auto';
 type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
     backgroundColor?: BackgroundColor;
-    blockSize?: AutoComplete<Dimension>;
+    blockSize?: Dimension | string;
     borderBlockColor?: AutoComplete<BorderColor>;
     borderBlockEndColor?: AutoComplete<BorderColor>;
     borderBlockEndWidth?: BorderWidth | string;
@@ -589,8 +589,8 @@ export type TokenisedProps = {
     color?: TextColor;
     columnGap?: Space;
     gap?: Space;
-    height?: AutoComplete<Dimension>;
-    inlineSize?: AutoComplete<Dimension>;
+    height?: Dimension | string;
+    inlineSize?: Dimension | string;
     inset?: AutoComplete<AllSpace>;
     insetBlock?: AutoComplete<AllSpace>;
     insetBlockEnd?: AutoComplete<AllSpace>;
@@ -610,14 +610,14 @@ export type TokenisedProps = {
     marginLeft?: AutoComplete<MarginSpace>;
     marginRight?: AutoComplete<MarginSpace>;
     marginTop?: AutoComplete<MarginSpace>;
-    maxBlockSize?: AutoComplete<Dimension>;
-    maxHeight?: AutoComplete<Dimension>;
-    maxInlineSize?: AutoComplete<Dimension>;
-    maxWidth?: AutoComplete<Dimension>;
-    minBlockSize?: AutoComplete<Dimension>;
-    minHeight?: AutoComplete<Dimension>;
-    minInlineSize?: AutoComplete<Dimension>;
-    minWidth?: AutoComplete<Dimension>;
+    maxBlockSize?: Dimension | string;
+    maxHeight?: Dimension | string;
+    maxInlineSize?: Dimension | string;
+    maxWidth?: Dimension | string;
+    minBlockSize?: Dimension | string;
+    minHeight?: Dimension | string;
+    minInlineSize?: Dimension | string;
+    minWidth?: Dimension | string;
     opacity?: AutoComplete<Opacity> | number;
     outlineColor?: BorderColor;
     outlineOffset?: Space;
@@ -636,7 +636,7 @@ export type TokenisedProps = {
     right?: AutoComplete<AllSpace>;
     rowGap?: Space;
     top?: AutoComplete<AllSpace>;
-    width?: AutoComplete<Dimension>;
+    width?: Dimension | string;
     zIndex?: Layer;
 };
 declare const spacingProperties: readonly ["padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "gap", "rowGap", "columnGap"];

package/dist/types-ts4.5/components/anchor.d.ts

@@ -26,7 +26,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
      */
     analyticsContext?: Record<string, any>;
 };
-declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Anchor__
  *
@@ -40,7 +40,7 @@ declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ h
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: AnchorProps<RouterLinkConfig> & {
+declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>(props: AnchorProps<RouterLinkConfig> & {
     ref?: Ref<HTMLAnchorElement>;
-}) => ReturnType<typeof Anchor>;
-export default UNSAFE_ANCHOR;
+}) => ReturnType<typeof AnchorNoRef>;
+export default Anchor;

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -552,7 +552,7 @@ type MarginSpace = AllSpace | 'auto';
 type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
     backgroundColor?: BackgroundColor;
-    blockSize?: AutoComplete<Dimension>;
+    blockSize?: Dimension | string;
     borderBlockColor?: AutoComplete<BorderColor>;
     borderBlockEndColor?: AutoComplete<BorderColor>;
     borderBlockEndWidth?: BorderWidth | string;
@@ -589,8 +589,8 @@ export type TokenisedProps = {
     color?: TextColor;
     columnGap?: Space;
     gap?: Space;
-    height?: AutoComplete<Dimension>;
-    inlineSize?: AutoComplete<Dimension>;
+    height?: Dimension | string;
+    inlineSize?: Dimension | string;
     inset?: AutoComplete<AllSpace>;
     insetBlock?: AutoComplete<AllSpace>;
     insetBlockEnd?: AutoComplete<AllSpace>;
@@ -610,14 +610,14 @@ export type TokenisedProps = {
     marginLeft?: AutoComplete<MarginSpace>;
     marginRight?: AutoComplete<MarginSpace>;
     marginTop?: AutoComplete<MarginSpace>;
-    maxBlockSize?: AutoComplete<Dimension>;
-    maxHeight?: AutoComplete<Dimension>;
-    maxInlineSize?: AutoComplete<Dimension>;
-    maxWidth?: AutoComplete<Dimension>;
-    minBlockSize?: AutoComplete<Dimension>;
-    minHeight?: AutoComplete<Dimension>;
-    minInlineSize?: AutoComplete<Dimension>;
-    minWidth?: AutoComplete<Dimension>;
+    maxBlockSize?: Dimension | string;
+    maxHeight?: Dimension | string;
+    maxInlineSize?: Dimension | string;
+    maxWidth?: Dimension | string;
+    minBlockSize?: Dimension | string;
+    minHeight?: Dimension | string;
+    minInlineSize?: Dimension | string;
+    minWidth?: Dimension | string;
     opacity?: AutoComplete<Opacity> | number;
     outlineColor?: BorderColor;
     outlineOffset?: Space;
@@ -636,7 +636,7 @@ export type TokenisedProps = {
     right?: AutoComplete<AllSpace>;
     rowGap?: Space;
     top?: AutoComplete<AllSpace>;
-    width?: AutoComplete<Dimension>;
+    width?: Dimension | string;
     zIndex?: Layer;
 };
 declare const spacingProperties: readonly [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "7.0.1",
+  "version": "7.0.3",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"