@equinor/eds-core-react 0.14.0 → 0.14.3

package/dist/core-react.umd.js

@@ -394,7 +394,7 @@
 	*/
 	/* 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) {
@@ -458,7 +458,7 @@
 			from = Object(arguments[s]);
 
 			for (var key in from) {
-				if (hasOwnProperty$1.call(from, key)) {
+				if (hasOwnProperty.call(from, key)) {
 					to[key] = from[key];
 				}
 			}
@@ -2725,9 +2725,9 @@
 	    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,
@@ -3234,9 +3234,9 @@
 	    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,
@@ -5892,6 +5892,15 @@
 	  }, [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"
@@ -6005,7 +6014,7 @@
 	  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,
@@ -6027,7 +6036,7 @@
 
 	  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;
@@ -6364,7 +6373,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, applyVariant(variant, tableCell))();
+	  }, applyVariant(variant, tableCell));
 	  return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
 	    theme: token
 	  }, {
@@ -6495,7 +6504,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, token$5)();
+	  }, token$5);
 	  return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
 	    theme: token
 	  }, {
@@ -6599,8 +6608,10 @@
 
 	  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
+	      }
 	    }
 	  };
 	});
@@ -6968,7 +6979,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, inputVariant)();
+	  }, inputVariant);
 	  var inputProps = Object.assign({
 	    ref: ref,
 	    type: type,
@@ -7641,7 +7652,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, textfield$1)();
+	  }, textfield$1);
 	  return jsxRuntime.exports.jsx(styled.ThemeProvider, Object.assign({
 	    theme: token
 	  }, {
@@ -7817,348 +7828,16 @@
 	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, {
@@ -8340,6 +8019,7 @@
 	    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: {
@@ -8397,6 +8077,11 @@
 	        right: mediumSpacing,
 	        top: mediumSpacing
 	      }
+	    },
+	    icon: {
+	      typography: {
+	        color: defaultIconColor
+	      }
 	    }
 	  }
 	};
@@ -8427,7 +8112,8 @@
 
 	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,
@@ -8443,7 +8129,7 @@
 	}).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) {
@@ -8454,11 +8140,13 @@
 	  }) : 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"
@@ -8610,11 +8298,10 @@
 	      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),
@@ -8867,7 +8554,7 @@
 	}).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) {
@@ -9394,8 +9081,8 @@
 
 	var background$a = tokens$6.colors.ui.background__scrim.rgba;
 	var scrim = {
-	  width: '100vw',
-	  height: '100vh',
+	  width: '100%',
+	  height: '100%',
 	  background: background$a
 	};
 
@@ -9421,6 +9108,8 @@
 	    isDismissable: isDismissable,
 	    ref: ref
 	  });
+	  var overflowState = document.body.style.overflow;
+	  useHideBodyScroll(overflowState);
 	  useGlobalKeyPress('Escape', function (e) {
 	    if (isDismissable && onClose) {
 	      onClose(e, false);
@@ -9569,7 +9258,7 @@
 	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"]);
@@ -9815,9 +9504,9 @@
 	}).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;
 
@@ -9826,14 +9515,14 @@
 	      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;"]);
@@ -10054,7 +9743,7 @@
 	  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",
@@ -10068,7 +9757,7 @@
 	  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,
@@ -10374,8 +10063,8 @@
 	    _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 {
@@ -10431,7 +10120,7 @@
 	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) {
@@ -10447,10 +10136,10 @@
 	  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) {
@@ -10507,7 +10196,7 @@
 
 	  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();
@@ -10560,8 +10249,8 @@
 	    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';
@@ -10646,7 +10335,7 @@
 	      }), 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,
@@ -11717,7 +11406,7 @@
 	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,
@@ -11801,7 +11490,7 @@
 	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
@@ -11814,6 +11503,7 @@
 	      other = __rest(_a, ["children", "maxWidth", "href"]);
 
 	  var props = Object.assign(Object.assign({}, other), {
+	    href: href,
 	    ref: ref,
 	    maxWidth: maxWidth
 	  });
@@ -12011,7 +11701,7 @@
 	  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",
@@ -12095,18 +11785,16 @@
 	  }, 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,
@@ -12116,19 +11804,30 @@
 	      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 () {
@@ -12155,10 +11854,12 @@
 	    event.stopPropagation();
 
 	    if (key === 'ArrowDown') {
+	      event.preventDefault();
 	      handleMenuItemChange('down', firstFocusIndex);
 	    }
 
 	    if (key === 'ArrowUp') {
+	      event.preventDefault();
 	      handleMenuItemChange('up', lastFocusIndex);
 	    }
 	  };
@@ -12221,7 +11922,9 @@
 	      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),
@@ -12235,7 +11938,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, menu)();
+	  }, menu);
 
 	  var _usePopper = usePopper(anchorEl, containerEl, null, placement, 4),
 	      styles = _usePopper.styles,
@@ -12243,7 +11946,8 @@
 
 	  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,
@@ -12440,7 +12144,15 @@
 	    }
 	  };
 
+	  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
@@ -12597,7 +12309,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, nativeselect)();
+	  }, nativeselect);
 	  var containerProps = {
 	    ref: ref,
 	    className: className
@@ -17639,7 +17351,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, select)();
+	  }, select);
 	  React.useEffect(function () {
 	    setInputItems(items);
 	  }, [items]);
@@ -17758,7 +17470,10 @@
 	    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,
@@ -17768,6 +17483,9 @@
 	    left: medium_small$2,
 	    right: medium_small$2
 	  },
+	  clickbound: {
+	    height: clicboundSize$1
+	  },
 	  states: {
 	    hover: {
 	      background: primaryHoverAlt$2
@@ -17785,13 +17503,6 @@
 	      }
 	    }
 	  },
-	  entities: {
-	    label: {
-	      spacings: {
-	        left: medium_small$2
-	      }
-	    }
-	  },
 	  modes: {
 	    compact: {
 	      spacings: {
@@ -17800,6 +17511,9 @@
 	        left: x_small$1,
 	        right: x_small$1
 	      },
+	      clickbound: {
+	        height: compactClickboundSize$1
+	      },
 	      states: {
 	        focus: {
 	          outline: {
@@ -17835,14 +17549,21 @@
 	}).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',
@@ -17853,15 +17574,15 @@
 	}).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) {
@@ -17875,7 +17596,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, checkbox)();
+	  }, checkbox);
 	  var iconSize = 24;
 	  var fill = disabled ? checkbox.states.disabled.background : checkbox.background;
 	  var inputWrapperProps = {
@@ -17889,7 +17610,9 @@
 	    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),
@@ -17954,7 +17677,7 @@
 
 	  var token = useToken({
 	    density: density
-	  }, multiSelect)();
+	  }, multiSelect);
 	  var multipleSelectionProps = {
 	    initialSelectedItems: initialSelectedItems,
 	    onSelectedItemsChange: function onSelectedItemsChange(changes) {
@@ -18119,8 +17842,8 @@
 	  }), 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;
@@ -18129,7 +17852,7 @@
 	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,
@@ -18138,7 +17861,7 @@
 	      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
 	  }, {
@@ -18146,9 +17869,13 @@
 	      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';
@@ -18161,7 +17888,10 @@
 	    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,
@@ -18171,6 +17901,9 @@
 	    left: medium_small$1,
 	    right: medium_small$1
 	  },
+	  clickbound: {
+	    height: clicboundSize
+	  },
 	  states: {
 	    hover: {
 	      background: primaryHoverAlt$1
@@ -18188,13 +17921,6 @@
 	      }
 	    }
 	  },
-	  entities: {
-	    label: {
-	      spacings: {
-	        left: medium_small$1
-	      }
-	    }
-	  },
 	  modes: {
 	    compact: {
 	      spacings: {
@@ -18203,6 +17929,9 @@
 	        left: x_small,
 	        right: x_small
 	      },
+	      clickbound: {
+	        height: compactClickboundSize
+	      },
 	      states: {
 	        focus: {
 	          outline: {
@@ -18227,19 +17956,26 @@
 	}).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',
@@ -18249,10 +17985,10 @@
 	  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',
@@ -18263,19 +17999,22 @@
 	}).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) {
@@ -18290,13 +18029,30 @@
 
 	  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
 	    }, {
@@ -18305,25 +18061,20 @@
 	      }, {
 	        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);
 	});
@@ -18340,7 +18091,7 @@
 
 	  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,
@@ -18352,102 +18103,89 @@
 	  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);
@@ -18456,19 +18194,17 @@
 	  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';
@@ -18597,8 +18333,8 @@
 	  }
 	};
 
-	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;
@@ -18626,11 +18362,11 @@
 	  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
 	    }, {
@@ -18645,6 +18381,14 @@
 	      }), 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);
 	});