@norges-domstoler/dds-components 0.0.14 → 0.0.15

package/dist/components/Button/Button.styles.d.ts

@@ -1,15 +1,23 @@
-import { ButtonAppearance, ButtonPurpose, ButtonProps } from './Button.types';
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
 import { IconWrapper } from '../../helpers/IconWrapper';
-import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
-export declare const buttonContentStyle: (purpose: ButtonPurpose, appearance: ButtonAppearance, label?: string | undefined, Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, "svg">> | undefined) => import("styled-components").FlattenSimpleInterpolation;
-declare type ButtonContentProps = Pick<ButtonProps, 'purpose' | 'appearance' | 'size' | 'label' | 'Icon' | 'iconPosition' | 'fullWidth' | 'loading'>;
-export declare const ButtonContent: import("styled-components").StyledComponent<"span", any, ButtonContentProps, never>;
-declare type ButtonWrapperProps = Pick<ButtonProps, 'fullWidth'>;
+import { ButtonAppearance, ButtonPurpose, ButtonSize, IconPosition } from './Button.types';
+declare type ButtonWrapperProps = {
+    appearance: ButtonAppearance;
+    purpose: ButtonPurpose;
+    size: ButtonSize;
+    fullWidth: boolean;
+    hasIcon: boolean;
+    hasLabel: boolean;
+    isLoading: boolean;
+};
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"button", any, ButtonWrapperProps, never>;
-declare type IconWithTextWrapperProps = Pick<ButtonProps, 'iconPosition' | 'size'>;
+declare type IconWithTextWrapperProps = {
+    iconPosition: IconPosition;
+    size: ButtonSize;
+};
 export declare const IconWithTextWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, IconWithTextWrapperProps, never>;
-declare type JustIconWrapperProps = Pick<ButtonProps, 'size'>;
+declare type JustIconWrapperProps = {
+    size: ButtonSize;
+};
 export declare const JustIconWrapper: import("styled-components").StyledComponent<"span", any, JustIconWrapperProps, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import 'focus-visible';
 import './styles/fontStyles.css';
 export * from './components/RadioButton';
 export * from './components/Checkbox';

package/dist/index.es.js

@@ -3,6 +3,344 @@ import React__default, { useRef, useDebugValue, useContext, createElement, forwa
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+	if (n.__esModule) return n;
+	var a = Object.defineProperty({}, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
+
+createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+  factory() ;
+}(commonjsGlobal, (function () {
+  /**
+   * Applies the :focus-visible polyfill at the given scope.
+   * A scope in this case is either the top-level Document or a Shadow Root.
+   *
+   * @param {(Document|ShadowRoot)} scope
+   * @see https://github.com/WICG/focus-visible
+   */
+  function applyFocusVisiblePolyfill(scope) {
+    var hadKeyboardEvent = true;
+    var hadFocusVisibleRecently = false;
+    var hadFocusVisibleRecentlyTimeout = null;
+
+    var inputTypesAllowlist = {
+      text: true,
+      search: true,
+      url: true,
+      tel: true,
+      email: true,
+      password: true,
+      number: true,
+      date: true,
+      month: true,
+      week: true,
+      time: true,
+      datetime: true,
+      'datetime-local': true
+    };
+
+    /**
+     * Helper function for legacy browsers and iframes which sometimes focus
+     * elements like document, body, and non-interactive SVG.
+     * @param {Element} el
+     */
+    function isValidFocusTarget(el) {
+      if (
+        el &&
+        el !== document &&
+        el.nodeName !== 'HTML' &&
+        el.nodeName !== 'BODY' &&
+        'classList' in el &&
+        'contains' in el.classList
+      ) {
+        return true;
+      }
+      return false;
+    }
+
+    /**
+     * Computes whether the given element should automatically trigger the
+     * `focus-visible` class being added, i.e. whether it should always match
+     * `:focus-visible` when focused.
+     * @param {Element} el
+     * @return {boolean}
+     */
+    function focusTriggersKeyboardModality(el) {
+      var type = el.type;
+      var tagName = el.tagName;
+
+      if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {
+        return true;
+      }
+
+      if (tagName === 'TEXTAREA' && !el.readOnly) {
+        return true;
+      }
+
+      if (el.isContentEditable) {
+        return true;
+      }
+
+      return false;
+    }
+
+    /**
+     * Add the `focus-visible` class to the given element if it was not added by
+     * the author.
+     * @param {Element} el
+     */
+    function addFocusVisibleClass(el) {
+      if (el.classList.contains('focus-visible')) {
+        return;
+      }
+      el.classList.add('focus-visible');
+      el.setAttribute('data-focus-visible-added', '');
+    }
+
+    /**
+     * Remove the `focus-visible` class from the given element if it was not
+     * originally added by the author.
+     * @param {Element} el
+     */
+    function removeFocusVisibleClass(el) {
+      if (!el.hasAttribute('data-focus-visible-added')) {
+        return;
+      }
+      el.classList.remove('focus-visible');
+      el.removeAttribute('data-focus-visible-added');
+    }
+
+    /**
+     * If the most recent user interaction was via the keyboard;
+     * and the key press did not include a meta, alt/option, or control key;
+     * then the modality is keyboard. Otherwise, the modality is not keyboard.
+     * Apply `focus-visible` to any current active element and keep track
+     * of our keyboard modality state with `hadKeyboardEvent`.
+     * @param {KeyboardEvent} e
+     */
+    function onKeyDown(e) {
+      if (e.metaKey || e.altKey || e.ctrlKey) {
+        return;
+      }
+
+      if (isValidFocusTarget(scope.activeElement)) {
+        addFocusVisibleClass(scope.activeElement);
+      }
+
+      hadKeyboardEvent = true;
+    }
+
+    /**
+     * If at any point a user clicks with a pointing device, ensure that we change
+     * the modality away from keyboard.
+     * This avoids the situation where a user presses a key on an already focused
+     * element, and then clicks on a different element, focusing it with a
+     * pointing device, while we still think we're in keyboard modality.
+     * @param {Event} e
+     */
+    function onPointerDown(e) {
+      hadKeyboardEvent = false;
+    }
+
+    /**
+     * On `focus`, add the `focus-visible` class to the target if:
+     * - the target received focus as a result of keyboard navigation, or
+     * - the event target is an element that will likely require interaction
+     *   via the keyboard (e.g. a text box)
+     * @param {Event} e
+     */
+    function onFocus(e) {
+      // Prevent IE from focusing the document or HTML element.
+      if (!isValidFocusTarget(e.target)) {
+        return;
+      }
+
+      if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {
+        addFocusVisibleClass(e.target);
+      }
+    }
+
+    /**
+     * On `blur`, remove the `focus-visible` class from the target.
+     * @param {Event} e
+     */
+    function onBlur(e) {
+      if (!isValidFocusTarget(e.target)) {
+        return;
+      }
+
+      if (
+        e.target.classList.contains('focus-visible') ||
+        e.target.hasAttribute('data-focus-visible-added')
+      ) {
+        // To detect a tab/window switch, we look for a blur event followed
+        // rapidly by a visibility change.
+        // If we don't see a visibility change within 100ms, it's probably a
+        // regular focus change.
+        hadFocusVisibleRecently = true;
+        window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+        hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {
+          hadFocusVisibleRecently = false;
+        }, 100);
+        removeFocusVisibleClass(e.target);
+      }
+    }
+
+    /**
+     * If the user changes tabs, keep track of whether or not the previously
+     * focused element had .focus-visible.
+     * @param {Event} e
+     */
+    function onVisibilityChange(e) {
+      if (document.visibilityState === 'hidden') {
+        // If the tab becomes active again, the browser will handle calling focus
+        // on the element (Safari actually calls it twice).
+        // If this tab change caused a blur on an element with focus-visible,
+        // re-apply the class when the user switches back to the tab.
+        if (hadFocusVisibleRecently) {
+          hadKeyboardEvent = true;
+        }
+        addInitialPointerMoveListeners();
+      }
+    }
+
+    /**
+     * Add a group of listeners to detect usage of any pointing devices.
+     * These listeners will be added when the polyfill first loads, and anytime
+     * the window is blurred, so that they are active when the window regains
+     * focus.
+     */
+    function addInitialPointerMoveListeners() {
+      document.addEventListener('mousemove', onInitialPointerMove);
+      document.addEventListener('mousedown', onInitialPointerMove);
+      document.addEventListener('mouseup', onInitialPointerMove);
+      document.addEventListener('pointermove', onInitialPointerMove);
+      document.addEventListener('pointerdown', onInitialPointerMove);
+      document.addEventListener('pointerup', onInitialPointerMove);
+      document.addEventListener('touchmove', onInitialPointerMove);
+      document.addEventListener('touchstart', onInitialPointerMove);
+      document.addEventListener('touchend', onInitialPointerMove);
+    }
+
+    function removeInitialPointerMoveListeners() {
+      document.removeEventListener('mousemove', onInitialPointerMove);
+      document.removeEventListener('mousedown', onInitialPointerMove);
+      document.removeEventListener('mouseup', onInitialPointerMove);
+      document.removeEventListener('pointermove', onInitialPointerMove);
+      document.removeEventListener('pointerdown', onInitialPointerMove);
+      document.removeEventListener('pointerup', onInitialPointerMove);
+      document.removeEventListener('touchmove', onInitialPointerMove);
+      document.removeEventListener('touchstart', onInitialPointerMove);
+      document.removeEventListener('touchend', onInitialPointerMove);
+    }
+
+    /**
+     * When the polfyill first loads, assume the user is in keyboard modality.
+     * If any event is received from a pointing device (e.g. mouse, pointer,
+     * touch), turn off keyboard modality.
+     * This accounts for situations where focus enters the page from the URL bar.
+     * @param {Event} e
+     */
+    function onInitialPointerMove(e) {
+      // Work around a Safari quirk that fires a mousemove on <html> whenever the
+      // window blurs, even if you're tabbing out of the page. ¯\_(ツ)_/¯
+      if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {
+        return;
+      }
+
+      hadKeyboardEvent = false;
+      removeInitialPointerMoveListeners();
+    }
+
+    // For some kinds of state, we are interested in changes at the global scope
+    // only. For example, global pointer input, global key presses and global
+    // visibility change should affect the state at every scope:
+    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener('mousedown', onPointerDown, true);
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('touchstart', onPointerDown, true);
+    document.addEventListener('visibilitychange', onVisibilityChange, true);
+
+    addInitialPointerMoveListeners();
+
+    // For focus and blur, we specifically care about state changes in the local
+    // scope. This is because focus / blur events that originate from within a
+    // shadow root are not re-dispatched from the host element if it was already
+    // the active element in its own scope:
+    scope.addEventListener('focus', onFocus, true);
+    scope.addEventListener('blur', onBlur, true);
+
+    // We detect that a node is a ShadowRoot by ensuring that it is a
+    // DocumentFragment and also has a host property. This check covers native
+    // implementation and polyfill implementation transparently. If we only cared
+    // about the native implementation, we could just check if the scope was
+    // an instance of a ShadowRoot.
+    if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {
+      // Since a ShadowRoot is a special kind of DocumentFragment, it does not
+      // have a root element to add a class to. So, we add this attribute to the
+      // host element instead:
+      scope.host.setAttribute('data-js-focus-visible', '');
+    } else if (scope.nodeType === Node.DOCUMENT_NODE) {
+      document.documentElement.classList.add('js-focus-visible');
+      document.documentElement.setAttribute('data-js-focus-visible', '');
+    }
+  }
+
+  // It is important to wrap all references to global window and document in
+  // these checks to support server-side rendering use cases
+  // @see https://github.com/WICG/focus-visible/issues/199
+  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+    // Make the polyfill helper globally available. This can be used as a signal
+    // to interested libraries that wish to coordinate with the polyfill for e.g.,
+    // applying the polyfill to a shadow root:
+    window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;
+
+    // Notify interested libraries of the polyfill's presence, in case the
+    // polyfill was loaded lazily:
+    var event;
+
+    try {
+      event = new CustomEvent('focus-visible-polyfill-ready');
+    } catch (error) {
+      // IE11 does not support using CustomEvent as a constructor directly:
+      event = document.createEvent('CustomEvent');
+      event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});
+    }
+
+    window.dispatchEvent(event);
+  }
+
+  if (typeof document !== 'undefined') {
+    // Apply the polyfill to the global document, so that no JavaScript
+    // coordination is required to use the polyfill in the top-level document:
+    applyFocusVisiblePolyfill(document);
+  }
+
+})));
+});
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -56,30 +394,6 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-function createCommonjsModule(fn) {
-  var module = { exports: {} };
-	return fn(module, module.exports), module.exports;
-}
-
 /*
 object-assign
 (c) Sindre Sorhus
@@ -19495,23 +19809,23 @@ function useIsFocusVisible() {
 }
 
 var utils = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    capitalize: capitalize,
-    createChainedFunction: createChainedFunction,
-    createSvgIcon: createSvgIcon$1,
-    debounce: debounce,
-    deprecatedPropType: deprecatedPropType,
-    isMuiElement: isMuiElement,
-    ownerDocument: ownerDocument,
-    ownerWindow: ownerWindow,
-    requirePropFactory: requirePropFactory,
-    setRef: setRef,
-    unsupportedProp: unsupportedProp,
-    useControlled: useControlled,
-    useEventCallback: useEventCallback,
-    useForkRef: useForkRef,
-    unstable_useId: useId,
-    useIsFocusVisible: useIsFocusVisible
+	__proto__: null,
+	capitalize: capitalize,
+	createChainedFunction: createChainedFunction,
+	createSvgIcon: createSvgIcon$1,
+	debounce: debounce,
+	deprecatedPropType: deprecatedPropType,
+	isMuiElement: isMuiElement,
+	ownerDocument: ownerDocument,
+	ownerWindow: ownerWindow,
+	requirePropFactory: requirePropFactory,
+	setRef: setRef,
+	unsupportedProp: unsupportedProp,
+	useControlled: useControlled,
+	useEventCallback: useEventCallback,
+	useForkRef: useForkRef,
+	unstable_useId: useId,
+	useIsFocusVisible: useIsFocusVisible
 });
 
 var _utils = /*@__PURE__*/getAugmentedNamespace(utils);
@@ -20914,56 +21228,53 @@ function Spinner(_a) {
 }
 var templateObject_1$w, templateObject_2$m;
 
-var buttonContentStyle = function buttonContentStyle(purpose, appearance, label, Icon) {
-  return Ae(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n  ", "\n  *::selection {\n    ", "\n  }\n  ", "\n\n  ", "\n"])), buttonTokens.base, typographyTokens.selection.base, appearance && purpose && Ae(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n    ", "\n    ", "\n    &:hover {\n      ", "\n    }\n    &:active {\n      ", "\n    }\n  "], ["\n    ", "\n    ", "\n    &:hover {\n      ", "\n    }\n    &:active {\n      ", "\n    }\n  "])), buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base), Icon && !label && appearance === 'borderless' && Ae(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n    &:hover {\n      ", "\n    }\n    &:active {\n      ", "\n    }\n  "], ["\n    &:hover {\n      ", "\n    }\n    &:active {\n      ", "\n    }\n  "])), buttonTokens.appearance[appearance][purpose].justIcon.hover.base, buttonTokens.appearance[appearance][purpose].justIcon.active.base));
-};
-var ButtonContent = styled.span.withConfig({
-  displayName: "Buttonstyles__ButtonContent",
+var ButtonWrapper$1 = styled.button.withConfig({
+  displayName: "Buttonstyles__ButtonWrapper",
   componentId: "sc-14dutqk-0"
-})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n"], ["\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  ", "\n  ", "\n"])), function (_a) {
-  var label = _a.label,
-      purpose = _a.purpose,
-      appearance = _a.appearance,
-      Icon = _a.Icon;
-  return purpose && appearance && buttonContentStyle(purpose, appearance, label, Icon);
+})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\n\n\n  &:focus-visible, &.focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n\n  *::selection {\n    ", "\n  }\n"], ["\n  ", "\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: fit-content;\n  width: ", ";\n  cursor: pointer;\n  box-shadow: none;\n  text-decoration: none;\n  transition: background-color 0.2s, text-decoration-color 0.2s, box-shadow 0.2s,\n    border-color 0.2s, color 0.2s;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n\n\n\n  &:focus-visible, &.focus-visible {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n\n  *::selection {\n    ", "\n  }\n"])), buttonTokens.base, function (_a) {
+  var fullWidth = _a.fullWidth;
+  return fullWidth ? '100%' : 'fit-content';
 }, function (_a) {
-  var fullWidth = _a.fullWidth,
-      Icon = _a.Icon,
-      label = _a.label,
-      loading = _a.loading;
-  return fullWidth && (!Icon || !label || loading ? Ae(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "]))) : Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))));
+  var appearance = _a.appearance,
+      purpose = _a.purpose;
+  return Ae(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n      ", "\n      ", "\n\n      &:hover {\n        ", "\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", "\n      ", "\n\n      &:hover {\n        ", "\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonTokens.appearance[appearance].base, buttonTokens.appearance[appearance][purpose].base, buttonTokens.appearance[appearance][purpose].hover.base, buttonTokens.appearance[appearance][purpose].active.base);
+}, function (_a) {
+  var hasIcon = _a.hasIcon,
+      hasLabel = _a.hasLabel,
+      appearance = _a.appearance,
+      purpose = _a.purpose;
+  return hasIcon && !hasLabel && appearance === 'borderless' && Ae(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n      &:hover {\n        ", "\n      }\n      &:active {\n        ", "\n      }\n    "], ["\n      &:hover {\n        ", "\n      }\n      &:active {\n        ", "\n      }\n    "])), buttonTokens.appearance[appearance][purpose].justIcon.hover.base, buttonTokens.appearance[appearance][purpose].justIcon.active.base);
 }, function (_a) {
   var size = _a.size,
-      label = _a.label;
-  return size && (label ? Ae(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIcon.base));
-});
-var ButtonWrapper$1 = styled.button.withConfig({
-  displayName: "Buttonstyles__ButtonWrapper",
-  componentId: "sc-14dutqk-1"
-})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  display: inline-block;\n  border: none;\n  cursor: pointer;\n  box-shadow: none;\n  padding: 0;\n  background-color: transparent;\n  text-decoration: none;\n  ", "\n\n  &:focus > ", " {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n  &:focus {\n    outline: none;\n  }\n"], ["\n  display: inline-block;\n  border: none;\n  cursor: pointer;\n  box-shadow: none;\n  padding: 0;\n  background-color: transparent;\n  text-decoration: none;\n  ", "\n\n  &:focus > ", " {\n    outline: ", " solid ", ";\n    outline-offset: 2px;\n  }\n  &:focus {\n    outline: none;\n  }\n"])), function (_a) {
-  var fullWidth = _a.fullWidth;
-  return !fullWidth && Ae(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n      width: fit-content;\n    "], ["\n      width: fit-content;\n    "])));
-}, ButtonContent, buttonTokens.focusOutline.width, buttonTokens.focusOutline.color);
+      hasLabel = _a.hasLabel;
+  return hasLabel ? Ae(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].text.base) : Ae(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), buttonTokens.sizes[size].justIcon.base);
+}, function (_a) {
+  var fullWidth = _a.fullWidth,
+      hasIcon = _a.hasIcon,
+      hasLabel = _a.hasLabel,
+      isLoading = _a.isLoading;
+  return fullWidth && (!hasIcon || !hasLabel || isLoading ? Ae(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n          justify-content: center;\n        "], ["\n          justify-content: center;\n        "]))) : Ae(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n          justify-content: space-between;\n        "], ["\n          justify-content: space-between;\n        "]))));
+}, buttonTokens.focusOutline.width, buttonTokens.focusOutline.color, typographyTokens.selection.base);
 var IconWithTextWrapper = styled(IconWrapper$1).withConfig({
   displayName: "Buttonstyles__IconWithTextWrapper",
-  componentId: "sc-14dutqk-2"
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+  componentId: "sc-14dutqk-1"
+})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
   var size = _a.size,
       iconPosition = _a.iconPosition;
-  return size && (iconPosition === 'left' ? Ae(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : '');
+  return iconPosition === 'left' ? Ae(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n          margin-inline-end: ", ";\n        "], ["\n          margin-inline-end: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : iconPosition === 'right' ? Ae(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n          margin-inline-start: ", ";\n        "], ["\n          margin-inline-start: ", ";\n        "])), buttonTokens.sizes[size].iconWithTextMargin) : '';
 });
 var JustIconWrapper = styled.span.withConfig({
   displayName: "Buttonstyles__JustIconWrapper",
-  componentId: "sc-14dutqk-3"
-})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
+  componentId: "sc-14dutqk-2"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  ", "\n"])), function (_a) {
   var size = _a.size;
-  return size && Ae(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
+  return Ae(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), buttonTokens.sizes[size].justIconWrapper.base);
 });
 var Label$2 = styled.span.withConfig({
   displayName: "Buttonstyles__Label",
-  componentId: "sc-14dutqk-4"
-})(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""])));
-var templateObject_1$v, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+  componentId: "sc-14dutqk-3"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
+var templateObject_1$v, templateObject_2$l, templateObject_3$f, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$4, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13;
 
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -20978,8 +21289,10 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
       appearance = _e === void 0 ? 'filled' : _e,
       href = _a.href,
       target = _a.target,
-      loading = _a.loading,
-      fullWidth = _a.fullWidth,
+      _f = _a.loading,
+      loading = _f === void 0 ? false : _f,
+      _g = _a.fullWidth,
+      fullWidth = _g === void 0 ? false : _g,
       className = _a.className,
       style = _a.style,
       Icon = _a.Icon,
@@ -20994,23 +21307,18 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     rel: href ? 'noreferrer noopener' : undefined,
     target: href && target ? target : undefined,
     ref: ref,
-    fullWidth: fullWidth,
-    disabled: disabled
-  }, rest);
-
-  var contentProps = {
-    iconPosition: iconPosition,
     appearance: appearance,
     purpose: purpose,
-    label: label,
-    size: size,
-    Icon: Icon,
+    iconPosition: iconPosition,
     fullWidth: fullWidth,
-    loading: loading,
-    tabIndex: -1,
+    hasLabel: !!label,
+    hasIcon: !!Icon,
+    isLoading: loading,
+    disabled: disabled,
+    size: size,
     className: className,
     style: style
-  };
+  }, rest);
 
   var iconElement = Icon && iconPosition && size && jsxRuntime.jsx(IconWithTextWrapper, {
     Icon: Icon,
@@ -21019,28 +21327,28 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     size: size
   }, void 0);
 
-  return jsxRuntime.jsx(ButtonWrapper$1, __assign({}, wrapperProps, {
-    children: jsxRuntime.jsx(ButtonContent, __assign({}, contentProps, {
-      children: loading ? jsxRuntime.jsx(JustIconWrapper, __assign({
-        size: size
-      }, {
-        children: jsxRuntime.jsx(Spinner, {
-          color: buttonTokens.appearance[appearance][purpose].base.color,
-          size: buttonTokens.sizes[size].justIcon.base.fontSize
-        }, void 0)
-      }), void 0) : !label && Icon ? jsxRuntime.jsx(JustIconWrapper, __assign({
-        size: size
-      }, {
-        children: jsxRuntime.jsx(IconWrapper$1, {
-          Icon: Icon,
-          iconSize: "inline"
-        }, void 0)
-      }), void 0) : label ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$2, {
-          children: label
-        }, void 0), iconPosition === 'right' && iconElement]
-      }, void 0) : ''
-    }), void 0)
+  var hasLabel = !!label;
+  var isIconButton = !hasLabel && !!Icon;
+  return jsxRuntime.jsxs(ButtonWrapper$1, __assign({}, wrapperProps, {
+    children: [loading && jsxRuntime.jsx(JustIconWrapper, __assign({
+      size: size
+    }, {
+      children: jsxRuntime.jsx(Spinner, {
+        color: buttonTokens.appearance[appearance][purpose].base.color,
+        size: buttonTokens.sizes[size].justIcon.base.fontSize
+      }, void 0)
+    }), void 0), isIconButton && !loading && jsxRuntime.jsx(JustIconWrapper, __assign({
+      size: size
+    }, {
+      children: jsxRuntime.jsx(IconWrapper$1, {
+        Icon: Icon,
+        iconSize: "inline"
+      }, void 0)
+    }), void 0), hasLabel && !loading && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [iconPosition === 'left' && iconElement, jsxRuntime.jsx(Label$2, {
+        children: label
+      }, void 0), iconPosition === 'right' && iconElement]
+    }, void 0)]
   }), void 0);
 });