braid-design-system 32.16.0 → 32.16.2

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # braid-design-system
 
+## 32.16.2
+
+### Patch Changes
+
+- **Text, Heading:** Fix `maxLines` cropping of decending characters ([#1451](https://github.com/seek-oss/braid-design-system/pull/1451))
+
+  Fixes a bug when using -webkit-box, where the descender on the last line of text could be cropped based on the combination of line height and font size.
+
+## 32.16.1
+
+### Patch Changes
+
+- **Tab:** Remove cropping of the icon slot ([#1447](https://github.com/seek-oss/braid-design-system/pull/1447))
+
+  Previously the `icon` slot on a `Tab` was cropped on the left to improve alignment with the active tab indicator.
+  For most icons in a `Tab`, this was subtle polish, but for others it had the undesirable side effect of clipping the side of the icon.
+
+  Removing the cropping until we have a better solution for trimming whitespace around icons.
+
+- **Badge**: Allow `Badge` to take arrays of values ([#1443](https://github.com/seek-oss/braid-design-system/pull/1443))
+
+  Previously, `Badge` only accepted a `string` as children, to prevent the use of other components inside a `Badge`.
+
+  However, when a variable is included with text inside the `Badge`, the children property is interpreted as an array. This prevents a very reasonable use case from being allowed:
+
+  ```tsx
+  <Badge>{jobs.length} Jobs</Badge>
+  // Error: Type '{ children: string[]; }' is not assignable to type 'BadgeProps'.
+  ```
+
+  This change allows `Badge` to accept a string, number, or array thereof.
+
+- Fix circular dependencies ([#1444](https://github.com/seek-oss/braid-design-system/pull/1444))
+
 ## 32.16.0
 
 ### Minor Changes

package/dist/color-mode/query-param.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../styles/lib/css/atoms/sprinkles.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../lib/css/atoms/sprinkles.css.cjs");
 const flag = "_bdsdm";
 const colorModeQueryParamCheck = [
   "<script>",
-  `((l,w)=>{try{r=/[?&]${flag}=(\\d)/;[,s]=l.search.match(r)||[];w.${flag}=s;if(s){history.replaceState(null,'',l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(s==1||(s==2&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('${styles_lib_css_atoms_sprinkles_css_cjs.darkMode}')}}catch(e){}})(location,window)`,
+  `((l,w)=>{try{r=/[?&]${flag}=(\\d)/;[,s]=l.search.match(r)||[];w.${flag}=s;if(s){history.replaceState(null,'',l.pathname+l.search.replace(r,'').replace(/^&/,'?')+l.hash);if(s==1||(s==2&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('${lib_css_atoms_sprinkles_css_cjs.darkMode}')}}catch(e){}})(location,window)`,
   "<\/script>"
 ].join("");
 const getColorModeQueryParam = () => {

package/dist/color-mode/query-param.mjs

@@ -1,4 +1,4 @@
-import { darkMode } from "../styles/lib/css/atoms/sprinkles.css.mjs";
+import { darkMode } from "../lib/css/atoms/sprinkles.css.mjs";
 const flag = "_bdsdm";
 const colorModeQueryParamCheck = [
   "<script>",

package/dist/css.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const styles_lib_themes_vars_css_cjs = require("./styles/lib/themes/vars.css.cjs");
-const styles_lib_css_atoms_atoms_cjs = require("./styles/lib/css/atoms/atoms.cjs");
-const styles_lib_css_colorModeStyle_cjs = require("./styles/lib/css/colorModeStyle.cjs");
-const styles_lib_css_responsiveStyle_cjs = require("./styles/lib/css/responsiveStyle.cjs");
-const styles_lib_css_breakpoints_cjs = require("./styles/lib/css/breakpoints.cjs");
-const styles_lib_css_globalTypographyStyles_cjs = require("./styles/lib/css/globalTypographyStyles.cjs");
+const lib_themes_vars_css_cjs = require("./lib/themes/vars.css.cjs");
+const lib_css_atoms_atoms_cjs = require("./lib/css/atoms/atoms.cjs");
+const lib_css_colorModeStyle_cjs = require("./lib/css/colorModeStyle.cjs");
+const lib_css_responsiveStyle_cjs = require("./lib/css/responsiveStyle.cjs");
+const lib_css_breakpoints_cjs = require("./lib/css/breakpoints.cjs");
+const lib_css_globalTypographyStyles_cjs = require("./lib/css/globalTypographyStyles.cjs");
 const {
   grid,
   space,
@@ -20,7 +20,7 @@ const {
   borderRadius,
   borderWidth,
   shadow
-} = styles_lib_themes_vars_css_cjs.vars;
+} = lib_themes_vars_css_cjs.vars;
 const vars = {
   grid,
   space,
@@ -42,12 +42,12 @@ function atoms(props) {
       );
     }
   }
-  return styles_lib_css_atoms_atoms_cjs.atoms(props);
+  return lib_css_atoms_atoms_cjs.atoms(props);
 }
-exports.colorModeStyle = styles_lib_css_colorModeStyle_cjs.colorModeStyle;
-exports.responsiveStyle = styles_lib_css_responsiveStyle_cjs.responsiveStyle;
-exports.breakpoints = styles_lib_css_breakpoints_cjs.breakpoints;
-exports.globalHeadingStyle = styles_lib_css_globalTypographyStyles_cjs.globalHeadingStyle;
-exports.globalTextStyle = styles_lib_css_globalTypographyStyles_cjs.globalTextStyle;
+exports.colorModeStyle = lib_css_colorModeStyle_cjs.colorModeStyle;
+exports.responsiveStyle = lib_css_responsiveStyle_cjs.responsiveStyle;
+exports.breakpoints = lib_css_breakpoints_cjs.breakpoints;
+exports.globalHeadingStyle = lib_css_globalTypographyStyles_cjs.globalHeadingStyle;
+exports.globalTextStyle = lib_css_globalTypographyStyles_cjs.globalTextStyle;
 exports.atoms = atoms;
 exports.vars = vars;

package/dist/css.mjs

@@ -1,9 +1,9 @@
-import { vars as vars$1 } from "./styles/lib/themes/vars.css.mjs";
-import { atoms as atoms$1 } from "./styles/lib/css/atoms/atoms.mjs";
-import { colorModeStyle } from "./styles/lib/css/colorModeStyle.mjs";
-import { responsiveStyle } from "./styles/lib/css/responsiveStyle.mjs";
-import { breakpoints } from "./styles/lib/css/breakpoints.mjs";
-import { globalHeadingStyle, globalTextStyle } from "./styles/lib/css/globalTypographyStyles.mjs";
+import { vars as vars$1 } from "./lib/themes/vars.css.mjs";
+import { atoms as atoms$1 } from "./lib/css/atoms/atoms.mjs";
+import { colorModeStyle } from "./lib/css/colorModeStyle.mjs";
+import { responsiveStyle } from "./lib/css/responsiveStyle.mjs";
+import { breakpoints } from "./lib/css/breakpoints.mjs";
+import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.mjs";
 const {
   grid,
   space,