@splunk/react-ui 4.21.0 → 4.22.0

package/Switch.js

@@ -1,645 +1,715 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* reexport */ Switch_Switch)
-});
-
-;// CONCATENATED MODULE: external "react"
-const external_react_namespaceObject = require("react");
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
-;// CONCATENATED MODULE: external "prop-types"
-const external_prop_types_namespaceObject = require("prop-types");
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
-const AnimationToggle_namespaceObject = require("@splunk/react-ui/AnimationToggle");
-var AnimationToggle_default = /*#__PURE__*/__webpack_require__.n(AnimationToggle_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-const ScreenReaderContent_namespaceObject = require("@splunk/react-ui/ScreenReaderContent");
-var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/ui-utils/id"
-const id_namespaceObject = require("@splunk/ui-utils/id");
-;// CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Check"
-const Check_namespaceObject = require("@splunk/react-icons/enterprise/Check");
-var Check_default = /*#__PURE__*/__webpack_require__.n(Check_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/themes"
-const themes_namespaceObject = require("@splunk/themes");
-;// CONCATENATED MODULE: ./src/Switch/CheckIcon.tsx
-
-
-
-function CheckIcon() {
-  var _useSplunkTheme = (0,themes_namespaceObject.useSplunkTheme)(),
-      family = _useSplunkTheme.family;
-
-  if (family === 'enterprise') {
-    return /*#__PURE__*/external_react_default().createElement((Check_default()), {
-      inline: false,
-      size: "12px",
-      screenReaderText: null,
-      hideDefaultTooltip: true,
-      style: {
-        marginTop: '1px'
-      }
+/******/ (() => {
+    // 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 a = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
+            /******/;
+            e.d(a, {
+                a
+            });
+            /******/            return a;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (r, a) => {
+            /******/ for (var t in a) {
+                /******/ if (e.o(a, t) && !e.o(r, t)) {
+                    /******/ Object.defineProperty(r, t, {
+                        enumerable: true,
+                        get: a[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 */ X
     });
-  }
-
-  return /*#__PURE__*/external_react_default().createElement("svg", {
-    width: "12",
-    height: "12",
-    viewBox: "-1 -2 11 10",
-    style: {
-      display: 'block'
-    },
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/external_react_default().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"
-  }));
-}
-;// CONCATENATED MODULE: external "styled-components"
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/Box"
-const Box_namespaceObject = require("@splunk/react-ui/Box");
-var Box_default = /*#__PURE__*/__webpack_require__.n(Box_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-const Clickable_namespaceObject = require("@splunk/react-ui/Clickable");
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_namespaceObject);
-;// CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
-
-
-
-
-var diameter = '18px';
-var toggleDiameter = '20px';
-var StyledBox = external_styled_components_default()((Box_default())).withConfig({
-  displayName: "SwitchStyles__StyledBox",
-  componentId: "sc-844ieu-0"
-})(["display:inline;position:relative;color:", ";flex-shrink:0;padding:", ";[data-inline] + &{margin-left:", ";}"], (0,themes_namespaceObject.pickVariant)('$switchState', {
-  error: {
-    enterprise: themes_namespaceObject.variables.errorColor,
-    prisma: themes_namespaceObject.variables.accentColorNegative
-  },
-  disabled: {
-    enterprise: themes_namespaceObject.variables.textDisabledColor,
-    prisma: themes_namespaceObject.variables.contentColorDisabled
-  }
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["calc((", " - ", ") / 2) 0"], themes_namespaceObject.variables.inputHeight, diameter),
-  prisma: {
-    compact: '6px 0',
-    comfortable: '10px 0'
-  }
-}), (0,themes_namespaceObject.pick)({
-  enterprise: themes_namespaceObject.variables.spacingHalf,
-  prisma: themes_namespaceObject.variables.spacingSmall
-}));
-var StyledCheckboxClickable = external_styled_components_default()((Clickable_default())).withConfig({
-  displayName: "SwitchStyles__StyledCheckboxClickable",
-  componentId: "sc-844ieu-1"
-})(["", " position:relative;width:", ";height:", ";line-height:", ";padding:2px;border-radius:2px;cursor:pointer;flex:0 0 auto;border:", ";color:", ";", " &:focus{box-shadow:", ";}", " ", " &[disabled]{cursor:not-allowed;border-color:", ";", "}"], themes_namespaceObject.mixins.reset('inline'), diameter, diameter, diameter, (0,themes_namespaceObject.pick)({
-  enterprise: (0,themes_namespaceObject.pick)({
-    light: (0,external_styled_components_namespaceObject.css)(["1px solid ", ""], themes_namespaceObject.variables.gray45),
-    dark: (0,external_styled_components_namespaceObject.css)(["1px solid ", ""], themes_namespaceObject.variables.gray80)
-  }),
-  prisma: (0,external_styled_components_namespaceObject.css)(["2px solid ", ""], themes_namespaceObject.variables.contentColorMuted)
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,themes_namespaceObject.pick)({
-    light: themes_namespaceObject.variables.gray45,
-    dark: themes_namespaceObject.variables.gray80
-  }),
-  prisma: themes_namespaceObject.variables.white
-}), (0,themes_namespaceObject.pick)({
-  prisma: (0,external_styled_components_namespaceObject.css)(["top:1px;padding:1px;border-radius:3px;", " ", ""], function (_ref) {
-    var $interactive = _ref.$interactive;
-    return $interactive && (0,external_styled_components_namespaceObject.css)(["&:not([disabled]):not(:focus):hover{box-shadow:0 0 0 2px ", ",0 0 0 5px ", ";}"], themes_namespaceObject.variables.backgroundColorPage, themes_namespaceObject.variables.interactiveColorOverlayHover);
-  }, function (_ref2) {
-    var $selected = _ref2.$selected;
-    return !$selected && (0,external_styled_components_namespaceObject.css)(["&:not([disabled]):not(:focus):hover{border-color:", ";}"], themes_namespaceObject.variables.contentColorDefault);
-  })
-}), themes_namespaceObject.variables.focusShadow, function (_ref3) {
-  var $selected = _ref3.$selected;
-  return $selected && (0,external_styled_components_namespaceObject.css)(["&:not([disabled]){border-color:", ";background-color:", ";}"], (0,themes_namespaceObject.pick)({
-    enterprise: {
-      light: themes_namespaceObject.variables.gray45,
-      dark: themes_namespaceObject.variables.gray80
-    },
-    prisma: themes_namespaceObject.variables.interactiveColorPrimary
-  }), (0,themes_namespaceObject.pick)({
-    enterprise: '#none',
-    prisma: (0,external_styled_components_namespaceObject.css)(["", ";"], themes_namespaceObject.variables.interactiveColorPrimary)
-  }));
-}, function (_ref4) {
-  var $error = _ref4.$error;
-  return $error && (0,themes_namespaceObject.pick)({
-    enterprise: (0,themes_namespaceObject.pick)({
-      light: (0,external_styled_components_namespaceObject.css)(["&:not([disabled]){border-color:", ";color:", ";", "}"], themes_namespaceObject.variables.errorColorL30, themes_namespaceObject.variables.errorColor, function (_ref5) {
-        var $selected = _ref5.$selected;
-        return $selected && (0,external_styled_components_namespaceObject.css)(["border-color:", ";"], themes_namespaceObject.variables.errorColor);
-      }),
-      dark: (0,external_styled_components_namespaceObject.css)(["border-color:", ";}"], themes_namespaceObject.variables.errorColor)
-    }),
-    prisma: (0,external_styled_components_namespaceObject.css)(["&:not([disabled]){border-color:", ";", "}"], themes_namespaceObject.variables.accentColorNegative, function (_ref6) {
-      var $selected = _ref6.$selected;
-      return $selected && (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.accentColorNegative);
-    })
-  });
-}, (0,themes_namespaceObject.pick)({
-  enterprise: {
-    light: themes_namespaceObject.variables.borderColor,
-    dark: themes_namespaceObject.variables.gray45
-  },
-  prisma: themes_namespaceObject.variables.contentColorDisabled
-}), function (_ref7) {
-  var $selected = _ref7.$selected;
-  return $selected && (0,themes_namespaceObject.pick)({
-    prisma: (0,external_styled_components_namespaceObject.css)(["border-color:transparent;background-color:", ";"], themes_namespaceObject.variables.interactiveColorBackgroundDisabled)
-  });
-});
-var StyledCheckboxSpan = StyledCheckboxClickable.withComponent('span');
-var StyledSome = external_styled_components_default().div.withConfig({
-  displayName: "SwitchStyles__StyledSome",
-  componentId: "sc-844ieu-2"
-})(["display:block;margin:", ";height:", ";width:", ";background:currentColor;border-radius:1px;"], (0,themes_namespaceObject.pick)({
-  enterprise: '2px',
-  prisma: '5px 2px'
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["calc(", " - 10px);"], diameter),
-  prisma: '2px'
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["calc(", " - 10px);"], diameter),
-  prisma: '8px'
-}));
-var StyledIndicator = external_styled_components_default().div.withConfig({
-  displayName: "SwitchStyles__StyledIndicator",
-  componentId: "sc-844ieu-3"
-})(["background-color:", ";border-color:", ";box-sizing:border-box;border-radius:50%;border-width:1px;position:absolute;left:-1px;top:-1px;", ";", " ", " ", ""], (0,themes_namespaceObject.pick)({
-  enterprise: {
-    light: themes_namespaceObject.variables.gray98,
-    dark: themes_namespaceObject.variables.gray80
-  },
-  prisma: themes_namespaceObject.variables.white
-}), (0,themes_namespaceObject.pick)({
-  enterprise: {
-    light: themes_namespaceObject.variables.gray60,
-    dark: themes_namespaceObject.variables.borderColor
-  },
-  prisma: themes_namespaceObject.variables.transparent
-}), function (_ref8) {
-  var $delay = _ref8.$delay;
-  return $delay && (0,external_styled_components_namespaceObject.css)(["transition:left ", ";"], $delay);
-}, (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["width:", ";height:", ";border-style:solid;"], diameter, diameter),
-  prisma: (0,external_styled_components_namespaceObject.css)(["height:16px;width:16px;margin:2px;border-style:none;box-shadow:", ";"], themes_namespaceObject.variables.embossShadow)
-}), function (_ref9) {
-  var $disabled = _ref9.$disabled;
-  return $disabled && (0,external_styled_components_namespaceObject.css)(["border-color:", ";border-style:solid;background-color:", ";"], (0,themes_namespaceObject.pick)({
-    enterprise: {
-      light: themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.borderLightColor, 0.8),
-      dark: themes_namespaceObject.variables.gray22
-    },
-    prisma: themes_namespaceObject.variables.transparent
-  }), (0,themes_namespaceObject.pick)({
-    enterprise: {
-      dark: themes_namespaceObject.variables.gray45
-    },
-    prisma: themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.white, 0.3)
-  }));
-}, function (_ref10) {
-  var $selected = _ref10.$selected;
-  return $selected && (0,external_styled_components_namespaceObject.css)(["left:", ";"], (0,themes_namespaceObject.pick)({
-    enterprise: (0,external_styled_components_namespaceObject.css)(["calc(100% - ", " + 1px)"], diameter),
-    prisma: (0,external_styled_components_namespaceObject.css)(["calc(100% - ", " + 1px)"], toggleDiameter)
-  }));
-});
-var StyledToggleOutline = external_styled_components_default().div.withConfig({
-  displayName: "SwitchStyles__StyledToggleOutline",
-  componentId: "sc-844ieu-4"
-})(["position:absolute;border:1px solid transparent;", ";border-radius:", ";top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;", " ", ""], function (_ref11) {
-  var $delay = _ref11.$delay;
-  return $delay && (0,external_styled_components_namespaceObject.css)(["transition:border-color ", ";"], $delay);
-}, (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["calc(", " * 0.5)"], diameter),
-  prisma: '15px'
-}), (0,themes_namespaceObject.pick)({
-  prisma: (0,external_styled_components_namespaceObject.css)(["margin:-6px;"])
-}), function (_ref12) {
-  var $error = _ref12.$error;
-  return $error && (0,external_styled_components_namespaceObject.css)(["border-color:", ";"], (0,themes_namespaceObject.pick)({
-    enterprise: themes_namespaceObject.variables.errorColor,
-    prisma: themes_namespaceObject.variables.transparent
-  }));
-});
-var StyledToggleClickable = external_styled_components_default()((Clickable_default())).withConfig({
-  displayName: "SwitchStyles__StyledToggleClickable",
-  componentId: "sc-844ieu-5"
-})(["position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;box-shadow:", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}};&[disabled]{border:1px solid ", ";background-color:", ";", " ", "}", ";", ""], (0,themes_namespaceObject.pick)({
-  enterprise: (0,themes_namespaceObject.pick)({
-    light: (0,external_styled_components_namespaceObject.css)(["width:calc(", " * 2);background-color:", ";height:", ";"], diameter, themes_namespaceObject.variables.gray98, diameter),
-    dark: (0,external_styled_components_namespaceObject.css)(["width:calc(", " * 2);background-color:", ";height:", ";"], diameter, themes_namespaceObject.variables.gray45, diameter)
-  }),
-  prisma: (0,external_styled_components_namespaceObject.css)(["width:32px;background-color:", ";height:", ";top:1px;"], themes_namespaceObject.variables.contentColorMuted, toggleDiameter)
-}), diameter, function (props) {
-  return props.$delay;
-}, (0,themes_namespaceObject.pick)({
-  enterprise: {
-    light: themes_namespaceObject.variables.gray60,
-    dark: themes_namespaceObject.variables.borderColor
-  },
-  prisma: themes_namespaceObject.variables.transparent
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["box-shadow:inset 0 2px 0 rgba(0,0,0,0.1);"])
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["", ",inset 0 2px 0 rgba(0,0,0,0.1);"], themes_namespaceObject.variables.focusShadow),
-  prisma: themes_namespaceObject.variables.focusShadow
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["> ", "{border-color:", ";}"],
-  /* sc-sel */
-  StyledToggleOutline, themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.focusColor, 0.8))
-}),
-/* sc-sel */
-StyledIndicator, (0,themes_namespaceObject.pick)({
-  enterprise: (0,themes_namespaceObject.pick)({
-    light: themes_namespaceObject.variables.gray96,
-    dark: '#b1bcc7'
-  }),
-  prisma: themes_namespaceObject.variables.white
-}),
-/* sc-sel */
-StyledToggleOutline, (0,themes_namespaceObject.pick)({
-  prisma: themes_namespaceObject.variables.interactiveColorOverlayHover
-}), (0,themes_namespaceObject.pick)({
-  enterprise: {
-    light: themes_namespaceObject.variables.borderLightColor,
-    dark: themes_namespaceObject.variables.borderColor
-  },
-  prisma: themes_namespaceObject.variables.transparent
-}), (0,themes_namespaceObject.pick)({
-  enterprise: {
-    light: themes_namespaceObject.variables.gray96,
-    dark: themes_namespaceObject.variables.gray30
-  },
-  prisma: themes_namespaceObject.variables.interactiveColorBackgroundDisabled
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["box-shadow:inset 0 2px 0 rgba(0,0,0,0.06);"])
-}), function (_ref13) {
-  var $selected = _ref13.$selected;
-  return $selected && (0,external_styled_components_namespaceObject.css)(["border-color:transparent;background-color:", ";"], (0,themes_namespaceObject.pick)({
-    enterprise: (0,themes_namespaceObject.pick)({
-      light: themes_namespaceObject.variables.accentColorL40,
-      dark: themes_namespaceObject.variables.accentColorD20
-    }),
-    prisma: themes_namespaceObject.mixins.colorWithAlpha(themes_namespaceObject.variables.interactiveColorPrimary, 0.7)
-  }));
-}, function (_ref14) {
-  var $selected = _ref14.$selected;
-  return $selected && (0,external_styled_components_namespaceObject.css)(["border-color:", ";background-color:", ";", ""], (0,themes_namespaceObject.pick)({
-    enterprise: themes_namespaceObject.variables.accentColorL10,
-    prisma: themes_namespaceObject.variables.transparent
-  }), (0,themes_namespaceObject.pick)({
-    enterprise: themes_namespaceObject.variables.accentColorL10,
-    prisma: themes_namespaceObject.variables.interactiveColorPrimary
-  }), (0,themes_namespaceObject.pick)({
-    prisma: (0,external_styled_components_namespaceObject.css)(["box-shadow:", ";"], themes_namespaceObject.variables.embossShadow)
-  }));
-}, function (_ref15) {
-  var $error = _ref15.$error;
-  return $error && (0,external_styled_components_namespaceObject.css)(["border-color:", ";", ";"], (0,themes_namespaceObject.pick)({
-    enterprise: themes_namespaceObject.variables.errorColor,
-    prisma: themes_namespaceObject.variables.transparent
-  }), (0,themes_namespaceObject.pick)({
-    prisma: (0,external_styled_components_namespaceObject.css)(["background-color:", ";"], themes_namespaceObject.variables.accentColorNegative)
-  }));
-});
-var StyledToggleSpan = StyledToggleClickable.withComponent('span');
-var StyledLabel = external_styled_components_default().label.withConfig({
-  displayName: "SwitchStyles__StyledLabel",
-  componentId: "sc-844ieu-6"
-})(["", " flex:1 1 auto;padding-left:", ";color:inherit;", ";"], themes_namespaceObject.mixins.reset('inline-block'), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["", ";"], themes_namespaceObject.variables.spacingQuarter),
-  prisma: '8px'
-}), function (_ref16) {
-  var $disabled = _ref16.$disabled;
-  return !$disabled && (0,external_styled_components_namespaceObject.css)(["cursor:pointer;"]);
-});
-
-;// CONCATENATED MODULE: ./src/Switch/Switch.tsx
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-
-
-
-
-
-var propTypes = {
-  appearance: external_prop_types_default().oneOf(['checkbox', 'toggle']),
-  children: (external_prop_types_default()).node,
-  disabled: (external_prop_types_default()).bool,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-  error: (external_prop_types_default()).bool,
-  id: (external_prop_types_default()).string,
-  inline: (external_prop_types_default()).bool,
-
-  /** @private */
-  interactive: (external_prop_types_default()).bool,
-  labelledBy: (external_prop_types_default()).string,
-  onClick: (external_prop_types_default()).func,
-
-  /** @private. */
-  required: (external_prop_types_default()).bool,
-  selected: external_prop_types_default().oneOf([true, false, 'some']),
-  selectedLabel: (external_prop_types_default()).string,
-  someSelectedLabel: (external_prop_types_default()).string,
-  unselectedLabel: (external_prop_types_default()).string,
-  value: (external_prop_types_default()).any
-};
-var defaultProps = {
-  appearance: 'checkbox',
-  disabled: false,
-  error: false,
-  inline: false,
-  interactive: true,
-  selected: false
-};
-// unclear why the manual ref is needed here (only for styled-components)
-var StyledClickables = {
-  checkbox: StyledCheckboxClickable,
-  toggle: StyledToggleClickable
-};
-var StyledSpans = {
-  checkbox: StyledCheckboxSpan,
-  toggle: StyledToggleSpan
-};
-/**
- * `Switch` is a basic form control with an on/off state.
- */
-
-var Switch = /*#__PURE__*/function (_Component) {
-  _inherits(Switch, _Component);
-
-  var _super = _createSuper(Switch);
-
-  _createClass(Switch, null, [{
-    key: "validateProps",
-    // @docs-props-type SwitchPropsBase
-    value: function validateProps(_ref) {
-      var selected = _ref.selected,
-          appearance = _ref.appearance;
-
-      if (false) {}
+    // 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);
+    // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
+    const n = require("@splunk/react-ui/AnimationToggle");
+    var l =  e.n(n);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const s = require("@splunk/react-ui/ScreenReaderContent");
+    var c =  e.n(s);
+    // 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"
+        }));
     }
-  }]);
-
-  function Switch(props) {
-    var _this;
-
-    _classCallCheck(this, Switch);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "clickableId", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "labelId", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "toggle", null);
-
-    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", Switch.validateProps);
-
-    _defineProperty(_assertThisInitialized(_this), "handleContainerClick", function (e) {
-      var _this$props$onClick, _this$props2;
-
-      var _this$props = _this.props,
-          value = _this$props.value,
-          selected = _this$props.selected;
-      (_this$props$onClick = (_this$props2 = _this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props2, e, {
-        value: value,
-        // @ts-expect-error - safe due to individual prop interfaces
-        selected: selected
-      });
-    });
-
-    _this.labelId = (0,id_namespaceObject.createDOMID)('label');
-    _this.clickableId = (0,id_namespaceObject.createDOMID)('clickable');
-    Switch.validateProps(props);
-    return _this;
-  }
-
-  _createClass(Switch, [{
-    key: "focus",
-
-    /**
-     * Place focus on the toggle.
-     */
-    value: function focus() {
-      var _this$toggle;
-
-      (_this$toggle = this.toggle) === null || _this$toggle === void 0 ? void 0 : _this$toggle.focus();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          appearance = _this$props3.appearance,
-          children = _this$props3.children,
-          disabled = _this$props3.disabled,
-          error = _this$props3.error,
-          id = _this$props3.id,
-          inline = _this$props3.inline,
-          interactive = _this$props3.interactive,
-          labelledBy = _this$props3.labelledBy,
-          onClick = _this$props3.onClick,
-          required = _this$props3.required,
-          selected = _this$props3.selected,
-          selectedLabel = _this$props3.selectedLabel,
-          someSelectedLabel = _this$props3.someSelectedLabel,
-          unselectedLabel = _this$props3.unselectedLabel,
-          value = _this$props3.value,
-          otherProps = _objectWithoutProperties(_this$props3, ["appearance", "children", "disabled", "error", "id", "inline", "interactive", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "unselectedLabel", "value"]);
-
-      var labelId = labelledBy; // consumer defined external label
-
-      var clickableId = id; // consumer defined id
-      // if has internal label defined with children....
-
-      if (children) {
-        labelId = this.labelId; // must use generated labelId
-
-        clickableId = id || this.clickableId; // must have an id
-      }
-
-      var ariaChecked = selected === 'some' ? 'mixed' : selected;
-      var stateLabels = {
-        "true": selectedLabel,
-        "false": unselectedLabel,
-        some: someSelectedLabel
-      };
-      var switchProps = {
-        disabled: disabled,
-        $interactive: interactive,
-        $error: error,
-        $selected: selected === 'some' || selected,
-        'aria-labelledby': interactive ? labelId : undefined,
-        'aria-checked': interactive ? ariaChecked : undefined,
-        'aria-invalid': error ? true : undefined,
-        'aria-required': required,
-        id: clickableId,
-        ref: function ref(c) {
-          _this2.toggle = c;
+    // CONCATENATED MODULE: external "styled-components"
+    const f = require("styled-components");
+    var h =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
+    const g = require("@splunk/react-ui/Box");
+    var m =  e.n(g);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const y = require("@splunk/react-ui/Clickable");
+    var k =  e.n(y);
+    // CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
+    var x = "18px";
+    var C = "20px";
+    var w = h()(m()).withConfig({
+        displayName: "SwitchStyles__StyledBox",
+        componentId: "sc-844ieu-0"
+    })([ "display:inline;position:relative;color:", ";flex-shrink:0;padding:", ";[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)([ "calc((", " - ", ") / 2) 0" ], b.variables.inputHeight, x),
+        prisma: {
+            compact: "6px 0",
+            comfortable: "10px 0"
+        }
+    }), (0, b.pick)({
+        enterprise: b.variables.spacingHalf,
+        prisma: b.variables.spacingSmall
+    }));
+    var S = h()(k()).withConfig({
+        displayName: "SwitchStyles__StyledCheckboxClickable",
+        componentId: "sc-844ieu-1"
+    })([ "", " position:relative;width:", ";height:", ";line-height:", ";padding:2px;border-radius:2px;cursor:pointer;flex:0 0 auto;border:", ";color:", ";", " &:focus{box-shadow:", ";}", " ", " &[disabled]{cursor:not-allowed;border-color:", ";", "}" ], b.mixins.reset("inline"), x, x, x, (0, 
+    b.pick)({
+        enterprise: (0, b.pick)({
+            light: (0, f.css)([ "1px solid ", "" ], b.variables.gray45),
+            dark: (0, f.css)([ "1px solid ", "" ], b.variables.gray80)
+        }),
+        prisma: (0, f.css)([ "2px solid ", "" ], b.variables.contentColorMuted)
+    }), (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);
+        }), (function(e) {
+            var r = e.$selected;
+            return !r && (0, f.css)([ "&:not([disabled]):not(:focus):hover{border-color:", ";}" ], b.variables.contentColorDefault);
+        }))
+    }), b.variables.focusShadow, (function(e) {
+        var r = e.$selected;
+        return r && (0, f.css)([ "&:not([disabled]){border-color:", ";background-color:", ";}" ], (0, 
+        b.pick)({
+            enterprise: {
+                light: b.variables.gray45,
+                dark: b.variables.gray80
+            },
+            prisma: b.variables.interactiveColorPrimary
+        }), (0, b.pick)({
+            enterprise: "#none",
+            prisma: (0, f.css)([ "", ";" ], b.variables.interactiveColorPrimary)
+        }));
+    }), (function(e) {
+        var r = e.$error;
+        return r && (0, b.pick)({
+            enterprise: (0, b.pick)({
+                light: (0, f.css)([ "&:not([disabled]){border-color:", ";color:", ";", "}" ], b.variables.errorColorL30, b.variables.errorColor, (function(e) {
+                    var r = e.$selected;
+                    return r && (0, f.css)([ "border-color:", ";" ], b.variables.errorColor);
+                })),
+                dark: (0, f.css)([ "border-color:", ";}" ], b.variables.errorColor)
+            }),
+            prisma: (0, f.css)([ "&:not([disabled]){border-color:", ";", "}" ], b.variables.accentColorNegative, (function(e) {
+                var r = e.$selected;
+                return r && (0, f.css)([ "background-color:", ";" ], b.variables.accentColorNegative);
+            }))
+        });
+    }), (0, b.pick)({
+        enterprise: {
+            light: b.variables.borderColor,
+            dark: b.variables.gray45
+        },
+        prisma: b.variables.contentColorDisabled
+    }), (function(e) {
+        var r = e.$selected;
+        return r && (0, b.pick)({
+            prisma: (0, f.css)([ "border-color:transparent;background-color:", ";" ], b.variables.interactiveColorBackgroundDisabled)
+        });
+    }));
+    var O = S.withComponent("span");
+    var $ = h().div.withConfig({
+        displayName: "SwitchStyles__StyledSome",
+        componentId: "sc-844ieu-2"
+    })([ "display:block;margin:", ";height:", ";width:", ";background:currentColor;border-radius:1px;" ], (0, 
+    b.pick)({
+        enterprise: "2px",
+        prisma: "5px 2px"
+    }), (0, b.pick)({
+        enterprise: (0, f.css)([ "calc(", " - 10px);" ], x),
+        prisma: "2px"
+    }), (0, b.pick)({
+        enterprise: (0, f.css)([ "calc(", " - 10px);" ], x),
+        prisma: "8px"
+    }));
+    var _ = h().div.withConfig({
+        displayName: "SwitchStyles__StyledIndicator",
+        componentId: "sc-844ieu-3"
+    })([ "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
         },
-        onClick: disabled || !interactive ? undefined : this.handleContainerClick,
-        'data-test': 'button',
-        'data-selected': selected
-      };
-      var StyledClickable = StyledClickables[appearance];
-      var StyledSpan = StyledSpans[appearance];
-
-      var renderToggle = function renderToggle(delay) {
-        return function () {
-          var toggleChildren = /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/external_react_default().createElement(StyledIndicator, {
-            $delay: delay,
-            $disabled: disabled,
-            $error: !disabled && error,
-            $selected: selected
-          }), /*#__PURE__*/external_react_default().createElement(StyledToggleOutline, {
-            $delay: delay,
-            $error: !disabled && error
-          }));
-          return interactive ? /*#__PURE__*/external_react_default().createElement(StyledClickable, _extends({
-            role: "switch"
-          }, switchProps, {
-            $delay: delay
-          }), toggleChildren) : /*#__PURE__*/external_react_default().createElement(StyledSpan, _extends({}, switchProps, {
-            $delay: delay
-          }), toggleChildren);
+        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)([ "left:", ";" ], (0, b.pick)({
+            enterprise: (0, f.css)([ "calc(100% - ", " + 1px)" ], x),
+            prisma: (0, f.css)([ "calc(100% - ", " + 1px)" ], C)
+        }));
+    }));
+    var P = h().div.withConfig({
+        displayName: "SwitchStyles__StyledToggleOutline",
+        componentId: "sc-844ieu-4"
+    })([ "position:absolute;border:1px solid transparent;", ";border-radius:", ";top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;", " ", "" ], (function(e) {
+        var r = e.$delay;
+        return r && (0, f.css)([ "transition:border-color ", ";" ], r);
+    }), (0, b.pick)({
+        enterprise: (0, f.css)([ "calc(", " * 0.5)" ], x),
+        prisma: "15px"
+    }), (0, b.pick)({
+        prisma: (0, f.css)([ "margin:-6px;" ])
+    }), (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 E = h()(k()).withConfig({
+        displayName: "SwitchStyles__StyledToggleClickable",
+        componentId: "sc-844ieu-5"
+    })([ "position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;box-shadow:", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}};&[disabled]{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, C)
+    }), x, (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)([ "", ",inset 0 2px 0 rgba(0,0,0,0.1);" ], b.variables.focusShadow),
+        prisma: b.variables.focusShadow
+    }), (0, b.pick)({
+        enterprise: (0, f.css)([ "> ", "{border-color:", ";}" ], 
+        /* sc-sel */
+        P, 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 */
+    P, (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) {
+        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) {
+        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)
+        }));
+    }));
+    var L = E.withComponent("span");
+    var j = h().label.withConfig({
+        displayName: "SwitchStyles__StyledLabel",
+        componentId: "sc-844ieu-6"
+    })([ "", " flex:1 1 auto;padding-left:", ";color:inherit;", ";" ], b.mixins.reset("inline-block"), (0, 
+    b.pick)({
+        enterprise: (0, f.css)([ "", ";" ], b.variables.spacingQuarter),
+        prisma: "8px"
+    }), (function(e) {
+        var r = e.$disabled;
+        return !r && (0, f.css)([ "cursor:pointer;" ]);
+    }));
+    // CONCATENATED MODULE: ./src/Switch/Switch.tsx
+    function I(e) {
+        "@babel/helpers - typeof";
+        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+            I = function e(r) {
+                return typeof r;
+            };
+        } else {
+            I = function e(r) {
+                return r && typeof Symbol === "function" && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
+            };
+        }
+        return I(e);
+    }
+    function D() {
+        D = Object.assign || function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var a = arguments[r];
+                for (var t in a) {
+                    if (Object.prototype.hasOwnProperty.call(a, t)) {
+                        e[t] = a[t];
+                    }
+                }
+            }
+            return e;
         };
-      };
-
-      var renderNonToggle = function renderNonToggle() {
-        var nonToggleChildren = /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, selected === true && appearance === 'checkbox' && /*#__PURE__*/external_react_default().createElement(CheckIcon, null), selected === 'some' && appearance === 'checkbox' && /*#__PURE__*/external_react_default().createElement(StyledSome, null));
-        return interactive ? /*#__PURE__*/external_react_default().createElement(StyledClickable, _extends({
-          "data-clickable": true,
-          role: appearance
-        }, switchProps), nonToggleChildren) : /*#__PURE__*/external_react_default().createElement(StyledSpan, switchProps, nonToggleChildren);
-      };
-
-      var switchState = disabled && 'disabled' || error && 'error' || null;
-      var hasCustomizedScreenReaderContent = !!selectedLabel || !!someSelectedLabel || !!unselectedLabel;
-      return /*#__PURE__*/external_react_default().createElement(StyledBox, _extends({
-        flex: true,
-        inline: inline,
-        "data-test": "switch",
-        "data-test-selected": selected,
-        "data-test-value": value,
-        "data-test-error": error ? true : undefined,
-        "data-error": error ? true : undefined,
-        "data-disabled": disabled ? true : undefined,
-        $switchState: switchState
-      }, otherProps), appearance === 'toggle' && /*#__PURE__*/external_react_default().createElement((AnimationToggle_default()), {
-        on: renderToggle('200ms'),
-        off: renderToggle()
-      }), appearance !== 'toggle' && renderNonToggle(), interactive && hasCustomizedScreenReaderContent && /*#__PURE__*/external_react_default().createElement((ScreenReaderContent_default()), null, stateLabels["".concat(selected)]), children && /*#__PURE__*/external_react_default().createElement(StyledLabel, {
-        $disabled: disabled,
-        "data-test": "label",
-        id: labelId,
-        htmlFor: clickableId,
-        "data-disabled": disabled || null
-      }, children));
+        return D.apply(this, arguments);
+    }
+    function q(e, r) {
+        if (e == null) return {};
+        var a = T(e, r);
+        var t, i;
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < o.length; i++) {
+                t = o[i];
+                if (r.indexOf(t) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, t)) continue;
+                a[t] = e[t];
+            }
+        }
+        return a;
+    }
+    function T(e, r) {
+        if (e == null) return {};
+        var a = {};
+        var t = Object.keys(e);
+        var i, o;
+        for (o = 0; o < t.length; o++) {
+            i = t[o];
+            if (r.indexOf(i) >= 0) continue;
+            a[i] = e[i];
+        }
+        return a;
+    }
+    function N(e, r) {
+        if (!(e instanceof r)) {
+            throw new TypeError("Cannot call a class as a function");
+        }
+    }
+    function R(e, r) {
+        for (var a = 0; a < r.length; a++) {
+            var t = r[a];
+            t.enumerable = t.enumerable || false;
+            t.configurable = true;
+            if ("value" in t) t.writable = true;
+            Object.defineProperty(e, t.key, t);
+        }
     }
-  }]);
-
-  return Switch;
-}(external_react_namespaceObject.Component);
-
-_defineProperty(Switch, "propTypes", propTypes);
-
-_defineProperty(Switch, "defaultProps", defaultProps);
-
-/* harmony default export */ const Switch_Switch = (Switch);
-;// CONCATENATED MODULE: ./src/Switch/index.ts
-
-
-module.exports = __webpack_exports__;
-/******/ })()
-;
+    function B(e, r, a) {
+        if (r) R(e.prototype, r);
+        if (a) R(e, a);
+        return e;
+    }
+    function M(e, r) {
+        if (typeof r !== "function" && r !== null) {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        e.prototype = Object.create(r && r.prototype, {
+            constructor: {
+                value: e,
+                writable: true,
+                configurable: true
+            }
+        });
+        if (r) A(e, r);
+    }
+    function A(e, r) {
+        A = Object.setPrototypeOf || function e(r, a) {
+            r.__proto__ = a;
+            return r;
+        };
+        return A(e, r);
+    }
+    function H(e) {
+        var r = F();
+        return function a() {
+            var t = Q(e), i;
+            if (r) {
+                var o = Q(this).constructor;
+                i = Reflect.construct(t, arguments, o);
+            } else {
+                i = t.apply(this, arguments);
+            }
+            return W(this, i);
+        };
+    }
+    function W(e, r) {
+        if (r && (I(r) === "object" || typeof r === "function")) {
+            return r;
+        }
+        return z(e);
+    }
+    function z(e) {
+        if (e === void 0) {
+            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        }
+        return e;
+    }
+    function F() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+            Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+    function Q(e) {
+        Q = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
+            return r.__proto__ || Object.getPrototypeOf(r);
+        };
+        return Q(e);
+    }
+    function U(e, r, a) {
+        if (r in e) {
+            Object.defineProperty(e, r, {
+                value: a,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[r] = a;
+        }
+        return e;
+    }
+    var V = {
+        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,
+        /** @private */
+        interactive: o().bool,
+        labelledBy: o().string,
+        onClick: o().func,
+        /** @private. */
+        required: o().bool,
+        selected: o().oneOf([ true, false, "some" ]),
+        selectedLabel: o().string,
+        someSelectedLabel: o().string,
+        unselectedLabel: o().string,
+        value: o().any
+    };
+    var Z = {
+        appearance: "checkbox",
+        disabled: false,
+        error: false,
+        inline: false,
+        interactive: true,
+        selected: false
+    };
+    // unclear why the manual ref is needed here (only for styled-components)
+        var G = {
+        checkbox: S,
+        toggle: E
+    };
+    var J = {
+        checkbox: O,
+        toggle: L
+    };
+    /**
+ * `Switch` is a basic form control with an on/off state.
+ */    var K =  function(e) {
+        M(a, e);
+        var r = H(a);
+        B(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;
+            N(this, a);
+            t = r.call(this, e);
+            U(z(t), "clickableId", void 0);
+            U(z(t), "labelId", void 0);
+            U(z(t), "toggle", null);
+            U(z(t), "componentDidUpdate", a.validateProps);
+            U(z(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;
+        }
+        B(a, [ {
+            key: "focus",
+            /**
+     * Place focus on the toggle.
+     */
+            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.error, d = a.id, p = a.inline, u = a.interactive, b = a.labelledBy, f = a.onClick, h = a.required, g = a.selected, m = a.selectedLabel, y = a.someSelectedLabel, k = a.unselectedLabel, x = a.value, C = q(a, [ "appearance", "children", "disabled", "error", "id", "inline", "interactive", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "unselectedLabel", "value" ]);
+                var S = b;
+ // consumer defined external label
+                                var O = d;
+ // consumer defined id
+                // if has internal label defined with children....
+                                if (o) {
+                    S = this.labelId;
+ // must use generated labelId
+                                        O = d || this.clickableId;
+ // must have an id
+                                }
+                var E = g === "some" ? "mixed" : g;
+                var L = {
+                    true: m,
+                    false: k,
+                    some: y
+                };
+                var I = {
+                    disabled: n,
+                    $interactive: u,
+                    $error: s,
+                    $selected: g === "some" || g,
+                    "aria-labelledby": u ? S : undefined,
+                    "aria-checked": u ? E : undefined,
+                    "aria-invalid": s ? true : undefined,
+                    "aria-required": h,
+                    id: O,
+                    ref: function e(a) {
+                        r.toggle = a;
+                    },
+                    onClick: n || !u ? undefined : this.handleContainerClick,
+                    "data-test": "button",
+                    "data-selected": g
+                };
+                var T = G[i];
+                var N = J[i];
+                var R = function e(r) {
+                    return function() {
+                        var e =  t().createElement(t().Fragment, null,  t().createElement(_, {
+                            $delay: r,
+                            $disabled: n,
+                            $error: !n && s,
+                            $selected: g
+                        }),  t().createElement(P, {
+                            $delay: r,
+                            $error: !n && s
+                        }));
+                        return u ?  t().createElement(T, D({
+                            role: "switch"
+                        }, I, {
+                            $delay: r
+                        }), e) :  t().createElement(N, D({}, I, {
+                            $delay: r
+                        }), e);
+                    };
+                };
+                var B = function e() {
+                    var r =  t().createElement(t().Fragment, null, g === true && i === "checkbox" &&  t().createElement(v, null), g === "some" && i === "checkbox" &&  t().createElement($, null));
+                    return u ?  t().createElement(T, D({
+                        "data-clickable": true,
+                        role: i
+                    }, I), r) :  t().createElement(N, I, r);
+                };
+                var M = n && "disabled" || s && "error" || null;
+                var A = !!m || !!y || !!k;
+                
+                return t().createElement(w, D({
+                    flex: true,
+                    inline: p,
+                    "data-test": "switch",
+                    "data-test-selected": g,
+                    "data-test-value": x,
+                    "data-test-error": s ? true : undefined,
+                    "data-error": s ? true : undefined,
+                    "data-disabled": n ? true : undefined,
+                    $switchState: M
+                }, C), i === "toggle" &&  t().createElement(l(), {
+                    on: R("200ms"),
+                    off: R()
+                }), i !== "toggle" && B(), u && A &&  t().createElement(c(), null, L["".concat(g)]), o &&  t().createElement(j, {
+                    $disabled: n,
+                    "data-test": "label",
+                    id: S,
+                    htmlFor: O,
+                    "data-disabled": n || null
+                }, o));
+            }
+        } ]);
+        return a;
+    }(a.Component);
+    U(K, "propTypes", V);
+    U(K, "defaultProps", Z);
+    /* harmony default export */    const X = K;
+    // CONCATENATED MODULE: ./src/Switch/index.ts
+    module.exports = r;
+    /******/})();