@micromag/core 0.4.55 → 0.4.63

package/es/components.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React, { CSSProperties, MouseEventHandler, ForwardedRef } from 'react';
 
+type ButtonElement = HTMLButtonElement | HTMLAnchorElement;
 interface ButtonProps {
-    type?: string;
+    type?: 'button' | 'submit' | 'reset';
     theme?: ButtonTheme | null;
     size?: ButtonSize | null;
     href?: string | null;
@@ -26,13 +27,12 @@ interface ButtonProps {
     withoutTheme?: boolean;
     outline?: boolean;
     asLink?: boolean;
+    style?: CSSProperties;
     className?: string | null;
     iconClassName?: string | null;
     labelClassName?: string | null;
-    onClick?: ((...args: unknown[]) => void) | null;
-    refButton?: ((...args: unknown[]) => void | {
-        current?: unknown;
-    }) | null;
+    onClick?: MouseEventHandler<ButtonElement> | null;
+    refButton?: ForwardedRef<ButtonElement> | null;
 }
 declare function Button$2({ type, theme, size, href, external, direct, target, label, children, focusable, active, icon, iconPosition, disabled, loading, disableOnLoading, small, big, withShadow, withoutStyle, withoutBootstrapStyles, withoutTheme, asLink, outline, onClick, className, iconClassName, labelClassName, refButton, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 

package/es/components.js

@@ -158,12 +158,12 @@ function Button$1(_ref) {
       disabled: disabled
     }, styles$y.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/jsx("a", _objectSpread(_objectSpread({}, props), {}, {
-      href: disabled ? null : href,
+      href: !disabled ? href : undefined,
       className: linkClassNames,
       onClick: onClick,
-      target: external ? target : null,
+      target: external ? target : undefined,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1',
+      tabIndex: !focusable ? -1 : undefined,
       children: content
     })) : /*#__PURE__*/jsx(Link$1, {
       href: href,
@@ -180,7 +180,7 @@ function Button$1(_ref) {
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
-    tabIndex: focusable ? '0' : '-1',
+    tabIndex: !focusable ? -1 : undefined,
     children: content
   }));
 }

package/es/contexts.d.ts

@@ -285,13 +285,8 @@ interface FieldContextProviderProps {
 declare function FieldContextProvider({ context, children }: FieldContextProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const FontsContext: any;
-declare const useGoogleFonts: ({ disabled, setFonts }?: {
-    disabled?: boolean;
-    setFonts?: any;
-}) => any;
-declare const useFonts: ({ withoutGoogleFonts }?: {
-    withoutGoogleFonts?: boolean;
-}) => {
+declare const useGoogleFonts: (options?: any) => any;
+declare const useFonts: (options?: any) => {
     systemFonts: any;
     googleFonts: any;
     customFonts: any;
@@ -359,14 +354,42 @@ interface PanelsProviderProps {
 }
 declare function PanelsProvider({ children, container: initialContainer }: PanelsProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const PlaybackContext: any;
-declare const usePlaybackContext: () => unknown;
+interface PlaybackControlsTheme {
+    seekBarOnly?: boolean;
+    color?: unknown;
+    progressColor?: unknown;
+}
+type MediaElement = HTMLVideoElement | HTMLAudioElement | HTMLMediaElement;
+interface PlaybackContext {
+    playing: boolean;
+    completed: boolean;
+    muted: boolean;
+    controls: boolean;
+    controlsSuggestPlay: boolean;
+    controlsVisible: boolean;
+    media: MediaElement | null;
+    hasAudio: boolean | null;
+    controlsTheme: PlaybackControlsTheme | null;
+    currentQualityLevel: number | null;
+    setMuted: (muted: boolean) => void;
+    setPlaying: (playing: boolean) => void;
+    setControls: (hasControls: boolean) => void;
+    setControlsVisible: (visible: boolean) => void;
+    setControlsTheme: (theme: PlaybackControlsTheme | null) => void;
+    showControls: () => void;
+    hideControls: () => void;
+    setMedia: (media: MediaElement | null) => void;
+    setCurrentQualityLevel: (qualityLevel: number | null, fromRef?: MediaElement | null) => void;
+    setIsBackground: (isBackground: boolean) => void;
+}
+declare const PlaybackContext: React.Context<PlaybackContext>;
+declare const usePlaybackContext: () => PlaybackContext;
 declare const usePlaybackMediaRef: (active?: boolean, background?: boolean, updateKey?: any) => {
     ref: React.RefObject<HTMLMediaElement>;
     isCurrent: boolean;
 };
 interface PlaybackProviderProps {
-    children: React__default.ReactNode;
+    children: ReactNode;
     controls?: boolean;
     controlsSuggestPlay?: boolean;
     controlsVisible?: boolean;
@@ -378,7 +401,7 @@ interface PlaybackProviderProps {
     muted?: boolean;
     playing?: boolean;
     paused?: boolean;
-    currentQualityLevel?: number;
+    currentQualityLevel?: number | null;
 }
 declare function PlaybackProvider({ muted: initialMuted, playing: initialPlaying, paused, controls: initialControls, controlsSuggestPlay: initialControlsSuggestPlay, controlsVisible: initialControlsVisible, controlsTheme: initialControlsTheme, currentQualityLevel: initialCurrentQualityLevel, children, }: PlaybackProviderProps): react_jsx_runtime.JSX.Element;
 
@@ -446,13 +469,7 @@ interface StoryProviderProps {
 declare function StoryProvider({ story, children }: StoryProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const useTracking: () => unknown;
-interface TrackingProviderProps {
-    children: React__default.ReactNode;
-    variables?: TrackingVariables;
-    disabled?: boolean;
-    paused?: boolean;
-}
-declare function TrackingProvider({ variables, disabled, paused, children }: TrackingProviderProps): react_jsx_runtime.JSX.Element;
+declare function TrackingProvider(options?: any): react_jsx_runtime.JSX.Element;
 
 declare const ViewerContext: any;
 declare const useViewerContext: () => unknown;

package/es/contexts.js

@@ -640,7 +640,8 @@ var FontsContext = /*#__PURE__*/React.createContext({
   customFonts: null
 });
 var useGoogleFonts = function useGoogleFonts() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref = options || {},
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$setFonts = _ref.setFonts,
@@ -680,7 +681,8 @@ var useGoogleFonts = function useGoogleFonts() {
   return googleFonts;
 };
 var useFonts = function useFonts() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref3 = options || {},
     _ref3$withoutGoogleFo = _ref3.withoutGoogleFonts,
     withoutGoogleFonts = _ref3$withoutGoogleFo === void 0 ? false : _ref3$withoutGoogleFo;
   var _useContext = useContext(FontsContext),
@@ -1009,30 +1011,28 @@ var defaultControlsThemeValue = {
   color: null,
   progressColor: null
 };
-var defaultValue$1 = {
+var PlaybackContext = /*#__PURE__*/createContext({
   playing: false,
-  paused: false,
   completed: false,
   muted: true,
   controls: false,
   controlsSuggestPlay: false,
   controlsVisible: false,
+  hasAudio: false,
   media: null,
   controlsTheme: defaultControlsThemeValue,
-  currentQualityLevel: null
-};
-var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
-  setMuted: function setMuted() {},
-  setPlaying: function setPlaying() {},
-  setControls: function setControls() {},
-  setControlsVisible: function setControlsVisible() {},
-  setControlsTheme: function setControlsTheme() {},
+  currentQualityLevel: null,
+  setMuted: function setMuted(muted) {},
+  setPlaying: function setPlaying(playing) {},
+  setControls: function setControls(hasControls) {},
+  setControlsVisible: function setControlsVisible(visible) {},
+  setControlsTheme: function setControlsTheme(theme) {},
   showControls: function showControls() {},
   hideControls: function hideControls() {},
-  setMedia: function setMedia() {},
-  setCurrentQualityLevel: function setCurrentQualityLevel() {},
-  setIsBackground: function setIsBackground() {}
-}));
+  setMedia: function setMedia(media) {},
+  setCurrentQualityLevel: function setCurrentQualityLevel(qualityLevel, fromRef) {},
+  setIsBackground: function setIsBackground(isBackground) {}
+});
 var usePlaybackContext = function usePlaybackContext() {
   return useContext(PlaybackContext);
 };
@@ -1043,29 +1043,35 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
   var _usePlaybackContext = usePlaybackContext(),
     setMedia = _usePlaybackContext.setMedia,
     setIsBackground = _usePlaybackContext.setIsBackground,
-    media = _usePlaybackContext.media;
+    media = _usePlaybackContext.media,
+    isBackground = _usePlaybackContext.isBackground;
   var mediaRef = useRef(null);
 
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
   useEffect(function () {
+    var currentMedia = mediaRef.current;
     return function () {
       if (active) {
+        var playing = currentMedia !== null && !!(currentMedia.currentTime > 0 && !currentMedia.paused && !currentMedia.ended && currentMedia.readyState > 2);
         setMedia(null);
         setIsBackground(false);
+        if (playing) {
+          currentMedia.pause();
+        }
       }
     };
   }, [active, setMedia, setIsBackground, updateKey]);
 
   // Register media with context when active and no media is registered
   useEffect(function () {
-    if (!active || mediaRef.current === null || media !== null) {
+    if (!active || mediaRef.current === null || mediaRef.current === media && background === isBackground) {
       return;
     }
     setIsBackground(background);
     setMedia(mediaRef.current);
-  }, [active, background, media, updateKey, setMedia, setIsBackground]);
+  }, [active, background, media, updateKey, setMedia, setIsBackground, isBackground]);
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media
@@ -1389,14 +1395,17 @@ function ScreenSizeProvider(_ref) {
 var useTracking = function useTracking() {
   return useContext(TrackingContext);
 };
-function TrackingProvider(_ref) {
-  var _ref$variables = _ref.variables,
+function TrackingProvider() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref = options || {},
+    _ref$variables = _ref.variables,
     variables = _ref$variables === void 0 ? null : _ref$variables,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$paused = _ref.paused,
     paused = _ref$paused === void 0 ? false : _ref$paused,
-    children = _ref.children;
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children;
   var contextTracking = useTracking() || null;
   var refTracking = useRef(null);
   var tracking = useMemo(function () {

package/es/hooks.d.ts

@@ -15,15 +15,8 @@ declare const useAnimationFrame: (onFrame: any, { disabled }?: {
     disabled?: boolean;
 }) => void;
 
-declare const useFormattedDate: ({ format, showToday }?: {
-    format?: any;
-    showToday?: boolean;
-}) => (date: any) => string;
-declare const useFormattedTime: ({ format, showNow, timeGap }?: {
-    format?: any;
-    showNow?: boolean;
-    timeGap?: number;
-}) => (date: any) => string;
+declare const useFormattedDate: (options?: any) => (date: any) => string;
+declare const useFormattedTime: (options?: any) => (date: any) => string;
 
 declare const useDebounced: (handler: any, watchedValue: any, delay?: number) => void;
 
@@ -53,7 +46,25 @@ declare function useDragProgress({ progress: wantedProgress, onTap, disabled, dr
 declare const useForm: ({ fields: providedFields, injectInFields, ...opts }?: {
     fields?: any[];
     injectInFields?: boolean;
-}) => any;
+}) => {
+    fields: any[];
+    status: any;
+    response: unknown;
+    errors: Record<string, string | string[]>;
+    generalError: string;
+    success: boolean;
+    loading: boolean;
+    error: boolean;
+    value: Record<string, unknown>;
+    setValue: (value: Record<string, unknown>) => void;
+    setErrors: (errors: Record<string, string | string[]>) => void;
+    setGeneralError: (error: string | null) => void;
+    csrfToken: string;
+    submit: (submitValue?: Record<string, unknown>) => void;
+    onSubmit: (e: {
+        preventDefault: () => void;
+    }) => void;
+};
 
 declare const useFormTransition: (initialPaths?: any, initialStyles?: {}) => {
     direction: string;
@@ -167,9 +178,7 @@ declare function useMediaLoad(element: any, { preload, shouldLoad }?: {
     shouldLoad?: boolean;
 }): void;
 
-declare function useMediaProgress(media: any, { disabled, ...props }?: {
-    disabled?: boolean;
-}): number;
+declare function useMediaProgress(media?: any, options?: any): number;
 
 declare function useMediaReady(element: any, { id }?: {
     id?: any;
@@ -220,9 +229,9 @@ declare function useMediaWaveform(media: any, { fake, reduceBufferFactor }?: {
 }): any;
 
 declare const getObserver: (Observer: any, options?: {}) => any;
-declare const useObserver: (Observer: any, opts?: {}, initialEntry?: {}) => {
+declare const useObserver: (Observer: any, opts?: any, initialEntry?: any) => {
     ref: react.RefObject<any>;
-    entry: {};
+    entry: any;
 };
 declare const useIntersectionObserver: ({ root, rootMargin, threshold, disabled, }?: {
     root?: any;
@@ -231,16 +240,14 @@ declare const useIntersectionObserver: ({ root, rootMargin, threshold, disabled,
     disabled?: boolean;
 }) => {
     ref: react.RefObject<any>;
-    entry: {};
+    entry: any;
 };
-declare const useResizeObserver: ({ disabled }?: {
-    disabled?: boolean;
-}) => {
+declare const useResizeObserver: (options?: any) => {
     ref: react.RefObject<any>;
-    entry: {};
+    entry: any;
 };
 declare const useDimensionObserver: (...args: any[]) => {
-    entry: {};
+    entry: any;
     width: any;
     height: any;
     ref: react.RefObject<any>;
@@ -270,10 +277,7 @@ declare function useProgressSteps({ disabled, currentTime, duration, onStep, ste
 }): void;
 
 declare const useDevicePixelRatio: () => number;
-declare const useScreenSizeFromElement: ({ width, height, ...opts }?: {
-    width?: any;
-    height?: any;
-}) => {
+declare const useScreenSizeFromElement: (options?: any) => {
     ref: react.RefObject<any>;
     fullWidth: any;
     fullHeight: any;

package/es/hooks.js

@@ -20,8 +20,8 @@ import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@mi
 import isEmpty from 'lodash/isEmpty';
 import { useWindowSize } from '@folklore/hooks';
 import { match } from 'css-mediaquery';
-import { useIntl } from 'react-intl';
 import dayjs from 'dayjs';
+import { useIntl } from 'react-intl';
 import clamp from 'lodash/clamp';
 
 function useActivityDetector() {
@@ -120,7 +120,8 @@ var useAnimationFrame = function useAnimationFrame(onFrame) {
 };
 
 var useFormattedDate = function useFormattedDate() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref = options || {},
     _ref$format = _ref.format,
     format = _ref$format === void 0 ? null : _ref$format,
     _ref$showToday = _ref.showToday,
@@ -146,7 +147,8 @@ var useFormattedDate = function useFormattedDate() {
   }, [today, showToday, format]);
 };
 var useFormattedTime = function useFormattedTime() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref2 = options || {},
     _ref2$format = _ref2.format,
     format = _ref2$format === void 0 ? null : _ref2$format,
     _ref2$showNow = _ref2.showNow,
@@ -529,16 +531,17 @@ var getObserver = function getObserver(Observer) {
   return observers[observerKey];
 };
 var useObserver = function useObserver(Observer) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _opts$root = opts.root,
-    root = _opts$root === void 0 ? null : _opts$root,
-    _opts$rootMargin = opts.rootMargin,
-    rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
-    _opts$threshold = opts.threshold,
-    threshold = _opts$threshold === void 0 ? null : _opts$threshold,
-    _opts$disabled = opts.disabled,
-    disabled = _opts$disabled === void 0 ? false : _opts$disabled;
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var _ref3 = opts || {},
+    _ref3$root = _ref3.root,
+    root = _ref3$root === void 0 ? null : _ref3$root,
+    _ref3$rootMargin = _ref3.rootMargin,
+    rootMargin = _ref3$rootMargin === void 0 ? null : _ref3$rootMargin,
+    _ref3$threshold = _ref3.threshold,
+    threshold = _ref3$threshold === void 0 ? null : _ref3$threshold,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
   var _useState = useState(initialEntry),
     _useState2 = _slicedToArray(_useState, 2),
     entry = _useState2[0],
@@ -607,15 +610,15 @@ var intersectionObserverInitialEntry = {
   rootBounds: null
 };
 var useIntersectionObserver = function useIntersectionObserver() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref3$root = _ref3.root,
-    root = _ref3$root === void 0 ? null : _ref3$root,
-    _ref3$rootMargin = _ref3.rootMargin,
-    rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
-    _ref3$threshold = _ref3.threshold,
-    threshold = _ref3$threshold === void 0 ? thresholdArray : _ref3$threshold,
-    _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
+  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref4$root = _ref4.root,
+    root = _ref4$root === void 0 ? null : _ref4$root,
+    _ref4$rootMargin = _ref4.rootMargin,
+    rootMargin = _ref4$rootMargin === void 0 ? '0px' : _ref4$rootMargin,
+    _ref4$threshold = _ref4.threshold,
+    threshold = _ref4$threshold === void 0 ? thresholdArray : _ref4$threshold,
+    _ref4$disabled = _ref4.disabled,
+    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
   return useObserver(typeof window !== 'undefined' ? IntersectionObserver : null, {
     root: root,
     rootMargin: rootMargin,
@@ -634,9 +637,10 @@ var resizeObserverInitialEntry = {
   borderBoxSize: null
 };
 var useResizeObserver = function useResizeObserver() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref5 = options || {},
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled;
   return useObserver(typeof window !== 'undefined' ? ResizeObserver : null, {
     disabled: disabled
   }, resizeObserverInitialEntry);
@@ -645,21 +649,21 @@ var useDimensionObserver = function useDimensionObserver() {
   var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
     entry = _useResizeObserver.entry,
     rest = _objectWithoutProperties(_useResizeObserver, _excluded$2);
-  var _ref5 = entry || {},
-    _ref5$contentRect = _ref5.contentRect,
-    contentRect = _ref5$contentRect === void 0 ? null : _ref5$contentRect,
-    _ref5$borderBoxSize = _ref5.borderBoxSize,
-    borderBoxSize = _ref5$borderBoxSize === void 0 ? null : _ref5$borderBoxSize;
-  var _ref6 = contentRect || {},
-    _ref6$width = _ref6.width,
-    width = _ref6$width === void 0 ? 0 : _ref6$width,
-    _ref6$height = _ref6.height,
-    height = _ref6$height === void 0 ? 0 : _ref6$height;
-  var _ref7 = isArray(borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
-    _ref7$blockSize = _ref7.blockSize,
-    blockSize = _ref7$blockSize === void 0 ? null : _ref7$blockSize,
-    _ref7$inlineSize = _ref7.inlineSize,
-    inlineSize = _ref7$inlineSize === void 0 ? null : _ref7$inlineSize;
+  var _ref6 = entry || {},
+    _ref6$contentRect = _ref6.contentRect,
+    contentRect = _ref6$contentRect === void 0 ? null : _ref6$contentRect,
+    _ref6$borderBoxSize = _ref6.borderBoxSize,
+    borderBoxSize = _ref6$borderBoxSize === void 0 ? null : _ref6$borderBoxSize;
+  var _ref7 = contentRect || {},
+    _ref7$width = _ref7.width,
+    width = _ref7$width === void 0 ? 0 : _ref7$width,
+    _ref7$height = _ref7.height,
+    height = _ref7$height === void 0 ? 0 : _ref7$height;
+  var _ref8 = isArray(borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
+    _ref8$blockSize = _ref8.blockSize,
+    blockSize = _ref8$blockSize === void 0 ? null : _ref8$blockSize,
+    _ref8$inlineSize = _ref8.inlineSize,
+    inlineSize = _ref8$inlineSize === void 0 ? null : _ref8$inlineSize;
   return _objectSpread(_objectSpread({}, rest), {}, {
     entry: entry,
     width: inlineSize || width,
@@ -1640,8 +1644,10 @@ function useMediaLoad(element) {
 }
 
 var _excluded$1 = ["disabled"];
-function useMediaProgress(media) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+function useMediaProgress() {
+  var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var _ref = options || {},
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     props = _objectWithoutProperties(_ref, _excluded$1);
@@ -2056,7 +2062,8 @@ var useScreenSize = function useScreenSize(_ref) {
   return screenSize;
 };
 var useScreenSizeFromElement = function useScreenSizeFromElement() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var _ref4 = options || {},
     _ref4$width = _ref4.width,
     width = _ref4$width === void 0 ? null : _ref4$width,
     _ref4$height = _ref4.height,

package/lib/components.js

@@ -160,12 +160,12 @@ function Button$1(_ref) {
       disabled: disabled
     }, styles$y.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/jsxRuntime.jsx("a", _objectSpread(_objectSpread({}, props), {}, {
-      href: disabled ? null : href,
+      href: !disabled ? href : undefined,
       className: linkClassNames,
       onClick: onClick,
-      target: external ? target : null,
+      target: external ? target : undefined,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1',
+      tabIndex: !focusable ? -1 : undefined,
       children: content
     })) : /*#__PURE__*/jsxRuntime.jsx(wouter.Link, {
       href: href,
@@ -182,7 +182,7 @@ function Button$1(_ref) {
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
-    tabIndex: focusable ? '0' : '-1',
+    tabIndex: !focusable ? -1 : undefined,
     children: content
   }));
 }