@splunk/react-ui 5.0.0-beta.3 → 5.0.0-beta.5

package/Chip.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = r => {
-            /******/ var a = r && r.__esModule ? 
+            /******/ var n = r && r.__esModule ? 
             /******/ () => r["default"]
             /******/ : () => r
             /******/;
-            e.d(a, {
-                a
+            e.d(n, {
+                a: n
             });
-            /******/            return a;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, a) => {
-            /******/ for (var o in a) {
-                /******/ if (e.o(a, o) && !e.o(r, o)) {
+        /******/ e.d = (r, n) => {
+            /******/ for (var o in n) {
+                /******/ if (e.o(n, o) && !e.o(r, o)) {
                     /******/ Object.defineProperty(r, o, {
                         enumerable: true,
-                        get: a[o]
+                        get: n[o]
                     });
                     /******/                }
                 /******/            }
@@ -61,448 +61,263 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ T
+        default: () => /* reexport */ D
     });
     // CONCATENATED MODULE: external "react"
-    const a = require("react");
-    var o =  e.n(a);
+    const n = require("react");
+    var o =  e.n(n);
     // CONCATENATED MODULE: external "lodash/omit"
-    const n = require("lodash/omit");
-    var i =  e.n(n);
+    const a = require("lodash/omit");
+    var t =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const t = require("prop-types");
-    var l =  e.n(t);
+    const l = require("prop-types");
+    var i =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const s = require("@splunk/react-ui/ScreenReaderContent");
     var c =  e.n(s);
-    // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const p = require("@splunk/react-icons/Cross");
-    var u =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const d = require("@splunk/ui-utils/i18n");
+    const u = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/color"
-    const f = require("@splunk/ui-utils/color");
+    const d = require("@splunk/ui-utils/color");
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
     const v = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "styled-components"
-    const b = require("styled-components");
-    var g =  e.n(b);
+    const p = require("styled-components");
+    var f =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const m = require("@splunk/react-ui/Clickable");
-    var h =  e.n(m);
+    const b = require("@splunk/react-ui/Clickable");
+    var m =  e.n(b);
+    // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
+    const y = require("@splunk/react-icons/Cross");
+    var g =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/themes"
     const C = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
-    var y = (0, b.css)([ "", ";background-color:", ";border:1px solid transparent;border-radius:2px;", " flex:0 1 auto;max-width:calc(100% - 3px);", " ", " ", "" ], C.mixins.reset("inline-flex"), (0, 
+    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, 
     C.pickVariant)("$appearance", {
-        default: {
-            enterprise: C.variables.neutral300,
-            prisma: C.variables.neutral100
-        },
-        info: {
-            enterprise: C.variables.infoColorL30,
-            prisma: C.variables.statusColorInfo
-        },
-        success: {
-            enterprise: C.variables.successColorL30,
-            prisma: C.variables.statusColorNormal
-        },
-        warning: {
-            enterprise: C.variables.warningColorL30,
-            prisma: C.variables.statusColorMedium
-        },
-        error: {
-            enterprise: C.variables.errorColorL30,
-            prisma: C.variables.statusColorHigh
-        },
-        outline: "transparent",
+        default: C.variables.neutral200,
+        outline: C.variables.transparent,
+        info: C.variables.severityColorInfo,
+        success: C.variables.severityColorNormal,
+        warning: C.variables.severityColorNotice,
+        error: C.variables.severityColorAlert,
         custom: function e(r) {
-            var a = r.$backgroundColor;
-            return a;
+            var n = r.$backgroundColor;
+            return n;
         }
     }), (function(e) {
+        var r = e.$appearance, n = e.$foregroundColor;
+        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, b.css)([ "border-color:", ";" ], (0, C.pick)({
-            enterprise: {
-                dark: C.variables.gray80,
-                light: C.variables.gray60
-            },
-            prisma: C.variables.interactiveColorBorder
-        }));
-    }), (0, C.pick)({
-        enterprise: (0, b.css)([ "line-height:", ";margin:0 2px 2px 0;" ], C.variables.lineHeight),
-        prisma: (0, b.css)([ "color:", ";line-height:16px;margin:1px;" ], (function(e) {
-            var r = e.$appearance;
-            return r === "default" || r === "outline" ? C.variables.contentColorDefault : C.variables.contentColorInverted;
-        }))
-    }), (0, C.pick)({
-        enterprise: {
-            comfortable: (0, b.css)([ "height:calc(", " - 6px);padding:4px 7px;" ], C.variables.inputHeight),
-            compact: (0, b.css)([ "height:calc(", " - 6px);padding:2px 4px;" ], C.variables.inputHeight)
-        },
-        prisma: {
-            comfortable: (0, b.css)([ "height:calc(", " - 6px);padding:4px 7px;font-size:", ";" ], C.variables.inputHeight, C.variables.fontSizeSmall),
-            compact: (0, b.css)([ "height:calc(", " - 6px);padding:2px 7px;font-size:", ";" ], C.variables.inputHeight, C.variables.fontSizeSmall)
-        }
+        return r === "outline" && (0, p.css)([ "border:1px solid ", ";" ], C.variables.borderColorStrong);
     }), (function(e) {
-        var r = e.$disabled;
-        return r && (0, b.css)([ "background-color:", ";" ], (0, C.pickVariant)("$appearance", {
-            default: {
-                enterprise: {
-                    dark: "rgba(0, 0, 0, 0.15)",
-                    light: "rgba(0, 0, 0, 0.05)"
-                },
-                prisma: {
-                    light: "rgba(0, 0, 0, 0.1)",
-                    dark: "rgba(255, 255, 255, 0.15)"
-                }
-            },
-            info: {
-                enterprise: C.mixins.colorWithAlpha(C.variables.infoColorL10, .3),
-                prisma: C.variables.interactiveColorBackgroundDisabled
-            },
-            success: {
-                enterprise: C.mixins.colorWithAlpha(C.variables.successColorL10, .3),
-                prisma: C.variables.interactiveColorBackgroundDisabled
-            },
-            warning: {
-                enterprise: C.mixins.colorWithAlpha(C.variables.warningColorL10, .3),
-                prisma: C.variables.interactiveColorBackgroundDisabled
-            },
-            error: {
-                enterprise: C.mixins.colorWithAlpha(C.variables.errorColorL10, .3),
-                prisma: {
-                    light: "rgba(0, 0, 0, 0.1)",
-                    dark: "rgba(255, 255, 255, 0.15)"
-                }
-            },
-            outline: {
-                prisma: {
-                    light: "rgba(0, 0, 0, 0.1)",
-                    dark: "rgba(255, 255, 255, 0.15)"
-                }
-            },
-            custom: {
-                enterprise: {
-                    dark: "rgba(0, 0, 0, 0.15)",
-                    light: "rgba(0, 0, 0, 0.05)"
-                },
-                prisma: {
-                    light: "rgba(0, 0, 0, 0.1)",
-                    dark: "rgba(255, 255, 255, 0.15)"
-                }
-            }
-        }));
+        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));
     }));
-    var $ = g().div.withConfig({
-        displayName: "ChipStyles__StyledBasic",
+    var S = f().div.withConfig({
+        displayName: "ChipStyles__StyledNonInteractive",
         componentId: "sc-1sd3tsh-0"
-    })([ "", "" ], y);
-    var k = g()($).withConfig({
-        displayName: "ChipStyles__Styled",
-        componentId: "sc-1sd3tsh-1"
-    })([ "align-items:center;" ]);
-    var x = g().div.withConfig({
-        displayName: "ChipStyles__StyledInner",
-        componentId: "sc-1sd3tsh-2"
-    })([ "", ";" ], (0, C.pick)({
-        enterprise: (0, b.css)([ "display:flex;max-width:100%;" ]),
-        prisma: (0, b.css)([ "display:grid;max-width:100%;height:16px;column-gap:", ";", ";" ], (0, 
-        C.pick)({
-            prisma: {
-                compact: C.variables.spacingXSmall,
-                comfortable: C.variables.spacingSmall
-            }
-        }), (function(e) {
-            var r = e.$icon, a = e.$removable;
-            var o = (0, b.css)([ "grid-template-columns:1fr;" ]);
-            if (r && a) {
-                o = (0, b.css)([ "grid-template-columns:0fr 1fr 0fr;" ]);
-            } else if (r) {
-                o = (0, b.css)([ "grid-template-columns:0fr 1fr;" ]);
-            } else if (a) {
-                o = (0, b.css)([ "grid-template-columns:1fr 0fr;" ]);
-            }
-            return o;
-        }))
+    })([ "", " ", ";" ], 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;" ])
     }));
-    var S = g().div.withConfig({
+    var $ = f().div.withConfig({
         displayName: "ChipStyles__StyledIcon",
-        componentId: "sc-1sd3tsh-3"
-    })([ "", ";margin-right:", ";color:", ";" ], (0, C.pick)({
-        prisma: {
-            compact: (0, b.css)([ "font-size:14px;display:inline-flex;svg{height:16px;vertical-align:baseline;}" ]),
-            comfortable: (0, b.css)([ "font-size:18px;display:inline-flex;align-self:center;svg{height:16px;vertical-align:baseline;}" ])
-        },
-        enterprise: (0, b.css)([ "flex:0 0 auto;" ])
-    }), (0, C.pick)({
-        enterprise: "3px"
-    }), (0, C.pickVariant)("$disabled", {
-        true: C.variables.contentColorDisabled,
-        false: {
-            enterprise: function e(r) {
-                var a = r.$foregroundColor;
-                return a || C.variables.contentColorDefault;
-            },
-            prisma: function e(r) {
-                var a = r.$foregroundColor, o = r.$appearance;
-                return a || (o === "default" || o === "outline" ? C.variables.contentColorDefault : C.variables.contentColorInverted);
-            }
-        }
-    }));
-    var w = g().div.withConfig({
+        componentId: "sc-1sd3tsh-1"
+    })([ "display:grid;grid-column:icon;" ]);
+    var k = f()(g()).withConfig({
+        displayName: "ChipStyles__StyledRemoveIcon",
+        componentId: "sc-1sd3tsh-2"
+    })([ "grid-column:remove;" ]);
+    var O = f().div.withConfig({
         displayName: "ChipStyles__StyledLabel",
-        componentId: "sc-1sd3tsh-4"
-    })([ "", " ", ";color:", ";" ], C.mixins.ellipsis(), (0, C.pick)({
-        enterprise: (0, b.css)([ "flex:0 1 auto;" ])
-    }), (0, C.pickVariant)("$disabled", {
-        true: C.variables.contentColorDisabled,
-        false: {
-            enterprise: function e(r) {
-                var a = r.$appearance, o = r.$foregroundColor;
-                return o || (a === "default" || a === "outline" ? C.variables.contentColorDefault : C.variables.gray30);
-            },
-            prisma: function e(r) {
-                var a = r.$appearance, o = r.$foregroundColor;
-                return o || (a === "default" || a === "outline" ? C.variables.contentColorActive : C.variables.contentColorInverted);
-            }
-        }
-    }));
-    var O = g().span.withConfig({
-        displayName: "ChipStyles__StyledRemove",
-        componentId: "sc-1sd3tsh-5"
-    })([ "", ";" ], (0, C.pick)({
-        enterprise: (0, b.css)([ "flex:0 0 auto;padding-left:", ";font-size:", ";color:", ";" ], C.variables.spacingXSmall, (0, 
-        C.pick)({
-            compact: "9px",
-            comfortable: "10.5px"
-        }), (0, C.pickVariant)("$disabled", {
-            true: C.variables.contentColorDisabled,
-            false: {
-                enterprise: function e(r) {
-                    var a = r.$foregroundColor, o = r.$appearance;
-                    return a || (o === "default" || o === "outline" ? C.variables.textGray : C.variables.gray30);
-                }
-            }
-        })),
-        prisma: (0, b.css)([ "display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:12px;font-size:9px;color:", ";" ], (function(e) {
-            var r = e.$disabled, a = e.$foregroundColor;
-            return r ? C.variables.contentColorDisabled : a || "inherit";
-        }))
-    }));
-    var _ = g()(h()).withConfig({
+        componentId: "sc-1sd3tsh-3"
+    })([ "", " grid-column:label;" ], C.mixins.ellipsis());
+    var R = f()(m()).withConfig({
         displayName: "ChipStyles__StyledClickable",
-        componentId: "sc-1sd3tsh-6"
-    })([ "", " flex:0 1 auto;line-height:16px;cursor:pointer;&:focus{", ";}&:not([disabled]):hover{", ";}", ";" ], y, (0, 
-    C.pick)({
-        enterprise: (0, b.css)([ "box-shadow:", ";color:", ";" ], C.variables.focusShadow, C.variables.contentColorLink),
-        prisma: (0, b.css)([ "color:", ";", "{background-color:", ";box-shadow:0 0 0 3px ", ";}" ], C.variables.contentColorActive, /* sc-sel */ O, C.variables.interactiveColorOverlayHover, C.variables.focusColor)
-    }), (0, C.pick)({
-        enterprise: (0, b.css)([ "background-color:", ";", "{color:", ";}" ], (0, C.pickVariant)("$appearance", {
-            default: {
-                dark: C.variables.gray30,
-                light: C.variables.gray96
-            },
-            info: C.variables.infoColorL20,
-            success: C.variables.successColorL20,
-            warning: C.variables.warningColorL20,
-            error: C.variables.errorColorL20,
-            custom: {
-                dark: C.variables.gray30,
-                light: C.variables.gray96
+        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;" ])
+    }), (function(e) {
+        var r = e.$disabled;
+        return !r && (0, p.css)([ "&:focus{box-shadow:", ";}&:hover{background-color:", ";}" ], C.variables.focusShadow, (0, 
+        C.pickVariant)("$appearance", {
+            outline: C.variables.neutral100,
+            default: C.variables.neutral300,
+            info: C.mixins.overlayColors(C.variables.severityColorInfo, C.variables.interactiveColorOverlayHover),
+            success: C.mixins.overlayColors(C.variables.severityColorNormal, C.variables.interactiveColorOverlayHover),
+            warning: C.mixins.overlayColors(C.variables.severityColorNotice, C.variables.interactiveColorOverlayHover),
+            error: C.mixins.overlayColors(C.variables.severityColorAlert, C.variables.interactiveColorOverlayHover),
+            custom: function e(r) {
+                var n = r.$backgroundColor;
+                return n && C.mixins.overlayColors(n, C.variables.interactiveColorOverlayHover);
             }
-        }), /* sc-sel */ O, (function(e) {
-            var r = e.$foregroundColor;
-            return r || C.variables.contentColorLink;
-        })),
-        prisma: (0, b.css)([ "", "{background-color:", ";color:", ";}" ], /* sc-sel */ O, C.variables.interactiveColorOverlayHover, (function(e) {
-            var r = e.$appearance, a = e.$foregroundColor;
-            return a || (r === "default" || r === "outline" ? C.variables.contentColorActive : C.variables.contentColorInverted);
-        }))
-    }), (0, C.pick)({
-        prisma: (0, b.css)([ "&:not([disabled]):active ", "{background-color:", ";}" ], /* sc-sel */ O, C.variables.interactiveColorOverlayActive)
+        }));
     }));
     // CONCATENATED MODULE: ./src/Chip/Chip.tsx
-    function R() {
-        return R = Object.assign ? Object.assign.bind() : function(e) {
+    function w() {
+        return w = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var a = arguments[r];
-                for (var o in a) {
-                    ({}).hasOwnProperty.call(a, o) && (e[o] = a[o]);
+                var n = arguments[r];
+                for (var o in n) {
+                    ({}).hasOwnProperty.call(n, o) && (e[o] = n[o]);
                 }
             }
             return e;
-        }, R.apply(null, arguments);
+        }, w.apply(null, arguments);
     }
-    function I(e, r) {
-        return A(e) || L(e, r) || q(e, r) || j();
+    function q(e, r) {
+        return E(e) || x(e, r) || j(e, r) || _();
     }
-    function j() {
+    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 q(e, r) {
+    function j(e, r) {
         if (e) {
-            if ("string" == typeof e) return E(e, r);
-            var a = {}.toString.call(e).slice(8, -1);
-            return "Object" === a && e.constructor && (a = e.constructor.name), "Map" === a || "Set" === a ? Array.from(e) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? E(e, r) : void 0;
+            if ("string" == typeof e) return I(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;
         }
     }
-    function E(e, r) {
+    function I(e, r) {
         (null == r || r > e.length) && (r = e.length);
-        for (var a = 0, o = Array(r); a < r; a++) {
-            o[a] = e[a];
+        for (var n = 0, o = Array(r); n < r; n++) {
+            o[n] = e[n];
         }
         return o;
     }
-    function L(e, r) {
-        var a = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != a) {
-            var o, n, i, t, l = [], s = !0, c = !1;
+    function x(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;
             try {
-                if (i = (a = a.call(e)).next, 0 === r) {
-                    if (Object(a) !== a) return;
+                if (t = (n = n.call(e)).next, 0 === r) {
+                    if (Object(n) !== n) return;
                     s = !1;
-                } else for (;!(s = (o = i.call(a)).done) && (l.push(o.value), l.length !== r); s = !0) {
+                } else for (;!(s = (o = t.call(n)).done) && (i.push(o.value), i.length !== r); s = !0) {
                 }
             } catch (e) {
-                c = !0, n = e;
+                c = !0, a = e;
             } finally {
                 try {
-                    if (!s && null != a["return"] && (t = a["return"](), Object(t) !== t)) return;
+                    if (!s && null != n["return"] && (l = n["return"](), Object(l) !== l)) return;
                 } finally {
-                    if (c) throw n;
+                    if (c) throw a;
                 }
             }
-            return l;
+            return i;
         }
     }
-    function A(e) {
+    function E(e) {
         if (Array.isArray(e)) return e;
     }
-    function D(e, r) {
+    function N(e, r) {
         if (null == e) return {};
-        var a, o, n = z(e, r);
+        var n, o, a = A(e, r);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                a = i[o], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (n[a] = e[a]);
+            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]);
             }
         }
-        return n;
+        return a;
     }
-    function z(e, r) {
+    function A(e, r) {
         if (null == e) return {};
-        var a = {};
+        var n = {};
         for (var o in e) {
             if ({}.hasOwnProperty.call(e, o)) {
                 if (r.includes(o)) continue;
-                a[o] = e[o];
+                n[o] = e[o];
             }
         }
-        return a;
+        return n;
     }
-    /** @public */    var H = {
-        appearance: l().oneOf([ "info", "success", "warning", "error", "outline" ]),
-        backgroundColor: l().string,
-        children: l().node.isRequired,
-        disabled: l().bool,
-        elementRef: l().oneOfType([ l().func, l().object ]),
-        foregroundColor: l().string,
-        icon: l().node,
-        onRequestRemove: l().func,
+    /** @public */    var P = {
+        appearance: i().oneOf([ "info", "success", "warning", "error", "outline" ]),
+        backgroundColor: i().string,
+        children: i().node.isRequired,
+        disabled: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        foregroundColor: i().string,
+        icon: i().node,
+        onRequestRemove: i().func,
         /** Includes this value in `onRequestRemove` callbacks. */
-        value: l().any
+        value: i().any
     };
-    function N(e) {
+    function H(e) {
         return !!e.onRequestRemove;
     }
-    function P(e) {
-        var r = e.appearance, a = e.backgroundColor, o = e.disabled, n = e.foregroundColor, i = e.icon, t = D(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
+    function T(e) {
+        var r = e.appearance, n = e.backgroundColor, o = e.disabled, a = e.foregroundColor, t = e.icon, l = N(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
  // Validate that the color being rendered into the CSS is restricted to only values that are of CSS type <color>.
-                var l = n && (0, f.isCSSColor)(n) ? n : undefined;
-        var s = a && (0, f.isCSSColor)(a) ? a : undefined;
+                var i = a && (0, d.isCSSColor)(a) ? a : undefined;
+        var s = n && (0, d.isCSSColor)(n) ? n : undefined;
         var c = {
             "data-test": "chip",
             $appearance: r || (s ? "custom" : "default"),
             $backgroundColor: s,
-            $foregroundColor: l,
+            $foregroundColor: i,
             disabled: o,
-            icon: i
+            icon: t
         };
-        return [ c, t ];
+        return [ c, l ];
     }
-    function V(e) {
-        var r = P(e), n = I(r, 2), t = n[0], l = n[1];
-        var s = t.$appearance, p = t.$foregroundColor, f = t.disabled, b = f === void 0 ? false : f, g = t.icon, m = D(t, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var h = l.children, C = l.elementRef, y = l.onRequestRemove, $ = l.value, k = D(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
-        var j = typeof h === "string";
-        var q = j ? (0, v.sprintf)((0, d._)("Remove %(children)s"), {
-            children: h
-        }) : (0, d._)("Remove");
-        var E = (0, a.useCallback)((function(e) {
-            y(e, {
-                value: $
+    function M(e) {
+        var r = T(e), a = q(r, 2), l = a[0], i = a[1];
+        var s = l.$appearance, d = l.$foregroundColor, p = l.disabled, f = p === void 0 ? false : p, 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, v.sprintf)((0, u._)("Remove %(children)s"), {
+            children: y
+        }) : (0, u._)("Remove");
+        var I = (0, n.useCallback)((function(e) {
+            C(e, {
+                value: h
             });
-        }), [ y, $ ]);
+        }), [ C, h ]);
         
-        return o().createElement(_, R({
+        return o().createElement(R, w({
             $appearance: s,
-            $disabled: b,
-            $foregroundColor: p,
-            "data-test-value": $,
-            disabled: b,
-            elementRef: C,
-            onClick: E
-        }, m, i()(k, Object.keys(H))),  o().createElement(x, {
-            $icon: !!g,
-            $removable: true
-        },  o().createElement(c(), null, q), g &&  o().createElement(S, {
-            $appearance: s,
-            $disabled: b,
-            $foregroundColor: p
-        }, g),  o().createElement(w, {
+            $icon: !!b,
+            $disabled: f,
+            $foregroundColor: d,
+            "data-test-value": h,
+            disabled: f ? "disabled" : undefined,
+            elementRef: g,
+            onClick: I
+        }, m, t()(S, Object.keys(P))),  o().createElement(c(), null, j), b &&  o().createElement($, null, b),  o().createElement(O, {
             "data-test": "label",
-            "aria-hidden": j ? true : undefined,
-            $appearance: s,
-            $disabled: b,
-            $foregroundColor: p
-        }, h),  o().createElement(O, {
-            $appearance: s,
-            $disabled: b,
-            $foregroundColor: p
-        },  o().createElement(u(), {
+            "aria-hidden": _ ? true : undefined
+        }, y),  o().createElement(k, {
             "data-test": "cross"
-        }))));
+        }));
     }
-    function B(e) {
-        var r = P(e), a = I(r, 2), n = a[0], t = a[1];
-        var l = n.$appearance, s = n.$foregroundColor, c = n.disabled, p = n.icon, u = D(n, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var d = t.children, f = t.elementRef, v = D(t, [ "children", "elementRef" ]);
+    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" ]);
         
-        return o().createElement(k, R({
-            $appearance: l,
-            $disabled: c !== null && c !== void 0 ? c : false,
-            ref: f
-        }, u, i()(v, Object.keys(H))),  o().createElement(x, {
-            $icon: !!p,
-            $removable: false
-        }, p &&  o().createElement(S, {
-            $appearance: l,
+        return o().createElement(S, w({
+            $appearance: i,
+            $icon: !!u,
             $disabled: c !== null && c !== void 0 ? c : false,
-            $foregroundColor: s
-        }, p),  o().createElement(w, {
-            "data-test": "label",
-            $appearance: l,
-            $disabled: c !== null && c !== void 0 ? c : false,
-            $foregroundColor: s
-        }, d)));
+            $foregroundColor: s,
+            "data-test-disabled": c ? "disabled" : undefined,
+            ref: p
+        }, d, t()(f, Object.keys(P))), u &&  o().createElement($, null, u),  o().createElement(O, {
+            "data-test": "label"
+        }, v));
     }
-    function M(e) {
+    function X(e) {
         // @docs-props-type ChipPropsBase
-        return N(e) ?  o().createElement(V, e) :  o().createElement(B, e);
+        return H(e) ?  o().createElement(M, e) :  o().createElement(V, e);
     }
-    M.propTypes = H;
-    /* harmony default export */    const T = M;
+    X.propTypes = P;
+    /* harmony default export */    const D = X;
     // ChipInteractiveProps and ChipNonInteractiveProps are exported for Storybook
         // CONCATENATED MODULE: ./src/Chip/index.ts
     module.exports = r;