@atlaskit/primitives 1.11.1 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/primitives
 
+## 1.13.0
+
+### Minor Changes
+
+- [#57795](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57795) [`d2c06815d043`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d2c06815d043) - - Inline: Allow `role` prop to be passed through. `role` already existed in the type, but was not actually applied to the component.
+  - Stack: Allow `role` prop to be passed through. `role` already existed in the type, but was not actually applied to the component.
+  - Flex: Allow `role` prop to be passed through. `role` already existed in the type, but was not actually applied to the component.
+  - Text: Omit `xcss` from prop types. `<Text xcss={yourStyles}></Text>` will now throw a type error. `xcss` was previously non-functional in `Text`. So, this should not cause any behavior change.
+  - xcss: Export XCSS type from main entry point. It is now possible to `import { xcss, type XCSS } from '@atlaskit/primitives'`.
+
+## 1.12.0
+
+### Minor Changes
+
+- [#43616](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43616) [`6a89d1fcf6b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a89d1fcf6b) - Add missing tokenised XCSS properties for borderBlockColor, borderBlockWidth, borderInlineColor, borderInlineWidth
+
 ## 1.11.1
 
 ### Patch Changes

package/constellation/responsive/usage.mdx

@@ -14,6 +14,8 @@ These responsive helpers are designed be used in conjunction with [xcss](/compon
 
 Compose your default styles alongside media overrides in [xcss](/components/primitives/xcss) or `css`.
 
+#### xcss
+
 ```tsx
 const customStyles = xcss({
   display: 'none', // hide by default
@@ -23,13 +25,11 @@ const customStyles = xcss({
 });
 
 export const Component = ({ children }: { children: ReactNode }) => (
-  <div css={customStyles}>{children}</div>
+  <Box xcss={customStyles}>{children}</Box>
 );
 ```
 
-### Using media.above
-
-It is important to note that the `media.above.xxs` will **always** match, it is explicitly `'@media all'`. This is only included for easy programatic usage, but it has a negative performance impact.
+#### css
 
 ```tsx
 const customStyles = css({
@@ -41,3 +41,7 @@ const customStyles = css({
   [media.above.xl]: { marginBlock: token('space.150') },
 });
 ```
+
+### Using media.above
+
+It is important to note that the `media.above.xxs` will **always** match, it is explicitly `'@media all'`. This is only included for easy programmatic usage, but it has a negative performance impact.

package/dist/cjs/components/flex.js

@@ -94,6 +94,7 @@ var baseStyles = (0, _react2.css)({
 var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.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,
@@ -106,6 +107,7 @@ var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
     xcss = _ref.xcss;
   var xcssClassName = xcss && (0, _xcss.parseXcss)(xcss);
   return (0, _react2.jsx)(Component, {
+    role: role,
     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],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],

package/dist/cjs/components/inline.js

@@ -64,6 +64,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     separator = _ref2.separator,
     xcss = _ref2.xcss,
     testId = _ref2.testId,
+    role = _ref2.role,
     rawChildren = _ref2.children;
   var separatorComponent = typeof separator === 'string' ? (0, _react2.jsx)(Separator, null, separator) : separator;
   var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
@@ -74,6 +75,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
   var justifyContent = spread || alignInline;
   return (0, _react2.jsx)(_flex.default, {
     as: as,
+    role: role,
     alignItems: alignItems,
     justifyContent: justifyContent,
     direction: "row",

package/dist/cjs/components/stack.js

@@ -47,10 +47,12 @@ var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(f
     space = _ref.space,
     children = _ref.children,
     testId = _ref.testId,
-    xcss = _ref.xcss;
+    xcss = _ref.xcss,
+    role = _ref.role;
   var justifyContent = spread || alignBlock;
   return (0, _react2.jsx)(_flex.default, {
     as: as,
+    role: role,
     gap: space,
     direction: "column",
     alignItems: alignItems,

package/dist/cjs/xcss/xcss.js

@@ -18,33 +18,37 @@ var _styleMaps = require("./style-maps.partial");
 var tokensMap = {
   backgroundColor: _styleMaps.backgroundColorMap,
   blockSize: _styleMaps.dimensionMap,
-  borderColor: _styleMaps.borderColorMap,
-  borderBlockStartColor: _styleMaps.borderColorMap,
+  borderBlockColor: _styleMaps.borderColorMap,
   borderBlockEndColor: _styleMaps.borderColorMap,
-  borderInlineStartColor: _styleMaps.borderColorMap,
-  borderInlineEndColor: _styleMaps.borderColorMap,
+  borderBlockEndWidth: _styleMaps.borderWidthMap,
+  borderBlockStartColor: _styleMaps.borderColorMap,
+  borderBlockStartWidth: _styleMaps.borderWidthMap,
+  borderBlockWidth: _styleMaps.borderWidthMap,
   borderBottomColor: _styleMaps.borderColorMap,
-  borderLeftColor: _styleMaps.borderColorMap,
-  borderRightColor: _styleMaps.borderColorMap,
-  borderTopColor: _styleMaps.borderColorMap,
-  borderRadius: _styleMaps.borderRadiusMap,
-  borderStartStartRadius: _styleMaps.borderRadiusMap,
-  borderStartEndRadius: _styleMaps.borderRadiusMap,
-  borderEndStartRadius: _styleMaps.borderRadiusMap,
-  borderEndEndRadius: _styleMaps.borderRadiusMap,
   borderBottomLeftRadius: _styleMaps.borderRadiusMap,
   borderBottomRightRadius: _styleMaps.borderRadiusMap,
-  borderTopLeftRadius: _styleMaps.borderRadiusMap,
-  borderTopRightRadius: _styleMaps.borderRadiusMap,
-  borderWidth: _styleMaps.borderWidthMap,
-  borderBlockStartWidth: _styleMaps.borderWidthMap,
-  borderBlockEndWidth: _styleMaps.borderWidthMap,
-  borderInlineStartWidth: _styleMaps.borderWidthMap,
-  borderInlineEndWidth: _styleMaps.borderWidthMap,
   borderBottomWidth: _styleMaps.borderWidthMap,
+  borderColor: _styleMaps.borderColorMap,
+  borderEndEndRadius: _styleMaps.borderRadiusMap,
+  borderEndStartRadius: _styleMaps.borderRadiusMap,
+  borderInlineColor: _styleMaps.borderColorMap,
+  borderInlineEndColor: _styleMaps.borderColorMap,
+  borderInlineEndWidth: _styleMaps.borderWidthMap,
+  borderInlineStartColor: _styleMaps.borderColorMap,
+  borderInlineStartWidth: _styleMaps.borderWidthMap,
+  borderInlineWidth: _styleMaps.borderWidthMap,
+  borderLeftColor: _styleMaps.borderColorMap,
   borderLeftWidth: _styleMaps.borderWidthMap,
+  borderRadius: _styleMaps.borderRadiusMap,
+  borderRightColor: _styleMaps.borderColorMap,
   borderRightWidth: _styleMaps.borderWidthMap,
+  borderStartEndRadius: _styleMaps.borderRadiusMap,
+  borderStartStartRadius: _styleMaps.borderRadiusMap,
+  borderTopColor: _styleMaps.borderColorMap,
+  borderTopLeftRadius: _styleMaps.borderRadiusMap,
+  borderTopRightRadius: _styleMaps.borderRadiusMap,
   borderTopWidth: _styleMaps.borderWidthMap,
+  borderWidth: _styleMaps.borderWidthMap,
   bottom: _styleMaps.spaceMap,
   boxShadow: _styleMaps.shadowMap,
   color: _styleMaps.textColorMap,
@@ -59,6 +63,7 @@ var tokensMap = {
   insetInline: _styleMaps.spaceMap,
   insetInlineEnd: _styleMaps.spaceMap,
   insetInlineStart: _styleMaps.spaceMap,
+  left: _styleMaps.spaceMap,
   margin: _styleMaps.spaceMap,
   marginBlock: _styleMaps.spaceMap,
   marginBlockEnd: _styleMaps.spaceMap,
@@ -70,7 +75,6 @@ var tokensMap = {
   marginLeft: _styleMaps.spaceMap,
   marginRight: _styleMaps.spaceMap,
   marginTop: _styleMaps.spaceMap,
-  left: _styleMaps.spaceMap,
   maxBlockSize: _styleMaps.dimensionMap,
   maxHeight: _styleMaps.dimensionMap,
   maxInlineSize: _styleMaps.dimensionMap,
@@ -80,9 +84,9 @@ var tokensMap = {
   minInlineSize: _styleMaps.dimensionMap,
   minWidth: _styleMaps.dimensionMap,
   opacity: _styleMaps.opacityMap,
+  outlineColor: _styleMaps.borderColorMap,
   outlineOffset: _styleMaps.spaceMap,
   outlineWidth: _styleMaps.borderWidthMap,
-  outlineColor: _styleMaps.borderColorMap,
   padding: _styleMaps.spaceMap,
   paddingBlock: _styleMaps.spaceMap,
   paddingBlockEnd: _styleMaps.spaceMap,

package/dist/es2019/components/flex.js

@@ -86,6 +86,7 @@ const baseStyles = css({
  */
 const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   as: Component = 'div',
+  role,
   alignItems,
   justifyContent,
   gap,
@@ -99,6 +100,7 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, ref) => {
   const xcssClassName = xcss && parseXcss(xcss);
   return jsx(Component, {
+    role: role,
     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],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],

package/dist/es2019/components/inline.js

@@ -52,6 +52,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   separator,
   xcss,
   testId,
+  role,
   children: rawChildren
 }, ref) => {
   const separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
@@ -63,6 +64,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const justifyContent = spread || alignInline;
   return jsx(Flex, {
     as: as,
+    role: role,
     alignItems: alignItems,
     justifyContent: justifyContent,
     direction: "row",

package/dist/es2019/components/stack.js

@@ -37,11 +37,13 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   space,
   children,
   testId,
-  xcss
+  xcss,
+  role
 }, ref) => {
   const justifyContent = spread || alignBlock;
   return jsx(Flex, {
     as: as,
+    role: role,
     gap: space,
     direction: "column",
     alignItems: alignItems,

package/dist/es2019/xcss/xcss.js

@@ -7,33 +7,37 @@ import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, di
 const tokensMap = {
   backgroundColor: backgroundColorMap,
   blockSize: dimensionMap,
-  borderColor: borderColorMap,
-  borderBlockStartColor: borderColorMap,
+  borderBlockColor: borderColorMap,
   borderBlockEndColor: borderColorMap,
-  borderInlineStartColor: borderColorMap,
-  borderInlineEndColor: borderColorMap,
+  borderBlockEndWidth: borderWidthMap,
+  borderBlockStartColor: borderColorMap,
+  borderBlockStartWidth: borderWidthMap,
+  borderBlockWidth: borderWidthMap,
   borderBottomColor: borderColorMap,
-  borderLeftColor: borderColorMap,
-  borderRightColor: borderColorMap,
-  borderTopColor: borderColorMap,
-  borderRadius: borderRadiusMap,
-  borderStartStartRadius: borderRadiusMap,
-  borderStartEndRadius: borderRadiusMap,
-  borderEndStartRadius: borderRadiusMap,
-  borderEndEndRadius: borderRadiusMap,
   borderBottomLeftRadius: borderRadiusMap,
   borderBottomRightRadius: borderRadiusMap,
-  borderTopLeftRadius: borderRadiusMap,
-  borderTopRightRadius: borderRadiusMap,
-  borderWidth: borderWidthMap,
-  borderBlockStartWidth: borderWidthMap,
-  borderBlockEndWidth: borderWidthMap,
-  borderInlineStartWidth: borderWidthMap,
-  borderInlineEndWidth: borderWidthMap,
   borderBottomWidth: borderWidthMap,
+  borderColor: borderColorMap,
+  borderEndEndRadius: borderRadiusMap,
+  borderEndStartRadius: borderRadiusMap,
+  borderInlineColor: borderColorMap,
+  borderInlineEndColor: borderColorMap,
+  borderInlineEndWidth: borderWidthMap,
+  borderInlineStartColor: borderColorMap,
+  borderInlineStartWidth: borderWidthMap,
+  borderInlineWidth: borderWidthMap,
+  borderLeftColor: borderColorMap,
   borderLeftWidth: borderWidthMap,
+  borderRadius: borderRadiusMap,
+  borderRightColor: borderColorMap,
   borderRightWidth: borderWidthMap,
+  borderStartEndRadius: borderRadiusMap,
+  borderStartStartRadius: borderRadiusMap,
+  borderTopColor: borderColorMap,
+  borderTopLeftRadius: borderRadiusMap,
+  borderTopRightRadius: borderRadiusMap,
   borderTopWidth: borderWidthMap,
+  borderWidth: borderWidthMap,
   bottom: spaceMap,
   boxShadow: shadowMap,
   color: textColorMap,
@@ -48,6 +52,7 @@ const tokensMap = {
   insetInline: spaceMap,
   insetInlineEnd: spaceMap,
   insetInlineStart: spaceMap,
+  left: spaceMap,
   margin: spaceMap,
   marginBlock: spaceMap,
   marginBlockEnd: spaceMap,
@@ -59,7 +64,6 @@ const tokensMap = {
   marginLeft: spaceMap,
   marginRight: spaceMap,
   marginTop: spaceMap,
-  left: spaceMap,
   maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
   maxInlineSize: dimensionMap,
@@ -69,9 +73,9 @@ const tokensMap = {
   minInlineSize: dimensionMap,
   minWidth: dimensionMap,
   opacity: opacityMap,
+  outlineColor: borderColorMap,
   outlineOffset: spaceMap,
   outlineWidth: borderWidthMap,
-  outlineColor: borderColorMap,
   padding: spaceMap,
   paddingBlock: spaceMap,
   paddingBlockEnd: spaceMap,

package/dist/esm/components/flex.js

@@ -87,6 +87,7 @@ var baseStyles = css({
 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,
@@ -99,6 +100,7 @@ var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     xcss = _ref.xcss;
   var xcssClassName = xcss && parseXcss(xcss);
   return jsx(Component, {
+    role: role,
     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],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],

package/dist/esm/components/inline.js

@@ -56,6 +56,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     separator = _ref2.separator,
     xcss = _ref2.xcss,
     testId = _ref2.testId,
+    role = _ref2.role,
     rawChildren = _ref2.children;
   var separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
   var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
@@ -66,6 +67,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var justifyContent = spread || alignInline;
   return jsx(Flex, {
     as: as,
+    role: role,
     alignItems: alignItems,
     justifyContent: justifyContent,
     direction: "row",

package/dist/esm/components/stack.js

@@ -39,10 +39,12 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     space = _ref.space,
     children = _ref.children,
     testId = _ref.testId,
-    xcss = _ref.xcss;
+    xcss = _ref.xcss,
+    role = _ref.role;
   var justifyContent = spread || alignBlock;
   return jsx(Flex, {
     as: as,
+    role: role,
     gap: space,
     direction: "column",
     alignItems: alignItems,

package/dist/esm/xcss/xcss.js

@@ -10,33 +10,37 @@ import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, di
 var tokensMap = {
   backgroundColor: backgroundColorMap,
   blockSize: dimensionMap,
-  borderColor: borderColorMap,
-  borderBlockStartColor: borderColorMap,
+  borderBlockColor: borderColorMap,
   borderBlockEndColor: borderColorMap,
-  borderInlineStartColor: borderColorMap,
-  borderInlineEndColor: borderColorMap,
+  borderBlockEndWidth: borderWidthMap,
+  borderBlockStartColor: borderColorMap,
+  borderBlockStartWidth: borderWidthMap,
+  borderBlockWidth: borderWidthMap,
   borderBottomColor: borderColorMap,
-  borderLeftColor: borderColorMap,
-  borderRightColor: borderColorMap,
-  borderTopColor: borderColorMap,
-  borderRadius: borderRadiusMap,
-  borderStartStartRadius: borderRadiusMap,
-  borderStartEndRadius: borderRadiusMap,
-  borderEndStartRadius: borderRadiusMap,
-  borderEndEndRadius: borderRadiusMap,
   borderBottomLeftRadius: borderRadiusMap,
   borderBottomRightRadius: borderRadiusMap,
-  borderTopLeftRadius: borderRadiusMap,
-  borderTopRightRadius: borderRadiusMap,
-  borderWidth: borderWidthMap,
-  borderBlockStartWidth: borderWidthMap,
-  borderBlockEndWidth: borderWidthMap,
-  borderInlineStartWidth: borderWidthMap,
-  borderInlineEndWidth: borderWidthMap,
   borderBottomWidth: borderWidthMap,
+  borderColor: borderColorMap,
+  borderEndEndRadius: borderRadiusMap,
+  borderEndStartRadius: borderRadiusMap,
+  borderInlineColor: borderColorMap,
+  borderInlineEndColor: borderColorMap,
+  borderInlineEndWidth: borderWidthMap,
+  borderInlineStartColor: borderColorMap,
+  borderInlineStartWidth: borderWidthMap,
+  borderInlineWidth: borderWidthMap,
+  borderLeftColor: borderColorMap,
   borderLeftWidth: borderWidthMap,
+  borderRadius: borderRadiusMap,
+  borderRightColor: borderColorMap,
   borderRightWidth: borderWidthMap,
+  borderStartEndRadius: borderRadiusMap,
+  borderStartStartRadius: borderRadiusMap,
+  borderTopColor: borderColorMap,
+  borderTopLeftRadius: borderRadiusMap,
+  borderTopRightRadius: borderRadiusMap,
   borderTopWidth: borderWidthMap,
+  borderWidth: borderWidthMap,
   bottom: spaceMap,
   boxShadow: shadowMap,
   color: textColorMap,
@@ -51,6 +55,7 @@ var tokensMap = {
   insetInline: spaceMap,
   insetInlineEnd: spaceMap,
   insetInlineStart: spaceMap,
+  left: spaceMap,
   margin: spaceMap,
   marginBlock: spaceMap,
   marginBlockEnd: spaceMap,
@@ -62,7 +67,6 @@ var tokensMap = {
   marginLeft: spaceMap,
   marginRight: spaceMap,
   marginTop: spaceMap,
-  left: spaceMap,
   maxBlockSize: dimensionMap,
   maxHeight: dimensionMap,
   maxInlineSize: dimensionMap,
@@ -72,9 +76,9 @@ var tokensMap = {
   minInlineSize: dimensionMap,
   minWidth: dimensionMap,
   opacity: opacityMap,
+  outlineColor: borderColorMap,
   outlineOffset: spaceMap,
   outlineWidth: borderWidthMap,
-  outlineColor: borderColorMap,
   padding: spaceMap,
   paddingBlock: spaceMap,
   paddingBlockEnd: spaceMap,

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

@@ -5,7 +5,7 @@ import type { BasePrimitiveProps } from './types';
 declare const asAllowlist: readonly ["span", "p", "strong", "em"];
 type AsElement = (typeof asAllowlist)[number];
 type Variant = BodyText | UiText;
-export interface TextProps extends BasePrimitiveProps {
+export interface TextProps extends Omit<BasePrimitiveProps, 'xcss'> {
     /**
      * HTML tag to be rendered. Defaults to `span`.
      */

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export type { BoxProps } from './components/box';
 export { default as Inline } from './components/inline';
 export type { InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';
+export type { XCSS } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export type { StackProps } from './components/stack';
 export { default as Flex } from './components/flex';

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

@@ -552,33 +552,37 @@ type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
     backgroundColor?: BackgroundColor;
     blockSize?: AutoComplete<Dimension>;
-    borderColor?: BorderColor;
-    borderBlockStartColor?: AutoComplete<BorderColor>;
+    borderBlockColor?: AutoComplete<BorderColor>;
     borderBlockEndColor?: AutoComplete<BorderColor>;
-    borderInlineStartColor?: AutoComplete<BorderColor>;
-    borderInlineEndColor?: AutoComplete<BorderColor>;
+    borderBlockEndWidth?: AutoComplete<BorderWidth>;
+    borderBlockStartColor?: AutoComplete<BorderColor>;
+    borderBlockStartWidth?: AutoComplete<BorderWidth>;
+    borderBlockWidth?: AutoComplete<BorderWidth>;
     borderBottomColor?: AutoComplete<BorderColor>;
-    borderLeftColor?: AutoComplete<BorderColor>;
-    borderRightColor?: AutoComplete<BorderColor>;
-    borderTopColor?: AutoComplete<BorderColor>;
-    borderRadius?: BorderRadius;
-    borderStartStartRadius?: AutoComplete<BorderRadius>;
-    borderStartEndRadius?: AutoComplete<BorderRadius>;
-    borderEndStartRadius?: AutoComplete<BorderRadius>;
-    borderEndEndRadius?: AutoComplete<BorderRadius>;
     borderBottomLeftRadius?: AutoComplete<BorderRadius>;
     borderBottomRightRadius?: AutoComplete<BorderRadius>;
-    borderTopLeftRadius?: AutoComplete<BorderRadius>;
-    borderTopRightRadius?: AutoComplete<BorderRadius>;
-    borderWidth?: BorderWidth;
-    borderBlockStartWidth?: AutoComplete<BorderWidth>;
-    borderBlockEndWidth?: AutoComplete<BorderWidth>;
-    borderInlineStartWidth?: AutoComplete<BorderWidth>;
-    borderInlineEndWidth?: AutoComplete<BorderWidth>;
     borderBottomWidth?: AutoComplete<BorderWidth>;
+    borderColor?: BorderColor;
+    borderEndEndRadius?: AutoComplete<BorderRadius>;
+    borderEndStartRadius?: AutoComplete<BorderRadius>;
+    borderInlineColor?: AutoComplete<BorderColor>;
+    borderInlineEndColor?: AutoComplete<BorderColor>;
+    borderInlineEndWidth?: AutoComplete<BorderWidth>;
+    borderInlineStartColor?: AutoComplete<BorderColor>;
+    borderInlineStartWidth?: AutoComplete<BorderWidth>;
+    borderInlineWidth?: AutoComplete<BorderWidth>;
+    borderLeftColor?: AutoComplete<BorderColor>;
     borderLeftWidth?: AutoComplete<BorderWidth>;
+    borderRadius?: BorderRadius;
+    borderRightColor?: AutoComplete<BorderColor>;
     borderRightWidth?: AutoComplete<BorderWidth>;
+    borderStartEndRadius?: AutoComplete<BorderRadius>;
+    borderStartStartRadius?: AutoComplete<BorderRadius>;
+    borderTopColor?: AutoComplete<BorderColor>;
+    borderTopLeftRadius?: AutoComplete<BorderRadius>;
+    borderTopRightRadius?: AutoComplete<BorderRadius>;
     borderTopWidth?: AutoComplete<BorderWidth>;
+    borderWidth?: BorderWidth;
     bottom?: AutoComplete<Space>;
     boxShadow?: Shadow;
     color?: TextColor;
@@ -621,10 +625,10 @@ export type TokenisedProps = {
     paddingBlock?: Space;
     paddingBlockEnd?: Space;
     paddingBlockStart?: Space;
+    paddingBottom?: AutoComplete<Space>;
     paddingInline?: Space;
     paddingInlineEnd?: Space;
     paddingInlineStart?: Space;
-    paddingBottom?: AutoComplete<Space>;
     paddingLeft?: AutoComplete<Space>;
     paddingRight?: AutoComplete<Space>;
     paddingTop?: AutoComplete<Space>;

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

@@ -10,7 +10,7 @@ declare const asAllowlist: readonly [
 ];
 type AsElement = (typeof asAllowlist)[number];
 type Variant = BodyText | UiText;
-export interface TextProps extends BasePrimitiveProps {
+export interface TextProps extends Omit<BasePrimitiveProps, 'xcss'> {
     /**
      * HTML tag to be rendered. Defaults to `span`.
      */

package/dist/types-ts4.5/index.d.ts

@@ -4,6 +4,7 @@ export type { BoxProps } from './components/box';
 export { default as Inline } from './components/inline';
 export type { InlineProps } from './components/inline';
 export { xcss } from './xcss/xcss';
+export type { XCSS } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export type { StackProps } from './components/stack';
 export { default as Flex } from './components/flex';

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

@@ -552,33 +552,37 @@ type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
     backgroundColor?: BackgroundColor;
     blockSize?: AutoComplete<Dimension>;
-    borderColor?: BorderColor;
-    borderBlockStartColor?: AutoComplete<BorderColor>;
+    borderBlockColor?: AutoComplete<BorderColor>;
     borderBlockEndColor?: AutoComplete<BorderColor>;
-    borderInlineStartColor?: AutoComplete<BorderColor>;
-    borderInlineEndColor?: AutoComplete<BorderColor>;
+    borderBlockEndWidth?: AutoComplete<BorderWidth>;
+    borderBlockStartColor?: AutoComplete<BorderColor>;
+    borderBlockStartWidth?: AutoComplete<BorderWidth>;
+    borderBlockWidth?: AutoComplete<BorderWidth>;
     borderBottomColor?: AutoComplete<BorderColor>;
-    borderLeftColor?: AutoComplete<BorderColor>;
-    borderRightColor?: AutoComplete<BorderColor>;
-    borderTopColor?: AutoComplete<BorderColor>;
-    borderRadius?: BorderRadius;
-    borderStartStartRadius?: AutoComplete<BorderRadius>;
-    borderStartEndRadius?: AutoComplete<BorderRadius>;
-    borderEndStartRadius?: AutoComplete<BorderRadius>;
-    borderEndEndRadius?: AutoComplete<BorderRadius>;
     borderBottomLeftRadius?: AutoComplete<BorderRadius>;
     borderBottomRightRadius?: AutoComplete<BorderRadius>;
-    borderTopLeftRadius?: AutoComplete<BorderRadius>;
-    borderTopRightRadius?: AutoComplete<BorderRadius>;
-    borderWidth?: BorderWidth;
-    borderBlockStartWidth?: AutoComplete<BorderWidth>;
-    borderBlockEndWidth?: AutoComplete<BorderWidth>;
-    borderInlineStartWidth?: AutoComplete<BorderWidth>;
-    borderInlineEndWidth?: AutoComplete<BorderWidth>;
     borderBottomWidth?: AutoComplete<BorderWidth>;
+    borderColor?: BorderColor;
+    borderEndEndRadius?: AutoComplete<BorderRadius>;
+    borderEndStartRadius?: AutoComplete<BorderRadius>;
+    borderInlineColor?: AutoComplete<BorderColor>;
+    borderInlineEndColor?: AutoComplete<BorderColor>;
+    borderInlineEndWidth?: AutoComplete<BorderWidth>;
+    borderInlineStartColor?: AutoComplete<BorderColor>;
+    borderInlineStartWidth?: AutoComplete<BorderWidth>;
+    borderInlineWidth?: AutoComplete<BorderWidth>;
+    borderLeftColor?: AutoComplete<BorderColor>;
     borderLeftWidth?: AutoComplete<BorderWidth>;
+    borderRadius?: BorderRadius;
+    borderRightColor?: AutoComplete<BorderColor>;
     borderRightWidth?: AutoComplete<BorderWidth>;
+    borderStartEndRadius?: AutoComplete<BorderRadius>;
+    borderStartStartRadius?: AutoComplete<BorderRadius>;
+    borderTopColor?: AutoComplete<BorderColor>;
+    borderTopLeftRadius?: AutoComplete<BorderRadius>;
+    borderTopRightRadius?: AutoComplete<BorderRadius>;
     borderTopWidth?: AutoComplete<BorderWidth>;
+    borderWidth?: BorderWidth;
     bottom?: AutoComplete<Space>;
     boxShadow?: Shadow;
     color?: TextColor;
@@ -621,10 +625,10 @@ export type TokenisedProps = {
     paddingBlock?: Space;
     paddingBlockEnd?: Space;
     paddingBlockStart?: Space;
+    paddingBottom?: AutoComplete<Space>;
     paddingInline?: Space;
     paddingInlineEnd?: Space;
     paddingInlineStart?: Space;
-    paddingBottom?: AutoComplete<Space>;
     paddingLeft?: AutoComplete<Space>;
     paddingRight?: AutoComplete<Space>;
     paddingTop?: AutoComplete<Space>;

package/extract-react-types/inline-props.tsx

@@ -3,6 +3,7 @@ import { ElementType, ReactNode } from 'react';
 import type {
   AlignBlock,
   AlignInline,
+  BasePrimitiveProps,
   Grow,
   Spread,
 } from '../src/components/types';
@@ -23,7 +24,7 @@ type Space =
   | 'space.800'
   | 'space.1000';
 
-interface InlineProps<T extends ElementType = 'div'> {
+type InlineProps<T extends ElementType = 'div'> = {
   /**
    * The DOM element to render as the Inline. Defaults to `div`.
    */
@@ -83,6 +84,6 @@ interface InlineProps<T extends ElementType = 'div'> {
    * Forwarded ref element
    */
   ref?: React.ComponentPropsWithRef<T>['ref'];
-}
+} & BasePrimitiveProps;
 
 export default function Inline(_: InlineProps) {}