@atlaskit/primitives 19.0.1 → 20.0.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @atlaskit/primitives
 
+## 20.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 19.0.2
+
+### Patch Changes
+
+- [`71fee8de88abc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71fee8de88abc) -
+  Added new design tokens to support the Lozenge / Tag / Badge visual uplift:
+
+  **15 new `color.border.*.subtle` tokens** for decorative borders that do not need to meet 3:1
+  contrast requirements:
+  - 5 semantic: `danger`, `warning`, `success`, `discovery`, `information` (no `neutral.subtle` —
+    the default `color.border` already serves this case)
+  - 10 accent: `red`, `orange`, `yellow`, `lime`, `green`, `teal`, `blue`, `purple`, `magenta`,
+    `gray`
+  - Light theme maps to Color300; dark theme maps to Color800 (DarkNeutral400 for `accent.gray`)
+
+  **5 new `color.background.*.subtle` tokens** for non-interactive elements (e.g. semantic badges,
+  status pills, callout chips):
+  - `danger`, `success`, `discovery`, `information` — light theme maps to Color300, dark theme maps
+    to Color800
+  - `warning` — light theme maps to Orange250, dark theme maps to Orange850 (different stops because
+    Orange300 is already used by `warning.bold`)
+
+  Note: `color.background.*.subtle` is intentionally non-interactive only — no `.hovered` or
+  `.pressed` variants are provided. For interactive surfaces, use `color.background.<semantic>.bold`
+  or `color.background.<semantic>.subtler` instead.
+
+- Updated dependencies
+
 ## 19.0.1
 
 ### Patch Changes

package/anchor/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/anchor.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/anchor.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/anchor.d.ts"
 }

package/bleed/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/bleed.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/bleed.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/bleed.d.ts"
 }

package/box/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/box.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/box.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/box.d.ts"
 }

package/compiled/anchor/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-anchor.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-anchor.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-anchor.d.ts"
 }

package/compiled/bleed/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-bleed.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-bleed.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-bleed.d.ts"
 }

package/compiled/box/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-box.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-box.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-box.d.ts"
 }

package/compiled/components/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../../dist/types/entry-points/compiled-components-types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../../dist/types-ts4.5/entry-points/compiled-components-types.d.ts"
-      ]
-    }
-  }
+  "types": "../../../dist/types/entry-points/compiled-components-types.d.ts"
 }

package/compiled/flex/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-flex.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-flex.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-flex.d.ts"
 }

package/compiled/focusable/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-focusable.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-focusable.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-focusable.d.ts"
 }

package/compiled/grid/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-grid.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-grid.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-grid.d.ts"
 }

package/compiled/hide/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-hide.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-hide.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-hide.d.ts"
 }

package/compiled/inline/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-inline.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-inline.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-inline.d.ts"
 }

package/compiled/media-helper/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-media-helper.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-media-helper.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-media-helper.d.ts"
 }

package/compiled/metric-text/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-metric-text.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-metric-text.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-metric-text.d.ts"
 }

package/compiled/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/compiled/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/compiled/index.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/compiled/index.d.ts"
 }

package/compiled/pressable/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-pressable.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-pressable.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-pressable.d.ts"
 }

package/compiled/show/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-show.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-show.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-show.d.ts"
 }

package/compiled/stack/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-stack.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-stack.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-stack.d.ts"
 }

package/compiled/surface-provider/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-surface-provider.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-surface-provider.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-surface-provider.d.ts"
 }

package/compiled/text/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-text.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-text.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-text.d.ts"
 }

package/compiled/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-types.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-types.d.ts"
 }

package/compiled/use-media-query/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/entry-points/compiled-use-media-query.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/entry-points/compiled-use-media-query.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/entry-points/compiled-use-media-query.d.ts"
 }

package/compiled/utils/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../../dist/types/entry-points/compiled-utils-types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../../dist/types-ts4.5/entry-points/compiled-utils-types.d.ts"
-      ]
-    }
-  }
+  "types": "../../../dist/types/entry-points/compiled-utils-types.d.ts"
 }

package/components/flex/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../../dist/types/components/flex.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/components/flex.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/components/flex.d.ts"
 }

package/constants/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/constants.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/constants.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/constants.d.ts"
 }

package/constellation/pressable/examples.mdx

@@ -31,7 +31,7 @@ built-in event tracking. It renders a `<button>` element. Use pressable when exi
 
 Pressable is unstyled by default, aside from basic focus styles.
 
-<Example Component={PressableDefault} packageName="@atlaskit/primitives/pressable" />
+<Example Component={PressableDefault} packageName="@atlaskit/primitives/compiled/pressable" />
 
 ## Basic styling
 
@@ -40,7 +40,7 @@ Pressable can be styled further using the design system styling API,
 
 Make sure styling indicates the interaction state using `:hover` and `:active` pseudo-classes.
 
-<Example Component={PressableBasic} packageName="@atlaskit/primitives/pressable" />
+<Example Component={PressableBasic} packageName="@atlaskit/primitives/compiled/pressable" />
 
 ## Advanced styling
 
@@ -48,7 +48,7 @@ Use a combination of `cssMap` and other primitives for more complex designs.
 
 <Example
 	Component={PressableStyled}
-	packageName="@atlaskit/primitives/pressable"
+	packageName="@atlaskit/primitives/compiled/pressable"
 	backgroundColor="white"
 />
 
@@ -63,7 +63,7 @@ users how to proceed.
 
 <!-- todo: snippet for disabled a11y warnings? -->
 
-<Example Component={PressableDisabled} packageName="@atlaskit/primitives/pressable" />
+<Example Component={PressableDisabled} packageName="@atlaskit/primitives/compiled/pressable" />
 
 ## Buttons without visible labels
 
@@ -77,7 +77,7 @@ button's purpose.
 
 <Example
 	Component={PressableWithoutVisibleLabels}
-	packageName="@atlaskit/primitives/pressable"
+	packageName="@atlaskit/primitives/compiled/pressable"
 	backgroundColor="white"
 />
 
@@ -86,16 +86,22 @@ button's purpose.
 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" />
+<Example
+	Component={PressableHtmlAttributes}
+	packageName="@atlaskit/primitives/compiled/pressable"
+/>
 
 <Snippet name="primitives-event-tracking-header" variables={{ componentName: 'pressable' }} />
 
-<Example Component={PressableAnalytics} packageName="@atlaskit/primitives/pressable" />
+<Example Component={PressableAnalytics} packageName="@atlaskit/primitives/compiled/pressable" />
 
 <Snippet name="primitives-event-tracking-gasv3" />
 
-<Example Component={PressableAnalyticsGASv3} packageName="@atlaskit/primitives/pressable" />
+<Example
+	Component={PressableAnalyticsGASv3}
+	packageName="@atlaskit/primitives/compiled/pressable"
+/>
 
 <Snippet name="primitives-event-tracking-ufo" variables={{ componentName: 'pressable' }} />
 
-<Example Component={PressablePressTracing} packageName="@atlaskit/primitives/pressable" />
+<Example Component={PressablePressTracing} packageName="@atlaskit/primitives/compiled/pressable" />

package/dist/cjs/compiled/components/anchor.js

@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "19.0.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/compiled/components/box.compiled.css

@@ -56,6 +56,7 @@
 ._bfhk16zl{background-color:var(--ds-background-accent-teal-subtle-pressed,#b1e4f7)}
 ._bfhk1773{background-color:var(--ds-background-accent-yellow-subtler,#f5e989)}
 ._bfhk1856{background-color:var(--ds-background-brand-bold,#1868db)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk18ah{background-color:var(--ds-background-accent-purple-subtle,#c97cf4)}
 ._bfhk18j9{background-color:var(--ds-background-accent-gray-subtle,#8c8f97)}
 ._bfhk18ut{background-color:var(--ds-background-accent-gray-subtlest-pressed,#b7b9be)}
@@ -159,7 +160,6 @@
 ._bfhkattl{background-color:var(--ds-background-accent-purple-subtler-hovered,#e3bdfa)}
 ._bfhkaxpp{background-color:var(--ds-background-accent-orange-subtle-pressed,#fbd779)}
 ._bfhkbq5w{background-color:var(--ds-background-accent-lime-subtle,#94c748)}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bfhkbyip{background-color:var(--ds-background-accent-gray-bolder-hovered,#505258)}
 ._bfhkc3uk{background-color:var(--ds-background-accent-magenta-bolder,#ae4787)}
 ._bfhkchd4{background-color:var(--ds-elevation-surface-current,#fff)}

package/dist/cjs/compiled/components/box.js

@@ -144,7 +144,7 @@ var backgroundColorMap = {
   'color.background.accent.gray.bolder': "_bfhk1i45",
   'color.background.accent.gray.bolder.hovered': "_bfhkbyip",
   'color.background.accent.gray.bolder.pressed': "_bfhk1van",
-  'color.background.disabled': "_bfhkby5v",
+  'color.background.disabled': "_bfhk187o",
   'color.background.input': "_bfhk1j9a",
   'color.background.input.hovered': "_bfhkl4ek",
   'color.background.input.pressed': "_bfhkr01l",

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

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

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

@@ -169,4 +169,6 @@ var Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     value: true
   }, component);
 });
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = Text;

package/dist/cjs/components/anchor.js

@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "0.0.0-development",
+    packageVersion: "19.0.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/box.js

@@ -94,6 +94,8 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
 // @ts-ignore This typescript error has been surpessed while locally enrolling `@atlaskit/primitives` into Jira
 // The return type of `BoxComponent` does not match the return type of `forwardRef` in React 18
 );
+
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var _default = exports.default = Box;
 var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',

package/dist/cjs/components/pressable.js

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

package/dist/cjs/responsive/constants.js

@@ -65,6 +65,7 @@ var UNSAFE_BREAKPOINTS_CONFIG = exports.UNSAFE_BREAKPOINTS_CONFIG = {
  *
  * @experimental Unsafe for consumption outside of the design system itself.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_ORDERED_LIST = Object.keys(UNSAFE_BREAKPOINTS_CONFIG);
 
 /**
@@ -72,4 +73,5 @@ var UNSAFE_BREAKPOINTS_ORDERED_LIST = exports.UNSAFE_BREAKPOINTS_ORDERED_LIST =
  * 1. It is the default value for shorthands, eg. `<GridItem span={6} />` maps to `{ [SMALLEST_BREAKPOINT]: props.span }`
  * 2. It's omitted in `media.below` as there's nothing below `0px`.
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var SMALLEST_BREAKPOINT = exports.SMALLEST_BREAKPOINT = UNSAFE_BREAKPOINTS_ORDERED_LIST[0];

package/dist/cjs/utils/has-text-ancestor-context.js

@@ -15,4 +15,5 @@ var useHasTextAncestor = exports.useHasTextAncestor = function useHasTextAncesto
 /**
  * @internal
  */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var HasTextAncestorProvider = exports.HasTextAncestorProvider = HasTextAncestorContext.Provider;