@atlaskit/primitives 12.2.6 → 13.0.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/primitives
 
+## 13.0.0
+
+### Major Changes
+
+- [#158114](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158114)
+  [`01676a379617b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/01676a379617b) -
+  This generates a new entrypoint for opt-in to Compiled through `@atlaskit/primitives/compiled`.
+
+  No documentation is currently available on how to use this, and this is for internal testing, use
+  at your own risk.
+
+  Possibly BREAKING: In theory, this could have an impact depending on your bundling setup due to
+  newly distributed `dist/cjs/compiled/box.compiled.css` type files—the most notable impact is in an
+  extreme, Webpack may error if it was not expecting `*.css` files (and then these files could be
+  ignored for now following future updates), _or_ are included but not used, increasing
+  client-facing bundle size.
+
+### Minor Changes
+
+- [#158114](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/158114)
+  [`01676a379617b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/01676a379617b) -
+  Remove the UNSAFE_SurfaceContext export which was temporarily used internally and not documented
+  for public use.
+
+## 12.2.7
+
+### Patch Changes
+
+- [#155472](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155472)
+  [`3d80f6ab74b68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d80f6ab74b68) -
+  Add zIndex: 1 to XCSS layer API.
+
 ## 12.2.6
 
 ### Patch Changes

package/compiled/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/primitives/compiled",
+  "main": "../dist/cjs/compiled/index.js",
+  "module": "../dist/esm/compiled/index.js",
+  "module:es2019": "../dist/es2019/compiled/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/compiled/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/compiled/index.d.ts"
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+
+._1hms8stv{text-decoration-line:underline}
+._4bfu18uv{text-decoration-color:initial}
+._ajmmnqa1{text-decoration-style:solid}
+._vchhusvi{box-sizing:border-box}
+._ymio1r31:focus:not(:focus-visible){outline-color:currentColor}
+._ypr0glyw:focus:not(:focus-visible){outline-style:none}
+._zcxs1o36:focus:not(:focus-visible){outline-width:medium}._1bg4v77o:focus, ._1ah3v77o:focus-visible{outline-offset:var(--ds-space-025,2px)}
+._1hvw1bk5:focus, ._128m1bk5:focus-visible{outline-width:var(--ds-border-width-outline,2px)}
+._49pcnqa1:focus, ._ra3xnqa1:focus-visible{outline-style:solid}
+._nt751p6i:focus, ._mizu1p6i:focus-visible{outline-color:var(--ds-border-focused,#388bff)}
+@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._qa7m1r31:focus-visible{outline-color:currentColor}._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}

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

@@ -0,0 +1,130 @@
+/* anchor.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./anchor.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _appProvider = require("@atlaskit/app-provider");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _useId = require("@atlaskit/ds-lib/use-id");
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _excluded = ["href", "children", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss", "opensInNewWindowLabel"],
+  _excluded2 = ["className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  root: "_vchhusvi _4bfu18uv _1hms8stv _ajmmnqa1",
+  focusRing: "_ymio1r31 _ypr0glyw _zcxs1o36 _nt751p6i _mizu1p6i _1bg4v77o _1ah3v77o _49pcnqa1 _ra3xnqa1 _1hvw1bk5 _128m1bk5 _qa7m1r31 _1cvmnqa1 _4davt94y"
+};
+var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
+var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
+
+/**
+ * __Anchor__
+ *
+ * A primitive for building custom anchor links.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
+ */
+var AnchorNoRef = function AnchorNoRef(_ref, ref) {
+  var href = _ref.href,
+    children = _ref.children,
+    _ref$onClick = _ref.onClick,
+    providedOnClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
+    interactionName = _ref.interactionName,
+    componentName = _ref.componentName,
+    analyticsContext = _ref.analyticsContext,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
+    style = _ref.style,
+    target = _ref.target,
+    testId = _ref.testId,
+    xcss = _ref.xcss,
+    _ref$opensInNewWindow = _ref.opensInNewWindowLabel,
+    opensInNewWindowLabel = _ref$opensInNewWindow === void 0 ? '(opens new window)' : _ref$opensInNewWindow,
+    htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  var opensNewWindowLabelId = (0, _useId.useId)();
+  var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: handleClick,
+    action: 'clicked',
+    componentName: componentName || 'Anchor',
+    packageName: "@atlaskit/primitives",
+    packageVersion: "13.0.0",
+    analyticsData: analyticsContext,
+    actionSubject: 'link'
+  });
+
+  // This is to remove className from safeHtmlAttributes
+  // @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
+  var _spreadClass = htmlAttributes.className,
+    safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
+  var RouterLink = (0, _appProvider.useRouterLink)();
+  var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
+  var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
+
+  /**
+   * Renders a router link if:
+   *
+   * - a link component is set in the app provider
+   * - it's not an external link (starting with `http://` or `https://`)
+   * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.).
+   */
+  var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
+  var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
+  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
+  var Component = isRouterLink ? RouterLink : 'a';
+  return /*#__PURE__*/React.createElement(Component
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+  , (0, _extends2.default)({
+    className: (0, _runtime.ax)([styles.root, styles.focusRing, xcss])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
+    ,
+    style: style,
+    ref: ref
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, safeHtmlAttributes, {
+    // @ts-expect-error
+    href: !isRouterLink && typeof href !== 'string' ? undefined : href,
+    target: target,
+    onClick: onClick,
+    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(opensInNewWindowLabel) : ariaLabel,
+    "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
+    "data-testid": testId,
+    "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
+  }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(_visuallyHidden.default, {
+    id: opensNewWindowLabelId
+  }, opensInNewWindowLabel));
+};
+
+// Workarounds to support generic types with forwardRef
+/**
+ * __Anchor__
+ *
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
+ */
+var Anchor = /*#__PURE__*/(0, _react.forwardRef)(AnchorNoRef);
+var _default = exports.default = Anchor;

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

@@ -0,0 +1,11 @@
+._195g1e8l{margin-inline:var(--ds-space-negative-200,-1rem)}
+._195g4pxn{margin-inline:var(--ds-space-negative-025,-.125rem)}
+._195ggp71{margin-inline:var(--ds-space-negative-050,-.25rem)}
+._195gkqjj{margin-inline:var(--ds-space-negative-150,-.75rem)}
+._195gtdkl{margin-inline:var(--ds-space-negative-100,-.5rem)}
+._1mou1e8l{margin-block:var(--ds-space-negative-200,-1rem)}
+._1mou4pxn{margin-block:var(--ds-space-negative-025,-.125rem)}
+._1mougp71{margin-block:var(--ds-space-negative-050,-.25rem)}
+._1moukqjj{margin-block:var(--ds-space-negative-150,-.75rem)}
+._1moutdkl{margin-block:var(--ds-space-negative-100,-.5rem)}
+._vchhusvi{box-sizing:border-box}

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

@@ -0,0 +1,49 @@
+/* bleed.tsx generated by @compiled/babel-plugin v0.32.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./bleed.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+// NOTE: This maintains a full map of 10 styles as Bleed is a bit of a semantic outlier
+var styles = {
+  root: "_vchhusvi",
+  'inline.space.025': "_195g4pxn",
+  'inline.space.050': "_195ggp71",
+  'inline.space.100': "_195gtdkl",
+  'inline.space.150': "_195gkqjj",
+  'inline.space.200': "_195g1e8l",
+  'block.space.025': "_1mou4pxn",
+  'block.space.050': "_1mougp71",
+  'block.space.100': "_1moutdkl",
+  'block.space.150': "_1moukqjj",
+  'block.space.200': "_1mou1e8l"
+};
+
+/**
+ * __Bleed__
+ *
+ * `Bleed` is a primitive layout component that controls negative whitespace.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/bleed/examples)
+ * - [Code](https://atlassian.design/components/primitives/bleed/code)
+ */
+var Bleed = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var children = _ref.children,
+    testId = _ref.testId,
+    inline = _ref.inline,
+    block = _ref.block,
+    all = _ref.all,
+    xcss = _ref.xcss;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- TODO: Allow pass-through from `props.xcss`
+    className: (0, _runtime.ax)([styles.root, all && styles["inline.".concat(all)], inline && styles["inline.".concat(inline)], all && styles["block.".concat(all)], block && styles["block.".concat(block)], xcss]),
+    "data-testid": testId
+  }, children);
+});
+Bleed.displayName = 'Bleed';
+var _default = exports.default = Bleed;

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

@@ -0,0 +1,266 @@
+._19itglyw{border:none}
+._1q1l108i{--ds-elevation-surface-current:var(--ds-surface-hovered,#f1f2f4)}
+._1q1l16qz{--ds-elevation-surface-current:var(--ds-surface-overlay-hovered,#f1f2f4)}
+._1q1l1a0f{--ds-elevation-surface-current:var(--ds-surface-raised-hovered,#f1f2f4)}
+._1q1l1bhr{--ds-elevation-surface-current:var(--ds-surface-overlay,#fff)}
+._1q1l1ji5{--ds-elevation-surface-current:var(--ds-surface-pressed,#dcdfe4)}
+._1q1lf7u5{--ds-elevation-surface-current:var(--ds-surface-raised-pressed,#dcdfe4)}
+._1q1lhp5a{--ds-elevation-surface-current:var(--ds-surface-raised,#fff)}
+._1q1lqbzx{--ds-elevation-surface-current:var(--ds-surface-sunken,#f7f8f9)}
+._1q1lvq0a{--ds-elevation-surface-current:var(--ds-surface-overlay-pressed,#dcdfe4)}
+._1q1lvuon{--ds-elevation-surface-current:var(--ds-surface,#fff)}
+._1q5112x7{padding-block-start:var(--ds-space-075,6px)}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q511ejb{padding-block-start:var(--ds-space-300,24px)}
+._1q511epz{padding-block-start:var(--ds-space-1000,5pc)}
+._1q511jfw{padding-block-start:var(--ds-space-500,40px)}
+._1q51oahv{padding-block-start:var(--ds-space-600,3pc)}
+._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
+._1q51v47k{padding-block-start:var(--ds-space-250,20px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1q51xncg{padding-block-start:var(--ds-space-800,4pc)}
+._1q51xy5q{padding-block-start:var(--ds-space-400,2pc)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i51ejb{padding-block-end:var(--ds-space-300,24px)}
+._85i51epz{padding-block-end:var(--ds-space-1000,5pc)}
+._85i51jfw{padding-block-end:var(--ds-space-500,40px)}
+._85i5oahv{padding-block-end:var(--ds-space-600,3pc)}
+._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
+._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
+._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
+._85i5v47k{padding-block-end:var(--ds-space-250,20px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._85i5xncg{padding-block-end:var(--ds-space-800,4pc)}
+._85i5xy5q{padding-block-end:var(--ds-space-400,2pc)}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._bfhk100f{background-color:var(--ds-background-accent-red-bolder-hovered,#ae2e24)}
+._bfhk108c{background-color:var(--ds-background-accent-teal-subtlest-hovered,#c6edfb)}
+._bfhk108i{background-color:var(--ds-surface-hovered,#f1f2f4)}
+._bfhk10ai{background-color:var(--ds-background-accent-teal-subtle-pressed,#c6edfb)}
+._bfhk10xm{background-color:var(--ds-blanket,#091e427d)}
+._bfhk11bn{background-color:var(--ds-background-accent-gray-subtlest,#f1f2f4)}
+._bfhk11dh{background-color:var(--ds-background-warning-pressed,#f5cd47)}
+._bfhk12e3{background-color:var(--ds-background-accent-green-subtle-hovered,#7ee2b8)}
+._bfhk12j4{background-color:var(--ds-background-accent-gray-subtlest-hovered,#dcdfe4)}
+._bfhk14wj{background-color:var(--ds-background-information-bold,#0c66e4)}
+._bfhk15ej{background-color:var(--ds-background-neutral-hovered,#091e4224)}
+._bfhk15mt{background-color:var(--ds-background-brand-boldest,#1c2b41)}
+._bfhk166n{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._bfhk16e6{background-color:var(--ds-background-accent-blue-subtler-hovered,#85b8ff)}
+._bfhk16qz{background-color:var(--ds-surface-overlay-hovered,#f1f2f4)}
+._bfhk17e6{background-color:var(--ds-background-accent-yellow-subtle-hovered,#e2b203)}
+._bfhk17jr{background-color:var(--ds-background-brand-boldest-pressed,#05c)}
+._bfhk18hz{background-color:var(--ds-background-selected-bold-hovered,#05c)}
+._bfhk190i{background-color:var(--ds-background-warning-bold,#f5cd47)}
+._bfhk19g9{background-color:var(--ds-background-accent-yellow-subtlest-hovered,#f8e6a0)}
+._bfhk19ru{background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._bfhk1a0f{background-color:var(--ds-surface-raised-hovered,#f1f2f4)}
+._bfhk1a17{background-color:var(--ds-background-accent-teal-subtler,#c6edfb)}
+._bfhk1a2l{background-color:var(--ds-background-accent-gray-subtle-hovered,#b3b9c4)}
+._bfhk1amz{background-color:var(--ds-background-information-bold-hovered,#05c)}
+._bfhk1azz{background-color:var(--ds-background-accent-green-bolder-pressed,#164b35)}
+._bfhk1b17{background-color:var(--ds-background-accent-lime-bolder-pressed,#37471f)}
+._bfhk1b6k{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1bsc{background-color:var(--ds-background-neutral-bold-hovered,#2c3e5d)}
+._bfhk1cwi{background-color:var(--ds-background-accent-blue-bolder-hovered,#05c)}
+._bfhk1d44{background-color:var(--ds-background-accent-yellow-subtler-pressed,#e2b203)}
+._bfhk1d5g{background-color:var(--ds-background-input-hovered,#f7f8f9)}
+._bfhk1dty{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+._bfhk1e5c{background-color:var(--ds-background-accent-green-bolder,#1f845a)}
+._bfhk1eds{background-color:var(--ds-background-accent-lime-subtler-hovered,#b3df72)}
+._bfhk1een{background-color:var(--ds-background-accent-magenta-subtlest-pressed,#f797d2)}
+._bfhk1f4s{background-color:var(--ds-background-accent-blue-subtle-hovered,#85b8ff)}
+._bfhk1f7l{background-color:var(--ds-background-accent-gray-subtler-hovered,#b3b9c4)}
+._bfhk1fno{background-color:var(--ds-background-accent-lime-subtlest-pressed,#b3df72)}
+._bfhk1fvw{background-color:var(--ds-background-selected-bold,#0c66e4)}
+._bfhk1g3m{background-color:var(--ds-background-accent-orange-subtlest,#fff3eb)}
+._bfhk1g6e{background-color:var(--ds-background-accent-orange-subtle,#fea362)}
+._bfhk1gii{background-color:var(--ds-background-inverse-subtle-pressed,#00000052)}
+._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1hgz{background-color:var(--ds-background-accent-lime-subtler-pressed,#94c748)}
+._bfhk1i4c{background-color:var(--ds-background-warning-bold-hovered,#e2b203)}
+._bfhk1i6i{background-color:var(--ds-background-accent-red-subtlest-hovered,#ffd5d2)}
+._bfhk1io2{background-color:var(--ds-background-danger-pressed,#fd9891)}
+._bfhk1j2h{background-color:var(--ds-background-accent-teal-subtlest-pressed,#9dd9ee)}
+._bfhk1j89{background-color:var(--ds-background-accent-blue-subtle,#579dff)}
+._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
+._bfhk1jgi{background-color:var(--ds-background-success-hovered,#baf3db)}
+._bfhk1ji5{background-color:var(--ds-surface-pressed,#dcdfe4)}
+._bfhk1jkz{background-color:var(--ds-background-accent-purple-subtler,#dfd8fd)}
+._bfhk1lb4{background-color:var(--ds-background-accent-gray-subtlest-pressed,#b3b9c4)}
+._bfhk1lml{background-color:var(--ds-background-accent-orange-subtler-hovered,#fec195)}
+._bfhk1lri{background-color:var(--ds-background-discovery-bold,#6e5dc6)}
+._bfhk1mi6{background-color:var(--ds-background-accent-magenta-subtle,#e774bb)}
+._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
+._bfhk1oew{background-color:var(--ds-background-accent-orange-subtle-hovered,#fec195)}
+._bfhk1ok8{background-color:var(--ds-background-accent-magenta-bolder-hovered,#943d73)}
+._bfhk1ovh{background-color:var(--ds-background-accent-magenta-subtle-pressed,#fdd0ec)}
+._bfhk1ozg{background-color:var(--ds-background-accent-yellow-subtlest,#fff7d6)}
+._bfhk1p19{background-color:var(--ds-background-accent-green-subtler-pressed,#4bce97)}
+._bfhk1pbw{background-color:var(--ds-background-accent-red-subtlest-pressed,#fd9891)}
+._bfhk1phk{background-color:var(--ds-background-accent-orange-subtle-pressed,#fedec8)}
+._bfhk1q4l{background-color:var(--ds-background-success-bold-hovered,#216e4e)}
+._bfhk1r0p{background-color:var(--ds-background-accent-magenta-subtler-hovered,#f797d2)}
+._bfhk1rd4{background-color:var(--ds-background-warning-hovered,#f8e6a0)}
+._bfhk1rsu{background-color:var(--ds-background-accent-green-subtle,#4bce97)}
+._bfhk1rtt{background-color:var(--ds-background-accent-red-subtler,#ffd5d2)}
+._bfhk1s0z{background-color:var(--ds-background-information-pressed,#85b8ff)}
+._bfhk1sou{background-color:var(--ds-background-accent-red-subtle-hovered,#fd9891)}
+._bfhk1t05{background-color:var(--ds-background-accent-gray-subtle,#8590a2)}
+._bfhk1t1b{background-color:var(--ds-background-accent-gray-bolder,#626f86)}
+._bfhk1tf4{background-color:var(--ds-background-accent-red-subtle-pressed,#ffd5d2)}
+._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
+._bfhk1uh7{background-color:var(--ds-background-accent-blue-subtler-pressed,#579dff)}
+._bfhk1uro{background-color:var(--ds-background-accent-purple-bolder-pressed,#352c63)}
+._bfhk1uwk{background-color:var(--ds-background-brand-boldest-hovered,#09326c)}
+._bfhk1v33{background-color:var(--ds-background-accent-gray-subtler,#dcdfe4)}
+._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
+._bfhk1vk5{background-color:var(--ds-background-accent-red-subtlest,#ffeceb)}
+._bfhk1vop{background-color:var(--ds-background-accent-yellow-bolder,#946f00)}
+._bfhk1vps{background-color:var(--ds-background-information-hovered,#cce0ff)}
+._bfhk1w72{background-color:var(--ds-background-discovery-bold-hovered,#5e4db2)}
+._bfhk1wnw{background-color:var(--ds-background-accent-green-subtler,#baf3db)}
+._bfhk1wob{background-color:var(--ds-background-accent-purple-subtle-hovered,#b8acf6)}
+._bfhk1wyu{background-color:var(--ds-background-accent-purple-subtler-hovered,#b8acf6)}
+._bfhk1xmr{background-color:var(--ds-background-accent-blue-subtlest-pressed,#85b8ff)}
+._bfhk1xp7{background-color:var(--ds-background-discovery-hovered,#dfd8fd)}
+._bfhk1ya0{background-color:var(--ds-background-accent-orange-subtlest-pressed,#fec195)}
+._bfhk1yvi{background-color:var(--ds-background-danger-hovered,#ffd5d2)}
+._bfhk1z0s{background-color:var(--ds-background-accent-gray-subtle-pressed,#dcdfe4)}
+._bfhk2c8p{background-color:var(--ds-background-accent-teal-bolder,#227d9b)}
+._bfhk2ggb{background-color:var(--ds-background-brand-subtlest-pressed,#85b8ff)}
+._bfhk31d1{background-color:var(--ds-background-accent-yellow-subtlest-pressed,#f5cd47)}
+._bfhk32kj{background-color:var(--ds-background-accent-yellow-bolder-pressed,#533f04)}
+._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
+._bfhk3fv2{background-color:var(--ds-background-accent-yellow-subtler,#f8e6a0)}
+._bfhk3utz{background-color:var(--ds-background-accent-green-subtlest-hovered,#baf3db)}
+._bfhk3wxy{background-color:var(--ds-background-brand-subtlest,#e9f2ff)}
+._bfhk4v9p{background-color:var(--ds-background-accent-blue-subtler,#cce0ff)}
+._bfhk5bth{background-color:var(--ds-background-information-bold-pressed,#09326c)}
+._bfhk5fkp{background-color:var(--ds-background-accent-purple-subtler-pressed,#9f8fef)}
+._bfhk69rw{background-color:var(--ds-background-accent-red-subtler-pressed,#f87168)}
+._bfhk7wq0{background-color:var(--ds-blanket-selected,#388bff14)}
+._bfhk7xuz{background-color:var(--ds-background-accent-teal-subtlest,#e7f9ff)}
+._bfhk82ra{background-color:var(--ds-background-accent-gray-bolder-pressed,#2c3e5d)}
+._bfhk8emd{background-color:var(--ds-background-success-bold,#1f845a)}
+._bfhk8h4p{background-color:var(--ds-background-accent-green-subtle-pressed,#baf3db)}
+._bfhk8tvm{background-color:var(--ds-background-accent-magenta-subtlest,#ffecf8)}
+._bfhk9pqq{background-color:var(--ds-background-danger-bold-pressed,#5d1f1a)}
+._bfhka5yi{background-color:var(--ds-background-accent-green-bolder-hovered,#216e4e)}
+._bfhkadgs{background-color:var(--ds-background-accent-purple-bolder-hovered,#5e4db2)}
+._bfhkavxe{background-color:var(--ds-background-accent-blue-subtlest,#e9f2ff)}
+._bfhkay3p{background-color:var(--ds-background-accent-blue-subtlest-hovered,#cce0ff)}
+._bfhkb29m{background-color:var(--ds-background-brand-bold,#0c66e4)}
+._bfhkbq5w{background-color:var(--ds-background-accent-lime-subtle,#94c748)}
+._bfhkc3uk{background-color:var(--ds-background-accent-magenta-bolder,#ae4787)}
+._bfhkc8cv{background-color:var(--ds-background-accent-blue-bolder,#0c66e4)}
+._bfhkcdhy{background-color:var(--ds-background-neutral-bold,#44546f)}
+._bfhkchd4{background-color:var(--ds-elevation-surface-current,#fff)}
+._bfhkcrcn{background-color:var(--ds-background-success-bold-pressed,#164b35)}
+._bfhkd4y8{background-color:var(--ds-background-accent-lime-subtlest-hovered,#d3f1a7)}
+._bfhkd8a2{background-color:var(--ds-background-accent-gray-subtler-pressed,#8590a2)}
+._bfhkdh45{background-color:var(--ds-background-accent-purple-subtle,#9f8fef)}
+._bfhkdlkp{background-color:var(--ds-background-discovery-pressed,#b8acf6)}
+._bfhke4nv{background-color:var(--ds-background-accent-gray-bolder-hovered,#44546f)}
+._bfhkezq1{background-color:var(--ds-background-brand-subtlest-hovered,#cce0ff)}
+._bfhkf2vu{background-color:var(--ds-background-accent-orange-subtler,#fedec8)}
+._bfhkf767{background-color:var(--ds-background-accent-orange-bolder-pressed,#702e00)}
+._bfhkf7u5{background-color:var(--ds-surface-raised-pressed,#dcdfe4)}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhkfoww{background-color:var(--ds-background-accent-lime-subtle-hovered,#b3df72)}
+._bfhkg4tm{background-color:var(--ds-background-accent-orange-subtlest-hovered,#fedec8)}
+._bfhkg5py{background-color:var(--ds-background-accent-teal-subtler-hovered,#9dd9ee)}
+._bfhkgr1v{background-color:var(--ds-background-selected-bold-pressed,#09326c)}
+._bfhkgslw{background-color:var(--ds-background-accent-purple-subtlest-pressed,#b8acf6)}
+._bfhkh3tw{background-color:var(--ds-skeleton-subtle,#091e4208)}
+._bfhkhcrq{background-color:var(--ds-background-accent-blue-bolder-pressed,#09326c)}
+._bfhkhgj8{background-color:var(--ds-background-accent-lime-subtle-pressed,#d3f1a7)}
+._bfhkhi52{background-color:var(--ds-background-accent-orange-bolder-hovered,#a54800)}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._bfhki1yw{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._bfhkip91{background-color:var(--ds-background-neutral-pressed,#091e424f)}
+._bfhkjgng{background-color:var(--ds-background-accent-orange-bolder,#c25100)}
+._bfhkkjqf{background-color:var(--ds-background-accent-yellow-bolder-hovered,#7f5f01)}
+._bfhkkrt9{background-color:var(--ds-background-accent-red-subtle,#f87168)}
+._bfhkl3ve{background-color:var(--ds-background-accent-teal-bolder-hovered,#206a83)}
+._bfhklg04{background-color:var(--ds-background-accent-yellow-subtler-hovered,#f5cd47)}
+._bfhkm0d5{background-color:var(--ds-background-accent-purple-subtlest-hovered,#dfd8fd)}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._bfhkm890{background-color:var(--ds-background-accent-lime-subtlest,#efffd6)}
+._bfhkmpja{background-color:var(--ds-background-inverse-subtle-hovered,#0000003d)}
+._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
+._bfhkn729{background-color:var(--ds-background-accent-green-subtlest,#dcfff1)}
+._bfhkn82g{background-color:var(--ds-skeleton,#091e420f)}
+._bfhknzpa{background-color:var(--ds-background-accent-lime-bolder-hovered,#4c6b1f)}
+._bfhko0y5{background-color:var(--ds-background-accent-yellow-subtle-pressed,#cf9f02)}
+._bfhkp7j4{background-color:var(--ds-background-accent-purple-subtlest,#f3f0ff)}
+._bfhkprmn{background-color:var(--ds-background-accent-red-bolder-pressed,#5d1f1a)}
+._bfhkq7li{background-color:var(--ds-background-accent-teal-subtler-pressed,#6cc3e0)}
+._bfhkqbzx{background-color:var(--ds-surface-sunken,#f7f8f9)}
+._bfhkqctv{background-color:var(--ds-background-accent-blue-subtle-pressed,#cce0ff)}
+._bfhkqkzo{background-color:var(--ds-background-brand-bold-pressed,#09326c)}
+._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
+._bfhkr3zd{background-color:var(--ds-background-accent-magenta-subtlest-hovered,#fdd0ec)}
+._bfhkrb53{background-color:var(--ds-background-discovery-bold-pressed,#352c63)}
+._bfhkrj9s{background-color:var(--ds-background-warning-bold-pressed,#cf9f02)}
+._bfhkrprw{background-color:var(--ds-blanket-danger,#ef5c4814)}
+._bfhkrw5d{background-color:var(--ds-background-accent-red-subtler-hovered,#fd9891)}
+._bfhkrwyz{background-color:var(--ds-background-accent-magenta-subtle-hovered,#f797d2)}
+._bfhkry5t{background-color:var(--ds-background-accent-yellow-subtle,#f5cd47)}
+._bfhks9hg{background-color:var(--ds-background-danger-bold-hovered,#ae2e24)}
+._bfhkse6l{background-color:var(--ds-background-accent-teal-bolder-pressed,#164555)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._bfhktde4{background-color:var(--ds-background-accent-lime-bolder,#5b7f24)}
+._bfhktdv8{background-color:var(--ds-background-accent-teal-subtle,#6cc3e0)}
+._bfhku1se{background-color:var(--ds-background-brand-bold-hovered,#05c)}
+._bfhkuibq{background-color:var(--ds-background-accent-red-bolder,#c9372c)}
+._bfhkung8{background-color:var(--ds-background-accent-green-subtler-hovered,#7ee2b8)}
+._bfhkuxsx{background-color:var(--ds-background-accent-orange-subtler-pressed,#fea362)}
+._bfhkv5yf{background-color:var(--ds-background-accent-green-subtlest-pressed,#7ee2b8)}
+._bfhkv9ra{background-color:var(--ds-background-accent-magenta-subtler,#fdd0ec)}
+._bfhkvq0a{background-color:var(--ds-surface-overlay-pressed,#dcdfe4)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._bfhkwaw3{background-color:var(--ds-background-accent-magenta-bolder-pressed,#50253f)}
+._bfhkwz05{background-color:var(--ds-background-accent-purple-subtle-pressed,#dfd8fd)}
+._bfhkxuzc{background-color:var(--ds-background-accent-magenta-subtler-pressed,#e774bb)}
+._bfhky4f1{background-color:var(--ds-background-success-pressed,#7ee2b8)}
+._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
+._bfhkygwo{background-color:var(--ds-background-accent-purple-bolder,#6e5dc6)}
+._bfhkz2ec{background-color:var(--ds-background-accent-lime-subtler,#d3f1a7)}
+._bfhkzh8h{background-color:var(--ds-background-accent-teal-subtle-hovered,#9dd9ee)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._bozg1ejb{padding-inline-start:var(--ds-space-300,24px)}
+._bozg1epz{padding-inline-start:var(--ds-space-1000,5pc)}
+._bozg1jfw{padding-inline-start:var(--ds-space-500,40px)}
+._bozgoahv{padding-inline-start:var(--ds-space-600,3pc)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._bozgutpp{padding-inline-start:var(--ds-space-150,9pt)}
+._bozgv47k{padding-inline-start:var(--ds-space-250,20px)}
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._bozgxncg{padding-inline-start:var(--ds-space-800,4pc)}
+._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._r06hglyw{-webkit-appearance:none;appearance:none}
+._vchhusvi{box-sizing:border-box}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4ti1ejb{padding-inline-end:var(--ds-space-300,24px)}
+._y4ti1epz{padding-inline-end:var(--ds-space-1000,5pc)}
+._y4ti1jfw{padding-inline-end:var(--ds-space-500,40px)}
+._y4tioahv{padding-inline-end:var(--ds-space-600,3pc)}
+._y4tipxbi{padding-inline-end:var(--ds-space-200,1pc)}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._y4tiv47k{padding-inline-end:var(--ds-space-250,20px)}
+._y4tiv77o{padding-inline-end:var(--ds-space-025,2px)}
+._y4tixncg{padding-inline-end:var(--ds-space-800,4pc)}
+._y4tixy5q{padding-inline-end:var(--ds-space-400,2pc)}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}