braid-design-system 32.20.0 → 32.22.0

package/CHANGELOG.md

@@ -1,5 +1,150 @@
 # braid-design-system
 
+## 32.22.0
+
+### Minor Changes
+
+- **Column:** Add support for hide above/below breakpoint ([#1553](https://github.com/seek-oss/braid-design-system/pull/1553))
+
+  Introduce new `hideAbove` and `hideBelow` props on column for responsively hiding columns across breakpoint.
+
+  These props can be used either separately or in combination to optimise content display across different screen sizes.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Columns space="small">
+    <Column>
+      <Placeholder height={60} label="Always visible" />
+    </Column>
+    <Column hideBelow="tablet">
+      <Placeholder height={60} label="Tablet and above" />
+    </Column>
+    <Column hideAbove="mobile">
+      <Placeholder height={60} label="Mobile Only" />
+    </Column>
+  </Columns>
+  ```
+
+- **Badge:** Enable usage inside typographic components ([#1547](https://github.com/seek-oss/braid-design-system/pull/1547))
+
+  A `Badge` can now be nested inside typographic components, e.g. `Text` and `Heading`, as an inline element alongside text.
+  Previously a `Badge` had to be aligned against text using an `Inline` component, which would result in the `Badge` dropping below the text when the copy wrapped.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Text>
+    Lorem ipsum velit in <Badge>amet</Badge>.
+  </Text>
+  ```
+
+- **Tabs:** Add `size` support ([#1550](https://github.com/seek-oss/braid-design-system/pull/1550))
+
+  Introduces the ability to customise the `size` of the `Tab` components in the tab list.
+  Available sizes are `standard` (default) and `small`.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Tabs size="small">
+    <Tab>First tab</Tab>
+    <Tab>Second tab</Tab>
+    <Tab>Third tab</Tab>
+  </Tabs>
+  ```
+
+- **Spread:** Add new layout component ([#1554](https://github.com/seek-oss/braid-design-system/pull/1554))
+
+  Introduce a new layout component, `Spread`, used to justify content with both an equally distributed and a specified minimum amount of space in between each child.
+
+  **EXAMPLE USAGE:**
+
+  The `Spread` component works horizontally by default:
+
+  ```jsx
+  <Spread space="small" alignY="center">
+    <Heading level="4">Heading</Heading>
+
+    <OverflowMenu label="Options">
+      <MenuItem>First</MenuItem>
+      <MenuItem>Second</MenuItem>
+    </OverflowMenu>
+  </Spread>
+  ```
+
+  But can be switched to `vertical` via the `direction` prop:
+
+  ```jsx
+  <Spread space="large" direction="vertical">
+    <Stack space="small">
+      <Heading level="4">Heading</Heading>
+      <Text>Text</Text>
+    </Stack>
+
+    <Text size="small" tone="secondary">
+      Date
+    </Text>
+  </Spread>
+  ```
+
+### Patch Changes
+
+- Move `badge` slot inside label ([#1547](https://github.com/seek-oss/braid-design-system/pull/1547))
+
+  Relocate the `badge` slot inside the `label` slot enabling the `Badge` to sit alongside the last word in wrapping lines of text.
+
+## 32.21.0
+
+### Minor Changes
+
+- **IconHash:** Add component ([#1543](https://github.com/seek-oss/braid-design-system/pull/1543))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <IconHash />
+  ```
+
+- Improve internal form field spacing ([#1541](https://github.com/seek-oss/braid-design-system/pull/1541))
+
+  Refined the spacing between internal elements of form fields to align with the latest spacing guidelines.
+
+  This change impacts the `Stack` spacing between `label` and `description`, the form field itself and the `message` slots.
+
+- **Autosuggest:** Add `suggestionHighlight` prop ([#1536](https://github.com/seek-oss/braid-design-system/pull/1536))
+
+  Introduces the `suggestionHighlight` prop, which uses the input value to automatically highlight either the `matching` or `remaining` portion of each suggestion.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Autosuggest suggestionHighlight="matching">
+  ```
+
+### Patch Changes
+
+- Refine the Checkbox, Radio, Toggle & MenuItemCheckbox size ([#1541](https://github.com/seek-oss/braid-design-system/pull/1541))
+
+  Refines the size of the inline field elements including the `RadioItem`, `Checkbox`, `Toggle` and `MenuItemCheckbox` components.
+
+  Primarily impacts consumers of the `seekJobs` theme, seeing a reduction across all sizes.
+
+- Ensure no space above field with `undefined` label ([#1541](https://github.com/seek-oss/braid-design-system/pull/1541))
+
+  Fixes an issue where passing `undefined` as the `label` to a form field would result in an unwanted space above the field.
+
+- **Badge:** Ensure label follows correct tone ([#1544](https://github.com/seek-oss/braid-design-system/pull/1544))
+
+  Ensure that the foreground text of a `Badge` always follows the correct tone for the background colour.
+  Fixes a bug where using a `Badge` in a `List` that overrides the default tone would result in the `Badge` text following the `List` tone instead of the `Badge` tone.
+
+- Fix warning in React 18.3.0 when using useToast. ([#1534](https://github.com/seek-oss/braid-design-system/pull/1534))
+
+- **MonthPicker:** Reduce space between month and year fields ([#1541](https://github.com/seek-oss/braid-design-system/pull/1541))
+
+  Reducing the space between month and year fields to improve correlation between the two fields within the greater context of a form.
+
 ## 32.20.0
 
 ### Minor Changes

package/codemod/dist/index.js

@@ -7319,98 +7319,106 @@ var import_fast_glob = __toESM(require_out4());
 var import_workerpool = __toESM(require_src());
 var import_cli_progress = __toESM(require_cli_progress());
 
-// ../../../node_modules/.pnpm/chalk@5.0.1/node_modules/chalk/source/vendor/ansi-styles/index.js
+// ../../../node_modules/.pnpm/chalk@5.3.0/node_modules/chalk/source/vendor/ansi-styles/index.js
 var ANSI_BACKGROUND_OFFSET = 10;
 var wrapAnsi16 = (offset = 0) => (code) => `\x1B[${code + offset}m`;
 var wrapAnsi256 = (offset = 0) => (code) => `\x1B[${38 + offset};5;${code}m`;
 var wrapAnsi16m = (offset = 0) => (red, green, blue) => `\x1B[${38 + offset};2;${red};${green};${blue}m`;
+var styles = {
+  modifier: {
+    reset: [0, 0],
+    // 21 isn't widely supported and 22 does the same thing
+    bold: [1, 22],
+    dim: [2, 22],
+    italic: [3, 23],
+    underline: [4, 24],
+    overline: [53, 55],
+    inverse: [7, 27],
+    hidden: [8, 28],
+    strikethrough: [9, 29]
+  },
+  color: {
+    black: [30, 39],
+    red: [31, 39],
+    green: [32, 39],
+    yellow: [33, 39],
+    blue: [34, 39],
+    magenta: [35, 39],
+    cyan: [36, 39],
+    white: [37, 39],
+    // Bright color
+    blackBright: [90, 39],
+    gray: [90, 39],
+    // Alias of `blackBright`
+    grey: [90, 39],
+    // Alias of `blackBright`
+    redBright: [91, 39],
+    greenBright: [92, 39],
+    yellowBright: [93, 39],
+    blueBright: [94, 39],
+    magentaBright: [95, 39],
+    cyanBright: [96, 39],
+    whiteBright: [97, 39]
+  },
+  bgColor: {
+    bgBlack: [40, 49],
+    bgRed: [41, 49],
+    bgGreen: [42, 49],
+    bgYellow: [43, 49],
+    bgBlue: [44, 49],
+    bgMagenta: [45, 49],
+    bgCyan: [46, 49],
+    bgWhite: [47, 49],
+    // Bright color
+    bgBlackBright: [100, 49],
+    bgGray: [100, 49],
+    // Alias of `bgBlackBright`
+    bgGrey: [100, 49],
+    // Alias of `bgBlackBright`
+    bgRedBright: [101, 49],
+    bgGreenBright: [102, 49],
+    bgYellowBright: [103, 49],
+    bgBlueBright: [104, 49],
+    bgMagentaBright: [105, 49],
+    bgCyanBright: [106, 49],
+    bgWhiteBright: [107, 49]
+  }
+};
+var modifierNames = Object.keys(styles.modifier);
+var foregroundColorNames = Object.keys(styles.color);
+var backgroundColorNames = Object.keys(styles.bgColor);
+var colorNames = [...foregroundColorNames, ...backgroundColorNames];
 function assembleStyles() {
   const codes = /* @__PURE__ */ new Map();
-  const styles2 = {
-    modifier: {
-      reset: [0, 0],
-      // 21 isn't widely supported and 22 does the same thing
-      bold: [1, 22],
-      dim: [2, 22],
-      italic: [3, 23],
-      underline: [4, 24],
-      overline: [53, 55],
-      inverse: [7, 27],
-      hidden: [8, 28],
-      strikethrough: [9, 29]
-    },
-    color: {
-      black: [30, 39],
-      red: [31, 39],
-      green: [32, 39],
-      yellow: [33, 39],
-      blue: [34, 39],
-      magenta: [35, 39],
-      cyan: [36, 39],
-      white: [37, 39],
-      // Bright color
-      blackBright: [90, 39],
-      redBright: [91, 39],
-      greenBright: [92, 39],
-      yellowBright: [93, 39],
-      blueBright: [94, 39],
-      magentaBright: [95, 39],
-      cyanBright: [96, 39],
-      whiteBright: [97, 39]
-    },
-    bgColor: {
-      bgBlack: [40, 49],
-      bgRed: [41, 49],
-      bgGreen: [42, 49],
-      bgYellow: [43, 49],
-      bgBlue: [44, 49],
-      bgMagenta: [45, 49],
-      bgCyan: [46, 49],
-      bgWhite: [47, 49],
-      // Bright color
-      bgBlackBright: [100, 49],
-      bgRedBright: [101, 49],
-      bgGreenBright: [102, 49],
-      bgYellowBright: [103, 49],
-      bgBlueBright: [104, 49],
-      bgMagentaBright: [105, 49],
-      bgCyanBright: [106, 49],
-      bgWhiteBright: [107, 49]
-    }
-  };
-  styles2.color.gray = styles2.color.blackBright;
-  styles2.bgColor.bgGray = styles2.bgColor.bgBlackBright;
-  styles2.color.grey = styles2.color.blackBright;
-  styles2.bgColor.bgGrey = styles2.bgColor.bgBlackBright;
-  for (const [groupName, group] of Object.entries(styles2)) {
+  for (const [groupName, group] of Object.entries(styles)) {
     for (const [styleName, style] of Object.entries(group)) {
-      styles2[styleName] = {
+      styles[styleName] = {
         open: `\x1B[${style[0]}m`,
         close: `\x1B[${style[1]}m`
       };
-      group[styleName] = styles2[styleName];
+      group[styleName] = styles[styleName];
       codes.set(style[0], style[1]);
     }
-    Object.defineProperty(styles2, groupName, {
+    Object.defineProperty(styles, groupName, {
       value: group,
       enumerable: false
     });
   }
-  Object.defineProperty(styles2, "codes", {
+  Object.defineProperty(styles, "codes", {
     value: codes,
     enumerable: false
   });
-  styles2.color.close = "\x1B[39m";
-  styles2.bgColor.close = "\x1B[49m";
-  styles2.color.ansi = wrapAnsi16();
-  styles2.color.ansi256 = wrapAnsi256();
-  styles2.color.ansi16m = wrapAnsi16m();
-  styles2.bgColor.ansi = wrapAnsi16(ANSI_BACKGROUND_OFFSET);
-  styles2.bgColor.ansi256 = wrapAnsi256(ANSI_BACKGROUND_OFFSET);
-  styles2.bgColor.ansi16m = wrapAnsi16m(ANSI_BACKGROUND_OFFSET);
-  Object.defineProperties(styles2, {
+  styles.color.close = "\x1B[39m";
+  styles.bgColor.close = "\x1B[49m";
+  styles.color.ansi = wrapAnsi16();
+  styles.color.ansi256 = wrapAnsi256();
+  styles.color.ansi16m = wrapAnsi16m();
+  styles.bgColor.ansi = wrapAnsi16(ANSI_BACKGROUND_OFFSET);
+  styles.bgColor.ansi256 = wrapAnsi256(ANSI_BACKGROUND_OFFSET);
+  styles.bgColor.ansi16m = wrapAnsi16m(ANSI_BACKGROUND_OFFSET);
+  Object.defineProperties(styles, {
     rgbToAnsi256: {
-      value: (red, green, blue) => {
+      value(red, green, blue) {
         if (red === green && green === blue) {
           if (red < 8) {
             return 16;
@@ -7425,12 +7433,12 @@ function assembleStyles() {
       enumerable: false
     },
     hexToRgb: {
-      value: (hex) => {
-        const matches = /(?<colorString>[a-f\d]{6}|[a-f\d]{3})/i.exec(hex.toString(16));
+      value(hex) {
+        const matches = /[a-f\d]{6}|[a-f\d]{3}/i.exec(hex.toString(16));
         if (!matches) {
           return [0, 0, 0];
         }
-        let { colorString } = matches.groups;
+        let [colorString] = matches;
         if (colorString.length === 3) {
           colorString = [...colorString].map((character) => character + character).join("");
         }
@@ -7446,11 +7454,11 @@ function assembleStyles() {
       enumerable: false
     },
     hexToAnsi256: {
-      value: (hex) => styles2.rgbToAnsi256(...styles2.hexToRgb(hex)),
+      value: (hex) => styles.rgbToAnsi256(...styles.hexToRgb(hex)),
       enumerable: false
     },
     ansi256ToAnsi: {
-      value: (code) => {
+      value(code) {
         if (code < 8) {
           return 30 + code;
         }
@@ -7484,24 +7492,24 @@ function assembleStyles() {
       enumerable: false
     },
     rgbToAnsi: {
-      value: (red, green, blue) => styles2.ansi256ToAnsi(styles2.rgbToAnsi256(red, green, blue)),
+      value: (red, green, blue) => styles.ansi256ToAnsi(styles.rgbToAnsi256(red, green, blue)),
       enumerable: false
     },
     hexToAnsi: {
-      value: (hex) => styles2.ansi256ToAnsi(styles2.hexToAnsi256(hex)),
+      value: (hex) => styles.ansi256ToAnsi(styles.hexToAnsi256(hex)),
       enumerable: false
     }
   });
-  return styles2;
+  return styles;
 }
 var ansiStyles = assembleStyles();
 var ansi_styles_default = ansiStyles;
 
-// ../../../node_modules/.pnpm/chalk@5.0.1/node_modules/chalk/source/vendor/supports-color/index.js
+// ../../../node_modules/.pnpm/chalk@5.3.0/node_modules/chalk/source/vendor/supports-color/index.js
 var import_node_process = __toESM(require("process"), 1);
 var import_node_os = __toESM(require("os"), 1);
 var import_node_tty = __toESM(require("tty"), 1);
-function hasFlag(flag, argv = import_node_process.default.argv) {
+function hasFlag(flag, argv = globalThis.Deno ? globalThis.Deno.args : import_node_process.default.argv) {
   const prefix = flag.startsWith("-") ? "" : flag.length === 1 ? "-" : "--";
   const position = argv.indexOf(prefix + flag);
   const terminatorPosition = argv.indexOf("--");
@@ -7553,6 +7561,9 @@ function _supportsColor(haveStream, { streamIsTTY, sniffFlags = true } = {}) {
       return 2;
     }
   }
+  if ("TF_BUILD" in env && "AGENT_NAME" in env) {
+    return 1;
+  }
   if (haveStream && !streamIsTTY && forceColor === void 0) {
     return 0;
   }
@@ -7568,7 +7579,10 @@ function _supportsColor(haveStream, { streamIsTTY, sniffFlags = true } = {}) {
     return 1;
   }
   if ("CI" in env) {
-    if (["TRAVIS", "CIRCLECI", "APPVEYOR", "GITLAB_CI", "GITHUB_ACTIONS", "BUILDKITE", "DRONE"].some((sign) => sign in env) || env.CI_NAME === "codeship") {
+    if ("GITHUB_ACTIONS" in env || "GITEA_ACTIONS" in env) {
+      return 3;
+    }
+    if (["TRAVIS", "CIRCLECI", "APPVEYOR", "GITLAB_CI", "BUILDKITE", "DRONE"].some((sign) => sign in env) || env.CI_NAME === "codeship") {
       return 1;
     }
     return min;
@@ -7576,19 +7590,21 @@ function _supportsColor(haveStream, { streamIsTTY, sniffFlags = true } = {}) {
   if ("TEAMCITY_VERSION" in env) {
     return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
   }
-  if ("TF_BUILD" in env && "AGENT_NAME" in env) {
-    return 1;
-  }
   if (env.COLORTERM === "truecolor") {
     return 3;
   }
+  if (env.TERM === "xterm-kitty") {
+    return 3;
+  }
   if ("TERM_PROGRAM" in env) {
     const version = Number.parseInt((env.TERM_PROGRAM_VERSION || "").split(".")[0], 10);
     switch (env.TERM_PROGRAM) {
-      case "iTerm.app":
+      case "iTerm.app": {
         return version >= 3 ? 3 : 2;
-      case "Apple_Terminal":
+      }
+      case "Apple_Terminal": {
         return 2;
+      }
     }
   }
   if (/-256(color)?$/i.test(env.TERM)) {
@@ -7615,7 +7631,7 @@ var supportsColor = {
 };
 var supports_color_default = supportsColor;
 
-// ../../../node_modules/.pnpm/chalk@5.0.1/node_modules/chalk/source/utilities.js
+// ../../../node_modules/.pnpm/chalk@5.3.0/node_modules/chalk/source/utilities.js
 function stringReplaceAll(string, substring, replacer) {
   let index = string.indexOf(substring);
   if (index === -1) {
@@ -7625,7 +7641,7 @@ function stringReplaceAll(string, substring, replacer) {
   let endIndex = 0;
   let returnValue = "";
   do {
-    returnValue += string.substr(endIndex, index - endIndex) + substring + replacer;
+    returnValue += string.slice(endIndex, index) + substring + replacer;
     endIndex = index + substringLength;
     index = string.indexOf(substring, endIndex);
   } while (index !== -1);
@@ -7637,7 +7653,7 @@ function stringEncaseCRLFWithFirstIndex(string, prefix, postfix, index) {
   let returnValue = "";
   do {
     const gotCR = string[index - 1] === "\r";
-    returnValue += string.substr(endIndex, (gotCR ? index - 1 : index) - endIndex) + prefix + (gotCR ? "\r\n" : "\n") + postfix;
+    returnValue += string.slice(endIndex, gotCR ? index - 1 : index) + prefix + (gotCR ? "\r\n" : "\n") + postfix;
     endIndex = index + 1;
     index = string.indexOf("\n", endIndex);
   } while (index !== -1);
@@ -7645,7 +7661,7 @@ function stringEncaseCRLFWithFirstIndex(string, prefix, postfix, index) {
   return returnValue;
 }
 
-// ../../../node_modules/.pnpm/chalk@5.0.1/node_modules/chalk/source/index.js
+// ../../../node_modules/.pnpm/chalk@5.3.0/node_modules/chalk/source/index.js
 var { stdout: stdoutColor, stderr: stderrColor } = supports_color_default;
 var GENERATOR = Symbol("GENERATOR");
 var STYLER = Symbol("STYLER");
@@ -7656,7 +7672,7 @@ var levelMapping = [
   "ansi256",
   "ansi16m"
 ];
-var styles = /* @__PURE__ */ Object.create(null);
+var styles2 = /* @__PURE__ */ Object.create(null);
 var applyOptions = (object, options = {}) => {
   if (options.level && !(Number.isInteger(options.level) && options.level >= 0 && options.level <= 3)) {
     throw new Error("The `level` option should be an integer from 0 to 3");
@@ -7675,7 +7691,7 @@ function createChalk(options) {
 }
 Object.setPrototypeOf(createChalk.prototype, Function.prototype);
 for (const [styleName, style] of Object.entries(ansi_styles_default)) {
-  styles[styleName] = {
+  styles2[styleName] = {
     get() {
       const builder = createBuilder(this, createStyler(style.open, style.close, this[STYLER]), this[IS_EMPTY]);
       Object.defineProperty(this, styleName, { value: builder });
@@ -7683,7 +7699,7 @@ for (const [styleName, style] of Object.entries(ansi_styles_default)) {
     }
   };
 }
-styles.visible = {
+styles2.visible = {
   get() {
     const builder = createBuilder(this, this[STYLER], true);
     Object.defineProperty(this, "visible", { value: builder });
@@ -7707,7 +7723,7 @@ var getModelAnsi = (model, level, type, ...arguments_) => {
 };
 var usedModels = ["rgb", "hex", "ansi256"];
 for (const model of usedModels) {
-  styles[model] = {
+  styles2[model] = {
     get() {
       const { level } = this;
       return function(...arguments_) {
@@ -7717,7 +7733,7 @@ for (const model of usedModels) {
     }
   };
   const bgModel = "bg" + model[0].toUpperCase() + model.slice(1);
-  styles[bgModel] = {
+  styles2[bgModel] = {
     get() {
       const { level } = this;
       return function(...arguments_) {
@@ -7729,7 +7745,7 @@ for (const model of usedModels) {
 }
 var proto = Object.defineProperties(() => {
 }, {
-  ...styles,
+  ...styles2,
   level: {
     enumerable: true,
     get() {
@@ -7787,7 +7803,7 @@ var applyStyle = (self2, string) => {
   }
   return openAll + string + closeAll;
 };
-Object.defineProperties(createChalk.prototype, styles);
+Object.defineProperties(createChalk.prototype, styles2);
 var chalk = createChalk();
 var chalkStderr = createChalk({ level: stderrColor ? stderrColor.level : 0 });
 var source_default = chalk;