braid-design-system 32.1.1 → 32.2.0

package/CHANGELOG.md

@@ -1,5 +1,130 @@
 # braid-design-system
 
+## 32.2.0
+
+### Minor Changes
+
+- **Box, atoms, vars:** Add `small` to border radius scale ([#1253](https://github.com/seek-oss/braid-design-system/pull/1253))
+
+  Extends the border radius scale to include `small` as a step below `standard`.
+  This addition is to support an upcoming design uplift that requires greater fidelity in the scale.
+  Note, the new value is also available as a responsive property.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Box borderRadius="small" />;
+
+  {
+    /* Or responsively: */
+  }
+  <Box borderRadius={{ mobile: 'small', tablet: 'standard' }} />;
+  ```
+
+  ```ts
+  import { atoms } from 'braid-design-system/css';
+
+  atoms({ borderRadius: 'small' });
+  ```
+
+  ```ts
+  import { vars } from 'braid-design-system/css';
+
+  const radius = vars.borderRadius.small;
+  ```
+
+- **theme:** Add support for defining line heights with lineGap ([#1267](https://github.com/seek-oss/braid-design-system/pull/1267))
+
+  Provide support for themes to define their typographic line heights via `lineGap`.
+  This allows us to reason about the white space between wrapping lines of text in the same way we think about `Stack` spacing.
+
+  For a visual preview of this mental model head over to the [Capsize website].
+
+  [Capsize website]: https://seek-oss.github.io/capsize/
+
+- Add `xxxlarge` to the space scale ([#1262](https://github.com/seek-oss/braid-design-system/pull/1262))
+
+  Extends the range of the space scale to include `xxxlarge`.
+  This addition is to support an upcoming design uplift that requires greater fidelity in the scale.
+  Note, the new value is also available as a responsive property.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Stack space="xxxlarge">...</Stack>;
+
+  {
+    /* Or responsively: */
+  }
+  <Stack space={{ mobile: 'large', tablet: 'xxxlarge' }}>...</Stack>;
+  ```
+
+  ```ts
+  import { atoms } from 'braid-design-system/css';
+
+  atoms({ paddingY: 'xxxlarge' });
+  ```
+
+  ```ts
+  import { vars } from 'braid-design-system/css';
+
+  const space = vars.space.xxxlarge;
+  ```
+
+### Patch Changes
+
+- **theme:** Add support for webfonts beyond Google Fonts ([#1255](https://github.com/seek-oss/braid-design-system/pull/1255))
+
+  Previously the `webFont` on the theme was the `familyName` and was being used to construct a link tag to a Google Fonts stylesheet and provide to consumers via a runtime token.
+  To enable fonts beyond Google Fonts, we are changing `webFont` to be a URL.
+
+  This does not impact existing themes (as there are no themes currently with a web font), and the contract of the runtime token (a constructed link tag) remains unchanged.
+
+- **MenuRenderer:** Hide overflow on menu ([#1264](https://github.com/seek-oss/braid-design-system/pull/1264))
+
+  Fixes a bug where the selection/highlight for a `MenuItem` could extend outside of the menu itself.
+
+- **Badge:** Adjust height to support different typographic scales ([#1257](https://github.com/seek-oss/braid-design-system/pull/1257))
+
+  Adjusts the height of `Badge` to be driven by the capHeight of `xsmall` text plus vertical padding, rather than `xsmall` line height.
+  This enables different typographic scales across themes, while ensuring the `Badge` height is relative.
+
+- **RadioItem, Toggle:** Use formAccent border when selected ([#1251](https://github.com/seek-oss/braid-design-system/pull/1251))
+
+  Switch to using the `formAccent` border colour, rather than the `field` border color, when in the selected state (e.g. `checked` for `RadioItem`, `on` for `Toggle`).
+
+- Fix error reading `standard` of undefined ([#1256](https://github.com/seek-oss/braid-design-system/pull/1256))
+
+  The use of dynamic property access left some styles exposed to being marked as unused and tree shaken away.
+
+  Refactoring these styles to be explicitly referenced to ensure this will not be the case.
+
+- **TooltipRenderer:** Refine padding to complement radius scale ([#1263](https://github.com/seek-oss/braid-design-system/pull/1263))
+
+  Removes the custom padding on tooltips in favour of using the space scale.
+  Previously, a custom value was used to complement the over sized radius which has now be reduced.
+
+- **Button, ButtonLink:** Improve support for different typographic scales ([#1259](https://github.com/seek-oss/braid-design-system/pull/1259))
+
+  Ensure the height of a `small` sized `Button` is not reliant on the text line height.
+
+  This enables different typographic scales across themes, while ensuring the `Button` height is relative.
+
+- **Alert, Card, useToast:** Decouple keyline width from space scale ([#1266](https://github.com/seek-oss/braid-design-system/pull/1266))
+
+  Previously the keyline width on the left determined its width using the space scale.
+  Re-aligning this to use the grid unit to enable themes with larger space scales.
+
+- Improve consistency of border radius usage across components ([#1253](https://github.com/seek-oss/braid-design-system/pull/1253))
+
+  Over time, individual components have reached for a larger radius in the scale, rather than increasing the scale at a theme level. This resulted in inconsistent use across the system, preventing uplift of the scale.
+
+  Re-aligning all components to use the scale consistently enables themes to apply very different radius scales — enabling an upcoming design uplift theme.
+
+- **Dialog, Drawer:** Reduce space between title and description ([#1265](https://github.com/seek-oss/braid-design-system/pull/1265))
+
+  Reducing the space between `title` and `description` to `small` to improve association of the header block content
+
 ## 32.1.1
 
 ### Patch Changes

package/codemod/dist/wrapper.js

@@ -115018,7 +115018,7 @@ var require_lib29 = __commonJS({
       value: true
     });
     exports2.default = annotateAsPure;
-    var _t = require_lib3();
+    var _t = require_lib23();
     var {
       addComment
     } = _t;
@@ -247063,9 +247063,9 @@ var require_prettier = __commonJS({
       "node_modules/core-js/internals/ie8-dom-define.js"(exports22, module22) {
         var DESCRIPTORS = require_descriptors();
         var fails = require_fails();
-        var createElement = require_document_create_element();
+        var createElement2 = require_document_create_element();
         module22.exports = !DESCRIPTORS && !fails(function() {
-          return Object.defineProperty(createElement("div"), "a", {
+          return Object.defineProperty(createElement2("div"), "a", {
             get: function() {
               return 7;
             }
@@ -285396,7 +285396,7 @@ var require_react_development = __commonJS({
           }
           return element;
         };
-        function createElement(type2, config, children) {
+        function createElement2(type2, config, children) {
           var propName;
           var props = {};
           var key2 = null;
@@ -286472,7 +286472,7 @@ var require_react_development = __commonJS({
               error("React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", typeString, info);
             }
           }
-          var element = createElement.apply(this, arguments);
+          var element = createElement2.apply(this, arguments);
           if (element == null) {
             return element;
           }
@@ -298771,11 +298771,11 @@ var require_react_reconciler_development = __commonJS({
       module2.exports = function $$$reconciler($$$hostConfig) {
         var exports3 = {};
         "use strict";
-        var React3 = require_react();
+        var React4 = require_react();
         var _assign = require_object_assign();
         var Scheduler = require_scheduler();
         var tracing = require_tracing();
-        var ReactSharedInternals = React3.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+        var ReactSharedInternals = React4.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
         function warn(format) {
           {
             for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -301359,7 +301359,7 @@ var require_react_reconciler_development = __commonJS({
         }
         var fakeInternalInstance = {};
         var isArray = Array.isArray;
-        var emptyRefsObject = new React3.Component().refs;
+        var emptyRefsObject = new React4.Component().refs;
         var didWarnAboutStateAssignmentForComponent;
         var didWarnAboutUninitializedState;
         var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -311668,9 +311668,9 @@ var require_react_reconciler = __commonJS({
   }
 });
 
-// ../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0/node_modules/yoga-layout-prebuilt/yoga-layout/dist/YGEnums.js
+// ../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0_patch_hash=bohigvh5hpnbocmxkl4e5ainua/node_modules/yoga-layout-prebuilt/yoga-layout/dist/YGEnums.js
 var require_YGEnums = __commonJS({
-  "../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0/node_modules/yoga-layout-prebuilt/yoga-layout/dist/YGEnums.js"(exports2, module2) {
+  "../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0_patch_hash=bohigvh5hpnbocmxkl4e5ainua/node_modules/yoga-layout-prebuilt/yoga-layout/dist/YGEnums.js"(exports2, module2) {
     "use strict";
     var CONSTANTS = {
       ALIGN_COUNT: 8,
@@ -311755,9 +311755,9 @@ var require_YGEnums = __commonJS({
   }
 });
 
-// ../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-common.js
+// ../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0_patch_hash=bohigvh5hpnbocmxkl4e5ainua/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-common.js
 var require_entry_common = __commonJS({
-  "../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-common.js"(exports2, module2) {
+  "../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0_patch_hash=bohigvh5hpnbocmxkl4e5ainua/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-common.js"(exports2, module2) {
     "use strict";
     var _extends = Object.assign || function(target) {
       for (var i2 = 1; i2 < arguments.length; i2++) {
@@ -311978,9 +311978,9 @@ var require_entry_common = __commonJS({
   }
 });
 
-// ../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js
+// ../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0_patch_hash=bohigvh5hpnbocmxkl4e5ainua/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js
 var require_nbind = __commonJS({
-  "../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js"(exports, module) {
+  "../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0_patch_hash=bohigvh5hpnbocmxkl4e5ainua/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js"(exports, module) {
     (function(root, wrapper) {
       if (typeof define == "function" && define.amd)
         define([], function() {
@@ -314315,7 +314315,8 @@ var require_nbind = __commonJS({
         }
         _nbind.throwError = throwError;
         _nbind.bigEndian = false;
-        _a = _typeModule(_typeModule), _nbind.Type = _a.Type, _nbind.makeType = _a.makeType, _nbind.getComplexType = _a.getComplexType, _nbind.structureList = _a.structureList;
+        var _a = _typeModule(_typeModule);
+        _nbind.Type = _a.Type, _nbind.makeType = _a.makeType, _nbind.getComplexType = _a.getComplexType, _nbind.structureList = _a.structureList;
         var BindType = function(_super) {
           __extends(BindType2, _super);
           function BindType2() {
@@ -339556,9 +339557,9 @@ var require_nbind = __commonJS({
   }
 });
 
-// ../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-browser.js
+// ../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0_patch_hash=bohigvh5hpnbocmxkl4e5ainua/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-browser.js
 var require_entry_browser = __commonJS({
-  "../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-browser.js"(exports2, module2) {
+  "../../../node_modules/.pnpm/yoga-layout-prebuilt@1.10.0_patch_hash=bohigvh5hpnbocmxkl4e5ainua/node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-browser.js"(exports2, module2) {
     "use strict";
     var Yoga = require_entry_common();
     var nbind = require_nbind();
@@ -361502,9 +361503,9 @@ var require_core5 = __commonJS({
             return true;
           }
         },
-        render(createElement) {
-          return createElement("pre", {}, [
-            createElement("code", {
+        render(createElement2) {
+          return createElement2("pre", {}, [
+            createElement2("code", {
               class: this.className,
               domProps: { innerHTML: this.highlighted }
             })
@@ -401533,6 +401534,11 @@ var import_prettier = __toESM(require_prettier());
 var import_plugin_syntax_jsx = __toESM(require_lib35());
 var import_plugin_syntax_typescript = __toESM(require_lib22());
 
+// ../src/plugin-deprecate/isBraidImport.ts
+var braidConsumer = /braid-design-system(?:\/css)?$/;
+var braidInternal = /braid-src\/lib(?:\/(css|components))?$/;
+var isBraidImport = (importSource) => braidConsumer.test(importSource) || braidInternal.test(importSource);
+
 // ../src/plugin-deprecate/plugin-deprecate-atoms.ts
 var import_core2 = __toESM(require_lib34());
 
@@ -401540,10 +401546,11 @@ var import_core2 = __toESM(require_lib34());
 var import_core = __toESM(require_lib34());
 
 // ../src/warning-renderer/warning.tsx
-var import_react = __toESM(require_react());
+var import_react2 = __toESM(require_react());
 var import_ink4 = __toESM(require_build2());
 
 // ../src/warning-renderer/codeFrame.tsx
+var import_react = __toESM(require_react());
 var import_ink3 = __toESM(require_build2());
 
 // ../src/ink/ink-to-string.ts
@@ -401577,7 +401584,7 @@ var SyntaxHighlight = ({ code, language, theme }) => {
     () => (0, import_cli_highlight.highlight)(code, { language, theme }),
     [code, language, theme]
   );
-  return <import_ink2.Text>{highlightedCode}</import_ink2.Text>;
+  return /* @__PURE__ */ React.createElement(import_ink2.Text, null, highlightedCode);
 };
 var SyntaxHighlight_default = SyntaxHighlight;
 
@@ -401588,23 +401595,23 @@ var CodeLine = ({
   lineNumberWidth,
   highlight: highlight2
 }) => {
-  const propIndicatorLength = highlight2 ? <import_ink3.Box>
-    <import_ink3.Box width={highlight2.start} />
-    <import_ink3.Text color="yellow">{"".padStart(highlight2.end - highlight2.start, "^")}</import_ink3.Text>
-  </import_ink3.Box> : null;
-  return <import_ink3.Box alignItems="flex-start">
-    <import_ink3.Box width={lineNumberWidth + 3} alignItems="flex-end" flexDirection="column">
-      <import_ink3.Text>
-        {lineNumber}
-        {" \u2502 "}
-      </import_ink3.Text>
-      {highlight2 ? <import_ink3.Text>{"\u2502 "}</import_ink3.Text> : null}
-    </import_ink3.Box>
-    <import_ink3.Box flexDirection="column">
-      <SyntaxHighlight_default code={code} language="tsx" />
-      {propIndicatorLength}
-    </import_ink3.Box>
-  </import_ink3.Box>;
+  const propIndicatorLength = highlight2 ? /* @__PURE__ */ import_react.default.createElement(import_ink3.Box, null, /* @__PURE__ */ import_react.default.createElement(import_ink3.Box, {
+    width: highlight2.start
+  }), /* @__PURE__ */ import_react.default.createElement(import_ink3.Text, {
+    color: "yellow"
+  }, "".padStart(highlight2.end - highlight2.start, "^"))) : null;
+  return /* @__PURE__ */ import_react.default.createElement(import_ink3.Box, {
+    alignItems: "flex-start"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ink3.Box, {
+    width: lineNumberWidth + 3,
+    alignItems: "flex-end",
+    flexDirection: "column"
+  }, /* @__PURE__ */ import_react.default.createElement(import_ink3.Text, null, lineNumber, " \u2502 "), highlight2 ? /* @__PURE__ */ import_react.default.createElement(import_ink3.Text, null, "\u2502 ") : null), /* @__PURE__ */ import_react.default.createElement(import_ink3.Box, {
+    flexDirection: "column"
+  }, /* @__PURE__ */ import_react.default.createElement(SyntaxHighlight_default, {
+    code,
+    language: "tsx"
+  }), propIndicatorLength));
 };
 var CodeFrame = ({ code, location }) => {
   const codeLines = code.split("\n");
@@ -401619,11 +401626,22 @@ var CodeFrame = ({ code, location }) => {
     3,
     ...[beforeLineNumber, codeLineNumber, afterLineNumber].filter(Boolean).map((lineNumber) => lineNumber.toString().length)
   );
-  return <import_ink3.Box flexDirection="column">
-    <CodeLine code={beforeLine} lineNumber={beforeLineNumber} lineNumberWidth={longestLineNumberLength} />
-    <CodeLine code={codeLine} lineNumber={codeLineNumber} lineNumberWidth={longestLineNumberLength} highlight={{ start: start.column, end: end.column }} />
-    <CodeLine code={afterLine} lineNumber={afterLineNumber} lineNumberWidth={longestLineNumberLength} />
-  </import_ink3.Box>;
+  return /* @__PURE__ */ import_react.default.createElement(import_ink3.Box, {
+    flexDirection: "column"
+  }, /* @__PURE__ */ import_react.default.createElement(CodeLine, {
+    code: beforeLine,
+    lineNumber: beforeLineNumber,
+    lineNumberWidth: longestLineNumberLength
+  }), /* @__PURE__ */ import_react.default.createElement(CodeLine, {
+    code: codeLine,
+    lineNumber: codeLineNumber,
+    lineNumberWidth: longestLineNumberLength,
+    highlight: { start: start.column, end: end.column }
+  }), /* @__PURE__ */ import_react.default.createElement(CodeLine, {
+    code: afterLine,
+    lineNumber: afterLineNumber,
+    lineNumberWidth: longestLineNumberLength
+  }));
 };
 
 // ../src/warning-renderer/warning.tsx
@@ -401635,69 +401653,49 @@ var UntraceableImportWarning = ({
   variableName,
   propName,
   importSource
-}) => <Stack>
-  <import_ink4.Text>Untraceable import.</import_ink4.Text>
-  <import_react.Fragment>
-    <import_ink4.Text>
-      {"Variable \u201C"}
-      {variableName}
-      {"\u201D is assigned to"}
-      {" "}
-      {propName ? `the \u2018${propName}\u2019` : "a"}
-      {" prop on \u2018"}
-      {componentName}
-      {"\u2019, but is imported from \u2018"}
-      {importSource}
-      {"\u2019."}
-    </import_ink4.Text>
-    <import_ink4.Text>You should check that there are no usages of deprecated values in that file.</import_ink4.Text>
-  </import_react.Fragment>
-  {importLocation ? <import_react.Fragment>
-    <import_ink4.Text dimColor>Imported at</import_ink4.Text>
-    <CodeFrame code={code} location={importLocation} />
-  </import_react.Fragment> : null}
-  {propLocation ? <import_react.Fragment>
-    <import_ink4.Text dimColor>Used at</import_ink4.Text>
-    <CodeFrame code={code} location={propLocation} />
-  </import_react.Fragment> : null}
-</Stack>;
+}) => /* @__PURE__ */ import_react2.default.createElement(Stack, null, /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, "Untraceable import."), /* @__PURE__ */ import_react2.default.createElement(import_react2.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, "Variable \u201C", variableName, "\u201D is assigned to", " ", propName ? `the \u2018${propName}\u2019` : "a", " prop on \u2018", componentName, "\u2019, but is imported from \u2018", importSource, "\u2019."), /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, "You should check that there are no usages of deprecated values in that file.")), importLocation ? /* @__PURE__ */ import_react2.default.createElement(import_react2.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, {
+  dimColor: true
+}, "Imported at"), /* @__PURE__ */ import_react2.default.createElement(CodeFrame, {
+  code,
+  location: importLocation
+})) : null, propLocation ? /* @__PURE__ */ import_react2.default.createElement(import_react2.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, {
+  dimColor: true
+}, "Used at"), /* @__PURE__ */ import_react2.default.createElement(CodeFrame, {
+  code,
+  location: propLocation
+})) : null);
 var renderUntraceableImportWarning = (props) => `
-${renderToString(<UntraceableImportWarning {...props} />)}
+${renderToString(/* @__PURE__ */ import_react2.default.createElement(UntraceableImportWarning, {
+  ...props
+}))}
 
 `;
-var Stack = ({ children }) => <import_ink4.Box flexDirection="column">{import_react.default.Children.toArray(children).map((child, index) => <import_react.Fragment key={index}>
-  {index ? <import_ink4.Box paddingTop={1} /> : null}
-  {child}
-</import_react.Fragment>)}</import_ink4.Box>;
+var Stack = ({ children }) => /* @__PURE__ */ import_react2.default.createElement(import_ink4.Box, {
+  flexDirection: "column"
+}, import_react2.default.Children.toArray(children).map((child, index) => /* @__PURE__ */ import_react2.default.createElement(import_react2.Fragment, {
+  key: index
+}, index ? /* @__PURE__ */ import_react2.default.createElement(import_ink4.Box, {
+  paddingTop: 1
+}) : null, child)));
 var UntraceablePropertyWarning = ({
   code,
   componentName,
   propLocation
-}) => <Stack>
-  <import_ink4.Text>Untraceable computed object property.</import_ink4.Text>
-  <import_react.Fragment>
-    {componentName ? <import_ink4.Text>
-      {"The following object is being spread onto "}
-      {componentName}
-      {" and contains computed properties."}
-    </import_ink4.Text> : null}
-    <import_ink4.Text>You should check that there are no usages of deprecated properties in this object.</import_ink4.Text>
-  </import_react.Fragment>
-  {propLocation ? <CodeFrame code={code} location={propLocation} /> : null}
-</Stack>;
+}) => /* @__PURE__ */ import_react2.default.createElement(Stack, null, /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, "Untraceable computed object property."), /* @__PURE__ */ import_react2.default.createElement(import_react2.Fragment, null, componentName ? /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, "The following object is being spread onto ", componentName, " and contains computed properties.") : null, /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, "You should check that there are no usages of deprecated properties in this object.")), propLocation ? /* @__PURE__ */ import_react2.default.createElement(CodeFrame, {
+  code,
+  location: propLocation
+}) : null);
 var renderUntraceablePropertyWarning = (props) => `
-${renderToString(<UntraceablePropertyWarning {...props} />)}
+${renderToString(/* @__PURE__ */ import_react2.default.createElement(UntraceablePropertyWarning, {
+  ...props
+}))}
 
 `;
-var RecursiveDepthWarning = ({ filePath }) => <Stack>
-  <import_ink4.Text>File parsing depth limit met.</import_ink4.Text>
-  {filePath ? <import_react.Fragment>
-    <import_ink4.Text>You may want to manually check the following file:</import_ink4.Text>
-    <import_ink4.Text>{filePath}</import_ink4.Text>
-  </import_react.Fragment> : null}
-</Stack>;
+var RecursiveDepthWarning = ({ filePath }) => /* @__PURE__ */ import_react2.default.createElement(Stack, null, /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, "File parsing depth limit met."), filePath ? /* @__PURE__ */ import_react2.default.createElement(import_react2.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, "You may want to manually check the following file:"), /* @__PURE__ */ import_react2.default.createElement(import_ink4.Text, null, filePath)) : null);
 var renderRecursiveDepthWarning = (props) => `
-${renderToString(<RecursiveDepthWarning {...props} />)}
+${renderToString(/* @__PURE__ */ import_react2.default.createElement(RecursiveDepthWarning, {
+  ...props
+}))}
 
 `;
 
@@ -401870,7 +401868,7 @@ function plugin_deprecate_atoms_default() {
         enter(path) {
           const bodyPath = path.get("body");
           for (const statement of bodyPath) {
-            if (import_core2.types.isImportDeclaration(statement.node) && /braid-design-system(?:\/css)?$/.test(statement.node.source.value)) {
+            if (import_core2.types.isImportDeclaration(statement.node) && isBraidImport(statement.node.source.value)) {
               for (const specifier of statement.node.specifiers) {
                 if (import_core2.types.isImportSpecifier(specifier) && import_core2.types.isIdentifier(specifier.imported) && Boolean(this.deprecations[specifier.imported.name])) {
                   this.importNames.set(
@@ -401936,7 +401934,7 @@ function plugin_deprecate_props_default() {
         enter(path) {
           const bodyPath = path.get("body");
           for (const statement of bodyPath) {
-            if (import_core3.types.isImportDeclaration(statement.node) && /braid-design-system(?:\/css)?$/.test(statement.node.source.value)) {
+            if (import_core3.types.isImportDeclaration(statement.node) && isBraidImport(statement.node.source.value)) {
               for (const specifier of statement.node.specifiers) {
                 if (import_core3.types.isImportSpecifier(specifier) && import_core3.types.isIdentifier(specifier.imported) && Boolean(this.deprecations[specifier.imported.name])) {
                   this.importNames.set(
@@ -402120,7 +402118,7 @@ function plugin_deprecate_vars_default() {
         enter(path) {
           const bodyPath = path.get("body");
           for (const statement of bodyPath) {
-            if (import_core4.types.isImportDeclaration(statement.node) && /braid-design-system(?:\/css)?$/.test(statement.node.source.value)) {
+            if (import_core4.types.isImportDeclaration(statement.node) && isBraidImport(statement.node.source.value)) {
               for (const specifier of statement.node.specifiers) {
                 if (import_core4.types.isImportSpecifier(specifier) && import_core4.types.isIdentifier(specifier.imported) && specifier.imported.name === "vars") {
                   const binding = path.scope.getBinding(specifier.local.name);
@@ -402130,7 +402128,7 @@ function plugin_deprecate_vars_default() {
                   for (const refPath of binding.referencePaths) {
                     walk({
                       path: refPath,
-                      deprecations: this.deprecations.vars,
+                      deprecations: this.deprecations.vars || {},
                       code: this.file.code,
                       filename: this.filename,
                       metadata: this.file.metadata
@@ -402162,7 +402160,7 @@ function plugin_import_update_default() {
         enter(path) {
           const bodyPath = path.get("body");
           for (const statement of bodyPath) {
-            if (import_core5.types.isImportDeclaration(statement.node) && /braid-design-system$/.test(statement.node.source.value)) {
+            if (import_core5.types.isImportDeclaration(statement.node) && isBraidImport(statement.node.source.value)) {
               const relocations = Object.keys(relocationMap);
               statement.node.specifiers = statement.node.specifiers.filter(
                 (specifier) => {
@@ -402275,7 +402273,7 @@ function plugin_prop_rename_default() {
         enter(path) {
           const bodyPath = path.get("body");
           for (const statement of bodyPath) {
-            if (import_core6.types.isImportDeclaration(statement.node) && /braid-design-system(?:\/css)?$/.test(statement.node.source.value)) {
+            if (import_core6.types.isImportDeclaration(statement.node) && isBraidImport(statement.node.source.value)) {
               for (const specifier of statement.node.specifiers) {
                 if (import_core6.types.isImportSpecifier(specifier) && import_core6.types.isIdentifier(specifier.imported) && Boolean(this.renames[specifier.imported.name])) {
                   this.importNames.set(
@@ -402416,8 +402414,8 @@ function babelRecast({
     }
     const { ast: transformedAST, metadata } = transformResult;
     return {
-      warnings: metadata ? metadata.warnings : [],
-      hasChanged: metadata ? metadata.hasChanged : false,
+      warnings: (metadata == null ? void 0 : metadata.warnings) ?? [],
+      hasChanged: (metadata == null ? void 0 : metadata.hasChanged) ?? false,
       source: (0, import_recast.print)(transformedAST).code
     };
   } catch (e) {

package/dist/ToastContext.chunk.cjs

@@ -462,14 +462,20 @@ const resolveResponsiveProp = (value, mobileAtoms, tabletAtoms, desktopAtoms, wi
   const wideAtom = wideAtoms[wide];
   return clsx__default.default(mobileAtom, tabletAtom, desktopAtom, wideAtom);
 };
+const directionStyles = {
+  top: styles_lib_css_negativeMargin_negativeMargin_css_cjs.top,
+  right: styles_lib_css_negativeMargin_negativeMargin_css_cjs.right,
+  bottom: styles_lib_css_negativeMargin_negativeMargin_css_cjs.bottom,
+  left: styles_lib_css_negativeMargin_negativeMargin_css_cjs.left
+};
 const negativeMargin = (direction, space) => space ? clsx__default.default([
   direction === "top" || direction === "bottom" ? styles_lib_css_negativeMargin_negativeMargin_css_cjs.preventCollapsePseudo[direction] : void 0,
   resolveResponsiveProp(
     space,
-    styles_lib_css_negativeMargin_negativeMargin_css_cjs.styles[direction].mobile,
-    styles_lib_css_negativeMargin_negativeMargin_css_cjs.styles[direction].tablet,
-    styles_lib_css_negativeMargin_negativeMargin_css_cjs.styles[direction].desktop,
-    styles_lib_css_negativeMargin_negativeMargin_css_cjs.styles[direction].wide
+    directionStyles[direction].mobile,
+    directionStyles[direction].tablet,
+    directionStyles[direction].desktop,
+    directionStyles[direction].wide
   )
 ]) : null;
 const alignToDisplay = {
@@ -638,7 +644,7 @@ function textStyles({
     styles_lib_css_typography_css_cjs.fontFamily,
     styles_lib_css_typography_css_cjs.fontWeight[weight],
     styles_lib_css_typography_css_cjs.tone[tone],
-    styles_lib_css_typography_css_cjs.styles[baseline ? "textSizeTrimmed" : "textSizeUntrimmed"][size]
+    (baseline ? styles_lib_css_typography_css_cjs.textSizeTrimmed : styles_lib_css_typography_css_cjs.textSizeUntrimmed)[size]
   ];
 }
 const Truncate = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", className: styles_lib_components_private_Truncate_Truncate_css_cjs.truncate, children });
@@ -1195,8 +1201,8 @@ const Keyline = ({ tone, borderRadius: borderRadius2 }) => {
           component: "span",
           height: "full",
           display: "inlineBlock",
-          paddingLeft: "xxsmall",
           className: [
+            styles_lib_components_private_Keyline_Keyline_css_cjs.width,
             styles_lib_components_private_Keyline_Keyline_css_cjs.tone[tone],
             styles_lib_components_private_Keyline_Keyline_css_cjs.lightMode[backgroundLightness.lightMode],
             styles_lib_components_private_Keyline_Keyline_css_cjs.darkMode[backgroundLightness.darkMode]
@@ -1210,7 +1216,7 @@ const boxShadowForVariant = {
   default: "borderField",
   disabled: "borderNeutralLight",
   focus: "outlineFocus",
-  hover: "borderFormAccent",
+  formAccent: "borderFormAccent",
   critical: "borderCritical"
 };
 const FieldOverlay = ({ variant, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1413,7 +1419,7 @@ const ButtonLoader = () => /* @__PURE__ */ jsxRuntime.jsxs(Box, { "aria-hidden":
   /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", className: styles_lib_components_Button_Button_css_cjs.loadingDot, children: "." })
 ] });
 const transparentPaddingX = "small";
-const buttonRadius = "large";
+const buttonRadius = "standard";
 const ButtonOverlays = ({
   variant = "solid",
   tone,
@@ -1480,7 +1486,6 @@ const ButtonText = ({
   iconPosition = "leading",
   variant = "solid",
   tone,
-  labelSpacing = true,
   bleed
 }) => {
   const lightness = useBackgroundLightness();
@@ -1503,9 +1508,8 @@ const ButtonText = ({
       flexWrap: "wrap",
       overflow: "hidden",
       pointerEvents: "none",
-      paddingX: labelSpacing ? labelPaddingX : void 0,
-      paddingY: labelSpacing && size === "small" ? styles_lib_components_Button_Button_css_cjs.constants.smallButtonPaddingSize : void 0,
-      className: labelSpacing && size === "standard" ? styles_lib_css_typography_css_cjs.touchableText.standard : void 0,
+      paddingX: labelPaddingX,
+      className: styles_lib_components_Button_Button_css_cjs.padToMinHeight,
       background: tone === "neutral" && variant !== "solid" ? {
         lightMode: lightness.lightMode === "light" ? "customLight" : "customDark",
         darkMode: lightness.darkMode === "light" ? "customLight" : "customDark"
@@ -1515,8 +1519,8 @@ const ButtonText = ({
         {
           tone: stylesForVariant.textTone,
           weight: "medium",
+          align: "center",
           size,
-          baseline: false,
           children: [
             icon && iconPosition === "leading" ? /* @__PURE__ */ jsxRuntime.jsx(
               AvoidWidowIcon,
@@ -1683,7 +1687,7 @@ const TooltipTextDefaultsProvider = ({
     }
   );
 };
-const borderRadius$1 = "xlarge";
+const borderRadius$1 = "large";
 const TooltipContent = ({
   children,
   opacity,
@@ -1702,12 +1706,8 @@ const TooltipContent = ({
         boxShadow: "large",
         background: "customDark",
         borderRadius: borderRadius$1,
-        className: [
-          styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.background,
-          styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth,
-          styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0,
-          styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.padding
-        ],
+        padding: "small",
+        className: [styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.background, styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.maxWidth, styles_lib_components_TooltipRenderer_TooltipRenderer_css_cjs.translateZ0],
         children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipTextDefaultsProvider, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "relative", zIndex: 1, children }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2148,7 +2148,7 @@ const toneToIcon = {
   positive: IconPositive
 };
 const toastDuration = 1e4;
-const borderRadius = "xlarge";
+const borderRadius = "large";
 const Action = ({ label, onClick, removeToast }) => {
   const handleClick = React.useCallback(() => {
     removeToast();