@atlaskit/primitives 1.12.0 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/primitives
 
+## 1.13.1
+
+### Patch Changes
+
+- [#58444](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58444) [`c0499565188d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c0499565188d) - Update package.json documentation metadata.
+
+## 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

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/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/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/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-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/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) {}

package/extract-react-types/stack-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 StackProps<T extends ElementType = 'div'> {
+type StackProps<T extends ElementType = 'div'> = {
   /**
    * The DOM element to render as the Stack. Defaults to `div`.
    */
@@ -67,6 +68,6 @@ interface StackProps<T extends ElementType = 'div'> {
    * Forwarded ref element
    */
   ref?: React.ComponentPropsWithRef<T>['ref'];
-}
+} & BasePrimitiveProps;
 
 export default function Stack(_: StackProps) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -77,7 +77,7 @@
           "id": "@atlaskit/primitives/bleed"
         },
         {
-          "title": "xcss",
+          "title": "XCSS",
           "folder": "xcss",
           "slug": "primitives/xcss",
           "id": "@atlaskit/primitives/xcss"
@@ -105,7 +105,7 @@
   },
   "dependencies": {
     "@atlaskit/app-provider": "^0.4.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

package/tmp/api-report-tmp.d.ts

@@ -1,977 +0,0 @@
-## API Report File for "@atlaskit/primitives"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ComponentPropsWithoutRef } from 'react';
-import { ComponentPropsWithRef } from 'react';
-import type * as CSS_2 from 'csstype';
-import type { CSSProperties } from 'react';
-import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
-import { ElementType } from 'react';
-import { FC } from 'react';
-import { ForwardRefExoticComponent } from 'react';
-import { jsx } from '@emotion/react';
-import { MemoExoticComponent } from 'react';
-import { ReactElement } from 'react';
-import { ReactNode } from 'react';
-import { RefAttributes } from 'react';
-import type { SerializedStyles } from '@emotion/serialize';
-import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
-
-// @public (undocumented)
-type AlignBlock = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
-
-// @public (undocumented)
-type AlignContent = keyof typeof alignContentMap;
-
-// @public (undocumented)
-const alignContentMap: {
-    readonly start: SerializedStyles_2;
-    readonly center: SerializedStyles_2;
-    readonly end: SerializedStyles_2;
-    readonly 'space-between': SerializedStyles_2;
-    readonly 'space-around': SerializedStyles_2;
-    readonly 'space-evenly': SerializedStyles_2;
-    readonly stretch: SerializedStyles_2;
-};
-
-// @public (undocumented)
-type AlignInline = 'center' | 'end' | 'start' | 'stretch';
-
-// @public (undocumented)
-type AlignItems = keyof typeof alignItemsMap;
-
-// @public (undocumented)
-type AlignItems_2 = keyof typeof alignItemsMap_2;
-
-// @public (undocumented)
-const alignItemsMap: {
-    readonly start: SerializedStyles_2;
-    readonly center: SerializedStyles_2;
-    readonly baseline: SerializedStyles_2;
-    readonly end: SerializedStyles_2;
-    readonly stretch: SerializedStyles_2;
-};
-
-// @public (undocumented)
-const alignItemsMap_2: {
-    readonly start: SerializedStyles_2;
-    readonly center: SerializedStyles_2;
-    readonly baseline: SerializedStyles_2;
-    readonly end: SerializedStyles_2;
-};
-
-// @public (undocumented)
-type AllMedia = '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)' | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | MediaQuery;
-
-// @public (undocumented)
-type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
-
-// @public (undocumented)
-const asAllowlist: readonly ["span", "p", "strong", "em"];
-
-// @public (undocumented)
-type AsElement = (typeof asAllowlist)[number];
-
-// @public (undocumented)
-type AtRulesWithoutMedia = Exclude<CSS_2.AtRules, '@media'>;
-
-// @public (undocumented)
-type AutoComplete<T extends string> = Omit<string, T> | T;
-
-// @public (undocumented)
-type AutoFlow = keyof typeof gridAutoFlowMap;
-
-// @public (undocumented)
-export type BackgroundColor = keyof typeof backgroundColorMap;
-
-// @public (undocumented)
-const backgroundColorMap: {
-    readonly 'color.background.accent.lime.subtlest': "var(--ds-background-accent-lime-subtlest)";
-    readonly 'color.background.accent.lime.subtlest.hovered': "var(--ds-background-accent-lime-subtlest-hovered)";
-    readonly 'color.background.accent.lime.subtlest.pressed': "var(--ds-background-accent-lime-subtlest-pressed)";
-    readonly 'color.background.accent.lime.subtler': "var(--ds-background-accent-lime-subtler)";
-    readonly 'color.background.accent.lime.subtler.hovered': "var(--ds-background-accent-lime-subtler-hovered)";
-    readonly 'color.background.accent.lime.subtler.pressed': "var(--ds-background-accent-lime-subtler-pressed)";
-    readonly 'color.background.accent.lime.subtle': "var(--ds-background-accent-lime-subtle)";
-    readonly 'color.background.accent.lime.subtle.hovered': "var(--ds-background-accent-lime-subtle-hovered)";
-    readonly 'color.background.accent.lime.subtle.pressed': "var(--ds-background-accent-lime-subtle-pressed)";
-    readonly 'color.background.accent.lime.bolder': "var(--ds-background-accent-lime-bolder)";
-    readonly 'color.background.accent.lime.bolder.hovered': "var(--ds-background-accent-lime-bolder-hovered)";
-    readonly 'color.background.accent.lime.bolder.pressed': "var(--ds-background-accent-lime-bolder-pressed)";
-    readonly 'color.background.accent.red.subtlest': "var(--ds-background-accent-red-subtlest)";
-    readonly 'color.background.accent.red.subtlest.hovered': "var(--ds-background-accent-red-subtlest-hovered)";
-    readonly 'color.background.accent.red.subtlest.pressed': "var(--ds-background-accent-red-subtlest-pressed)";
-    readonly 'color.background.accent.red.subtler': "var(--ds-background-accent-red-subtler)";
-    readonly 'color.background.accent.red.subtler.hovered': "var(--ds-background-accent-red-subtler-hovered)";
-    readonly 'color.background.accent.red.subtler.pressed': "var(--ds-background-accent-red-subtler-pressed)";
-    readonly 'color.background.accent.red.subtle': "var(--ds-background-accent-red-subtle)";
-    readonly 'color.background.accent.red.subtle.hovered': "var(--ds-background-accent-red-subtle-hovered)";
-    readonly 'color.background.accent.red.subtle.pressed': "var(--ds-background-accent-red-subtle-pressed)";
-    readonly 'color.background.accent.red.bolder': "var(--ds-background-accent-red-bolder)";
-    readonly 'color.background.accent.red.bolder.hovered': "var(--ds-background-accent-red-bolder-hovered)";
-    readonly 'color.background.accent.red.bolder.pressed': "var(--ds-background-accent-red-bolder-pressed)";
-    readonly 'color.background.accent.orange.subtlest': "var(--ds-background-accent-orange-subtlest)";
-    readonly 'color.background.accent.orange.subtlest.hovered': "var(--ds-background-accent-orange-subtlest-hovered)";
-    readonly 'color.background.accent.orange.subtlest.pressed': "var(--ds-background-accent-orange-subtlest-pressed)";
-    readonly 'color.background.accent.orange.subtler': "var(--ds-background-accent-orange-subtler)";
-    readonly 'color.background.accent.orange.subtler.hovered': "var(--ds-background-accent-orange-subtler-hovered)";
-    readonly 'color.background.accent.orange.subtler.pressed': "var(--ds-background-accent-orange-subtler-pressed)";
-    readonly 'color.background.accent.orange.subtle': "var(--ds-background-accent-orange-subtle)";
-    readonly 'color.background.accent.orange.subtle.hovered': "var(--ds-background-accent-orange-subtle-hovered)";
-    readonly 'color.background.accent.orange.subtle.pressed': "var(--ds-background-accent-orange-subtle-pressed)";
-    readonly 'color.background.accent.orange.bolder': "var(--ds-background-accent-orange-bolder)";
-    readonly 'color.background.accent.orange.bolder.hovered': "var(--ds-background-accent-orange-bolder-hovered)";
-    readonly 'color.background.accent.orange.bolder.pressed': "var(--ds-background-accent-orange-bolder-pressed)";
-    readonly 'color.background.accent.yellow.subtlest': "var(--ds-background-accent-yellow-subtlest)";
-    readonly 'color.background.accent.yellow.subtlest.hovered': "var(--ds-background-accent-yellow-subtlest-hovered)";
-    readonly 'color.background.accent.yellow.subtlest.pressed': "var(--ds-background-accent-yellow-subtlest-pressed)";
-    readonly 'color.background.accent.yellow.subtler': "var(--ds-background-accent-yellow-subtler)";
-    readonly 'color.background.accent.yellow.subtler.hovered': "var(--ds-background-accent-yellow-subtler-hovered)";
-    readonly 'color.background.accent.yellow.subtler.pressed': "var(--ds-background-accent-yellow-subtler-pressed)";
-    readonly 'color.background.accent.yellow.subtle': "var(--ds-background-accent-yellow-subtle)";
-    readonly 'color.background.accent.yellow.subtle.hovered': "var(--ds-background-accent-yellow-subtle-hovered)";
-    readonly 'color.background.accent.yellow.subtle.pressed': "var(--ds-background-accent-yellow-subtle-pressed)";
-    readonly 'color.background.accent.yellow.bolder': "var(--ds-background-accent-yellow-bolder)";
-    readonly 'color.background.accent.yellow.bolder.hovered': "var(--ds-background-accent-yellow-bolder-hovered)";
-    readonly 'color.background.accent.yellow.bolder.pressed': "var(--ds-background-accent-yellow-bolder-pressed)";
-    readonly 'color.background.accent.green.subtlest': "var(--ds-background-accent-green-subtlest)";
-    readonly 'color.background.accent.green.subtlest.hovered': "var(--ds-background-accent-green-subtlest-hovered)";
-    readonly 'color.background.accent.green.subtlest.pressed': "var(--ds-background-accent-green-subtlest-pressed)";
-    readonly 'color.background.accent.green.subtler': "var(--ds-background-accent-green-subtler)";
-    readonly 'color.background.accent.green.subtler.hovered': "var(--ds-background-accent-green-subtler-hovered)";
-    readonly 'color.background.accent.green.subtler.pressed': "var(--ds-background-accent-green-subtler-pressed)";
-    readonly 'color.background.accent.green.subtle': "var(--ds-background-accent-green-subtle)";
-    readonly 'color.background.accent.green.subtle.hovered': "var(--ds-background-accent-green-subtle-hovered)";
-    readonly 'color.background.accent.green.subtle.pressed': "var(--ds-background-accent-green-subtle-pressed)";
-    readonly 'color.background.accent.green.bolder': "var(--ds-background-accent-green-bolder)";
-    readonly 'color.background.accent.green.bolder.hovered': "var(--ds-background-accent-green-bolder-hovered)";
-    readonly 'color.background.accent.green.bolder.pressed': "var(--ds-background-accent-green-bolder-pressed)";
-    readonly 'color.background.accent.teal.subtlest': "var(--ds-background-accent-teal-subtlest)";
-    readonly 'color.background.accent.teal.subtlest.hovered': "var(--ds-background-accent-teal-subtlest-hovered)";
-    readonly 'color.background.accent.teal.subtlest.pressed': "var(--ds-background-accent-teal-subtlest-pressed)";
-    readonly 'color.background.accent.teal.subtler': "var(--ds-background-accent-teal-subtler)";
-    readonly 'color.background.accent.teal.subtler.hovered': "var(--ds-background-accent-teal-subtler-hovered)";
-    readonly 'color.background.accent.teal.subtler.pressed': "var(--ds-background-accent-teal-subtler-pressed)";
-    readonly 'color.background.accent.teal.subtle': "var(--ds-background-accent-teal-subtle)";
-    readonly 'color.background.accent.teal.subtle.hovered': "var(--ds-background-accent-teal-subtle-hovered)";
-    readonly 'color.background.accent.teal.subtle.pressed': "var(--ds-background-accent-teal-subtle-pressed)";
-    readonly 'color.background.accent.teal.bolder': "var(--ds-background-accent-teal-bolder)";
-    readonly 'color.background.accent.teal.bolder.hovered': "var(--ds-background-accent-teal-bolder-hovered)";
-    readonly 'color.background.accent.teal.bolder.pressed': "var(--ds-background-accent-teal-bolder-pressed)";
-    readonly 'color.background.accent.blue.subtlest': "var(--ds-background-accent-blue-subtlest)";
-    readonly 'color.background.accent.blue.subtlest.hovered': "var(--ds-background-accent-blue-subtlest-hovered)";
-    readonly 'color.background.accent.blue.subtlest.pressed': "var(--ds-background-accent-blue-subtlest-pressed)";
-    readonly 'color.background.accent.blue.subtler': "var(--ds-background-accent-blue-subtler)";
-    readonly 'color.background.accent.blue.subtler.hovered': "var(--ds-background-accent-blue-subtler-hovered)";
-    readonly 'color.background.accent.blue.subtler.pressed': "var(--ds-background-accent-blue-subtler-pressed)";
-    readonly 'color.background.accent.blue.subtle': "var(--ds-background-accent-blue-subtle)";
-    readonly 'color.background.accent.blue.subtle.hovered': "var(--ds-background-accent-blue-subtle-hovered)";
-    readonly 'color.background.accent.blue.subtle.pressed': "var(--ds-background-accent-blue-subtle-pressed)";
-    readonly 'color.background.accent.blue.bolder': "var(--ds-background-accent-blue-bolder)";
-    readonly 'color.background.accent.blue.bolder.hovered': "var(--ds-background-accent-blue-bolder-hovered)";
-    readonly 'color.background.accent.blue.bolder.pressed': "var(--ds-background-accent-blue-bolder-pressed)";
-    readonly 'color.background.accent.purple.subtlest': "var(--ds-background-accent-purple-subtlest)";
-    readonly 'color.background.accent.purple.subtlest.hovered': "var(--ds-background-accent-purple-subtlest-hovered)";
-    readonly 'color.background.accent.purple.subtlest.pressed': "var(--ds-background-accent-purple-subtlest-pressed)";
-    readonly 'color.background.accent.purple.subtler': "var(--ds-background-accent-purple-subtler)";
-    readonly 'color.background.accent.purple.subtler.hovered': "var(--ds-background-accent-purple-subtler-hovered)";
-    readonly 'color.background.accent.purple.subtler.pressed': "var(--ds-background-accent-purple-subtler-pressed)";
-    readonly 'color.background.accent.purple.subtle': "var(--ds-background-accent-purple-subtle)";
-    readonly 'color.background.accent.purple.subtle.hovered': "var(--ds-background-accent-purple-subtle-hovered)";
-    readonly 'color.background.accent.purple.subtle.pressed': "var(--ds-background-accent-purple-subtle-pressed)";
-    readonly 'color.background.accent.purple.bolder': "var(--ds-background-accent-purple-bolder)";
-    readonly 'color.background.accent.purple.bolder.hovered': "var(--ds-background-accent-purple-bolder-hovered)";
-    readonly 'color.background.accent.purple.bolder.pressed': "var(--ds-background-accent-purple-bolder-pressed)";
-    readonly 'color.background.accent.magenta.subtlest': "var(--ds-background-accent-magenta-subtlest)";
-    readonly 'color.background.accent.magenta.subtlest.hovered': "var(--ds-background-accent-magenta-subtlest-hovered)";
-    readonly 'color.background.accent.magenta.subtlest.pressed': "var(--ds-background-accent-magenta-subtlest-pressed)";
-    readonly 'color.background.accent.magenta.subtler': "var(--ds-background-accent-magenta-subtler)";
-    readonly 'color.background.accent.magenta.subtler.hovered': "var(--ds-background-accent-magenta-subtler-hovered)";
-    readonly 'color.background.accent.magenta.subtler.pressed': "var(--ds-background-accent-magenta-subtler-pressed)";
-    readonly 'color.background.accent.magenta.subtle': "var(--ds-background-accent-magenta-subtle)";
-    readonly 'color.background.accent.magenta.subtle.hovered': "var(--ds-background-accent-magenta-subtle-hovered)";
-    readonly 'color.background.accent.magenta.subtle.pressed': "var(--ds-background-accent-magenta-subtle-pressed)";
-    readonly 'color.background.accent.magenta.bolder': "var(--ds-background-accent-magenta-bolder)";
-    readonly 'color.background.accent.magenta.bolder.hovered': "var(--ds-background-accent-magenta-bolder-hovered)";
-    readonly 'color.background.accent.magenta.bolder.pressed': "var(--ds-background-accent-magenta-bolder-pressed)";
-    readonly 'color.background.accent.gray.subtlest': "var(--ds-background-accent-gray-subtlest)";
-    readonly 'color.background.accent.gray.subtlest.hovered': "var(--ds-background-accent-gray-subtlest-hovered)";
-    readonly 'color.background.accent.gray.subtlest.pressed': "var(--ds-background-accent-gray-subtlest-pressed)";
-    readonly 'color.background.accent.gray.subtler': "var(--ds-background-accent-gray-subtler)";
-    readonly 'color.background.accent.gray.subtler.hovered': "var(--ds-background-accent-gray-subtler-hovered)";
-    readonly 'color.background.accent.gray.subtler.pressed': "var(--ds-background-accent-gray-subtler-pressed)";
-    readonly 'color.background.accent.gray.subtle': "var(--ds-background-accent-gray-subtle)";
-    readonly 'color.background.accent.gray.subtle.hovered': "var(--ds-background-accent-gray-subtle-hovered)";
-    readonly 'color.background.accent.gray.subtle.pressed': "var(--ds-background-accent-gray-subtle-pressed)";
-    readonly 'color.background.accent.gray.bolder': "var(--ds-background-accent-gray-bolder)";
-    readonly 'color.background.accent.gray.bolder.hovered': "var(--ds-background-accent-gray-bolder-hovered)";
-    readonly 'color.background.accent.gray.bolder.pressed': "var(--ds-background-accent-gray-bolder-pressed)";
-    readonly 'color.background.disabled': "var(--ds-background-disabled)";
-    readonly 'color.background.input': "var(--ds-background-input)";
-    readonly 'color.background.input.hovered': "var(--ds-background-input-hovered)";
-    readonly 'color.background.input.pressed': "var(--ds-background-input-pressed)";
-    readonly 'color.background.inverse.subtle': "var(--ds-background-inverse-subtle)";
-    readonly 'color.background.inverse.subtle.hovered': "var(--ds-background-inverse-subtle-hovered)";
-    readonly 'color.background.inverse.subtle.pressed': "var(--ds-background-inverse-subtle-pressed)";
-    readonly 'color.background.neutral': "var(--ds-background-neutral)";
-    readonly 'color.background.neutral.hovered': "var(--ds-background-neutral-hovered)";
-    readonly 'color.background.neutral.pressed': "var(--ds-background-neutral-pressed)";
-    readonly 'color.background.neutral.subtle': "var(--ds-background-neutral-subtle)";
-    readonly 'color.background.neutral.subtle.hovered': "var(--ds-background-neutral-subtle-hovered)";
-    readonly 'color.background.neutral.subtle.pressed': "var(--ds-background-neutral-subtle-pressed)";
-    readonly 'color.background.neutral.bold': "var(--ds-background-neutral-bold)";
-    readonly 'color.background.neutral.bold.hovered': "var(--ds-background-neutral-bold-hovered)";
-    readonly 'color.background.neutral.bold.pressed': "var(--ds-background-neutral-bold-pressed)";
-    readonly 'color.background.selected': "var(--ds-background-selected)";
-    readonly 'color.background.selected.hovered': "var(--ds-background-selected-hovered)";
-    readonly 'color.background.selected.pressed': "var(--ds-background-selected-pressed)";
-    readonly 'color.background.selected.bold': "var(--ds-background-selected-bold)";
-    readonly 'color.background.selected.bold.hovered': "var(--ds-background-selected-bold-hovered)";
-    readonly 'color.background.selected.bold.pressed': "var(--ds-background-selected-bold-pressed)";
-    readonly 'color.background.brand.subtlest': "var(--ds-background-brand-subtlest)";
-    readonly 'color.background.brand.subtlest.hovered': "var(--ds-background-brand-subtlest-hovered)";
-    readonly 'color.background.brand.subtlest.pressed': "var(--ds-background-brand-subtlest-pressed)";
-    readonly 'color.background.brand.bold': "var(--ds-background-brand-bold)";
-    readonly 'color.background.brand.bold.hovered': "var(--ds-background-brand-bold-hovered)";
-    readonly 'color.background.brand.bold.pressed': "var(--ds-background-brand-bold-pressed)";
-    readonly 'color.background.brand.boldest': "var(--ds-background-brand-boldest)";
-    readonly 'color.background.brand.boldest.hovered': "var(--ds-background-brand-boldest-hovered)";
-    readonly 'color.background.brand.boldest.pressed': "var(--ds-background-brand-boldest-pressed)";
-    readonly 'color.background.danger': "var(--ds-background-danger)";
-    readonly 'color.background.danger.hovered': "var(--ds-background-danger-hovered)";
-    readonly 'color.background.danger.pressed': "var(--ds-background-danger-pressed)";
-    readonly 'color.background.danger.bold': "var(--ds-background-danger-bold)";
-    readonly 'color.background.danger.bold.hovered': "var(--ds-background-danger-bold-hovered)";
-    readonly 'color.background.danger.bold.pressed': "var(--ds-background-danger-bold-pressed)";
-    readonly 'color.background.warning': "var(--ds-background-warning)";
-    readonly 'color.background.warning.hovered': "var(--ds-background-warning-hovered)";
-    readonly 'color.background.warning.pressed': "var(--ds-background-warning-pressed)";
-    readonly 'color.background.warning.bold': "var(--ds-background-warning-bold)";
-    readonly 'color.background.warning.bold.hovered': "var(--ds-background-warning-bold-hovered)";
-    readonly 'color.background.warning.bold.pressed': "var(--ds-background-warning-bold-pressed)";
-    readonly 'color.background.success': "var(--ds-background-success)";
-    readonly 'color.background.success.hovered': "var(--ds-background-success-hovered)";
-    readonly 'color.background.success.pressed': "var(--ds-background-success-pressed)";
-    readonly 'color.background.success.bold': "var(--ds-background-success-bold)";
-    readonly 'color.background.success.bold.hovered': "var(--ds-background-success-bold-hovered)";
-    readonly 'color.background.success.bold.pressed': "var(--ds-background-success-bold-pressed)";
-    readonly 'color.background.discovery': "var(--ds-background-discovery)";
-    readonly 'color.background.discovery.hovered': "var(--ds-background-discovery-hovered)";
-    readonly 'color.background.discovery.pressed': "var(--ds-background-discovery-pressed)";
-    readonly 'color.background.discovery.bold': "var(--ds-background-discovery-bold)";
-    readonly 'color.background.discovery.bold.hovered': "var(--ds-background-discovery-bold-hovered)";
-    readonly 'color.background.discovery.bold.pressed': "var(--ds-background-discovery-bold-pressed)";
-    readonly 'color.background.information': "var(--ds-background-information)";
-    readonly 'color.background.information.hovered': "var(--ds-background-information-hovered)";
-    readonly 'color.background.information.pressed': "var(--ds-background-information-pressed)";
-    readonly 'color.background.information.bold': "var(--ds-background-information-bold)";
-    readonly 'color.background.information.bold.hovered': "var(--ds-background-information-bold-hovered)";
-    readonly 'color.background.information.bold.pressed': "var(--ds-background-information-bold-pressed)";
-    readonly 'color.blanket': "var(--ds-blanket)";
-    readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
-    readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
-    readonly 'elevation.surface': "var(--ds-surface)";
-    readonly 'elevation.surface.hovered': "var(--ds-surface-hovered)";
-    readonly 'elevation.surface.pressed': "var(--ds-surface-pressed)";
-    readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
-    readonly 'elevation.surface.overlay.hovered': "var(--ds-surface-overlay-hovered)";
-    readonly 'elevation.surface.overlay.pressed': "var(--ds-surface-overlay-pressed)";
-    readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
-    readonly 'elevation.surface.raised.hovered': "var(--ds-surface-raised-hovered)";
-    readonly 'elevation.surface.raised.pressed': "var(--ds-surface-raised-pressed)";
-    readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
-    readonly 'utility.elevation.surface.current': "var(--ds-elevation-surface-current)";
-};
-
-// @public (undocumented)
-type BaseBoxProps<T extends CustomElementType> = {
-    as?: T;
-    children?: ReactNode;
-    backgroundColor?: BackgroundColor;
-    padding?: Space;
-    paddingBlock?: Space;
-    paddingBlockStart?: Space;
-    paddingBlockEnd?: Space;
-    paddingInline?: Space;
-    paddingInlineStart?: Space;
-    paddingInlineEnd?: Space;
-    ref?: ComponentPropsWithRef<T>['ref'];
-};
-
-// @public (undocumented)
-type BasePrimitiveProps = {
-    testId?: string;
-    xcss?: Array<XCSS | false | undefined> | XCSS;
-    role?: string;
-};
-
-// @public
-export const Bleed: MemoExoticComponent<({ children, testId, inline, block, all, xcss }: BleedProps) => jsx.JSX.Element>;
-
-// @public (undocumented)
-export type BleedProps = {
-    children: ReactNode;
-    all?: Space_2;
-    inline?: Space_2;
-    block?: Space_2;
-} & BasePrimitiveProps;
-
-// @public (undocumented)
-type BodyText = keyof typeof bodyTextMap;
-
-// @public (undocumented)
-const bodyTextMap: {
-    body: "var(--ds-font-body)";
-    'body.large': "var(--ds-font-body-large)";
-    'body.small': "var(--ds-font-body-small)";
-};
-
-// @public (undocumented)
-export type BorderColor = keyof typeof borderColorMap;
-
-// @public
-const borderColorMap: {
-    readonly 'color.border': "var(--ds-border)";
-    readonly 'color.border.accent.lime': "var(--ds-border-accent-lime)";
-    readonly 'color.border.accent.red': "var(--ds-border-accent-red)";
-    readonly 'color.border.accent.orange': "var(--ds-border-accent-orange)";
-    readonly 'color.border.accent.yellow': "var(--ds-border-accent-yellow)";
-    readonly 'color.border.accent.green': "var(--ds-border-accent-green)";
-    readonly 'color.border.accent.teal': "var(--ds-border-accent-teal)";
-    readonly 'color.border.accent.blue': "var(--ds-border-accent-blue)";
-    readonly 'color.border.accent.purple': "var(--ds-border-accent-purple)";
-    readonly 'color.border.accent.magenta': "var(--ds-border-accent-magenta)";
-    readonly 'color.border.accent.gray': "var(--ds-border-accent-gray)";
-    readonly 'color.border.disabled': "var(--ds-border-disabled)";
-    readonly 'color.border.focused': "var(--ds-border-focused)";
-    readonly 'color.border.input': "var(--ds-border-input)";
-    readonly 'color.border.inverse': "var(--ds-border-inverse)";
-    readonly 'color.border.selected': "var(--ds-border-selected)";
-    readonly 'color.border.brand': "var(--ds-border-brand)";
-    readonly 'color.border.danger': "var(--ds-border-danger)";
-    readonly 'color.border.warning': "var(--ds-border-warning)";
-    readonly 'color.border.success': "var(--ds-border-success)";
-    readonly 'color.border.discovery': "var(--ds-border-discovery)";
-    readonly 'color.border.information': "var(--ds-border-information)";
-    readonly 'color.border.bold': "var(--ds-border-bold)";
-};
-
-// @public (undocumented)
-export type BorderRadius = keyof typeof borderRadiusMap;
-
-// @public (undocumented)
-const borderRadiusMap: {
-    readonly 'border.radius.050': "var(--ds-border-radius-050)";
-    readonly 'border.radius': "var(--ds-border-radius)";
-    readonly 'border.radius.100': "var(--ds-border-radius-100)";
-    readonly 'border.radius.200': "var(--ds-border-radius-200)";
-    readonly 'border.radius.300': "var(--ds-border-radius-300)";
-    readonly 'border.radius.400': "var(--ds-border-radius-400)";
-    readonly 'border.radius.circle': "var(--ds-border-radius-circle)";
-};
-
-// @public (undocumented)
-export type BorderWidth = keyof typeof borderWidthMap;
-
-// @public
-const borderWidthMap: {
-    readonly 'border.width': "var(--ds-border-width)";
-    readonly 'border.width.0': "var(--ds-border-width-0)";
-    readonly 'border.width.indicator': "var(--ds-border-width-indicator)";
-    readonly 'border.width.outline': "var(--ds-border-width-outline)";
-};
-
-// @public
-export const Box: BoxComponent;
-
-// @public (undocumented)
-type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
-
-// @public (undocumented)
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
-
-// @public
-export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
-
-// @public (undocumented)
-type CSSAtRules = {
-    [AtRule in AtRulesWithoutMedia as `${AtRule}${string}`]?: Omit<SafeCSSObject, AtRulesWithoutMedia>;
-};
-
-// @public (undocumented)
-type CSSMediaQueries = {
-    [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
-};
-
-// @public (undocumented)
-type CSSPseudos = {
-    [Pseudo in CSS_2.Pseudos]?: Omit<SafeCSSObject, AllMedia | CSS_2.Pseudos>;
-};
-
-// @public (undocumented)
-type CustomElementType<P = any> = {
-    [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
-}[AllowedElements];
-
-// @public (undocumented)
-export type Dimension = keyof typeof dimensionMap;
-
-// @public
-const dimensionMap: {
-    readonly '100%': "100%";
-    readonly 'size.100': "1rem";
-    readonly 'size.200': "1.5rem";
-    readonly 'size.300': "2rem";
-    readonly 'size.400': "2.5rem";
-    readonly 'size.500': "3rem";
-    readonly 'size.600': "6rem";
-    readonly 'size.1000': "12rem";
-};
-
-// @public (undocumented)
-type Direction = keyof typeof flexDirectionMap;
-
-// @public
-export const Flex: MemoExoticComponent<ForwardRefExoticComponent<Pick<{
-as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
-justifyContent?: "center" | "end" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | undefined;
-alignItems?: "baseline" | "center" | "end" | "start" | "stretch" | undefined;
-columnGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-gap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-rowGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-direction?: "column" | "row" | undefined;
-wrap?: "nowrap" | "wrap" | undefined;
-children: ReactNode;
-ref?: any;
-} & BasePrimitiveProps, "alignItems" | "as" | "children" | "columnGap" | "direction" | "gap" | "justifyContent" | "rowGap" | "wrap" | keyof BasePrimitiveProps> & RefAttributes<any>>>;
-
-// @public (undocumented)
-const flexDirectionMap: {
-    readonly column: SerializedStyles_2;
-    readonly row: SerializedStyles_2;
-};
-
-// @public (undocumented)
-export type FlexProps<T extends ElementType = 'div'> = {
-    as?: 'div' | 'li' | 'ol' | 'span' | 'ul';
-    justifyContent?: JustifyContent;
-    alignItems?: AlignItems;
-    columnGap?: Space;
-    gap?: Space;
-    rowGap?: Space;
-    direction?: Direction;
-    wrap?: Wrap;
-    children: ReactNode;
-    ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
-
-// @public (undocumented)
-const flexWrapMap: {
-    readonly wrap: SerializedStyles_2;
-    readonly nowrap: SerializedStyles_2;
-};
-
-// @public
-export const Grid: MemoExoticComponent<ForwardRefExoticComponent<Pick<{
-as?: "div" | "ol" | "span" | "ul" | undefined;
-justifyContent?: "center" | "end" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | undefined;
-justifyItems?: "center" | "end" | "start" | "stretch" | undefined;
-alignItems?: "baseline" | "center" | "end" | "start" | undefined;
-alignContent?: "center" | "end" | "space-around" | "space-between" | "space-evenly" | "start" | "stretch" | undefined;
-columnGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-gap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-rowGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-autoFlow?: "column dense" | "column" | "dense" | "row dense" | "row" | undefined;
-templateRows?: string | undefined;
-templateColumns?: string | undefined;
-templateAreas?: string[] | undefined;
-children: ReactNode;
-id?: string | undefined;
-ref?: any;
-} & BasePrimitiveProps, "alignContent" | "alignItems" | "as" | "autoFlow" | "children" | "columnGap" | "gap" | "id" | "justifyContent" | "justifyItems" | "rowGap" | "templateAreas" | "templateColumns" | "templateRows" | keyof BasePrimitiveProps> & RefAttributes<any>>>;
-
-// @public (undocumented)
-const gridAutoFlowMap: {
-    readonly row: SerializedStyles_2;
-    readonly column: SerializedStyles_2;
-    readonly dense: SerializedStyles_2;
-    readonly 'row dense': SerializedStyles_2;
-    readonly 'column dense': SerializedStyles_2;
-};
-
-// @public (undocumented)
-export type GridProps<T extends ElementType = 'div'> = {
-    as?: 'div' | 'ol' | 'span' | 'ul';
-    justifyContent?: JustifyContent_2;
-    justifyItems?: JustifyItems;
-    alignItems?: AlignItems_2;
-    alignContent?: AlignContent;
-    columnGap?: Space;
-    gap?: Space;
-    rowGap?: Space;
-    autoFlow?: AutoFlow;
-    templateRows?: string;
-    templateColumns?: string;
-    templateAreas?: string[];
-    children: ReactNode;
-    id?: string;
-    ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
-
-// @public (undocumented)
-type Grow = 'fill' | 'hug';
-
-// @public
-export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<{
-as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
-alignBlock?: AlignBlock | undefined;
-alignInline?: AlignInline | undefined;
-shouldWrap?: boolean | undefined;
-spread?: "space-between" | undefined;
-grow?: Grow | undefined;
-space?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-rowSpace?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-separator?: string | undefined;
-children: ReactNode;
-ref?: any;
-} & BasePrimitiveProps, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | keyof BasePrimitiveProps> & RefAttributes<any>>>;
-
-// @public (undocumented)
-export type InlineProps<T extends ElementType = 'div'> = {
-    as?: 'div' | 'li' | 'ol' | 'span' | 'ul';
-    alignBlock?: AlignBlock;
-    alignInline?: AlignInline;
-    shouldWrap?: boolean;
-    spread?: Spread;
-    grow?: Grow;
-    space?: Space;
-    rowSpace?: Space;
-    separator?: string;
-    children: ReactNode;
-    ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
-
-// @public (undocumented)
-type JustifyContent = keyof typeof justifyContentMap;
-
-// @public (undocumented)
-type JustifyContent_2 = keyof typeof justifyContentMap_2;
-
-// @public (undocumented)
-const justifyContentMap: {
-    readonly start: SerializedStyles_2;
-    readonly center: SerializedStyles_2;
-    readonly end: SerializedStyles_2;
-    readonly 'space-between': SerializedStyles_2;
-    readonly 'space-around': SerializedStyles_2;
-    readonly 'space-evenly': SerializedStyles_2;
-    readonly stretch: SerializedStyles_2;
-};
-
-// @public (undocumented)
-const justifyContentMap_2: {
-    readonly start: SerializedStyles_2;
-    readonly center: SerializedStyles_2;
-    readonly end: SerializedStyles_2;
-    readonly 'space-between': SerializedStyles_2;
-    readonly 'space-around': SerializedStyles_2;
-    readonly 'space-evenly': SerializedStyles_2;
-    readonly stretch: SerializedStyles_2;
-};
-
-// @public (undocumented)
-type JustifyItems = keyof typeof justifyItemsMap;
-
-// @public (undocumented)
-const justifyItemsMap: {
-    readonly start: SerializedStyles_2;
-    readonly center: SerializedStyles_2;
-    readonly end: SerializedStyles_2;
-    readonly stretch: SerializedStyles_2;
-};
-
-// @public (undocumented)
-export type Layer = keyof typeof layerMap;
-
-// @public
-const layerMap: {
-    readonly card: 100;
-    readonly navigation: 200;
-    readonly dialog: 300;
-    readonly layer: 400;
-    readonly blanket: 500;
-    readonly modal: 510;
-    readonly flag: 600;
-    readonly spotlight: 700;
-    readonly tooltip: 800;
-};
-
-// @public (undocumented)
-type MarginSpace = 'auto' | NegativeSpace | Space;
-
-// @public
-export const media: SafeMedia;
-
-// @public
-type MediaQuery = (typeof media.above)[Breakpoint];
-
-// @public (undocumented)
-type NegativeSpace = keyof typeof negativeSpaceMap;
-
-// @public (undocumented)
-const negativeSpaceMap: {
-    'space.negative.025': "var(--ds-space-negative-025)";
-    'space.negative.050': "var(--ds-space-negative-050)";
-    'space.negative.075': "var(--ds-space-negative-075)";
-    'space.negative.100': "var(--ds-space-negative-100)";
-    'space.negative.150': "var(--ds-space-negative-150)";
-    'space.negative.200': "var(--ds-space-negative-200)";
-    'space.negative.250': "var(--ds-space-negative-250)";
-    'space.negative.300': "var(--ds-space-negative-300)";
-    'space.negative.400': "var(--ds-space-negative-400)";
-};
-
-// @public (undocumented)
-type Opacity = keyof typeof opacityMap;
-
-// @public
-const opacityMap: {
-    readonly 'opacity.disabled': "var(--ds-opacity-disabled)";
-    readonly 'opacity.loading': "var(--ds-opacity-loading)";
-};
-
-// @public (undocumented)
-type SafeCSSObject = CSSPseudos & CSSAtRules & TokenisedProps & CSSMediaQueries & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
-
-// @public
-type SafeMedia = Pick<typeof UNSAFE_media, 'above'>;
-
-// @public (undocumented)
-export type Shadow = keyof typeof shadowMap;
-
-// @public (undocumented)
-const shadowMap: {
-    readonly 'elevation.shadow.overflow': "var(--ds-shadow-overflow)";
-    readonly 'elevation.shadow.overflow.perimeter': "var(--ds-shadow-overflow-perimeter)";
-    readonly 'elevation.shadow.overflow.spread': "var(--ds-shadow-overflow-spread)";
-    readonly 'elevation.shadow.overlay': "var(--ds-shadow-overlay)";
-    readonly 'elevation.shadow.raised': "var(--ds-shadow-raised)";
-};
-
-// @public (undocumented)
-export type Space = keyof typeof spaceMap;
-
-// @public (undocumented)
-type Space_2 = 'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200';
-
-// @public
-const spaceMap: {
-    'space.0': "var(--ds-space-0)";
-    'space.025': "var(--ds-space-025)";
-    'space.050': "var(--ds-space-050)";
-    'space.075': "var(--ds-space-075)";
-    'space.100': "var(--ds-space-100)";
-    'space.150': "var(--ds-space-150)";
-    'space.200': "var(--ds-space-200)";
-    'space.250': "var(--ds-space-250)";
-    'space.300': "var(--ds-space-300)";
-    'space.400': "var(--ds-space-400)";
-    'space.500': "var(--ds-space-500)";
-    'space.600': "var(--ds-space-600)";
-    'space.800': "var(--ds-space-800)";
-    'space.1000': "var(--ds-space-1000)";
-};
-
-// @public (undocumented)
-type Spread = 'space-between';
-
-// @public
-export const Stack: MemoExoticComponent<ForwardRefExoticComponent<Pick<{
-as?: "div" | "ol" | "span" | "ul" | undefined;
-alignBlock?: "center" | "end" | "start" | "stretch" | undefined;
-alignInline?: AlignInline | undefined;
-spread?: "space-between" | undefined;
-grow?: Grow | undefined;
-space?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.1000" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | undefined;
-children: ReactNode;
-ref?: any;
-} & BasePrimitiveProps, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "space" | "spread" | keyof BasePrimitiveProps> & RefAttributes<any>>>;
-
-// @public (undocumented)
-export type StackProps<T extends ElementType = 'div'> = {
-    as?: 'div' | 'ol' | 'span' | 'ul';
-    alignBlock?: Exclude<AlignBlock, 'baseline'>;
-    alignInline?: AlignInline;
-    spread?: Spread;
-    grow?: Grow;
-    space?: Space;
-    children: ReactNode;
-    ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
-
-// @public (undocumented)
-type StyleProp = {
-    style?: CSSProperties;
-};
-
-// @public (undocumented)
-type SVGElements = 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'svg' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';
-
-// @internal
-const Text_2: FC<TextProps>;
-export { Text_2 as Text }
-
-// @public (undocumented)
-type TextAlign = keyof typeof textAlignMap;
-
-// @public (undocumented)
-const textAlignMap: {
-    center: SerializedStyles_2;
-    end: SerializedStyles_2;
-    start: SerializedStyles_2;
-};
-
-// @public (undocumented)
-export type TextColor = keyof typeof textColorMap;
-
-// @public (undocumented)
-const textColorMap: {
-    readonly 'color.text': "var(--ds-text)";
-    readonly 'color.text.accent.lime': "var(--ds-text-accent-lime)";
-    readonly 'color.text.accent.lime.bolder': "var(--ds-text-accent-lime-bolder)";
-    readonly 'color.text.accent.red': "var(--ds-text-accent-red)";
-    readonly 'color.text.accent.red.bolder': "var(--ds-text-accent-red-bolder)";
-    readonly 'color.text.accent.orange': "var(--ds-text-accent-orange)";
-    readonly 'color.text.accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
-    readonly 'color.text.accent.yellow': "var(--ds-text-accent-yellow)";
-    readonly 'color.text.accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
-    readonly 'color.text.accent.green': "var(--ds-text-accent-green)";
-    readonly 'color.text.accent.green.bolder': "var(--ds-text-accent-green-bolder)";
-    readonly 'color.text.accent.teal': "var(--ds-text-accent-teal)";
-    readonly 'color.text.accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
-    readonly 'color.text.accent.blue': "var(--ds-text-accent-blue)";
-    readonly 'color.text.accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
-    readonly 'color.text.accent.purple': "var(--ds-text-accent-purple)";
-    readonly 'color.text.accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
-    readonly 'color.text.accent.magenta': "var(--ds-text-accent-magenta)";
-    readonly 'color.text.accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
-    readonly 'color.text.accent.gray': "var(--ds-text-accent-gray)";
-    readonly 'color.text.accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
-    readonly 'color.text.disabled': "var(--ds-text-disabled)";
-    readonly 'color.text.inverse': "var(--ds-text-inverse)";
-    readonly 'color.text.selected': "var(--ds-text-selected)";
-    readonly 'color.text.brand': "var(--ds-text-brand)";
-    readonly 'color.text.danger': "var(--ds-text-danger)";
-    readonly 'color.text.warning': "var(--ds-text-warning)";
-    readonly 'color.text.warning.inverse': "var(--ds-text-warning-inverse)";
-    readonly 'color.text.success': "var(--ds-text-success)";
-    readonly 'color.text.discovery': "var(--ds-text-discovery)";
-    readonly 'color.text.information': "var(--ds-text-information)";
-    readonly 'color.text.subtlest': "var(--ds-text-subtlest)";
-    readonly 'color.text.subtle': "var(--ds-text-subtle)";
-    readonly 'color.link': "var(--ds-link)";
-    readonly 'color.link.pressed': "var(--ds-link-pressed)";
-    readonly 'color.link.visited': "var(--ds-link-visited)";
-};
-
-// @public (undocumented)
-export interface TextProps extends BasePrimitiveProps {
-    as?: AsElement;
-    children: ReactNode;
-    color?: TextColor;
-    id?: string;
-    shouldTruncate?: boolean;
-    textAlign?: TextAlign;
-    variant?: Variant;
-}
-
-// @public (undocumented)
-type TokenisedProps = {
-    backgroundColor?: BackgroundColor;
-    blockSize?: AutoComplete<Dimension>;
-    borderBlockColor?: AutoComplete<BorderColor>;
-    borderBlockEndColor?: AutoComplete<BorderColor>;
-    borderBlockEndWidth?: AutoComplete<BorderWidth>;
-    borderBlockStartColor?: AutoComplete<BorderColor>;
-    borderBlockStartWidth?: AutoComplete<BorderWidth>;
-    borderBlockWidth?: AutoComplete<BorderWidth>;
-    borderBottomColor?: AutoComplete<BorderColor>;
-    borderBottomLeftRadius?: AutoComplete<BorderRadius>;
-    borderBottomRightRadius?: AutoComplete<BorderRadius>;
-    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;
-    columnGap?: Space;
-    gap?: Space;
-    height?: AutoComplete<Dimension>;
-    inlineSize?: AutoComplete<Dimension>;
-    inset?: Space;
-    insetBlock?: Space;
-    insetBlockEnd?: Space;
-    insetBlockStart?: Space;
-    insetInline?: Space;
-    insetInlineEnd?: Space;
-    insetInlineStart?: Space;
-    left?: AutoComplete<Space>;
-    margin?: AutoComplete<MarginSpace>;
-    marginBlock?: AutoComplete<MarginSpace>;
-    marginBlockEnd?: AutoComplete<MarginSpace>;
-    marginBlockStart?: AutoComplete<MarginSpace>;
-    marginBottom?: AutoComplete<MarginSpace>;
-    marginInline?: AutoComplete<MarginSpace>;
-    marginInlineEnd?: AutoComplete<MarginSpace>;
-    marginInlineStart?: AutoComplete<MarginSpace>;
-    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>;
-    opacity?: AutoComplete<Opacity> | number;
-    outlineColor?: BorderColor;
-    outlineOffset?: Space;
-    outlineWidth?: BorderWidth;
-    padding?: Space;
-    paddingBlock?: Space;
-    paddingBlockEnd?: Space;
-    paddingBlockStart?: Space;
-    paddingBottom?: AutoComplete<Space>;
-    paddingInline?: Space;
-    paddingInlineEnd?: Space;
-    paddingInlineStart?: Space;
-    paddingLeft?: AutoComplete<Space>;
-    paddingRight?: AutoComplete<Space>;
-    paddingTop?: AutoComplete<Space>;
-    right?: AutoComplete<Space>;
-    rowGap?: Space;
-    top?: AutoComplete<Space>;
-    width?: AutoComplete<Dimension>;
-    zIndex?: Layer;
-};
-
-// @public (undocumented)
-type UiText = keyof typeof uiTextMap;
-
-// @public (undocumented)
-const uiTextMap: {
-    ui: "var(--ds-font-ui)";
-    'ui.small': "var(--ds-font-ui-small)";
-};
-
-// @public (undocumented)
-const uniqueSymbol: unique symbol;
-
-// @public
-export const UNSAFE_BREAKPOINTS_CONFIG: {
-    readonly xxs: {
-        readonly gridItemGutter: "var(--ds-space-200)";
-        readonly gridMargin: "var(--ds-space-200)";
-        readonly min: "0rem";
-        readonly max: "29.99rem";
-    };
-    readonly xs: {
-        readonly gridItemGutter: "var(--ds-space-200)";
-        readonly gridMargin: "var(--ds-space-200)";
-        readonly min: "30rem";
-        readonly max: "47.99rem";
-    };
-    readonly sm: {
-        readonly gridItemGutter: "var(--ds-space-200)";
-        readonly gridMargin: "var(--ds-space-300)";
-        readonly min: "48rem";
-        readonly max: "63.99rem";
-    };
-    readonly md: {
-        readonly gridItemGutter: "var(--ds-space-300)";
-        readonly gridMargin: "var(--ds-space-400)";
-        readonly min: "64rem";
-        readonly max: "89.99rem";
-    };
-    readonly lg: {
-        readonly gridItemGutter: "var(--ds-space-400)";
-        readonly gridMargin: "var(--ds-space-400)";
-        readonly min: "90rem";
-        readonly max: "109.99rem";
-    };
-    readonly xl: {
-        readonly gridItemGutter: "var(--ds-space-400)";
-        readonly gridMargin: "var(--ds-space-500)";
-        readonly min: "110rem";
-        readonly max: null;
-    };
-};
-
-// @internal
-export const UNSAFE_media: {
-    above: {
-        readonly xxs: "@media all";
-        readonly xs: "@media (min-width: 30rem)";
-        readonly sm: "@media (min-width: 48rem)";
-        readonly md: "@media (min-width: 64rem)";
-        readonly lg: "@media (min-width: 90rem)";
-        readonly xl: "@media (min-width: 110rem)";
-    };
-    below: {
-        readonly xs: "@media not all and (min-width: 30rem)";
-        readonly sm: "@media not all and (min-width: 48rem)";
-        readonly md: "@media not all and (min-width: 64rem)";
-        readonly lg: "@media not all and (min-width: 90rem)";
-        readonly xl: "@media not all and (min-width: 110rem)";
-    };
-    only: {
-        readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
-        readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
-        readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
-        readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
-        readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
-        readonly xl: "@media (min-width: 110rem)";
-    };
-};
-
-// @public (undocumented)
-type Variant = BodyText | UiText;
-
-// @public (undocumented)
-type Wrap = keyof typeof flexWrapMap;
-
-// @public (undocumented)
-type XCSS = ReturnType<typeof xcss>;
-
-// @public
-export function xcss(style: SafeCSSObject): {
-    readonly [uniqueSymbol]: SerializedStyles;
-};
-
-// (No @packageDocumentation comment for this package)
-
-```