@equinor/eds-core-react 0.14.0 → 0.14.3

package/dist/core-react.cjs.js

@@ -396,7 +396,7 @@ object-assign
 */
 /* eslint-disable no-unused-vars */
 var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
 var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 
 function toObject(val) {
@@ -460,7 +460,7 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
 		from = Object(arguments[s]);
 
 		for (var key in from) {
-			if (hasOwnProperty$1.call(from, key)) {
+			if (hasOwnProperty.call(from, key)) {
 				to[key] = from[key];
 			}
 		}
@@ -2727,9 +2727,9 @@ var buttonTypography = tokens$6.typography.navigation.button,
     buttonBorderRadius$2 = _tokens$shape$button.borderRadius,
     compactButtonHeight = _tokens$shape$2._modes.compact.button.minHeight,
     outline = tokens$6.interactions.focused,
-    _tokens$clickbounds$1 = tokens$6.clickbounds,
-    clicboundHeight$1 = _tokens$clickbounds$1.default__base,
-    compactClickboundHeight$1 = _tokens$clickbounds$1.compact__standard;
+    _tokens$clickbounds$3 = tokens$6.clickbounds,
+    clicboundHeight$1 = _tokens$clickbounds$3.default__base,
+    compactClickboundHeight$1 = _tokens$clickbounds$3.compact__standard;
 var button = {
   background: 'transparent',
   height: buttonHeight,
@@ -3236,9 +3236,9 @@ var _tokens$colors$intera$g = tokens$6.colors.interactive,
     dangerColor = _tokens$colors$intera$g.danger__resting.rgba,
     dangerHoverColor = _tokens$colors$intera$g.danger__hover.rgba,
     dangerHoverAltColor = _tokens$colors$intera$g.danger__highlight.rgba,
-    _tokens$clickbounds = tokens$6.clickbounds,
-    clicboundHeight = _tokens$clickbounds.default__base,
-    compactClickboundHeight = _tokens$clickbounds.compact__standard,
+    _tokens$clickbounds$2 = tokens$6.clickbounds,
+    clicboundHeight = _tokens$clickbounds$2.default__base,
+    compactClickboundHeight = _tokens$clickbounds$2.compact__standard,
     shape$2 = tokens$6.shape;
 var primary$6 = mergeDeepRight(button, {
   height: shape$2.icon_button.minHeight,
@@ -5894,6 +5894,15 @@ var useToken = function useToken(options, token) {
   }, [options, token]);
 };
 
+var useHideBodyScroll = function useHideBodyScroll(overflowState) {
+  React.useEffect(function () {
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = overflowState;
+    };
+  }, []);
+};
+
 var FullWidthCenterContent = styled__default['default'].span.withConfig({
   displayName: "InnerFullWidth__FullWidthCenterContent",
   componentId: "sc-qeawkb-0"
@@ -6007,7 +6016,7 @@ var ButtonBase = styled__default['default'].button.withConfig({
   var focus = states.focus,
       hover = states.hover,
       disabled = states.disabled;
-  return styled.css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}&:hover{background:", ";color:", ";", "}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", " ", " &:hover{background:", ";}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), (_a = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _a === void 0 ? void 0 : _a.top, (_b = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _b === void 0 ? void 0 : _b.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_c = hover.typography) === null || _c === void 0 ? void 0 : _c.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
+  return styled.css(["margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}&:disabled{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, spacingsTemplate(theme.spacings), bordersTemplate(theme.border), typographyTemplate(theme.typography), (_a = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _a === void 0 ? void 0 : _a.top, (_b = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _b === void 0 ? void 0 : _b.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height, hover.background, (_c = hover.typography) === null || _c === void 0 ? void 0 : _c.color, bordersTemplate(hover === null || hover === void 0 ? void 0 : hover.border), outlineTemplate(focus.outline), disabled.background, bordersTemplate(disabled.border), typographyTemplate(disabled.typography), disabled.background);
 });
 var Button = /*#__PURE__*/React.forwardRef(function Button(_a, ref) {
   var _a$color = _a.color,
@@ -6029,7 +6038,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(_a, ref) {
 
   var token = useToken({
     density: density
-  }, getToken$1(variant, color))();
+  }, getToken$1(variant, color));
   var as = href && !disabled ? 'a' : other.as ? other.as : 'button';
   var type = href || other.as ? undefined : 'button';
   tabIndex = disabled ? -1 : tabIndex;
@@ -6366,7 +6375,7 @@ var TableDataCell = /*#__PURE__*/React.forwardRef(function TableDataCell(_a, ref
 
   var token = useToken({
     density: density
-  }, applyVariant(variant, tableCell))();
+  }, applyVariant(variant, tableCell));
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
@@ -6497,7 +6506,7 @@ var TableHeaderCell = /*#__PURE__*/React.forwardRef(function TableHeaderCell(_a,
 
   var token = useToken({
     density: density
-  }, token$5)();
+  }, token$5);
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
@@ -6601,8 +6610,10 @@ var StyledRow = styled__default['default'].tr.withConfig({
 
   return {
     background: active ? (_a = token$3.states.active) === null || _a === void 0 ? void 0 : _a.background : null,
-    ':hover': {
-      background: (_b = token$3.states.hover) === null || _b === void 0 ? void 0 : _b.background
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: (_b = token$3.states.hover) === null || _b === void 0 ? void 0 : _b.background
+      }
     }
   };
 });
@@ -6970,7 +6981,7 @@ var Input$5 = /*#__PURE__*/React.forwardRef(function Input(_a, ref) {
 
   var token = useToken({
     density: density
-  }, inputVariant)();
+  }, inputVariant);
   var inputProps = Object.assign({
     ref: ref,
     type: type,
@@ -7643,7 +7654,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(_a, ref) {
 
   var token = useToken({
     density: density
-  }, textfield$1)();
+  }, textfield$1);
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
@@ -7819,348 +7830,16 @@ var List$1 = List$2;
 List$1.Item = ListItem$4;
 List$1.Item.displayName = 'List.Item';
 
-/** Detect free variable `global` from Node.js. */
-
-var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-var _freeGlobal = freeGlobal$1;
-
-var freeGlobal = _freeGlobal;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root$1 = freeGlobal || freeSelf || Function('return this')();
-
-var _root = root$1;
-
-var root = _root;
-
-/** Built-in value references. */
-var Symbol$4 = root.Symbol;
-
-var _Symbol = Symbol$4;
-
-/**
- * A specialized version of `_.map` for arrays without support for iteratee
- * shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the new mapped array.
- */
-
-function arrayMap$1(array, iteratee) {
-  var index = -1,
-      length = array == null ? 0 : array.length,
-      result = Array(length);
-
-  while (++index < length) {
-    result[index] = iteratee(array[index], index, array);
-  }
-  return result;
-}
-
-var _arrayMap = arrayMap$1;
-
-/**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
-
-var isArray$1 = Array.isArray;
-
-var isArray_1 = isArray$1;
-
-var Symbol$3 = _Symbol;
-
-/** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto$1.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString$1 = objectProto$1.toString;
-
-/** Built-in value references. */
-var symToStringTag$1 = Symbol$3 ? Symbol$3.toStringTag : undefined;
-
-/**
- * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the raw `toStringTag`.
- */
-function getRawTag$1(value) {
-  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
-      tag = value[symToStringTag$1];
-
-  try {
-    value[symToStringTag$1] = undefined;
-    var unmasked = true;
-  } catch (e) {}
-
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-
-var _getRawTag = getRawTag$1;
-
-/** Used for built-in method references. */
-
-var objectProto = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var nativeObjectToString = objectProto.toString;
-
-/**
- * Converts `value` to a string using `Object.prototype.toString`.
- *
- * @private
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- */
-function objectToString$1(value) {
-  return nativeObjectToString.call(value);
-}
-
-var _objectToString = objectToString$1;
-
-var Symbol$2 = _Symbol,
-    getRawTag = _getRawTag,
-    objectToString = _objectToString;
-
-/** `Object#toString` result references. */
-var nullTag = '[object Null]',
-    undefinedTag = '[object Undefined]';
-
-/** Built-in value references. */
-var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : undefined;
-
-/**
- * The base implementation of `getTag` without fallbacks for buggy environments.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag$1(value) {
-  if (value == null) {
-    return value === undefined ? undefinedTag : nullTag;
-  }
-  return (symToStringTag && symToStringTag in Object(value))
-    ? getRawTag(value)
-    : objectToString(value);
-}
-
-var _baseGetTag = baseGetTag$1;
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-
-function isObjectLike$1(value) {
-  return value != null && typeof value == 'object';
-}
-
-var isObjectLike_1 = isObjectLike$1;
-
-var baseGetTag = _baseGetTag,
-    isObjectLike = isObjectLike_1;
-
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol$1(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && baseGetTag(value) == symbolTag);
-}
-
-var isSymbol_1 = isSymbol$1;
-
-var Symbol$1 = _Symbol,
-    arrayMap = _arrayMap,
-    isArray = isArray_1,
-    isSymbol = isSymbol_1;
-
-/** Used as references for various `Number` constants. */
-var INFINITY = 1 / 0;
-
-/** Used to convert symbols to primitives and strings. */
-var symbolProto = Symbol$1 ? Symbol$1.prototype : undefined,
-    symbolToString = symbolProto ? symbolProto.toString : undefined;
-
-/**
- * The base implementation of `_.toString` which doesn't convert nullish
- * values to empty strings.
- *
- * @private
- * @param {*} value The value to process.
- * @returns {string} Returns the string.
- */
-function baseToString$1(value) {
-  // Exit early for strings to avoid a performance hit in some environments.
-  if (typeof value == 'string') {
-    return value;
-  }
-  if (isArray(value)) {
-    // Recursively convert values (susceptible to call stack limits).
-    return arrayMap(value, baseToString$1) + '';
-  }
-  if (isSymbol(value)) {
-    return symbolToString ? symbolToString.call(value) : '';
-  }
-  var result = (value + '');
-  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
-}
-
-var _baseToString = baseToString$1;
-
-var baseToString = _baseToString;
-
-/**
- * Converts `value` to a string. An empty string is returned for `null`
- * and `undefined` values. The sign of `-0` is preserved.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to convert.
- * @returns {string} Returns the converted string.
- * @example
- *
- * _.toString(null);
- * // => ''
- *
- * _.toString(-0);
- * // => '-0'
- *
- * _.toString([1, 2, 3]);
- * // => '1,2,3'
- */
-function toString$1(value) {
-  return value == null ? '' : baseToString(value);
-}
-
-var toString_1 = toString$1;
-
-var toString = toString_1;
-
-/** Used to generate unique IDs. */
-var idCounter$1 = 0;
-
-/**
- * Generates a unique ID. If `prefix` is given, the ID is appended to it.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Util
- * @param {string} [prefix=''] The value to prefix the ID with.
- * @returns {string} Returns the unique ID.
- * @example
- *
- * _.uniqueId('contact_');
- * // => 'contact_104'
- *
- * _.uniqueId();
- * // => '105'
- */
-function uniqueId(prefix) {
-  var id = ++idCounter$1;
-  return toString(prefix) + id;
-}
-
-var uniqueId_1 = uniqueId;
-
 var Accordion$1 = /*#__PURE__*/React.forwardRef(function Accordion(_a, ref) {
   var _a$headerLevel = _a.headerLevel,
       headerLevel = _a$headerLevel === void 0 ? 'h2' : _a$headerLevel,
       _a$chevronPosition = _a.chevronPosition,
       chevronPosition = _a$chevronPosition === void 0 ? 'left' : _a$chevronPosition,
       children = _a.children,
-      props = __rest(_a, ["headerLevel", "chevronPosition", "children"]);
+      id = _a.id,
+      props = __rest(_a, ["headerLevel", "chevronPosition", "children", "id"]);
 
-  var accordionId = React.useMemo(function () {
-    return uniqueId_1('accordion-');
-  }, []);
+  var accordionId = useId(id, 'accordion');
   var AccordionItems = React.Children.map(children, function (child, index) {
     if (!child) return null;
     return /*#__PURE__*/React.cloneElement(child, {
@@ -8342,6 +8021,7 @@ var typography$c = tokens$6.typography.ui.accordion_header,
     disabledIconColor$1 = _tokens$colors$intera$b.disabled__fill.rgba,
     disabledColor$2 = _tokens$colors$intera$b.disabled__text.rgba,
     focusOutlineColor$6 = _tokens$colors$intera$b.focus.rgba,
+    defaultIconColor = _tokens$colors$d.text.static_icons__default.rgba,
     mediumSpacing = tokens$6.spacings.comfortable.medium;
 var accordion = {
   border: {
@@ -8399,6 +8079,11 @@ var accordion = {
         right: mediumSpacing,
         top: mediumSpacing
       }
+    },
+    icon: {
+      typography: {
+        color: defaultIconColor
+      }
     }
   }
 };
@@ -8429,7 +8114,8 @@ var AccordionHeaderTitle = /*#__PURE__*/React.forwardRef(function AccordionHeade
 
 var _tokens$entities$6 = accordion.entities,
     header$2 = _tokens$entities$6.header,
-    chevronToken = _tokens$entities$6.chevron;
+    chevronToken = _tokens$entities$6.chevron,
+    iconToken = _tokens$entities$6.icon;
 var StyledAccordionHeader = styled__default['default'].div.attrs(function (_ref) {
   var panelId = _ref.panelId,
       isExpanded = _ref.isExpanded,
@@ -8445,7 +8131,7 @@ var StyledAccordionHeader = styled__default['default'].div.attrs(function (_ref)
 }).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", ""], typographyTemplate(header$2.typography), bordersTemplate(accordion.border), spacingsTemplate(header$2.spacings), outlineTemplate(header$2.states.focus.outline), function (_ref2) {
+})(["", " ", " ", " &[data-focus-visible-added]:focus{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header$2.typography), bordersTemplate(accordion.border), spacingsTemplate(header$2.spacings), outlineTemplate(header$2.states.focus.outline), function (_ref2) {
   var parentIndex = _ref2.parentIndex;
   return parentIndex === 0 ? null : 'none';
 }, header$2.background, header$2.height, function (_ref3) {
@@ -8456,11 +8142,13 @@ var StyledAccordionHeader = styled__default['default'].div.attrs(function (_ref)
   }) : styled.css({
     color: header$2.typography.color,
     cursor: 'pointer',
-    ':hover': {
-      background: header$2.states.hover.background
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: header$2.states.hover.background
+      }
     }
   });
-});
+}, iconToken.typography.color);
 var StyledIcon$1 = styled__default['default'](Icon$1).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-1"
@@ -8612,11 +8300,10 @@ var Tabs$1 = /*#__PURE__*/React.forwardRef(function Tabs(_a, ref) {
       onFocus = _a.onFocus,
       _a$variant = _a.variant,
       variant = _a$variant === void 0 ? 'minWidth' : _a$variant,
-      props = __rest(_a, ["activeTab", "onChange", "onBlur", "onFocus", "variant"]);
+      id = _a.id,
+      props = __rest(_a, ["activeTab", "onChange", "onBlur", "onFocus", "variant", "id"]);
 
-  var tabsId = React.useMemo(function () {
-    return uniqueId_1('tabs-');
-  }, []);
+  var tabsId = useId(id, 'tabs');
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -8869,7 +8556,7 @@ var StyledTab = styled__default['default'].button.attrs(function (_ref) {
 }).withConfig({
   displayName: "Tab__StyledTab",
   componentId: "sc-scjkct-0"
-})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}&[data-hover],&:hover{color:", ";", "}", " ", ""], tab.height, spacingsTemplate(tab.spacings), function (_ref2) {
+})(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), function (_ref2) {
   var active = _ref2.active;
   return active ? tab.states.active.typography.color : tab.typography.color;
 }, tab.background, outlineTemplate(tab.states.focus.outline), function (_ref3) {
@@ -9396,8 +9083,8 @@ Dialog.CustomContent.displayName = 'Dialog.CustomContent';
 
 var background$a = tokens$6.colors.ui.background__scrim.rgba;
 var scrim = {
-  width: '100vw',
-  height: '100vh',
+  width: '100%',
+  height: '100%',
   background: background$a
 };
 
@@ -9423,6 +9110,8 @@ var Scrim = /*#__PURE__*/React.forwardRef(function Scrim(_a, ref) {
     isDismissable: isDismissable,
     ref: ref
   });
+  var overflowState = document.body.style.overflow;
+  useHideBodyScroll(overflowState);
   useGlobalKeyPress('Escape', function (e) {
     if (isDismissable && onClose) {
       onClose(e, false);
@@ -9571,7 +9260,7 @@ var TableOfContents$1 = /*#__PURE__*/React.forwardRef(function TableOfContents(_
 var StyledLinkItem = styled__default['default'].li.withConfig({
   displayName: "LinkItem__StyledLinkItem",
   componentId: "sc-1tfuad4-0"
-})(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}&:hover{", " background:", ";", " svg{fill:", ";}}&:active{outline:none;}}"], typographyTemplate(tableOfContents.entities.links.typography), spacingsTemplate(tableOfContents.entities.links.spacings), tableOfContents.entities.links.typography.lineHeight, tableOfContents.entities.links.width, tableOfContents.entities.icon.background, tableOfContents.entities.icon.spacings.right, tableOfContents.entities.span.maxWidth, outlineTemplate(tableOfContents.states.focus.outline), typographyTemplate(tableOfContents.states.hover.typography), tableOfContents.states.hover.background, bordersTemplate(tableOfContents.states.hover.border), tableOfContents.states.hover.entities.icon.background);
+})(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], typographyTemplate(tableOfContents.entities.links.typography), spacingsTemplate(tableOfContents.entities.links.spacings), tableOfContents.entities.links.typography.lineHeight, tableOfContents.entities.links.width, tableOfContents.entities.icon.background, tableOfContents.entities.icon.spacings.right, tableOfContents.entities.span.maxWidth, outlineTemplate(tableOfContents.states.focus.outline), typographyTemplate(tableOfContents.states.hover.typography), tableOfContents.states.hover.background, bordersTemplate(tableOfContents.states.hover.border), tableOfContents.states.hover.entities.icon.background);
 var LinkItem = /*#__PURE__*/React.forwardRef(function LinkItem(_a, ref) {
   var children = _a.children,
       props = __rest(_a, ["children"]);
@@ -9817,9 +9506,9 @@ var StyledChips = styled__default['default'].div.attrs(function (_ref) {
 }).withConfig({
   displayName: "Chip__StyledChips",
   componentId: "sc-wzsllq-0"
-})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}&:hover{color:", ";svg{fill:", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$6, height$1, typography$9.color, states$3.hover.typography.color, states$3.hover.typography.color, outlineTemplate(states$3.focus.outline), bordersTemplate(border$2), spacingsTemplate(spacings$2), typographyTemplate(typography$9), function (_ref2) {
+})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;z-index:10;svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";svg{fill:", ";}}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$6, height$1, typography$9.color, states$3.hover.typography.color, states$3.hover.typography.color, outlineTemplate(states$3.focus.outline), bordersTemplate(border$2), spacingsTemplate(spacings$2), typographyTemplate(typography$9), function (_ref2) {
   var clickable = _ref2.clickable;
-  return clickable && styled.css(["&:hover{cursor:pointer;}"]);
+  return clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;}}"]);
 }, function (_ref3) {
   var variant = _ref3.variant;
 
@@ -9828,14 +9517,14 @@ var StyledChips = styled__default['default'].div.attrs(function (_ref) {
       return styled.css(["background:", ";"], states$3.active.background);
 
     case 'error':
-      return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";&:hover{border-color:", ";color:", ";svg{fill:", ";}}"], error.background, error.typography.color, error.entities.icon.typography.color, bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
+      return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, bordersTemplate(error.border), error.states.hover.typography.color, error.states.hover.typography.color, error.states.hover.typography.color);
 
     default:
       return '';
   }
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}"], background$6, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color);
+  return disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$6, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color, states$3.disabled.typography.color);
 }, function (_ref5) {
   var deletable = _ref5.deletable;
   return deletable && styled.css(["padding-right:4px;"]);
@@ -10056,7 +9745,7 @@ var Container$2 = styled__default['default'].span.withConfig({
   return isFocused && styled.css(["", ""], bordersTemplate(states$2.focus.border));
 }, placeholder.typography.color, function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled ? styled.css(["cursor:not-allowed;"]) : styled.css(["&:hover{", " cursor:text;}"], bordersTemplate(states$2.focus.border));
+  return disabled ? styled.css(["cursor:not-allowed;"]) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{", " cursor:text;}}"], bordersTemplate(states$2.focus.border));
 }, clickbound.offset, clickbound.height);
 var Input$4 = styled__default['default'].input.withConfig({
   displayName: "Search__Input",
@@ -10070,7 +9759,7 @@ var InsideButton = styled__default['default'].div.withConfig({
   componentId: "sc-v8l23u-2"
 })(["", " display:flex;align-items:center;visibility:hidden;z-index:1;padding:4px;height:16px;width:16px;position:relative;&::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}", ""], bordersTemplate(icon$1.border), icon$1.clickbound.offset.top, icon$1.clickbound.height, function (_ref4) {
   var isActive = _ref4.isActive;
-  return isActive && styled.css(["visibility:visible;&:hover{cursor:pointer;background:", ";}"], icon$1.states.hover.background);
+  return isActive && styled.css(["visibility:visible;@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], icon$1.states.hover.background);
 });
 var Search = /*#__PURE__*/React.forwardRef(function Search(_a, ref) {
   var _onChange = _a.onChange,
@@ -10376,8 +10065,8 @@ var handle$1 = slider.entities.handle,
     _disabled = slider.states.disabled;
 var track$1 = styled.css(["width:100%;height:100%;cursor:pointer;background:none;"]);
 var thumb = styled.css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], bordersTemplate(handle$1.border), handle$1.height, handle$1.width, handle$1.background);
-var thumbHover = styled.css(["box-shadow:0px 0px 0px 6px ", ";border-color:", ";"], handle$1.states.hover.background, handle$1.states.hover.border.color);
-var thumbHoverAndDisabled = styled.css(["cursor:not-allowed;box-shadow:none;"]);
+var thumbHover = styled.css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle$1.states.hover.background, handle$1.states.hover.border.color);
+var thumbHoverAndDisabled = styled.css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
 var thumbDisabled = styled.css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.color);
 var StyledSliderInput = styled__default['default'].input.attrs(function () {
   return {
@@ -10433,7 +10122,7 @@ var wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;
 var RangeWrapper = styled__default['default'].div.withConfig({
   displayName: "Slider__RangeWrapper",
   componentId: "sc-n1grrg-0"
-})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:hover:not([disabled]){", " &::before,&::after{background:", ";}}"], function (_ref) {
+})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], function (_ref) {
   var valA = _ref.valA;
   return valA;
 }, function (_ref2) {
@@ -10449,10 +10138,10 @@ var RangeWrapper = styled__default['default'].div.withConfig({
   var disabled = _ref5.disabled;
   return disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background;
 }, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
-var Wrapper$2 = styled__default['default'].div.withConfig({
+var Wrapper = styled__default['default'].div.withConfig({
   displayName: "Slider__Wrapper",
   componentId: "sc-n1grrg-1"
-})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:hover:not([disabled]){", " &::after{background:", ";}}"], function (_ref6) {
+})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], function (_ref6) {
   var min = _ref6.min;
   return min;
 }, function (_ref7) {
@@ -10509,7 +10198,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(_a, ref) {
 
   var onValueChange = function onValueChange(event, valueArrIdx) {
     var target = event.target;
-    var changedValue = parseInt(target.value, 10);
+    var changedValue = parseFloat(target.value);
 
     if (isRangeSlider) {
       var newValue = sliderValue.slice();
@@ -10562,8 +10251,8 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(_a, ref) {
     var maxValue = maxRange.current.value;
     var diff = max - min;
     var normX = x / inputWidth * diff + min;
-    var maxX = Math.abs(normX - parseInt(maxValue));
-    var minX = Math.abs(normX - parseInt(minValue));
+    var maxX = Math.abs(normX - parseFloat(maxValue));
+    var minX = Math.abs(normX - parseFloat(minValue));
 
     if (minX > maxX) {
       minRange.current.style.zIndex = '10';
@@ -10648,7 +10337,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(_a, ref) {
       }), void 0), minMaxValues && jsxRuntime.exports.jsx(MinMax, {
         children: getFormattedText(max)
       }, void 0)]
-    }), void 0) : jsxRuntime.exports.jsxs(Wrapper$2, Object.assign({}, rest, {
+    }), void 0) : jsxRuntime.exports.jsxs(Wrapper, Object.assign({}, rest, {
       ref: ref,
       max: max,
       min: min,
@@ -11719,7 +11408,7 @@ var Separator = styled__default['default'](Typography).withConfig({
 var Collapsed = styled__default['default'](Typography).withConfig({
   displayName: "Breadcrumbs__Collapsed",
   componentId: "sc-12awlbz-3"
-})(["&:hover{text-decoration:underline;color:", ";}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
 var Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs(_a, ref) {
   var children = _a.children,
       collapse = _a.collapse,
@@ -11803,7 +11492,7 @@ var states = breadcrumbs.states,
 var StyledTypography = styled__default['default'](Typography).withConfig({
   displayName: "Breadcrumb__StyledTypography",
   componentId: "sc-10nvwte-0"
-})(["&:hover{text-decoration:underline;color:", ";cursor:pointer;}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography$4.color, function (_ref) {
+})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;text-decoration:none;color:", ";", ""], states.hover.typography.color, typography$4.color, function (_ref) {
   var maxWidth = _ref.maxWidth;
   return styled.css({
     maxWidth: maxWidth
@@ -11816,6 +11505,7 @@ var Breadcrumb = /*#__PURE__*/React.forwardRef(function Breadcrumb(_a, ref) {
       other = __rest(_a, ["children", "maxWidth", "href"]);
 
   var props = Object.assign(Object.assign({}, other), {
+    href: href,
     ref: ref,
     maxWidth: maxWidth
   });
@@ -12013,7 +11703,7 @@ var ListItem$2 = styled__default['default'].li.attrs(function (_ref) {
   return active && styled.css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}&:hover{cursor:not-allowed;}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["&:hover{z-index:1;cursor:pointer;background:", ";}&:focus{", "}"], hover.background, outlineTemplate(focus.outline));
+  return disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{", "}"], hover.background, outlineTemplate(focus.outline));
 });
 var Content = styled__default['default'].div.withConfig({
   displayName: "MenuItem__Content",
@@ -12097,18 +11787,16 @@ var MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(props)
   }, void 0);
 });
 
-var isFragment = function isFragment(object) {
-  if (object.type) {
-    return object.type === React.Fragment;
-  }
-
-  return object === React.Fragment;
-};
-
 var List = styled__default['default'].ul.withConfig({
   displayName: "MenuList__List",
   componentId: "sc-104rzof-0"
 })(["position:relative;list-style:none;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
+
+function isIndexable(item) {
+  if ( /*#__PURE__*/React.isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
+  return false;
+}
+
 var MenuList = /*#__PURE__*/React.forwardRef(function MenuList(_a, ref) {
   var children = _a.children,
       focus = _a.focus,
@@ -12118,19 +11806,30 @@ var MenuList = /*#__PURE__*/React.forwardRef(function MenuList(_a, ref) {
       focusedIndex = _useMenu.focusedIndex,
       setFocusedIndex = _useMenu.setFocusedIndex;
 
-  var pickedChildren = isFragment(children) ? children.props.children : children;
-  var updatedChildren = React.Children.map(pickedChildren, function (child, index) {
-    return /*#__PURE__*/React.cloneElement(child, {
-      index: index
+  var index = -1;
+  var focusableIndexs = React.useMemo(function () {
+    return [];
+  }, []);
+  var updatedChildren = React.useMemo(function () {
+    return React.Children.map(children, function (child) {
+      if (child.type === MenuSection) {
+        var updatedGrandChildren = React.Children.map(child.props.children, function (grandChild) {
+          index++;
+          if (isIndexable(grandChild)) focusableIndexs.push(index);
+          return /*#__PURE__*/React.cloneElement(grandChild, {
+            index: index
+          });
+        });
+        return /*#__PURE__*/React.cloneElement(child, null, updatedGrandChildren);
+      } else {
+        index++;
+        if (isIndexable(child)) focusableIndexs.push(index);
+        return /*#__PURE__*/React.cloneElement(child, {
+          index: index
+        });
+      }
     });
-  });
-  var focusableIndexs = (updatedChildren || []).filter(function (x) {
-    return !x.props.disabled;
-  }).filter(function (x) {
-    return /*#__PURE__*/React.isValidElement(x) && (x.type === MenuSection || x.type === MenuItem);
-  }).map(function (x) {
-    return x.props.index;
-  });
+  }, [children, focusableIndexs, index]);
   var firstFocusIndex = focusableIndexs[0];
   var lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
   React.useEffect(function () {
@@ -12157,10 +11856,12 @@ var MenuList = /*#__PURE__*/React.forwardRef(function MenuList(_a, ref) {
     event.stopPropagation();
 
     if (key === 'ArrowDown') {
+      event.preventDefault();
       handleMenuItemChange('down', firstFocusIndex);
     }
 
     if (key === 'ArrowUp') {
+      event.preventDefault();
       handleMenuItemChange('up', lastFocusIndex);
     }
   };
@@ -12223,7 +11924,9 @@ var Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(_a, ref) {
       open = _a.open,
       _a$placement = _a.placement,
       placement = _a$placement === void 0 ? 'auto' : _a$placement,
-      rest = __rest(_a, ["anchorEl", "open", "placement"]);
+      style = _a.style,
+      className = _a.className,
+      rest = __rest(_a, ["anchorEl", "open", "placement", "style", "className"]);
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -12237,7 +11940,7 @@ var Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(_a, ref) {
 
   var token = useToken({
     density: density
-  }, menu)();
+  }, menu);
 
   var _usePopper = usePopper(anchorEl, containerEl, null, placement, 4),
       styles = _usePopper.styles,
@@ -12245,7 +11948,8 @@ var Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(_a, ref) {
 
   var props = Object.assign({
     open: open,
-    style: styles.popper
+    style: Object.assign(Object.assign({}, styles.popper), style),
+    className: className
   }, attributes.popper);
   var menuProps = Object.assign(Object.assign({}, rest), {
     anchorEl: anchorEl,
@@ -12442,7 +12146,15 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_a, ref) {
     }
   };
 
+  var isMounted = useIsMounted();
   var items = PaginationControl(pages, activePage);
+  React.useLayoutEffect(function () {
+    if (isMounted) {
+      setActivePage(1);
+      onChange === null || onChange === void 0 ? void 0 : onChange(null, 1);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [itemsPerPage]);
   var props = Object.assign({
     ref: ref,
     withItemIndicator: withItemIndicator
@@ -12599,7 +12311,7 @@ var NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(_a, ref)
 
   var token = useToken({
     density: density
-  }, nativeselect)();
+  }, nativeselect);
   var containerProps = {
     ref: ref,
     className: className
@@ -17641,7 +17353,7 @@ var SingleSelect = /*#__PURE__*/React.forwardRef(function SingleSelect(_a, ref)
 
   var token = useToken({
     density: density
-  }, select)();
+  }, select);
   React.useEffect(function () {
     setInputItems(items);
   }, [items]);
@@ -17760,7 +17472,10 @@ var _tokens$colors$intera$2 = tokens$6.colors.interactive,
     labelTypography$2 = tokens$6.typography.navigation.menu_title,
     _tokens$spacings$comf$1 = tokens$6.spacings.comfortable,
     medium_small$2 = _tokens$spacings$comf$1.medium_small,
-    x_small$1 = _tokens$spacings$comf$1.x_small;
+    x_small$1 = _tokens$spacings$comf$1.x_small,
+    _tokens$clickbounds$1 = tokens$6.clickbounds,
+    clicboundSize$1 = _tokens$clickbounds$1.default__base,
+    compactClickboundSize$1 = _tokens$clickbounds$1.compact__standard;
 var checkbox = {
   background: primaryColor$1,
   typography: labelTypography$2,
@@ -17770,6 +17485,9 @@ var checkbox = {
     left: medium_small$2,
     right: medium_small$2
   },
+  clickbound: {
+    height: clicboundSize$1
+  },
   states: {
     hover: {
       background: primaryHoverAlt$2
@@ -17787,13 +17505,6 @@ var checkbox = {
       }
     }
   },
-  entities: {
-    label: {
-      spacings: {
-        left: medium_small$2
-      }
-    }
-  },
   modes: {
     compact: {
       spacings: {
@@ -17802,6 +17513,9 @@ var checkbox = {
         left: x_small$1,
         right: x_small$1
       },
+      clickbound: {
+        height: compactClickboundSize$1
+      },
       states: {
         focus: {
           outline: {
@@ -17837,14 +17551,21 @@ var Input$3 = styled__default['default'].input.attrs(function (_ref2) {
 }).withConfig({
   displayName: "Input",
   componentId: "sc-rqj7qf-1"
-})(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], function (_ref3) {
-  var theme = _ref3.theme;
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], function (_ref3) {
+  var theme = _ref3.theme,
+      iconSize = _ref3.iconSize;
+  return parseFloat(theme.clickbound.height) / iconSize;
+}, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return outlineTemplate(theme.states.focus.outline);
 });
-var Svg$1 = styled__default['default'].svg.attrs(function (_ref4) {
-  var height = _ref4.height,
-      width = _ref4.width,
-      fill = _ref4.fill;
+var Svg$1 = styled__default['default'].svg.attrs(function (_ref6) {
+  var height = _ref6.height,
+      width = _ref6.width,
+      fill = _ref6.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
@@ -17855,15 +17576,15 @@ var Svg$1 = styled__default['default'].svg.attrs(function (_ref4) {
 }).withConfig({
   displayName: "Input__Svg",
   componentId: "sc-rqj7qf-2"
-})([""]);
+})(["grid-area:input;pointer-events:none;"]);
 var InputWrapper$1 = styled__default['default'].span.withConfig({
   displayName: "Input__InputWrapper",
   componentId: "sc-rqj7qf-3"
-})(["display:inline-flex;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref5) {
-  var theme = _ref5.theme;
+})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;", " @media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref7) {
+  var theme = _ref7.theme;
   return spacingsTemplate(theme.spacings);
-}, function (_ref6) {
-  var disabled = _ref6.disabled;
+}, function (_ref8) {
+  var disabled = _ref8.disabled;
   return disabled ? 'transparent' : checkbox.states.hover.background;
 });
 var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_a, ref) {
@@ -17877,7 +17598,7 @@ var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_a, ref
 
   var token = useToken({
     density: density
-  }, checkbox)();
+  }, checkbox);
   var iconSize = 24;
   var fill = disabled ? checkbox.states.disabled.background : checkbox.background;
   var inputWrapperProps = {
@@ -17891,7 +17612,9 @@ var CheckboxInput = /*#__PURE__*/React.forwardRef(function CheckboxInput(_a, ref
     theme: token
   }, {
     children: jsxRuntime.exports.jsxs(InputWrapper$1, Object.assign({}, inputWrapperProps, {
-      children: [jsxRuntime.exports.jsx(Input$3, Object.assign({}, inputProps), void 0), indeterminate ? jsxRuntime.exports.jsx(Svg$1, Object.assign({
+      children: [jsxRuntime.exports.jsx(Input$3, Object.assign({
+        iconSize: iconSize
+      }, inputProps), void 0), indeterminate ? jsxRuntime.exports.jsx(Svg$1, Object.assign({
         width: iconSize,
         height: iconSize,
         viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
@@ -17956,7 +17679,7 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect(_a, ref) {
 
   var token = useToken({
     density: density
-  }, multiSelect)();
+  }, multiSelect);
   var multipleSelectionProps = {
     initialSelectedItems: initialSelectedItems,
     onSelectedItemsChange: function onSelectedItemsChange(changes) {
@@ -18121,8 +17844,8 @@ var MultiSelect = /*#__PURE__*/React.forwardRef(function MultiSelect(_a, ref) {
   }), void 0);
 });
 
-var StyledCheckbox = styled__default['default'].label.withConfig({
-  displayName: "Checkbox__StyledCheckbox",
+var StyledLabel$2 = styled__default['default'].label.withConfig({
+  displayName: "Checkbox__StyledLabel",
   componentId: "sc-yg6l8h-0"
 })(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref) {
   var disabled = _ref.disabled;
@@ -18131,7 +17854,7 @@ var StyledCheckbox = styled__default['default'].label.withConfig({
 var LabelText$1 = styled__default['default'].span.withConfig({
   displayName: "Checkbox__LabelText",
   componentId: "sc-yg6l8h-1"
-})(["", ";", ""], typographyTemplate(checkbox.typography), spacingsTemplate(checkbox.entities.label.spacings));
+})(["", ";"], typographyTemplate(checkbox.typography));
 var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_a, ref) {
   var label = _a.label,
       _a$disabled = _a.disabled,
@@ -18140,7 +17863,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_a, ref) {
       className = _a.className,
       rest = __rest(_a, ["label", "disabled", "indeterminate", "className"]);
 
-  return jsxRuntime.exports.jsxs(StyledCheckbox, Object.assign({
+  return label ? jsxRuntime.exports.jsxs(StyledLabel$2, Object.assign({
     disabled: disabled,
     className: className
   }, {
@@ -18148,9 +17871,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_a, ref) {
       disabled: disabled,
       ref: ref,
       indeterminate: indeterminate
-    }), void 0), label && jsxRuntime.exports.jsx(LabelText$1, {
+    }), void 0), jsxRuntime.exports.jsx(LabelText$1, {
       children: label
     }, void 0)]
+  }), void 0) : jsxRuntime.exports.jsx(CheckboxInput, Object.assign({}, rest, {
+    disabled: disabled,
+    ref: ref,
+    indeterminate: indeterminate
   }), void 0);
 });
 Checkbox.displayName = 'Checkbox';
@@ -18163,7 +17890,10 @@ var _tokens$colors$intera$1 = tokens$6.colors.interactive,
     labelTypography$1 = tokens$6.typography.navigation.menu_title,
     _tokens$spacings$comf = tokens$6.spacings.comfortable,
     medium_small$1 = _tokens$spacings$comf.medium_small,
-    x_small = _tokens$spacings$comf.x_small;
+    x_small = _tokens$spacings$comf.x_small,
+    _tokens$clickbounds = tokens$6.clickbounds,
+    clicboundSize = _tokens$clickbounds.default__base,
+    compactClickboundSize = _tokens$clickbounds.compact__standard;
 var comfortable$1 = {
   background: primaryColor,
   typography: labelTypography$1,
@@ -18173,6 +17903,9 @@ var comfortable$1 = {
     left: medium_small$1,
     right: medium_small$1
   },
+  clickbound: {
+    height: clicboundSize
+  },
   states: {
     hover: {
       background: primaryHoverAlt$1
@@ -18190,13 +17923,6 @@ var comfortable$1 = {
       }
     }
   },
-  entities: {
-    label: {
-      spacings: {
-        left: medium_small$1
-      }
-    }
-  },
   modes: {
     compact: {
       spacings: {
@@ -18205,6 +17931,9 @@ var comfortable$1 = {
         left: x_small,
         right: x_small
       },
+      clickbound: {
+        height: compactClickboundSize
+      },
       states: {
         focus: {
           outline: {
@@ -18229,19 +17958,26 @@ var Input$2 = styled__default['default'].input.attrs(function (_ref) {
 }).withConfig({
   displayName: "Radio__Input",
   componentId: "sc-we59oz-0"
-})(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], function (_ref2) {
-  var theme = _ref2.theme;
+})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], function (_ref2) {
+  var theme = _ref2.theme,
+      iconSize = _ref2.iconSize;
+  return parseFloat(theme.clickbound.height) / iconSize;
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref4) {
+  var theme = _ref4.theme;
   return outlineTemplate(theme.states.focus.outline);
 });
-var StyledRadio = styled__default['default'].label.withConfig({
-  displayName: "Radio__StyledRadio",
+var StyledLabel$1 = styled__default['default'].label.withConfig({
+  displayName: "Radio__StyledLabel",
   componentId: "sc-we59oz-1"
-})(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref3) {
-  var disabled = _ref3.disabled;
+})(["display:inline-flex;align-items:center;cursor:", ";"], function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 });
-var StyledPath = styled__default['default'].path.attrs(function (_ref4) {
-  var icon = _ref4.icon;
+var StyledPath = styled__default['default'].path.attrs(function (_ref6) {
+  var icon = _ref6.icon;
   return {
     fillRule: 'evenodd',
     clipRule: 'evenodd',
@@ -18251,10 +17987,10 @@ var StyledPath = styled__default['default'].path.attrs(function (_ref4) {
   displayName: "Radio__StyledPath",
   componentId: "sc-we59oz-2"
 })([""]);
-var Svg = styled__default['default'].svg.attrs(function (_ref5) {
-  var height = _ref5.height,
-      width = _ref5.width,
-      fill = _ref5.fill;
+var Svg = styled__default['default'].svg.attrs(function (_ref7) {
+  var height = _ref7.height,
+      width = _ref7.width,
+      fill = _ref7.fill;
   return {
     name: null,
     xmlns: 'http://www.w3.org/2000/svg',
@@ -18265,19 +18001,22 @@ var Svg = styled__default['default'].svg.attrs(function (_ref5) {
 }).withConfig({
   displayName: "Radio__Svg",
   componentId: "sc-we59oz-3"
-})([""]);
+})(["grid-area:input;pointer-events:none;"]);
 var LabelText = styled__default['default'].span.withConfig({
   displayName: "Radio__LabelText",
   componentId: "sc-we59oz-4"
-})(["", " ", ""], typographyTemplate(comfortable$1.typography), spacingsTemplate(comfortable$1.entities.label.spacings));
+})(["", ""], typographyTemplate(comfortable$1.typography));
 var InputWrapper = styled__default['default'].span.withConfig({
   displayName: "Radio__InputWrapper",
   componentId: "sc-we59oz-5"
-})(["", " display:inline-flex;border-radius:50%;@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref6) {
-  var theme = _ref6.theme;
+})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;border-radius:50%;cursor:", ";@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], function (_ref8) {
+  var theme = _ref8.theme;
   return spacingsTemplate(theme.spacings);
-}, function (_ref7) {
-  var disabled = _ref7.disabled;
+}, function (_ref9) {
+  var disabled = _ref9.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref10) {
+  var disabled = _ref10.disabled;
   return disabled ? 'transparent' : comfortable$1.states.hover.background;
 });
 var Radio = /*#__PURE__*/React.forwardRef(function Radio(_a, ref) {
@@ -18292,13 +18031,30 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(_a, ref) {
 
   var token = useToken({
     density: density
-  }, comfortable$1)();
+  }, comfortable$1);
   var iconSize = 24;
   var fill = disabled ? comfortable$1.states.disabled.background : comfortable$1.background;
+  var renderSVG = React.useMemo(function () {
+    return jsxRuntime.exports.jsxs(Svg, Object.assign({
+      width: iconSize,
+      height: iconSize,
+      viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
+      fill: fill,
+      "aria-hidden": true
+    }, {
+      children: [jsxRuntime.exports.jsx(StyledPath, {
+        icon: radio_button_selected,
+        name: "selected"
+      }, void 0), jsxRuntime.exports.jsx(StyledPath, {
+        icon: radio_button_unselected,
+        name: "unselected"
+      }, void 0)]
+    }), void 0);
+  }, [fill]);
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
-    children: jsxRuntime.exports.jsxs(StyledRadio, Object.assign({
+    children: label ? jsxRuntime.exports.jsxs(StyledLabel$1, Object.assign({
       disabled: disabled,
       className: className
     }, {
@@ -18307,25 +18063,20 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(_a, ref) {
       }, {
         children: [jsxRuntime.exports.jsx(Input$2, Object.assign({}, rest, {
           ref: ref,
-          disabled: disabled
-        }), void 0), jsxRuntime.exports.jsxs(Svg, Object.assign({
-          width: iconSize,
-          height: iconSize,
-          viewBox: "0 0 ".concat(iconSize, " ").concat(iconSize),
-          fill: fill,
-          "aria-hidden": true
-        }, {
-          children: [jsxRuntime.exports.jsx(StyledPath, {
-            icon: radio_button_selected,
-            name: "selected"
-          }, void 0), jsxRuntime.exports.jsx(StyledPath, {
-            icon: radio_button_unselected,
-            name: "unselected"
-          }, void 0)]
-        }), void 0)]
-      }), void 0), label && jsxRuntime.exports.jsx(LabelText, {
+          disabled: disabled,
+          iconSize: iconSize
+        }), void 0), renderSVG]
+      }), void 0), jsxRuntime.exports.jsx(LabelText, {
         children: label
       }, void 0)]
+    }), void 0) : jsxRuntime.exports.jsxs(InputWrapper, Object.assign({
+      disabled: disabled
+    }, {
+      children: [jsxRuntime.exports.jsx(Input$2, Object.assign({}, rest, {
+        ref: ref,
+        disabled: disabled,
+        iconSize: iconSize
+      }), void 0), renderSVG]
     }), void 0)
   }), void 0);
 });
@@ -18342,7 +18093,7 @@ var BaseInputWrapper = styled__default['default'].span.withConfig({
 
   var _a, _b;
 
-  return styled.css(["width:", ";height:", ";border-radius:50%;position:relative;&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}"], width, height, (_a = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _a === void 0 ? void 0 : _a.top, (_b = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _b === void 0 ? void 0 : _b.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height);
+  return styled.css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;pointer-events:none;&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}&::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}"], width, height, (_a = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _a === void 0 ? void 0 : _a.top, (_b = clickbound === null || clickbound === void 0 ? void 0 : clickbound.offset) === null || _b === void 0 ? void 0 : _b.left, clickbound === null || clickbound === void 0 ? void 0 : clickbound.width, clickbound === null || clickbound === void 0 ? void 0 : clickbound.height);
 });
 var BaseInput = styled__default['default'].input.attrs(function (_ref2) {
   var _ref2$type = _ref2.type,
@@ -18354,102 +18105,89 @@ var BaseInput = styled__default['default'].input.attrs(function (_ref2) {
   displayName: "Switchstyles__BaseInput",
   componentId: "sc-x39lde-1"
 })(function (_ref3) {
-  var theme = _ref3.theme;
-  return styled.css(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}"], outlineTemplate(theme.states.focus.outline));
+  var disabled = _ref3.disabled,
+      theme = _ref3.theme;
+  return styled.css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline));
 });
+var GridWrapper = styled__default['default'].span.withConfig({
+  displayName: "Switchstyles__GridWrapper",
+  componentId: "sc-x39lde-2"
+})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;"]);
 
-var Wrapper$1 = styled__default['default'](BaseInputWrapper).withConfig({
-  displayName: "SwitchSmall__Wrapper",
+var Input$1 = styled__default['default'](BaseInput).withConfig({
+  displayName: "SwitchSmall__Input",
   componentId: "sc-1a99mis-0"
 })(function (_ref) {
-  var isDisabled = _ref.isDisabled,
-      theme = _ref.theme;
-  return styled.css(["@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}}"], isDisabled ? 'transparent' : theme.states.hover.background);
+  var disabled = _ref.disabled,
+      _ref$theme = _ref.theme,
+      states = _ref$theme.states,
+      _ref$theme$entities = _ref$theme.entities,
+      handle = _ref$theme$entities.handle,
+      track = _ref$theme$entities.track;
+  return styled.css(["&[data-focus-visible-added]:focus + span{outline-offset:", ";}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], states.focus.outline.offset, disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background);
 });
-var Input$1 = styled__default['default'](BaseInput).withConfig({
-  displayName: "SwitchSmall__Input",
+var Track$1 = styled__default['default'].span.withConfig({
+  displayName: "SwitchSmall__Track",
   componentId: "sc-1a99mis-1"
 })(function (_ref2) {
-  var disabled = _ref2.disabled,
+  var isDisabled = _ref2.isDisabled,
       _ref2$theme = _ref2.theme,
       states = _ref2$theme.states,
-      _ref2$theme$entities = _ref2$theme.entities,
-      handle = _ref2$theme$entities.handle,
-      track = _ref2$theme$entities.track;
-  return styled.css(["&[data-focus-visible-added]:focus + span{outline-offset:", ";}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}"], states.focus.outline.offset, disabled ? states.disabled.background : track.states.active.background, handle.background);
-});
-var Track$1 = styled__default['default'].span.withConfig({
-  displayName: "SwitchSmall__Track",
-  componentId: "sc-1a99mis-2"
-})(function (_ref3) {
-  var isDisabled = _ref3.isDisabled,
-      _ref3$theme = _ref3.theme,
-      states = _ref3$theme.states,
-      track = _ref3$theme.entities.track;
+      track = _ref2$theme.entities.track;
   return styled.css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, isDisabled ? states.disabled.background : track.states.disabled.background);
 });
 var Handle$1 = styled__default['default'].span.withConfig({
   displayName: "SwitchSmall__Handle",
-  componentId: "sc-1a99mis-3"
-})(function (_ref4) {
-  var handle = _ref4.theme.entities.handle;
+  componentId: "sc-1a99mis-2"
+})(function (_ref3) {
+  var handle = _ref3.theme.entities.handle;
   return styled.css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height);
 });
 var SwitchSmall = /*#__PURE__*/React.forwardRef(function SwitchSmall(_a, ref) {
   var disabled = _a.disabled,
       rest = __rest(_a, ["disabled"]);
 
-  return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
+  return jsxRuntime.exports.jsxs(GridWrapper, {
     children: [jsxRuntime.exports.jsx(Input$1, Object.assign({}, rest, {
       ref: ref,
       disabled: disabled
-    }), void 0), jsxRuntime.exports.jsxs(Wrapper$1, Object.assign({
-      isDisabled: disabled
-    }, {
+    }), void 0), jsxRuntime.exports.jsxs(BaseInputWrapper, {
       children: [jsxRuntime.exports.jsx(Track$1, {
         isDisabled: disabled
       }, void 0), jsxRuntime.exports.jsx(Handle$1, {}, void 0)]
-    }), void 0)]
+    }, void 0)]
   }, void 0);
 });
 SwitchSmall.displayName = 'SwitchSmall';
 
-var Wrapper = styled__default['default'](BaseInputWrapper).withConfig({
-  displayName: "SwitchDefault__Wrapper",
+var Input = styled__default['default'](BaseInput).withConfig({
+  displayName: "SwitchDefault__Input",
   componentId: "sc-16ym5pn-0"
 })(function (_ref) {
-  var isDisabled = _ref.isDisabled,
+  var disabled = _ref.disabled,
       theme = _ref.theme;
-  return styled.css(["@media (hover:hover) and (pointer:fine){&:hover{background-color:", ";}&:hover > span:last-child{background-color:", ";}}"], isDisabled ? 'transparent' : theme.states.hover.background, isDisabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background);
-});
-var Input = styled__default['default'](BaseInput).withConfig({
-  displayName: "SwitchDefault__Input",
-  componentId: "sc-16ym5pn-1"
-})(function (_ref2) {
-  var disabled = _ref2.disabled,
-      theme = _ref2.theme;
-  return styled.css(["&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}"], disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background);
+  return styled.css(["&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background);
 });
 var Track = styled__default['default'].span.withConfig({
   displayName: "SwitchDefault__Track",
-  componentId: "sc-16ym5pn-2"
-})(function (_ref3) {
-  var isDisabled = _ref3.isDisabled,
-      _ref3$theme = _ref3.theme,
-      states = _ref3$theme.states,
-      track = _ref3$theme.entities.track;
+  componentId: "sc-16ym5pn-1"
+})(function (_ref2) {
+  var isDisabled = _ref2.isDisabled,
+      _ref2$theme = _ref2.theme,
+      states = _ref2$theme.states,
+      track = _ref2$theme.entities.track;
   return styled.css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], bordersTemplate(track.border), track.width, track.height, track.background, isDisabled && {
     backgroundColor: states.disabled.background
   });
 });
 var Handle = styled__default['default'].span.withConfig({
   displayName: "SwitchDefault__Handle",
-  componentId: "sc-16ym5pn-3"
-})(function (_ref4) {
-  var isDisabled = _ref4.isDisabled,
-      _ref4$theme = _ref4.theme,
-      states = _ref4$theme.states,
-      handle = _ref4$theme.entities.handle;
+  componentId: "sc-16ym5pn-2"
+})(function (_ref3) {
+  var isDisabled = _ref3.isDisabled,
+      _ref3$theme = _ref3.theme,
+      states = _ref3$theme.states,
+      handle = _ref3$theme.entities.handle;
   return styled.css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, isDisabled && {
     backgroundColor: states.disabled.background
   }, handle.boxShadow, handle.width, handle.height);
@@ -18458,19 +18196,17 @@ var SwitchDefault = /*#__PURE__*/React.forwardRef(function SwitchDefault(_a, ref
   var disabled = _a.disabled,
       rest = __rest(_a, ["disabled"]);
 
-  return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
+  return jsxRuntime.exports.jsxs(GridWrapper, {
     children: [jsxRuntime.exports.jsx(Input, Object.assign({}, rest, {
       ref: ref,
       disabled: disabled
-    }), void 0), jsxRuntime.exports.jsxs(Wrapper, Object.assign({
-      isDisabled: disabled
-    }, {
+    }), void 0), jsxRuntime.exports.jsxs(BaseInputWrapper, {
       children: [jsxRuntime.exports.jsx(Track, {
         isDisabled: disabled
       }, void 0), jsxRuntime.exports.jsx(Handle, {
         isDisabled: disabled
       }, void 0)]
-    }), void 0)]
+    }, void 0)]
   }, void 0);
 });
 SwitchDefault.displayName = 'SwitchDefault';
@@ -18599,8 +18335,8 @@ var comfortable = {
   }
 };
 
-var StyledSwitch = styled__default['default'].label.withConfig({
-  displayName: "Switch__StyledSwitch",
+var StyledLabel = styled__default['default'].label.withConfig({
+  displayName: "Switch__StyledLabel",
   componentId: "sc-sdaahx-0"
 })(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;"], function (_ref) {
   var isDisabled = _ref.isDisabled;
@@ -18628,11 +18364,11 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(_a, ref) {
   var overrideDensity = size === 'small' ? 'compact' : density;
   var token = useToken({
     density: overrideDensity
-  }, comfortable)();
+  }, comfortable);
   return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
     theme: token
   }, {
-    children: jsxRuntime.exports.jsxs(StyledSwitch, Object.assign({
+    children: label ? jsxRuntime.exports.jsxs(StyledLabel, Object.assign({
       isDisabled: disabled,
       className: className
     }, {
@@ -18647,6 +18383,14 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(_a, ref) {
       }), void 0), label && jsxRuntime.exports.jsx(Label, {
         children: label
       }, void 0)]
+    }), void 0) : size === 'small' ? jsxRuntime.exports.jsx(SwitchSmall, Object.assign({
+      disabled: disabled
+    }, rest, {
+      ref: ref
+    }), void 0) : jsxRuntime.exports.jsx(SwitchDefault, Object.assign({
+      disabled: disabled
+    }, rest, {
+      ref: ref
     }), void 0)
   }), void 0);
 });