@splunk/react-ui 5.1.0 → 5.3.0

package/CardLayout.js

@@ -94,8 +94,8 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, f(e);
     }
-    function s() {
-        return s = Object.assign ? Object.assign.bind() : function(e) {
+    function d() {
+        return d = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -103,9 +103,9 @@
                 }
             }
             return e;
-        }, s.apply(null, arguments);
+        }, d.apply(null, arguments);
     }
-    function d(e, r) {
+    function s(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -118,9 +118,9 @@
     function p(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? d(Object(t), !0).forEach((function(r) {
+            r % 2 ? s(Object(t), !0).forEach((function(r) {
                 y(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : d(Object(t)).forEach((function(r) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : s(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
@@ -154,7 +154,7 @@
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (n = 0; n < o.length; n++) {
-                t = o[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
+                t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
             }
         }
         return i;
@@ -164,7 +164,7 @@
         var t = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (r.includes(n)) continue;
+                if (-1 !== r.indexOf(n)) continue;
                 t[n] = e[n];
             }
         }
@@ -181,7 +181,7 @@
         wrapCards: o().bool
     };
     function h(e) {
-        var r = e.alignCards, i = r === void 0 ? "left" : r, o = e.cardMaxWidth, a = e.cardMinWidth, c = e.cardWidth, l = e.children, f = e.elementRef, d = e.gutterSize, y = d === void 0 ? 10 : d, b = e.style, m = e.wrapCards, v = m === void 0 ? true : m, O = g(e, [ "alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards" ]);
+        var r = e.alignCards, i = r === void 0 ? "left" : r, o = e.cardMaxWidth, a = e.cardMinWidth, c = e.cardWidth, l = e.children, f = e.elementRef, s = e.gutterSize, y = s === void 0 ? 10 : s, b = e.style, m = e.wrapCards, v = m === void 0 ? true : m, O = g(e, [ "alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards" ]);
  // @docs-props-type CardLayoutPropsBase
                 var h = t.Children.toArray(l).filter(t.isValidElement).map((function(e) {
             
@@ -192,7 +192,7 @@
             });
         }));
         
-        return n().createElement(u, s({
+        return n().createElement(u, d({
             "data-test": "card-layout",
             $alignCards: i,
             $wrapCards: v,

package/Checkbox.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/Checkbox';
+export * from './types/src/Checkbox';

package/Checkbox.js

@@ -0,0 +1,350 @@
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = r => {
+            /******/ var o = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
+            /******/;
+            e.d(o, {
+                a: o
+            });
+            /******/            return o;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (r, o) => {
+            /******/ for (var t in o) {
+                /******/ if (e.o(o, t) && !e.o(r, t)) {
+                    /******/ Object.defineProperty(r, t, {
+                        enumerable: true,
+                        get: o[t]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ T
+    });
+    // CONCATENATED MODULE: external "react"
+    const o = require("react");
+    var t =  e.n(o);
+    // CONCATENATED MODULE: external "lodash/pickBy"
+    const n = require("lodash/pickBy");
+    var a =  e.n(n);
+    // CONCATENATED MODULE: external "prop-types"
+    const i = require("prop-types");
+    var l =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const c = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "styled-components"
+    const s = require("styled-components");
+    var d =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxCompleted"
+    const u = require("@splunk/react-icons/CheckBoxCompleted");
+    var b =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxIndeterminate"
+    const v = require("@splunk/react-icons/CheckBoxIndeterminate");
+    var f =  e.n(v);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const p = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/Checkbox/CheckboxStyles.ts
+    var y = "5 5 16 16";
+    var h = "20px";
+    var m = d().input.attrs({
+        type: "checkbox"
+    }).withConfig({
+        displayName: "CheckboxStyles__StyledCheckbox",
+        componentId: "sc-1yo50j-0"
+    })([ "height:100%;margin:0;opacity:0;position:absolute;width:100%;cursor:pointer;&:disabled{cursor:not-allowed;}" ]);
+    var g = (0, s.css)([ "display:none;height:", ";width:", ";" ], h, h);
+    var k = d()(b()).attrs({
+        viewBox: y
+    }).withConfig({
+        displayName: "CheckboxStyles__StyledCheckIcon",
+        componentId: "sc-1yo50j-1"
+    })([ "", "" ], g);
+    var C = d()(f()).attrs({
+        viewBox: y
+    }).withConfig({
+        displayName: "CheckboxStyles__StyledIndeterminateIcon",
+        componentId: "sc-1yo50j-2"
+    })([ "", "" ], g);
+    var O = d().div.withConfig({
+        displayName: "CheckboxStyles__StyledCheckboxWrapper",
+        componentId: "sc-1yo50j-3"
+    })([ "display:inline-block;box-sizing:border-box;position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:", " solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:has(", ":checked){", "{display:block;}}&:has(", ":indeterminate){", "{display:block;}}&:has(", ":focus){box-shadow:", ";}color:", ";", " &:has(", ":disabled){border-color:", ";background-color:", ";color:", ";cursor:not-allowed;&:has(", ":where(:checked,:indeterminate)){background-color:", ";border-color:", ";}}" ], h, h, h, p.variables.borderRadius, p.variables.inputBorderWidth, p.variables.interactiveColorBorder, p.variables.interactiveColorBackground, m, k, m, C, m, p.variables.focusShadow, (0, 
+    p.pick)({
+        light: p.variables.white,
+        dark: p.variables.black
+    }), (function(e) {
+        var r = e.$error;
+        if (r) {
+            return (0, s.css)([ "border-color:", ";&:has(", ":where(:checked,:indeterminate)){background-color:", ";}" ], p.variables.interactiveColorAccentError, m, p.variables.interactiveColorAccentError);
+        }
+        return (0, s.css)([ "&:has(", ":where(:checked,:indeterminate)){background-color:", ";border-color:", ";}" ], m, p.variables.interactiveColorAccent, p.variables.interactiveColorAccent);
+    }), m, p.variables.interactiveColorBorderDisabled, p.variables.interactiveColorBackgroundDisabled, p.variables.contentColorDisabled, m, p.variables.neutral100, p.variables.interactiveColorBackgroundDisabled);
+    var w = d().label.withConfig({
+        displayName: "CheckboxStyles__StyledLabel",
+        componentId: "sc-1yo50j-4"
+    })([ "cursor:inherit;" ]);
+    var x = d().div.withConfig({
+        displayName: "CheckboxStyles__StyledWrapper",
+        componentId: "sc-1yo50j-5"
+    })([ "", ";position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";cursor:pointer;:has(", ":disabled){color:", ";cursor:not-allowed;}&:not(:has(", ":disabled)){&:hover ", "{", "}}" ], p.mixins.reset("flex"), p.variables.spacingSmall, p.variables.inputHeight, p.variables.contentColorActive, m, p.variables.contentColorDisabled, m, O, (function(e) {
+        var r = e.$error;
+        if (r) {
+            return (0, s.css)([ ":has(", ":where(:checked,:indeterminate)){background-color:", ";border-color:", ";}border-color:", ";background-color:", ";" ], m, p.variables.interactiveColorAccentError, p.variables.interactiveColorAccentError, p.mixins.overlayColors(p.variables.interactiveColorAccentError, p.variables.interactiveColorBorderHover), p.mixins.overlayColors(p.variables.interactiveColorBackground, p.variables.interactiveColorOverlayHover));
+        }
+        return (0, s.css)([ ":has(", ":where(:checked,:indeterminate)){background-color:", ";border-color:", ";}border-color:", ";background-color:", ";" ], m, p.mixins.overlayColors(p.variables.interactiveColorAccent, p.variables.interactiveColorOverlayHover), p.variables.interactiveColorAccent, p.variables.interactiveColorBorderHover, p.mixins.overlayColors(p.variables.interactiveColorBackground, p.variables.interactiveColorOverlayHover));
+    }));
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+    function j(e, r) {
+        if (e) {
+            if (typeof e === "function") {
+                e(r);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = r;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
+    }
+    // CONCATENATED MODULE: ./src/Checkbox/Checkbox.tsx
+    function S(e) {
+        "@babel/helpers - typeof";
+        return S = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return typeof e;
+        } : function(e) {
+            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        }, S(e);
+    }
+    function B() {
+        return B = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var o = arguments[r];
+                for (var t in o) {
+                    ({}).hasOwnProperty.call(o, t) && (e[t] = o[t]);
+                }
+            }
+            return e;
+        }, B.apply(null, arguments);
+    }
+    function P(e, r) {
+        var o = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var t = Object.getOwnPropertySymbols(e);
+            r && (t = t.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }))), o.push.apply(o, t);
+        }
+        return o;
+    }
+    function E(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var o = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? P(Object(o), !0).forEach((function(r) {
+                I(e, r, o[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(o)) : P(Object(o)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(o, r));
+            }));
+        }
+        return e;
+    }
+    function I(e, r, o) {
+        return (r = _(r)) in e ? Object.defineProperty(e, r, {
+            value: o,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[r] = o, e;
+    }
+    function _(e) {
+        var r = D(e, "string");
+        return "symbol" == S(r) ? r : r + "";
+    }
+    function D(e, r) {
+        if ("object" != S(e) || !e) return e;
+        var o = e[Symbol.toPrimitive];
+        if (void 0 !== o) {
+            var t = o.call(e, r || "default");
+            if ("object" != S(t)) return t;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === r ? String : Number)(e);
+    }
+    function q(e, r) {
+        if (null == e) return {};
+        var o, t, n = A(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var a = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < a.length; t++) {
+                o = a[t], -1 === r.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (n[o] = e[o]);
+            }
+        }
+        return n;
+    }
+    function A(e, r) {
+        if (null == e) return {};
+        var o = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (-1 !== r.indexOf(t)) continue;
+                o[t] = e[t];
+            }
+        }
+        return o;
+    }
+    /** @public */    var M = {
+        checked: l().oneOf([ true, false, "indeterminate" ]),
+        children: l().node,
+        defaultChecked: l().bool,
+        describedBy: l().string,
+        disabled: l().bool,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        error: l().bool,
+        inert: l().bool,
+        inputRef: l().oneOfType([ l().func, l().object ]),
+        labelledBy: l().string,
+        name: l().string,
+        onChange: l().func,
+        /** @private. */
+        required: l().bool
+    };
+    var R = function e(r) {
+        var n = r.checked, i = r.children, l = r.defaultChecked, s = r.describedBy, d = r.disabled, u = r.elementRef, b = r.error, v = r.id, f = r.inert, p = r.inputRef, y = r.labelledBy, h = r.name, g = r.onChange, S = r.required, P = r.role, I = r.tabIndex, _ = r.value, D = q(r, [ "checked", "children", "defaultChecked", "describedBy", "disabled", "elementRef", "error", "id", "inert", "inputRef", "labelledBy", "name", "onChange", "required", "role", "tabIndex", "value" ]);
+        // @docs-props-type CheckboxPropsBase
+        // this component intentionally does not use useControlled because it uses React's checked/defaultChecked built-in instead
+        // https://react.dev/reference/react-dom/components/input#providing-an-initial-value-for-an-input
+                var A = (0, o.useCallback)((function(e) {
+            g === null || g === void 0 ? void 0 : g(e, {
+                checked: e.currentTarget.checked,
+                name: h,
+                value: e.currentTarget.value
+            });
+        }), [ h, g ]);
+        // If has internal label defined with children, must have an id and must use generated labelId.
+        // Otherwise, use customer defined id and external label.
+                var M = (0, o.useMemo)((function() {
+            return i && v == null ? (0, c.createDOMID)("checkbox-input") : v;
+        }), [ i, v ]);
+        var R = (0, o.useMemo)((function() {
+            return i ? (0, c.createDOMID)("checkbox-label") : y;
+        }), [ i, y ]);
+        var T = (0, o.useRef)(null);
+        var N = (0, o.useCallback)((function(e) {
+            j(T, e);
+            j(p, e);
+        }), [ p, T ]);
+        // useLayoutEffect is necessary to ensure that the checkbox is set to indeterminate before the browser paints
+                (0, o.useLayoutEffect)((function() {
+            if (T.current) {
+                // input type="checkbox" does not support indeterminate directly on the value prop - it needs to be set via JS
+                T.current.indeterminate = n === "indeterminate";
+            }
+        }), [ n ]);
+        var H = (0, o.useMemo)((function() {
+            return E(E({}, a()(D, (function(e, r) {
+                return r === "role" || r.indexOf("aria-") === 0;
+            }))), {}, {
+                "aria-describedby": s,
+                "aria-labelledby": R,
+                "aria-invalid": b || undefined
+            });
+        }), [ s, b, R, D ]);
+        var $ = {};
+        // a checkbox's value defaults to "on" if no value is passed
+        // so we cannot pass a value attribute if it is not specified
+        // to avoid overwriting the default when value is not set
+                if (_ != null) {
+            $.value = _;
+        }
+        // using React's checked/defaultChecked built-in, we cannot pass both props at once
+                if (n != null) {
+            // checked="indeterminate" is not a value Checkbox supports so handle it here
+            // specifically avoiding !!checked because Firefox will match :checked against an indeterminate checkbox with checked={true}
+            // this appears incorrect according to the spec: https://html.spec.whatwg.org/multipage/input.html#checkbox-state-(type=checkbox)
+            // which says: "If the element's indeterminate IDL attribute is set to true,
+            // then the control's selection should be obscured as if the control was in a third, indeterminate, state."
+            $.checked = n === true;
+        } else if (l != null) {
+            $.defaultChecked = l;
+        }
+        
+        return t().createElement(x, B({
+            "data-test": "checkbox",
+            "data-test-checked": n,
+            "data-test-disabled": d ? "disabled" : undefined,
+            "data-test-error": b ? true : undefined,
+            "data-test-value": _,
+            $error: b,
+            ref: u
+        }, D),  t().createElement(O, {
+            $error: b
+        },  t().createElement(m, B({
+            disabled: d,
+            "data-test": f ? "presentation-toggle" : "toggle",
+            id: M,
+            inert: f ? "true" : undefined,
+            name: h,
+            onChange: A,
+            ref: N,
+            required: S,
+            role: f ? "presentation" : P,
+            tabIndex: I,
+            type: "checkbox"
+        }, H, $)),  t().createElement(k, null),  t().createElement(C, null)), i &&  t().createElement(w, {
+            "data-test": "label",
+            htmlFor: M,
+            id: R
+        }, i));
+    };
+    R.propTypes = M;
+    /* harmony default export */    const T = R;
+    // CONCATENATED MODULE: ./src/Checkbox/index.ts
+    module.exports = r;
+    /******/})();

package/Chip.js

@@ -82,8 +82,8 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const v = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const p = require("styled-components");
-    var f =  e.n(p);
+    const f = require("styled-components");
+    var p =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
     const b = require("@splunk/react-icons/Cross");
     var m =  e.n(b);
@@ -93,7 +93,7 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const C = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
-    var h = (0, p.css)([ "", ";", ";align-content:center;align-items:center;height:", ";max-width:100%;padding:", " ", ";column-gap:", ";background-color:", ";color:", ";border-radius:", ";", ";", ";" ], C.mixins.reset("grid"), C.mixins.typography("body"), C.variables.inputHeight, C.variables.spacingXSmall, C.variables.spacingSmall, C.variables.spacingXSmall, (0, 
+    var h = (0, f.css)([ "", ";", ";align-content:center;align-items:center;height:", ";max-width:100%;padding:", " ", ";column-gap:", ";background-color:", ";color:", ";border-radius:", ";", ";", ";" ], C.mixins.reset("grid"), C.mixins.typography("body"), C.variables.inputHeight, C.variables.spacingXSmall, C.variables.spacingSmall, C.variables.spacingXSmall, (0, 
     C.pickVariant)("$appearance", {
         default: C.variables.neutral200,
         outline: C.variables.transparent,
@@ -110,40 +110,40 @@
         return n || (r === "default" || r === "outline" ? C.variables.contentColorActive : C.variables.contentColorInverted);
     }), C.variables.borderRadius, (function(e) {
         var r = e.$appearance;
-        return r === "outline" && (0, p.css)([ "border:1px solid ", ";" ], C.variables.borderColorStrong);
+        return r === "outline" && (0, f.css)([ "border:1px solid ", ";" ], C.variables.borderColorStrong);
     }), (function(e) {
         var r = e.$appearance, n = e.$disabled;
-        return n && (0, p.css)([ "background-color:", ";color:", ";", "" ], C.variables.neutral100, C.variables.contentColorDisabled, r === "outline" && (0, 
-        p.css)([ "background-color:", ";border-color:", ";" ], C.variables.transparent, C.variables.borderColorWeak));
+        return n && (0, f.css)([ "background-color:", ";color:", ";", "" ], C.variables.neutral100, C.variables.contentColorDisabled, r === "outline" && (0, 
+        f.css)([ "background-color:", ";border-color:", ";" ], C.variables.transparent, C.variables.borderColorWeak));
     }));
-    var S = f().div.withConfig({
+    var S = p().div.withConfig({
         displayName: "ChipStyles__StyledNonInteractive",
         componentId: "sc-1sd3tsh-0"
     })([ "", " ", ";" ], h, (0, C.pickVariant)("$icon", {
-        true: (0, p.css)([ "grid-template-columns:[icon] min-content [label] auto;" ]),
-        false: (0, p.css)([ "grid-template-columns:[label] auto;" ])
+        true: (0, f.css)([ "grid-template-columns:[icon] min-content [label] auto;" ]),
+        false: (0, f.css)([ "grid-template-columns:[label] auto;" ])
     }));
-    var $ = f().div.withConfig({
+    var $ = p().div.withConfig({
         displayName: "ChipStyles__StyledIcon",
         componentId: "sc-1sd3tsh-1"
     })([ "display:grid;grid-column:icon;" ]);
-    var k = f()(m()).withConfig({
+    var k = p()(m()).withConfig({
         displayName: "ChipStyles__StyledRemoveIcon",
         componentId: "sc-1sd3tsh-2"
     })([ "grid-column:remove;" ]);
-    var O = f().div.withConfig({
+    var O = p().div.withConfig({
         displayName: "ChipStyles__StyledLabel",
         componentId: "sc-1sd3tsh-3"
     })([ "", " grid-column:label;" ], C.mixins.ellipsis());
-    var R = f()(g()).withConfig({
+    var R = p()(g()).withConfig({
         displayName: "ChipStyles__StyledClickable",
         componentId: "sc-1sd3tsh-4"
     })([ "", " cursor:pointer;", ";", "" ], h, (0, C.pickVariant)("$icon", {
-        true: (0, p.css)([ "grid-template-columns:[icon] min-content [label] auto [remove] min-content;" ]),
-        false: (0, p.css)([ "grid-template-columns:[label] auto [remove] min-content;" ])
+        true: (0, f.css)([ "grid-template-columns:[icon] min-content [label] auto [remove] min-content;" ]),
+        false: (0, f.css)([ "grid-template-columns:[label] auto [remove] min-content;" ])
     }), (function(e) {
         var r = e.$disabled;
-        return !r && (0, p.css)([ "&:focus{box-shadow:", ";}&:hover{background-color:", ";}" ], C.variables.focusShadow, (0, 
+        return !r && (0, f.css)([ "&:focus{box-shadow:", ";}&:hover{background-color:", ";}" ], C.variables.focusShadow, (0, 
         C.pickVariant)("$appearance", {
             outline: C.variables.neutral100,
             default: C.variables.neutral300,
@@ -170,26 +170,26 @@
         }, w.apply(null, arguments);
     }
     function q(e, r) {
-        return E(e) || x(e, r) || j(e, r) || _();
+        return E(e) || I(e, r) || j(e, r) || _();
     }
     function _() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
     function j(e, r) {
         if (e) {
-            if ("string" == typeof e) return I(e, r);
+            if ("string" == typeof e) return x(e, r);
             var n = {}.toString.call(e).slice(8, -1);
-            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? I(e, r) : void 0;
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? x(e, r) : void 0;
         }
     }
-    function I(e, r) {
+    function x(e, r) {
         (null == r || r > e.length) && (r = e.length);
         for (var n = 0, o = Array(r); n < r; n++) {
             o[n] = e[n];
         }
         return o;
     }
-    function x(e, r) {
+    function I(e, r) {
         var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != n) {
             var o, a, t, l, i = [], s = !0, c = !1;
@@ -220,7 +220,7 @@
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
             for (o = 0; o < t.length; o++) {
-                n = t[o], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
+                n = t[o], -1 === r.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
             }
         }
         return a;
@@ -230,7 +230,7 @@
         var n = {};
         for (var o in e) {
             if ({}.hasOwnProperty.call(e, o)) {
-                if (r.includes(o)) continue;
+                if (-1 !== r.indexOf(o)) continue;
                 n[o] = e[o];
             }
         }
@@ -268,13 +268,13 @@
     }
     function M(e) {
         var r = T(e), a = q(r, 2), l = a[0], i = a[1];
-        var s = l.$appearance, u = l.$foregroundColor, p = l.disabled, f = p === void 0 ? false : p, b = l.icon, m = N(l, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var s = l.$appearance, u = l.$foregroundColor, f = l.disabled, p = f === void 0 ? false : f, b = l.icon, m = N(l, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
         var y = i.children, g = i.elementRef, C = i.onRequestRemove, h = i.value, S = N(i, [ "children", "elementRef", "onRequestRemove", "value" ]);
         var _ = typeof y === "string";
         var j = _ ? (0, d.sprintf)((0, v._)("Remove %(children)s"), {
             children: y
         }) : (0, v._)("Remove");
-        var I = (0, n.useCallback)((function(e) {
+        var x = (0, n.useCallback)((function(e) {
             C(e, {
                 value: h
             });
@@ -283,12 +283,12 @@
         return o().createElement(R, w({
             $appearance: s,
             $icon: !!b,
-            $disabled: f,
+            $disabled: p,
             $foregroundColor: u,
             "data-test-value": h,
-            disabled: f ? "disabled" : undefined,
+            disabled: p ? "disabled" : undefined,
             elementRef: g,
-            onClick: I
+            onClick: x
         }, m, t()(S, Object.keys(P))),  o().createElement(c(), null, j), b &&  o().createElement($, null, b),  o().createElement(O, {
             "data-test": "label",
             "aria-hidden": _ ? true : undefined
@@ -299,7 +299,7 @@
     function V(e) {
         var r = T(e), n = q(r, 2), a = n[0], l = n[1];
         var i = a.$appearance, s = a.$foregroundColor, c = a.disabled, u = a.icon, d = N(a, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var v = l.children, p = l.elementRef, f = N(l, [ "children", "elementRef" ]);
+        var v = l.children, f = l.elementRef, p = N(l, [ "children", "elementRef" ]);
         
         return o().createElement(S, w({
             $appearance: i,
@@ -307,8 +307,8 @@
             $disabled: c !== null && c !== void 0 ? c : false,
             $foregroundColor: s,
             "data-test-disabled": c ? "disabled" : undefined,
-            ref: p
-        }, d, t()(f, Object.keys(P))), u &&  o().createElement($, null, u),  o().createElement(O, {
+            ref: f
+        }, d, t()(p, Object.keys(P))), u &&  o().createElement($, null, u),  o().createElement(O, {
             "data-test": "label"
         }, v));
     }