@splunk/react-ui 4.42.0 → 5.0.0-beta.2

package/Switch.js

@@ -61,332 +61,158 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ ae
+        default: () => /* reexport */ G
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
     var t =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
+    const l = require("prop-types");
+    var i =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
-    const n = require("@splunk/react-ui/AnimationToggle");
-    var l =  e.n(n);
+    const o = require("@splunk/react-ui/AnimationToggle");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const s = require("@splunk/react-ui/ScreenReaderContent");
-    var c =  e.n(s);
+    const n = require("@splunk/react-ui/ScreenReaderContent");
+    var c =  e.n(n);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const d = require("@splunk/ui-utils/id");
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Check"
-    const p = require("@splunk/react-icons/enterprise/Check");
-    var u =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const b = require("@splunk/themes");
-    // CONCATENATED MODULE: ./src/Switch/CheckIcon.tsx
-    function v() {
-        var e = (0, b.useSplunkTheme)(), r = e.family;
-        if (r === "enterprise") {
-            
-            return t().createElement(u(), {
-                inline: false,
-                size: "12px",
-                screenReaderText: null,
-                hideDefaultTooltip: true,
-                style: {
-                    marginTop: "1px"
-                }
-            });
-        }
-        
-        return t().createElement("svg", {
-            width: "12",
-            height: "12",
-            viewBox: "-1 -2 11 10",
-            style: {
-                display: "block"
-            },
-            xmlns: "http://www.w3.org/2000/svg"
-        },  t().createElement("path", {
-            d: "M8.70711 0.292893C9.09763 0.683417 9.09763 1.31658 8.70711 1.70711L4.32132 6.0929C3.73559 6.67862 2.78596 6.67869 2.20015 6.09305L0.292997 4.18646C-0.0975845 3.79599 -0.0976776 3.16282 0.292789 2.77224C0.683256 2.38166 1.31642 2.38157 1.707 2.77203L3.26061 4.32518L7.29289 0.292893C7.68342 -0.0976311 8.31658 -0.0976311 8.70711 0.292893Z",
-            fill: "currentColor"
-        }));
-    }
+    const s = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "styled-components"
-    const f = require("styled-components");
-    var g =  e.n(f);
+    const d = require("styled-components");
+    var u =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const h = require("@splunk/react-ui/Box");
-    var m =  e.n(h);
+    const v = require("@splunk/react-ui/Box");
+    var b =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const y = require("@splunk/react-ui/Clickable");
+    const f = require("@splunk/react-ui/Clickable");
+    var p =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const g = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxCompleted"
+    const h = require("@splunk/react-icons/CheckBoxCompleted");
+    var m =  e.n(h);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CheckBoxIndeterminate"
+    const y = require("@splunk/react-icons/CheckBoxIndeterminate");
     var k =  e.n(y);
     // CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
-    var x = "18px";
-    var w = "20px";
-    var C = g()(m()).withConfig({
+    var C = "20px";
+    var S = "12px";
+    var w = "2px";
+    var x = u()(b()).withConfig({
         displayName: "SwitchStyles__StyledBox",
         componentId: "sc-844ieu-0"
-    })([ "display:inline;position:relative;color:", ";flex-shrink:0;", ";[data-inline] + &{margin-left:", ";}" ], (0, 
-    b.pickVariant)("$switchState", {
-        error: {
-            enterprise: b.variables.errorColor,
-            prisma: b.variables.accentColorNegative
-        },
-        disabled: {
-            enterprise: b.variables.textDisabledColor,
-            prisma: b.variables.contentColorDisabled
-        }
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "padding:calc((", " - ", ") / 2) 0;" ], b.variables.inputHeight, x),
-        prisma: {
-            compact: (0, f.css)([ "padding:6px 0;" ]),
-            comfortable: (0, f.css)([ "padding:10px 0;" ])
-        }
-    }), b.variables.spacingSmall);
-    var S = (0, f.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";padding:2px;border-radius:2px;cursor:pointer;flex:0 0 auto;border-color:", ";border-style:solid;border-width:", ";color:", ";", " &:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{cursor:not-allowed;border-color:", ";", "}" ], b.mixins.reset("inline"), x, x, x, (0, 
-    b.pick)({
-        enterprise: (0, b.pick)({
-            light: b.variables.gray45,
-            dark: b.variables.gray80
-        }),
-        prisma: b.variables.contentColorMuted
-    }), (0, b.pick)({
-        enterprise: "1px",
-        prisma: "2px"
-    }), (0, b.pick)({
-        enterprise: (0, b.pick)({
-            light: b.variables.gray45,
-            dark: b.variables.gray80
-        }),
-        prisma: b.variables.white
-    }), (0, b.pick)({
-        prisma: (0, f.css)([ "top:1px;padding:1px;border-radius:3px;", "" ], (function(e) {
-            var r = e.$interactive;
-            return r && (0, f.css)([ "&:not([disabled]):not(:focus):hover{box-shadow:0 0 0 2px ", ",0 0 0 5px ", ";}" ], b.variables.backgroundColorPage, b.variables.interactiveColorOverlayHover);
-        }))
-    }), b.variables.focusShadow, (function(e) {
+    })([ "display:inline;position:relative;flex-shrink:0;gap:", ";min-height:", ";align-items:center;color:", ";", "" ], g.variables.spacingSmall, g.variables.inputHeight, g.variables.contentColorActive, (function(e) {
+        var r = e.$disabled;
+        return r && (0, d.css)([ "color:", ";" ], g.variables.contentColorDisabled);
+    }));
+    var $ = (0, d.css)([ "", " position:relative;width:", ";height:", ";line-height:", ";border-radius:", ";border:2px solid ", ";background-color:", ";cursor:pointer;flex:0 0 auto;&:not([disabled]){&:focus{box-shadow:", ";}color:", ";", "}&[disabled]{cursor:not-allowed;border-color:", ";background-color:", ";", ";}" ], g.mixins.reset("inline"), C, C, C, g.variables.borderRadius, g.variables.interactiveColorBorder, g.variables.interactiveColorBackground, g.variables.focusShadow, (0, 
+    g.pick)({
+        light: g.variables.white,
+        dark: g.variables.black
+    }), (function(e) {
         var r = e.$error, a = e.$selected;
         if (a && !r) {
-            return (0, b.pick)({
-                prisma: (0, f.css)([ "background-color:", ";border-color:", ";" ], b.variables.interactiveColorPrimary, b.variables.interactiveColorPrimary)
-            });
+            return (0, d.css)([ "background-color:", ";border:none;" ], g.variables.interactiveColorAccent);
         }
         if (!a && r) {
-            return (0, f.css)([ "border-color:", ";" ], (0, b.pick)({
-                enterprise: {
-                    light: b.variables.errorColorL30,
-                    dark: b.variables.accentColorNegative
-                },
-                prisma: b.variables.accentColorNegative
-            }));
+            return (0, d.css)([ "border-color:", ";&:hover{border-color:", ";background-color:", ";}" ], g.variables.interactiveColorAccentError, g.mixins.overlayColors(g.variables.interactiveColorAccentError, g.variables.interactiveColorBorderHover), g.mixins.overlayColors(g.variables.interactiveColorBackground, g.variables.interactiveColorOverlayHover));
         }
         if (a && r) {
-            return (0, f.css)([ "border-color:", ";", "" ], b.variables.accentColorNegative, (0, 
-            b.pick)({
-                enterprise: (0, f.css)([ "color:", ";" ], b.variables.accentColorNegative),
-                prisma: (0, f.css)([ "background-color:", ";" ], b.variables.accentColorNegative)
-            }));
+            return (0, d.css)([ "background-color:", ";border:none;" ], g.variables.interactiveColorAccentError);
         }
-        return (0, b.pick)({
-            prisma: (0, f.css)([ "&:hover{border-color:", ";}" ], b.variables.contentColorDefault)
-        });
-    }), (0, b.pick)({
-        enterprise: {
-            light: b.variables.borderColor,
-            dark: b.variables.gray45
-        },
-        prisma: b.variables.contentColorDisabled
-    }), (function(e) {
+        return (0, d.css)([ "&:hover{border-color:", ";background-color:", ";}" ], g.variables.interactiveColorBorderHover, g.mixins.overlayColors(g.variables.interactiveColorBackground, g.variables.interactiveColorOverlayHover));
+    }), g.variables.interactiveColorBorderDisabled, g.variables.interactiveColorBackgroundDisabled, (function(e) {
         var r = e.$selected;
-        return r && (0, b.pick)({
-            prisma: (0, f.css)([ "border-color:transparent;background-color:", ";" ], b.variables.interactiveColorBackgroundDisabled)
-        });
+        return r && (0, d.css)([ "border:none;background-color:", ";" ], g.variables.neutral100);
     }));
-    var O = g()(k()).withConfig({
+    var B = u()(p()).withConfig({
         displayName: "SwitchStyles__StyledCheckboxClickable",
         componentId: "sc-844ieu-1"
-    })([ "", "" ], S);
-    var _ = g().span.withConfig({
+    })([ "", "" ], $);
+    var O = u().span.withConfig({
         displayName: "SwitchStyles__StyledCheckboxSpan",
         componentId: "sc-844ieu-2"
-    })([ "", "" ], S);
-    var P = g().div.withConfig({
-        displayName: "SwitchStyles__StyledSome",
+    })([ "", "" ], $);
+    var _ = (0, d.css)([ "display:block;height:", ";width:", ";" ], C, C);
+    var E = u()(m()).withConfig({
+        displayName: "SwitchStyles__StyledCheck",
         componentId: "sc-844ieu-3"
-    })([ "display:block;margin:", ";", " background:currentColor;border-radius:1px;" ], (0, 
-    b.pick)({
-        enterprise: "2px",
-        prisma: "5px 2px"
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "height:calc(", " - 10px);width:calc(", " - 10px);" ], x, x),
-        prisma: (0, f.css)([ "height:2px;width:8px;" ])
-    }));
-    var $ = g().div.withConfig({
-        displayName: "SwitchStyles__StyledIndicator",
+    })([ "", "" ], _);
+    var q = u()(k()).withConfig({
+        displayName: "SwitchStyles__StyledSome",
         componentId: "sc-844ieu-4"
-    })([ "background-color:", ";border-color:", ";box-sizing:border-box;border-radius:50%;border-width:1px;position:absolute;left:-1px;top:-1px;", ";", " ", " ", "" ], (0, 
-    b.pick)({
-        enterprise: {
-            light: b.variables.gray98,
-            dark: b.variables.gray80
-        },
-        prisma: b.variables.white
-    }), (0, b.pick)({
-        enterprise: {
-            light: b.variables.gray60,
-            dark: b.variables.borderColor
-        },
-        prisma: b.variables.transparent
-    }), (function(e) {
-        var r = e.$delay;
-        return r && (0, f.css)([ "transition:left ", ";" ], r);
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "width:", ";height:", ";border-style:solid;" ], x, x),
-        prisma: (0, f.css)([ "height:16px;width:16px;margin:2px;border-style:none;box-shadow:", ";" ], b.variables.embossShadow)
-    }), (function(e) {
-        var r = e.$disabled;
-        return r && (0, f.css)([ "border-color:", ";border-style:solid;background-color:", ";" ], (0, 
-        b.pick)({
-            enterprise: {
-                light: b.mixins.colorWithAlpha(b.variables.borderLightColor, .8),
-                dark: b.variables.gray22
-            },
-            prisma: b.variables.transparent
-        }), (0, b.pick)({
-            enterprise: {
-                dark: b.variables.gray45
-            },
-            prisma: b.mixins.colorWithAlpha(b.variables.white, .3)
-        }));
-    }), (function(e) {
-        var r = e.$selected;
-        return r && (0, f.css)([ "", ";" ], (0, b.pick)({
-            enterprise: (0, f.css)([ "left:calc(100% - ", " + 1px);" ], x),
-            prisma: (0, f.css)([ "left:calc(100% - ", " + 1px);" ], w)
-        }));
-    }));
-    var j = g().div.withConfig({
-        displayName: "SwitchStyles__StyledToggleOutline",
+    })([ "", "" ], _);
+    var I = u().div.withConfig({
+        displayName: "SwitchStyles__StyledToggleIndicator",
         componentId: "sc-844ieu-5"
-    })([ "position:absolute;border:1px solid transparent;", ";", ";top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;", " ", "" ], (function(e) {
+    })([ "background-color:", ";border-radius:50%;box-sizing:border-box;width:", ";height:", ";position:absolute;left:", ";top:", ";", ";", " ", " ", ";" ], (0, 
+    g.pick)({
+        light: g.variables.black,
+        dark: g.variables.white
+    }), S, S, w, w, (function(e) {
         var r = e.$delay;
-        return r && (0, f.css)([ "transition:border-color ", ";" ], r);
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "border-radius:calc(", " * 0.5);" ], x),
-        prisma: "border-radius: 15px"
-    }), (0, b.pick)({
-        prisma: (0, f.css)([ "margin:-6px;" ])
+        return r && (0, d.css)([ "transition:left ", ";" ], r);
+    }), (0, g.pick)({
+        prisma: (0, d.css)([ "box-shadow:", ";" ], g.variables.embossShadow)
     }), (function(e) {
-        var r = e.$error;
-        return r && (0, f.css)([ "border-color:", ";" ], (0, b.pick)({
-            enterprise: b.variables.errorColor,
-            prisma: b.variables.transparent
-        }));
+        var r = e.$selected, a = e.$disabled;
+        return (0, d.css)([ "", " ", "" ], r && (0, d.css)([ "left:calc(100% - (", " + ", " * 2));" ], S, w), !a && r && (0, 
+        d.css)([ "left:calc(100% - (", " + ", "));background-color:", ";" ], S, w, (0, g.pick)({
+            light: g.variables.white,
+            dark: g.variables.black
+        })));
+    }), (function(e) {
+        var r = e.$disabled;
+        return r && (0, d.css)([ "background-color:", ";" ], g.variables.neutral400);
     }));
-    var E = (0, f.css)([ "position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}}&[disabled]{cursor:not-allowed;border:1px solid ", ";background-color:", ";", " ", "}", ";", "" ], (0, 
-    b.pick)({
-        enterprise: (0, b.pick)({
-            light: (0, f.css)([ "width:calc(", " * 2);background-color:", ";height:", ";" ], x, b.variables.gray98, x),
-            dark: (0, f.css)([ "width:calc(", " * 2);background-color:", ";height:", ";" ], x, b.variables.gray45, x)
-        }),
-        prisma: (0, f.css)([ "width:32px;background-color:", ";height:", ";top:1px;" ], b.variables.contentColorMuted, w)
-    }), x, (function(e) {
+    var j = (0, d.css)([ "position:relative;width:calc(", " * 2);height:", ";background-color:", ";transition:background-color ", ";flex:0 0 auto;border-radius:calc(", " / 2);border:2px solid ", ";&:not([disabled]){&:focus{box-shadow:", ";}", "}&[disabled]{cursor:not-allowed;border:2px solid ", ";background-color:", ";", "}" ], C, C, g.variables.interactiveColorBackground, (function(e) {
         return e.$delay;
-    }), (0, b.pick)({
-        enterprise: {
-            light: b.variables.gray60,
-            dark: b.variables.borderColor
-        },
-        prisma: b.variables.transparent
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "box-shadow:inset 0 2px 0 rgba(0,0,0,0.1);" ])
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "box-shadow:", ",inset 0 2px 0 rgba(0,0,0,0.1);" ], b.variables.focusShadow),
-        prisma: (0, f.css)([ "box-shadow:", ";" ], b.variables.focusShadow)
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "> ", "{border-color:", ";}" ], /* sc-sel */ j, b.mixins.colorWithAlpha(b.variables.focusColor, .8))
-    }), /* sc-sel */ $, (0, b.pick)({
-        enterprise: (0, b.pick)({
-            light: b.variables.gray96,
-            dark: "#b1bcc7"
-        }),
-        prisma: b.variables.white
-    }), /* sc-sel */ j, (0, b.pick)({
-        prisma: b.variables.interactiveColorOverlayHover
-    }), (0, b.pick)({
-        enterprise: {
-            light: b.variables.borderLightColor,
-            dark: b.variables.borderColor
-        },
-        prisma: b.variables.transparent
-    }), (0, b.pick)({
-        enterprise: {
-            light: b.variables.gray96,
-            dark: b.variables.gray30
-        },
-        prisma: b.variables.interactiveColorBackgroundDisabled
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "box-shadow:inset 0 2px 0 rgba(0,0,0,0.06);" ])
-    }), (function(e) {
+    }), C, g.variables.interactiveColorBorder, g.variables.focusShadow, (function(e) {
         var r = e.$selected;
-        return r && (0, f.css)([ "border-color:transparent;background-color:", ";" ], (0, 
-        b.pick)({
-            enterprise: (0, b.pick)({
-                light: b.variables.accentColorL40,
-                dark: b.variables.accentColorD20
-            }),
-            prisma: b.mixins.colorWithAlpha(b.variables.interactiveColorPrimary, .7)
-        }));
-    }), (function(e) {
+        if (!r) {
+            return (0, d.css)([ "&:hover{border-color:", ";background-color:", ";}" ], g.variables.interactiveColorBorderHover, g.mixins.overlayColors(g.variables.interactiveColorBackground, g.variables.interactiveColorOverlayHover));
+        }
+        return (0, d.css)([ "border-color:transparent;background-color:", ";" ], g.variables.interactiveColorAccent);
+    }), g.variables.interactiveColorBorderDisabled, g.variables.interactiveColorBackgroundDisabled, (function(e) {
         var r = e.$selected;
-        return r && (0, f.css)([ "border-color:", ";background-color:", ";", "" ], (0, b.pick)({
-            enterprise: b.variables.accentColorL10,
-            prisma: b.variables.transparent
-        }), (0, b.pick)({
-            enterprise: b.variables.accentColorL10,
-            prisma: b.variables.interactiveColorPrimary
-        }), (0, b.pick)({
-            prisma: (0, f.css)([ "box-shadow:", ";" ], b.variables.embossShadow)
-        }));
-    }), (function(e) {
-        var r = e.$error;
-        return r && (0, f.css)([ "border-color:", ";", ";" ], (0, b.pick)({
-            enterprise: b.variables.errorColor,
-            prisma: b.variables.transparent
-        }), (0, b.pick)({
-            prisma: (0, f.css)([ "background-color:", ";" ], b.variables.accentColorNegative)
-        }));
+        return r && (0, d.css)([ "background-color:", ";" ], g.variables.neutral100);
     }));
-    var L = g()(k()).withConfig({
+    var L = u()(p()).withConfig({
         displayName: "SwitchStyles__StyledToggleClickable",
         componentId: "sc-844ieu-6"
-    })([ "", "" ], E);
-    var I = g().span.withConfig({
+    })([ "", "" ], j);
+    var R = u().span.withConfig({
         displayName: "SwitchStyles__StyledToggleSpan",
         componentId: "sc-844ieu-7"
-    })([ "", "" ], E);
-    var N = g().label.withConfig({
+    })([ "", "" ], j);
+    var T = u().label.withConfig({
         displayName: "SwitchStyles__StyledLabel",
         componentId: "sc-844ieu-8"
-    })([ "", " flex:1 1 auto;padding-left:", ";color:inherit;", ";" ], b.mixins.reset("inline-block"), (0, 
-    b.pick)({
-        enterprise: (0, f.css)([ "", ";" ], b.variables.spacingXSmall),
-        prisma: "8px"
-    }), (function(e) {
+    })([ "", " flex:1 1 auto;color:inherit;line-height:", ";", ";" ], g.mixins.reset("inline-block"), g.variables.lineHeight, (function(e) {
         var r = e.$disabled;
-        return !r && (0, f.css)([ "cursor:pointer;" ]);
+        return !r && (0, d.css)([ "cursor:pointer;" ]);
     }));
-    // CONCATENATED MODULE: ./src/Switch/Switch.tsx
-    function T(e) {
-        "@babel/helpers - typeof";
-        return T = "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;
-        }, T(e);
+    // 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 D(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
+                        }
+        }
     }
-    function q() {
-        return q = Object.assign ? Object.assign.bind() : function(e) {
+    // CONCATENATED MODULE: ./src/Switch/Switch.tsx
+    function N() {
+        return N = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
                 for (var t in a) {
@@ -394,20 +220,20 @@
                 }
             }
             return e;
-        }, q.apply(null, arguments);
+        }, N.apply(null, arguments);
     }
-    function D(e, r) {
+    function A(e, r) {
         if (null == e) return {};
-        var a, t, i = B(e, r);
+        var a, t, l = H(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < o.length; t++) {
-                a = o[t], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (i[a] = e[a]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < i.length; t++) {
+                a = i[t], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (l[a] = e[a]);
             }
         }
-        return i;
+        return l;
     }
-    function B(e, r) {
+    function H(e, r) {
         if (null == e) return {};
         var a = {};
         for (var t in e) {
@@ -418,279 +244,147 @@
         }
         return a;
     }
-    function R(e, r) {
-        if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
-    }
-    function M(e, r) {
-        for (var a = 0; a < r.length; a++) {
-            var t = r[a];
-            t.enumerable = t.enumerable || !1, t.configurable = !0, "value" in t && (t.writable = !0), 
-            Object.defineProperty(e, G(t.key), t);
-        }
-    }
-    function A(e, r, a) {
-        return r && M(e.prototype, r), a && M(e, a), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function W(e, r) {
-        if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(r && r.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), r && z(e, r);
-    }
-    function z(e, r) {
-        return z = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
-            return e.__proto__ = r, e;
-        }, z(e, r);
-    }
-    function F(e) {
-        var r = V();
-        return function() {
-            var a, t = X(e);
-            if (r) {
-                var i = X(this).constructor;
-                a = Reflect.construct(t, arguments, i);
-            } else a = t.apply(this, arguments);
-            return H(this, a);
-        };
-    }
-    function H(e, r) {
-        if (r && ("object" == T(r) || "function" == typeof r)) return r;
-        if (void 0 !== r) throw new TypeError("Derived constructors may only return object or undefined");
-        return U(e);
-    }
-    function U(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function V() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (V = function r() {
-            return !!e;
-        })();
-    }
-    function X(e) {
-        return X = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, X(e);
-    }
-    function Z(e, r, a) {
-        return (r = G(r)) in e ? Object.defineProperty(e, r, {
-            value: a,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[r] = a, e;
-    }
-    function G(e) {
-        var r = J(e, "string");
-        return "symbol" == T(r) ? r : r + "";
-    }
-    function J(e, r) {
-        if ("object" != T(e) || !e) return e;
-        var a = e[Symbol.toPrimitive];
-        if (void 0 !== a) {
-            var t = a.call(e, r || "default");
-            if ("object" != T(t)) return t;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
-        }
-        return ("string" === r ? String : Number)(e);
-    }
     /** @public */
-    /** @public */    var K = {
-        appearance: o().oneOf([ "checkbox", "toggle" ]),
-        children: o().node,
-        disabled: o().bool,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        error: o().bool,
-        id: o().string,
-        inline: o().bool,
+    /** @public */    var P = {
+        appearance: i().oneOf([ "checkbox", "toggle" ]),
+        children: i().node,
+        disabled: i().bool,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        error: i().bool,
+        id: i().string,
+        inline: i().bool,
         /** @private */
-        interactive: o().bool,
-        labelledBy: o().string,
-        onClick: o().func,
+        interactive: i().bool,
+        labelledBy: i().string,
+        onClick: i().func,
         /** @private. */
-        required: o().bool,
-        selected: o().oneOf([ true, false, "some" ]),
-        selectedLabel: o().string,
-        someSelectedLabel: o().string,
-        unselectedLabel: o().string,
-        value: o().any
-    };
-    /* Disabling rule caused by the `ref?: React.Ref<Switch>` added for styled-components 
-  Will be irrelevant when refactored to functional in react-ui@5 */
-    /* eslint-disable react/default-props-match-prop-types */    var Q = {
-        appearance: "checkbox",
-        disabled: false,
-        error: false,
-        inline: false,
-        interactive: true,
-        selected: false
+        required: i().bool,
+        selected: i().oneOf([ true, false, "some" ]),
+        selectedLabel: i().string,
+        toggleRef: i().oneOfType([ i().func, i().object ]),
+        someSelectedLabel: i().string,
+        unselectedLabel: i().string,
+        value: i().any
     };
-    /* eslint-enable react/default-props-match-prop-types */
-    // unclear why the manual ref is needed here (only for styled-components)
-        var Y = {
-        checkbox: O,
-        toggle: L
+    var M = function e(r) {
+        var a = r.disabled, l = r.interactive, i = r.selected, n = A(r, [ "disabled", "interactive", "selected" ]);
+        var c = a === true ? "disabled" : undefined;
+        var s = (0, o.useAnimationToggle)();
+        var d = s === "on" ? "200ms" : undefined;
+        var u =  t().createElement(I, {
+            $delay: d,
+            $disabled: !!c,
+            $selected: i
+        });
+        return l ?  t().createElement(L, N({
+            role: "switch",
+            $delay: d,
+            disabled: c,
+            $selected: i || false
+        }, n), u) :  t().createElement(R, N({
+            $delay: d,
+            disabled: c,
+            $selected: i || false
+        }, n), u);
     };
-    var ee = {
-        checkbox: _,
-        toggle: I
+    var F = function e(r) {
+        var a = r.appearance, l = r.disabled, i = r.error, o = r.interactive, n = r.selected, c = A(r, [ "appearance", "disabled", "error", "interactive", "selected" ]);
+        /* Setting viewbox to rescale the icons to appear larger. Cannot directly adjust svg
+   * width and height without the svg being larger than the checkbox and box-model.
+   */        var s = "4 4 16 16";
+        var d =  t().createElement(t().Fragment, null, n === true &&  t().createElement(E, {
+            viewBox: s
+        }), n === "some" &&  t().createElement(q, {
+            viewBox: s
+        }));
+        var u = l === true ? "disabled" : undefined;
+        return o ?  t().createElement(B, N({
+            "data-clickable": true,
+            role: a,
+            disabled: u,
+            $error: i || false,
+            $selected: n === "some" || n || false,
+            $interactive: o
+        }, c), d) :  t().createElement(O, N({
+            disabled: u,
+            $error: i,
+            $selected: n === "some" || n || false,
+            $interactive: o
+        }, c), d);
     };
     /**
  * `Switch` is a basic form control with an on/off state.
- */    var re =  function(e) {
-        W(a, e);
-        var r = F(a);
-        A(a, null, [ {
-            key: "validateProps",
-            // @docs-props-type SwitchPropsBase
-            value: function e(r) {
-                var a = r.selected, t = r.appearance;
-                if (false) {}
-            }
-        } ]);
-        function a(e) {
-            var t;
-            R(this, a);
-            t = r.call(this, e);
-            Z(U(t), "clickableId", void 0);
-            Z(U(t), "labelId", void 0);
-            Z(U(t), "toggle", null);
-            Z(U(t), "componentDidUpdate", a.validateProps);
-            Z(U(t), "handleContainerClick", (function(e) {
-                var r, a;
-                var i = t.props, o = i.value, n = i.selected;
-                (r = (a = t.props).onClick) === null || r === void 0 ? void 0 : r.call(a, e, {
-                    value: o,
-                    // @ts-expect-error - safe due to individual prop interfaces
-                    selected: n
-                });
-            }));
-            t.labelId = (0, d.createDOMID)("label");
-            t.clickableId = (0, d.createDOMID)("clickable");
-            a.validateProps(e);
-            return t;
-        }
-        A(a, [ {
-            key: "focus",
-            /**
-     * Place focus on the toggle.
-     */
-            // eslint-disable-next-line react/no-unused-class-component-methods
-            value: function e() {
-                var r;
-                (r = this.toggle) === null || r === void 0 ? void 0 : r.focus();
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                var r = this;
-                var a = this.props, i = a.appearance, o = a.children, n = a.disabled, s = a.elementRef, d = a.error, p = a.id, u = a.inline, b = a.interactive, f = a.labelledBy, g = a.onClick, h = a.required, m = a.selected, y = a.selectedLabel, k = a.someSelectedLabel, x = a.unselectedLabel, w = a.value, S = D(a, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "interactive", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "unselectedLabel", "value" ]);
-                var O = f;
- // consumer defined external label
-                                var _ = p;
- // consumer defined id
-                // if has internal label defined with children....
-                                if (o) {
-                    O = this.labelId;
- // must use generated labelId
-                                        _ = p || this.clickableId;
- // must have an id
-                                }
-                var E = m === "some" ? "mixed" : m;
-                var L = {
-                    true: y,
-                    false: x,
-                    some: k
-                };
-                var I = {
-                    disabled: n,
-                    $interactive: b,
-                    $error: d,
-                    $selected: m === "some" || m,
-                    "aria-labelledby": b ? O : undefined,
-                    "aria-checked": b ? E : undefined,
-                    "aria-invalid": d ? true : undefined,
-                    "aria-required": h,
-                    id: _,
-                    ref: function e(a) {
-                        r.toggle = a;
-                    },
-                    onClick: n || !b ? undefined : this.handleContainerClick,
-                    "data-test": "button",
-                    "data-selected": m
-                };
-                var T = Y[i];
-                var B = ee[i];
-                // eslint-disable-next-line react/no-unstable-nested-components
-                                var R = function e(r) {
-                    return function() {
-                        var e =  t().createElement(t().Fragment, null,  t().createElement($, {
-                            $delay: r,
-                            $disabled: n,
-                            $error: !n && d,
-                            $selected: m
-                        }),  t().createElement(j, {
-                            $delay: r,
-                            $error: !n && d
-                        }));
-                        return b ?  t().createElement(T, q({
-                            role: "switch"
-                        }, I, {
-                            $delay: r
-                        }), e) :  t().createElement(B, q({}, I, {
-                            $delay: r
-                        }), e);
-                    };
-                };
-                var M = function e() {
-                    var r =  t().createElement(t().Fragment, null, m === true && i === "checkbox" &&  t().createElement(v, null), m === "some" && i === "checkbox" &&  t().createElement(P, null));
-                    return b ?  t().createElement(T, q({
-                        "data-clickable": true,
-                        role: i
-                    }, I), r) :  t().createElement(B, I, r);
-                };
-                var A = n && "disabled" || d && "error" || null;
-                var W = !!y || !!k || !!x;
-                
-                return t().createElement(C, q({
-                    flex: true,
-                    inline: u,
-                    "data-test": "switch",
-                    "data-test-selected": m,
-                    "data-test-value": w,
-                    "data-test-error": d ? true : undefined,
-                    "data-error": d ? true : undefined,
-                    "data-disabled": n ? true : undefined,
-                    elementRef: s,
-                    $switchState: A
-                }, S), i === "toggle" &&  t().createElement(l(), {
-                    on: R("200ms"),
-                    off: R()
-                }), i !== "toggle" && M(), b && W &&  t().createElement(c(), null, L["".concat(m)]), o &&  t().createElement(N, {
-                    $disabled: n,
-                    "data-test": "label",
-                    id: O,
-                    htmlFor: _,
-                    "data-disabled": n || null
-                }, o));
-            }
-        } ]);
-        return a;
-    }(a.Component);
-    Z(re, "propTypes", K);
-    Z(re, "defaultProps", Q);
-    /* harmony default export */    const ae = re;
+ */    function z(e) {
+        var r = e.appearance, l = r === void 0 ? "checkbox" : r, i = e.children, o = e.disabled, n = e.elementRef, d = e.error, u = e.id, v = e.inline, b = e.interactive, f = b === void 0 ? true : b, p = e.labelledBy, g = e.onClick, h = e.required, m = e.selected, y = e.selectedLabel, k = e.someSelectedLabel, C = e.toggleRef, S = e.unselectedLabel, w = e.value, $ = A(e, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "interactive", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "toggleRef", "unselectedLabel", "value" ]);
+        // @docs-props-type SwitchPropsBase
+        /* 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 B = i && u == null ? (0, s.createDOMID)("clickable") : u;
+        var O = i ? (0, s.createDOMID)("label") : p;
+        (0, a.useEffect)((function() {
+            if (false) {}
+            if (false) {}
+        }), [ m, l, d ]);
+        var _ = (0, a.useCallback)((function(e) {
+            g === null || g === void 0 ? void 0 : g(e, {
+                value: w,
+                // @ts-expect-error - safe due to individual prop interfaces
+                selected: m
+            });
+        }), [ g, w, m ]);
+        var E = (0, a.useCallback)((function(e) {
+            D(C, e);
+        }), [ C ]);
+        var q = m === "some" ? "mixed" : m;
+        var I = {
+            true: y,
+            false: S,
+            some: k
+        };
+        var j = {
+            id: B,
+            onClick: o || !f ? undefined : _,
+            elementRef: E,
+            "aria-labelledby": f ? O : undefined,
+            "aria-checked": f ? q : undefined,
+            "aria-invalid": d ? true : undefined,
+            "aria-required": h,
+            "data-test": "toggle",
+            "data-selected": m
+        };
+        var L = !!y || !!k || !!S;
+        
+        return t().createElement(x, N({
+            flex: true,
+            inline: v,
+            "data-test": "switch",
+            "data-test-selected": m,
+            "data-test-value": w,
+            "data-test-error": d ? true : undefined,
+            "data-error": d ? true : undefined,
+            "data-disabled": o ? true : undefined,
+            elementRef: n,
+            $disabled: o || false
+        }, $), l === "toggle" ?  t().createElement(M, N({
+            disabled: o || false,
+            interactive: f,
+            selected: !!m
+        }, j)) :  t().createElement(F, N({
+            appearance: "checkbox",
+            error: d || false,
+            disabled: o || false,
+            interactive: f,
+            selected: m
+        }, j)), f && L &&  t().createElement(c(), null, I["".concat(m)]), i &&  t().createElement(T, {
+            $disabled: o || false,
+            "data-test": "label",
+            id: O,
+            htmlFor: B,
+            "data-disabled": o || null
+        }, i));
+    }
+    z.propTypes = P;
+    /* harmony default export */    const G = z;
     // CONCATENATED MODULE: ./src/Switch/index.ts
     module.exports = r;
     /******/})();