@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/utils/color/ColorValue.js

@@ -1,39 +1,21 @@
 import { _ as _define_property } from '@swc/helpers/_/_define_property';
 import { getBoundedValue } from '../functions/numbers.js';
-const scratchBytes = new Uint8Array(4);
-const scratchUInt32 = new Uint32Array(scratchBytes.buffer);
-export const isRgbColor = (value) => {
-  return (
-    typeof value !== 'string' && 'r' in value && 'g' in value && 'b' in value
-  );
-};
-export const isHslColor = (value) => {
-  return (
-    typeof value !== 'string' && 'h' in value && 's' in value && 'l' in value
-  );
-};
-export const isHsvColor = (value) => {
-  return (
-    typeof value !== 'string' && 'h' in value && 's' in value && 'v' in value
-  );
-};
+let scratchBytes = new Uint8Array(4);
+let scratchUInt32 = new Uint32Array(scratchBytes.buffer);
+export const isRgbColor = (value) =>
+  'string' != typeof value && 'r' in value && 'g' in value && 'b' in value;
+export const isHslColor = (value) =>
+  'string' != typeof value && 'h' in value && 's' in value && 'l' in value;
+export const isHsvColor = (value) =>
+  'string' != typeof value && 'h' in value && 's' in value && 'v' in value;
 export class ColorValue {
   static create(val) {
-    if (!val) {
-      return ColorValue.fromTbgr(0);
-    }
-    if (isRgbColor(val)) {
-      return ColorValue.fromRGB(val);
-    }
-    if (isHslColor(val)) {
-      return ColorValue.fromHSL(val);
-    }
-    if (isHsvColor(val)) {
-      return ColorValue.fromHSV(val);
-    }
-    if (typeof val === 'string') {
+    if (!val) return ColorValue.fromTbgr(0);
+    if (isRgbColor(val)) return ColorValue.fromRGB(val);
+    if (isHslColor(val)) return ColorValue.fromHSL(val);
+    if (isHsvColor(val)) return ColorValue.fromHSV(val);
+    if ('string' == typeof val)
       return ColorValue.fromString(val, ColorValue.fromTbgr(0));
-    }
     return ColorValue.fromTbgr(0);
   }
   toTbgr() {
@@ -55,14 +37,14 @@ export class ColorValue {
     return scratchUInt32[0];
   }
   static fromString(val, defaultColorIfNotParsed) {
-    const [tbgr, hue] = this.computeTbgrFromString(
+    let [tbgr, hue] = this.computeTbgrFromString(
       val,
       defaultColorIfNotParsed?.toTbgr(),
     );
     return new ColorValue(tbgr, hue);
   }
   static fromHSL(hsl) {
-    const alpha = hsl.a ?? 1;
+    let alpha = hsl.a ?? 1;
     return new ColorValue(
       this.computeTbgrFromHSL(
         hsl.h / 360,
@@ -74,7 +56,7 @@ export class ColorValue {
     );
   }
   static fromRGB(rgb) {
-    const alpha = rgb.a ?? 1;
+    let alpha = rgb.a ?? 1;
     return ColorValue.fromRgbt(
       rgb.r,
       rgb.g,
@@ -83,33 +65,31 @@ export class ColorValue {
     );
   }
   static fromHSV(hsv) {
-    const alpha = hsv.a ?? 1;
-    const transparency = Math.round((1 - alpha) * 255);
-    if (!hsv.s || hsv.h === -1) {
-      const white = 0xff & Math.floor((255.0 * hsv.v) / 100.0 + 0.5 + 3.0e-14);
+    let alpha = hsv.a ?? 1;
+    let transparency = Math.round((1 - alpha) * 255);
+    if (!hsv.s || -1 === hsv.h) {
+      let white = 0xff & Math.floor((255.0 * hsv.v) / 100.0 + 0.5 + 3.0e-14);
       return ColorValue.fromRgbt(white, white, white, 0);
     }
     let dhue = hsv.h,
       dsaturation = hsv.s,
       dvalue = hsv.v;
-    if (dhue === 360) {
-      dhue = 0.0;
-    }
+    if (360 === dhue) dhue = 0.0;
     dhue /= 60;
-    const hueIntpart = Math.floor(dhue);
-    const hueFractpart = dhue - hueIntpart;
+    let hueIntpart = Math.floor(dhue);
+    let hueFractpart = dhue - hueIntpart;
     dvalue /= 100;
     dsaturation /= 100;
-    const p = 0xff & Math.floor(dvalue * (1.0 - dsaturation) * 255.0 + 0.5);
-    const q =
+    let p = 0xff & Math.floor(dvalue * (1.0 - dsaturation) * 255.0 + 0.5);
+    let q =
       0xff &
       Math.floor(dvalue * (1.0 - dsaturation * hueFractpart) * 255.0 + 0.5);
-    const t =
+    let t =
       0xff &
       Math.floor(
         dvalue * (1.0 - dsaturation * (1.0 - hueFractpart)) * 255.0 + 0.5,
       );
-    const v = 0xff & Math.floor(dvalue * 255 + 0.5);
+    let v = 0xff & Math.floor(255 * dvalue + 0.5);
     let r = 0,
       b = 0,
       g = 0;
@@ -150,15 +130,15 @@ export class ColorValue {
     let m = /^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(val);
     if (m) {
       let color;
-      const name = m[1];
-      const components = m[2];
-      const hasPercent = (str) => str[str.length - 1] === '%';
-      const floatOrPercent = (str) => {
-        const v = parseFloat(str);
+      let name = m[1];
+      let components = m[2];
+      let hasPercent = (str) => '%' === str[str.length - 1];
+      let floatOrPercent = (str) => {
+        let v = parseFloat(str);
         return 255 * getBoundedValue(hasPercent(str) ? v / 100 : v, 0, 1);
       };
-      const intOrPercent = (str) => {
-        const v = hasPercent(str)
+      let intOrPercent = (str) => {
+        let v = hasPercent(str)
           ? (parseFloat(str) / 100) * 255
           : parseInt(str, 10);
         return getBoundedValue(v, 0, 255);
@@ -170,19 +150,18 @@ export class ColorValue {
             /^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(
               components,
             );
-          if (color) {
+          if (color)
             return [
               this.computeTbgrFromComponents(
                 intOrPercent(color[1]),
                 intOrPercent(color[2]),
                 intOrPercent(color[3]),
-                typeof color[4] === 'string'
+                'string' == typeof color[4]
                   ? 255 - floatOrPercent(color[4])
                   : 0,
               ),
-              undefined,
+              void 0,
             ];
-          }
           break;
         case 'hsl':
         case 'hsla':
@@ -191,19 +170,19 @@ export class ColorValue {
               components,
             );
           if (color) {
-            const h = parseFloat(color[1]);
-            const s = parseInt(color[2], 10) / 100;
-            const l = parseInt(color[3], 10) / 100;
-            const t =
-              typeof color[4] === 'string' ? 255 - floatOrPercent(color[4]) : 0;
+            let h = parseFloat(color[1]);
+            let s = parseInt(color[2], 10) / 100;
+            let l = parseInt(color[3], 10) / 100;
+            let t =
+              'string' == typeof color[4] ? 255 - floatOrPercent(color[4]) : 0;
             return [this.computeTbgrFromHSL(h / 360, s, l, t), h];
           }
           break;
       }
     } else if ((m = /^\#([A-Fa-f\d]+)$/.exec(val))) {
-      const hex = m[1];
-      const size = hex.length;
-      if (size === 3) {
+      let hex = m[1];
+      let size = hex.length;
+      if (3 === size)
         return [
           this.computeTbgrFromComponents(
             parseInt(hex.charAt(0) + hex.charAt(0), 16),
@@ -211,10 +190,9 @@ export class ColorValue {
             parseInt(hex.charAt(2) + hex.charAt(2), 16),
             0,
           ),
-          undefined,
+          void 0,
         ];
-      }
-      if (size === 6) {
+      if (6 === size)
         return [
           this.computeTbgrFromComponents(
             parseInt(hex.charAt(0) + hex.charAt(1), 16),
@@ -222,10 +200,9 @@ export class ColorValue {
             parseInt(hex.charAt(4) + hex.charAt(5), 16),
             0,
           ),
-          undefined,
+          void 0,
         ];
-      }
-      if (size === 8) {
+      if (8 === size)
         return [
           this.computeTbgrFromComponents(
             parseInt(hex.charAt(0) + hex.charAt(1), 16),
@@ -233,13 +210,10 @@ export class ColorValue {
             parseInt(hex.charAt(4) + hex.charAt(5), 16),
             255 - parseInt(hex.charAt(6) + hex.charAt(7), 16),
           ),
-          undefined,
+          void 0,
         ];
-      }
-    }
-    if (defaultColorIfNotParsed) {
-      return [defaultColorIfNotParsed, undefined];
     }
+    if (defaultColorIfNotParsed) return [defaultColorIfNotParsed, void 0];
     throw new Error('unable to parse string into ColorValue');
   }
   static getColors(tbgr) {
@@ -253,14 +227,13 @@ export class ColorValue {
   }
   getRgb(includeAlpha) {
     scratchUInt32[0] = this._tbgr;
-    if (includeAlpha) {
+    if (includeAlpha)
       return (
         (scratchBytes[0] << 24) +
         (scratchBytes[1] << 16) +
         (scratchBytes[2] << 8) +
         (255 - scratchBytes[3])
       );
-    }
     return (scratchBytes[0] << 16) + (scratchBytes[1] << 8) + scratchBytes[2];
   }
   getAlpha() {
@@ -273,43 +246,31 @@ export class ColorValue {
   toHexString(includeAlpha) {
     if (includeAlpha) {
       let value = this.getRgb(includeAlpha);
-      if (value < 0) {
-        value = 0xffffffff + value + 1;
-      }
+      if (value < 0) value = 0xffffffff + value + 1;
       return `#${`00000000${value.toString(16)}`.slice(-8)}`;
     }
     return `#${`000000${this.getRgb().toString(16)}`.slice(-6)}`;
   }
   static computeTbgrFromHSL(h, s, l, transparency = 0) {
-    const torgb = (p1, q1, t) => {
-      if (t < 0) {
-        t += 1;
-      }
-      if (t > 1) {
-        t -= 1;
-      }
-      if (t < 1 / 6) {
-        return p1 + (q1 - p1) * 6 * t;
-      }
-      if (t < 1 / 2) {
-        return q1;
-      }
-      if (t < 2 / 3) {
-        return p1 + (q1 - p1) * 6 * (2 / 3 - t);
-      }
+    let torgb = (p1, q1, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p1 + (q1 - p1) * 6 * t;
+      if (t < 0.5) return q1;
+      if (t < 2 / 3) return p1 + (q1 - p1) * 6 * (2 / 3 - t);
       return p1;
     };
-    const hue2rgb = (p1, q1, t) => Math.round(torgb(p1, q1, t) * 255);
-    const modulo = (n, m) => ((n % m) + m) % m;
+    let hue2rgb = (p1, q1, t) => Math.round(255 * torgb(p1, q1, t));
+    let modulo = (n, m) => ((n % m) + m) % m;
     h = modulo(h, 1);
     s = getBoundedValue(s, 0, 1);
     l = getBoundedValue(l, 0, 1);
-    if (s === 0) {
+    if (0 === s) {
       l *= 255;
       return this.computeTbgrFromComponents(l, l, l, transparency);
     }
-    const p = l <= 0.5 ? l * (1 + s) : l + s - l * s;
-    const q = 2 * l - p;
+    let p = l <= 0.5 ? l * (1 + s) : l + s - l * s;
+    let q = 2 * l - p;
     return this.computeTbgrFromComponents(
       hue2rgb(q, p, h + 1 / 3),
       hue2rgb(q, p, h),
@@ -320,38 +281,35 @@ export class ColorValue {
   toHslColor() {
     return {
       ...ColorValue.toHsl(this._tbgr),
-      ...(this._hue != undefined && {
+      ...(void 0 != this._hue && {
         h: this._hue,
       }),
     };
   }
   static toHsl(tbgr) {
-    const { r, g, b } = ColorValue.getColors(tbgr);
-    const red = r / 255;
-    const green = g / 255;
-    const blue = b / 255;
-    const cMin = Math.min(red, green, blue);
-    const cMax = Math.max(red, green, blue);
-    const delta = cMax - cMin;
+    let { r, g, b } = ColorValue.getColors(tbgr);
+    let red = r / 255;
+    let green = g / 255;
+    let blue = b / 255;
+    let cMin = Math.min(red, green, blue);
+    let cMax = Math.max(red, green, blue);
+    let delta = cMax - cMin;
     let hue = 0;
     let saturation = 0;
-    if (0 === delta) {
-      hue = 0;
-    } else if (red === cMax) {
-      hue = ((green - blue) / delta) % 6;
-    } else if (green === cMax) {
-      hue = (blue - red) / delta + 2;
-    } else {
-      hue = (red - green) / delta + 4;
-    }
-    hue = Math.round(hue * 60);
-    if (hue < 0) {
-      hue += 360;
-    }
+    hue =
+      0 === delta
+        ? 0
+        : red === cMax
+          ? ((green - blue) / delta) % 6
+          : green === cMax
+            ? (blue - red) / delta + 2
+            : (red - green) / delta + 4;
+    hue = Math.round(60 * hue);
+    if (hue < 0) hue += 360;
     let lightness = (cMax + cMin) / 2;
     saturation = 0 === delta ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
-    saturation = Number((saturation * 100).toFixed(1));
-    lightness = Number((lightness * 100).toFixed(1));
+    saturation = Number((100 * saturation).toFixed(1));
+    lightness = Number((100 * lightness).toFixed(1));
     return {
       h: hue,
       s: saturation,
@@ -360,7 +318,7 @@ export class ColorValue {
     };
   }
   toRgbColor() {
-    const { r, g, b } = ColorValue.getColors(this._tbgr);
+    let { r, g, b } = ColorValue.getColors(this._tbgr);
     return {
       r,
       g,
@@ -371,37 +329,34 @@ export class ColorValue {
   toHsvColor() {
     return {
       ...ColorValue.toHsv(this._tbgr),
-      ...(this._hue != undefined && {
+      ...(void 0 != this._hue && {
         h: this._hue,
       }),
     };
   }
   static toHsv(tbgr) {
-    const { r, g, b } = ColorValue.getColors(tbgr);
-    const red = r / 255;
-    const green = g / 255;
-    const blue = b / 255;
-    const cMin = Math.min(red, green, blue);
-    const cMax = Math.max(red, green, blue);
-    const delta = cMax - cMin;
+    let { r, g, b } = ColorValue.getColors(tbgr);
+    let red = r / 255;
+    let green = g / 255;
+    let blue = b / 255;
+    let cMin = Math.min(red, green, blue);
+    let cMax = Math.max(red, green, blue);
+    let delta = cMax - cMin;
     let hue = 0;
-    if (0 === delta) {
-      hue = 0;
-    } else if (red === cMax) {
-      hue = ((green - blue) / delta) % 6;
-    } else if (green === cMax) {
-      hue = (blue - red) / delta + 2;
-    } else {
-      hue = (red - green) / delta + 4;
-    }
-    hue = Math.round(hue * 60);
-    if (hue < 0) {
-      hue += 360;
-    }
+    hue =
+      0 === delta
+        ? 0
+        : red === cMax
+          ? ((green - blue) / delta) % 6
+          : green === cMax
+            ? (blue - red) / delta + 2
+            : (red - green) / delta + 4;
+    hue = Math.round(60 * hue);
+    if (hue < 0) hue += 360;
     let brightness = cMax;
-    let saturation = cMax === 0 ? 0 : delta / cMax;
-    saturation = Number((saturation * 100).toFixed(1));
-    brightness = Number((brightness * 100).toFixed(1));
+    let saturation = 0 === cMax ? 0 : delta / cMax;
+    saturation = Number((100 * saturation).toFixed(1));
+    brightness = Number((100 * brightness).toFixed(1));
     return {
       h: hue,
       s: saturation,
@@ -413,16 +368,14 @@ export class ColorValue {
     return this._tbgr === other._tbgr;
   }
   static getFormattedColorNumber(value, precision = 1) {
-    if (0 === precision) {
-      Math.round(value).toString();
-    }
+    if (0 === precision) Math.round(value).toString();
     return Number(value.toFixed(precision)).toString();
   }
   toRgbString(includeAlpha) {
-    const rgb = this.toRgbColor();
-    const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
+    let rgb = this.toRgbColor();
+    let rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
     if (includeAlpha) {
-      const alpha = rgb.a ?? 1;
+      let alpha = rgb.a ?? 1;
       return `rgba(${rgbString}, ${ColorValue.getFormattedColorNumber(
         alpha,
         2,
@@ -431,14 +384,14 @@ export class ColorValue {
     return `rgb(${rgbString})`;
   }
   toHslString(includeAlpha) {
-    const hsl = this.toHslColor();
-    const hslString = `${ColorValue.getFormattedColorNumber(
+    let hsl = this.toHslColor();
+    let hslString = `${ColorValue.getFormattedColorNumber(
       this._hue ?? hsl.h,
     )}, ${ColorValue.getFormattedColorNumber(
       hsl.s,
     )}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
     if (includeAlpha) {
-      const alpha = hsl.a ?? 1;
+      let alpha = hsl.a ?? 1;
       return `hsla(${hslString}, ${ColorValue.getFormattedColorNumber(
         alpha,
         2,
@@ -447,10 +400,10 @@ export class ColorValue {
     return `hsl(${hslString})`;
   }
   toHsvString(includeAlpha) {
-    const hsv = this.toHsvColor();
-    const hsvString = `${this._hue ?? hsv.h}, ${hsv.s}%, ${hsv.v}%`;
+    let hsv = this.toHsvColor();
+    let hsvString = `${this._hue ?? hsv.h}, ${hsv.s}%, ${hsv.v}%`;
     if (includeAlpha) {
-      const alpha = hsv.a ?? 1;
+      let alpha = hsv.a ?? 1;
       return `hsva(${hsvString}, ${ColorValue.getFormattedColorNumber(
         alpha,
         2,

package/esm/utils/components/AutoclearingHiddenLiveRegion.js

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { VisuallyHidden } from '../../core/VisuallyHidden/VisuallyHidden.js';
 import { getWindow } from '../functions/index.js';
 export const AutoclearingHiddenLiveRegion = ({ text = '' }) => {
-  const [maybeText, setMaybeText] = React.useState(text);
+  let [maybeText, setMaybeText] = React.useState(text);
   React.useEffect(() => {
     setMaybeText(text);
-    const timeout = getWindow()?.setTimeout(() => setMaybeText(''), 5000);
+    let timeout = getWindow()?.setTimeout(() => setMaybeText(''), 5000);
     return () => void getWindow()?.clearTimeout(timeout);
   }, [text]);
   return React.createElement(

package/esm/utils/components/ButtonBase.js

@@ -3,28 +3,26 @@ import cx from 'classnames';
 import { Box } from './Box.js';
 import { useIsClient } from '../hooks/useIsClient.js';
 export const ButtonBase = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     as: asProp = 'button',
     disabled: disabledProp,
     htmlDisabled,
     ...rest
   } = props;
-  const isClient = useIsClient();
-  const ariaDisabled =
-    disabledProp && !htmlDisabled && isClient && asProp === 'button';
-  const handleIfEnabled = (handler) => (e) => {
-    if (disabledProp) {
-      return;
-    }
+  let isClient = useIsClient();
+  let ariaDisabled =
+    disabledProp && !htmlDisabled && isClient && 'button' === asProp;
+  let handleIfEnabled = (handler) => (e) => {
+    if (disabledProp) return;
     handler?.(e);
   };
   return React.createElement(Box, {
     as: asProp,
-    type: asProp === 'button' ? 'button' : undefined,
+    type: 'button' === asProp ? 'button' : void 0,
     ref: forwardedRef,
-    'aria-disabled': ariaDisabled ? 'true' : undefined,
-    'data-iui-disabled': disabledProp ? 'true' : undefined,
-    disabled: htmlDisabled ?? (!isClient && disabledProp) ? true : undefined,
+    'aria-disabled': ariaDisabled ? 'true' : void 0,
+    'data-iui-disabled': disabledProp ? 'true' : void 0,
+    disabled: !!(htmlDisabled ?? (!isClient && disabledProp)) || void 0,
     ...rest,
     className: cx('iui-button-base', props.className),
     onClick: handleIfEnabled(props.onClick),
@@ -32,4 +30,3 @@ export const ButtonBase = React.forwardRef((props, forwardedRef) => {
     onPointerUp: handleIfEnabled(props.onPointerUp),
   });
 });
-ButtonBase.displayName = 'ButtonBase';

package/esm/utils/components/FieldsetBase.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Thin wrapper over the `<fieldset>` element that removes its default styles.
+ *
+ * @private
+ */
+export declare const FieldsetBase: import("../props.js").PolymorphicForwardRefComponent<"fieldset", {}>;

package/esm/utils/components/FieldsetBase.js

@@ -0,0 +1,2 @@
+import { polymorphic } from '../functions/polymorphic.js';
+export const FieldsetBase = polymorphic.fieldset('iui-fieldset-base');

package/esm/utils/components/FocusTrap.js

@@ -2,29 +2,23 @@ import * as React from 'react';
 import { getTabbableElements } from '../functions/focusable.js';
 import { mergeRefs } from '../hooks/useMergedRefs.js';
 export const FocusTrap = (props) => {
-  const { children } = props;
-  const childRef = React.useRef();
-  const getFirstLastFocusables = () => {
-    const elements = getTabbableElements(childRef.current);
-    const firstElement = elements[0];
-    const lastElement = elements[(elements.length || 1) - 1];
+  let { children } = props;
+  let childRef = React.useRef();
+  let getFirstLastFocusables = () => {
+    let elements = getTabbableElements(childRef.current);
+    let firstElement = elements[0];
+    let lastElement = elements[(elements.length || 1) - 1];
     return [firstElement, lastElement];
   };
-  const onFirstFocus = (event) => {
-    const [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === firstElement) {
-      lastElement?.focus();
-    } else {
-      firstElement?.focus();
-    }
+  let onFirstFocus = (event) => {
+    let [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === firstElement) lastElement?.focus();
+    else firstElement?.focus();
   };
-  const onLastFocus = (event) => {
-    const [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === lastElement) {
-      firstElement?.focus();
-    } else {
-      lastElement?.focus();
-    }
+  let onLastFocus = (event) => {
+    let [firstElement, lastElement] = getFirstLastFocusables();
+    if (event.relatedTarget === lastElement) firstElement?.focus();
+    else lastElement?.focus();
   };
   return React.createElement(
     React.Fragment,

package/esm/utils/components/InputContainer.js

@@ -4,7 +4,7 @@ import { Box } from './Box.js';
 import { Label } from '../../core/Label/Label.js';
 import { StatusMessage } from '../../core/StatusMessage/StatusMessage.js';
 export const InputContainer = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     label,
     disabled,
     required,
@@ -25,7 +25,7 @@ export const InputContainer = React.forwardRef((props, forwardedRef) => {
     {
       className: cx('iui-input-grid', className),
       'data-iui-status': status,
-      'data-iui-label-placement': isLabelInline ? 'inline' : undefined,
+      'data-iui-label-placement': isLabelInline ? 'inline' : void 0,
       style: style,
       ref: forwardedRef,
       ...rest,
@@ -34,7 +34,7 @@ export const InputContainer = React.forwardRef((props, forwardedRef) => {
       React.createElement(
         Label,
         {
-          as: inputId && props.as !== 'label' ? 'label' : 'div',
+          as: inputId && 'label' !== props.as ? 'label' : 'div',
           required: required,
           disabled: disabled,
           htmlFor: inputId,

package/esm/utils/components/InputFlexContainer.js

@@ -4,15 +4,14 @@ import { Box } from './Box.js';
 import { Icon } from '../../core/Icon/Icon.js';
 import { IconButton } from '../../core/Buttons/IconButton.js';
 export const InputFlexContainer = React.forwardRef((props, ref) => {
-  const { isDisabled, status, children, className, size, style, ...rest } =
-    props;
+  let { isDisabled, status, children, className, size, style, ...rest } = props;
   return React.createElement(
     Box,
     {
       className: cx('iui-input-flex-container', className),
       'data-iui-status': status,
       'data-iui-size': size,
-      'data-iui-disabled': isDisabled ? 'true' : undefined,
+      'data-iui-disabled': isDisabled ? 'true' : void 0,
       ref: ref,
       style: style,
       ...rest,
@@ -21,7 +20,7 @@ export const InputFlexContainer = React.forwardRef((props, ref) => {
   );
 });
 export const InputFlexContainerButton = React.forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+  let { className, ...rest } = props;
   return React.createElement(IconButton, {
     ref: ref,
     className: cx('iui-input-flex-container-icon', className),
@@ -30,7 +29,7 @@ export const InputFlexContainerButton = React.forwardRef((props, ref) => {
   });
 });
 export const InputFlexContainerIcon = React.forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+  let { className, ...rest } = props;
   return React.createElement(Icon, {
     ref: ref,
     className: cx('iui-input-flex-container-icon', className),

package/esm/utils/components/InputWithIcon.js

@@ -1,3 +1,2 @@
 import { polymorphic } from '../functions/polymorphic.js';
 export const InputWithIcon = polymorphic.div('iui-input-with-icon');
-InputWithIcon.displayName = 'InputWithIcon';