@apify/ui-library 1.98.3 → 1.99.1

package/dist/src/components/icon_button.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../design_system/theme.js';
+import { Button, BUTTON_SIZE_VARIANTS_CSS } from './button.js';
+import { Tooltip } from './floating/tooltip.js';
+import { Link } from './link.js';
+import { InlineSpinner, spinnerClassNames } from './spinner.js';
+export const ICON_BUTTON_VARIANTS = {
+    DEFAULT: 'DEFAULT',
+    BORDERED: 'BORDERED',
+    DANGER: 'DANGER',
+    DANGER_BORDERED: 'DANGER_BORDERED',
+};
+const iconButtonVariantStyle = {
+    [ICON_BUTTON_VARIANTS.DEFAULT]: {
+        backgroundColor: 'transparent',
+        backgroundHoverColor: theme.color.neutral.hover,
+        backgroundDisabledColor: 'transparent',
+        borderColor: 'transparent',
+        borderHoverColor: 'transparent',
+        borderDisabledColor: 'transparent',
+        iconColor: theme.color.neutral.text,
+    },
+    [ICON_BUTTON_VARIANTS.BORDERED]: {
+        backgroundColor: theme.color.neutral.backgroundMuted,
+        backgroundHoverColor: theme.color.neutral.hover,
+        backgroundDisabledColor: theme.color.neutral.disabled,
+        borderColor: theme.color.neutral.border,
+        borderHoverColor: theme.color.neutral.border,
+        borderDisabledColor: theme.color.neutral.border,
+        iconColor: theme.color.neutral.text,
+    },
+    [ICON_BUTTON_VARIANTS.DANGER_BORDERED]: {
+        backgroundColor: theme.color.neutral.backgroundMuted,
+        backgroundHoverColor: theme.color.danger.backgroundHover,
+        backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
+        borderColor: theme.color.neutral.border,
+        borderHoverColor: theme.color.danger.borderSubtle,
+        borderDisabledColor: theme.color.neutral.border,
+        iconColor: theme.color.danger.text,
+    },
+    [ICON_BUTTON_VARIANTS.DANGER]: {
+        backgroundColor: 'transparent',
+        backgroundHoverColor: theme.color.danger.backgroundHover,
+        backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
+        borderColor: 'transparent',
+        borderHoverColor: 'transparent',
+        borderDisabledColor: 'transparent',
+        iconColor: theme.color.danger.text,
+    },
+};
+const iconButtonSizeConfig = {
+    extraLarge: {
+        iconSize: '24',
+        spinnerSize: '2.4rem',
+    },
+    large: {
+        iconSize: '20',
+        spinnerSize: '2rem',
+    },
+    medium: {
+        iconSize: '16',
+        spinnerSize: '1.6rem',
+    },
+    small: {
+        iconSize: '16',
+        spinnerSize: '1.6rem',
+    },
+    extraSmall: {
+        iconSize: '12',
+        spinnerSize: '1.2rem',
+    },
+};
+const getIconButtonColorStyles = (variant) => {
+    const { backgroundColor, backgroundHoverColor, backgroundDisabledColor, borderDisabledColor, borderColor, borderHoverColor, iconColor, } = iconButtonVariantStyle[variant];
+    return css `
+        color: ${iconColor};
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+
+        &:hover {
+            background-color: ${backgroundHoverColor};
+            border-color: ${borderHoverColor || borderColor};
+            color: ${iconColor};
+        }
+
+        &:focus {
+            border-color: ${theme.color.primary.fieldBorderActive};
+        }
+
+        &:active {
+            background-color: ${theme.color.neutral.actionSecondaryActive};
+            border-color: ${theme.color.neutral.actionSecondaryActive};
+        }
+
+        &:disabled {
+            color: ${theme.color.neutral.iconDisabled};
+            background-color: ${backgroundDisabledColor};
+            border-color: ${borderDisabledColor};
+
+            cursor: default;
+        }
+    `;
+};
+const StyledButton = styled(Button) `
+    ${({ $variant }) => getIconButtonColorStyles($variant)}
+
+    /* Override default button styles */
+    box-sizing: border-box;
+    width: ${({ $size }) => (BUTTON_SIZE_VARIANTS_CSS[$size].size)}px;
+    padding: 0;
+
+    .${spinnerClassNames.SPINNER} .path {
+        stroke: ${theme.color.neutral.icon};
+    }
+`;
+/**
+ * Simplified button component that displays an icon.
+ * Has a tooltip and a loading state.
+ */
+export const IconButton = forwardRef(({ variant = ICON_BUTTON_VARIANTS.DEFAULT, size = 'medium', as = 'button', title, disabled = false, isLoading = false, Icon, tooltipProps, ...passThroughProps }, ref) => {
+    const otherProps = { ...passThroughProps, size };
+    const component = as === 'a' ? Link : as;
+    const { iconSize, spinnerSize } = iconButtonSizeConfig[size];
+    const button = (_jsx(StyledButton, { forwardedAs: component, ref: ref, disabled: disabled || isLoading, type: 'button', "aria-label": title, LeftIcon: isLoading ? () => _jsx(InlineSpinner, { size: spinnerSize }) : () => _jsx(Icon, { size: iconSize }), 
+        // We apply our own styles to the button, so we need to override the default variant
+        variant: "tertiary", "$size": size, "$variant": variant, ...otherProps }));
+    return title ? (
+    // @ts-expect-error tooltip is not migrated to TS yet
+    _jsx(Tooltip, { content: title, ...tooltipProps, children: button })) : button;
+});
+IconButton.displayName = 'IconButton';
+//# sourceMappingURL=icon_button.js.map

package/dist/src/components/icon_button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_button.js","sourceRoot":"","sources":["../../../src/components/icon_button.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/icon_button.stories.d.ts

@@ -0,0 +1,36 @@
+import type { Meta } from '@storybook/react-vite';
+import { IconButton, type IconButtonProps } from './icon_button.js';
+declare const _default: Meta<typeof IconButton>;
+export default _default;
+export declare const Default: (props: IconButtonProps<"button">) => import("react/jsx-runtime").JSX.Element;
+export declare const Playground: {
+    (props: IconButtonProps<"button">): import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: "DEFAULT";
+        size: string;
+        disabled: boolean;
+        isLoading: boolean;
+    };
+    argTypes: {
+        variant: {
+            options: {
+                readonly DEFAULT: "DEFAULT";
+                readonly BORDERED: "BORDERED";
+                readonly DANGER: "DANGER";
+                readonly DANGER_BORDERED: "DANGER_BORDERED";
+            };
+            control: string;
+        };
+        size: {
+            options: string[];
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        isLoading: {
+            control: string;
+        };
+    };
+};
+//# sourceMappingURL=icon_button.stories.d.ts.map

package/dist/src/components/icon_button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icon_button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAUlD,OAAO,EAEH,UAAU,EACV,KAAK,eAAe,EACvB,MAAM,kBAAkB,CAAC;wBAcrB,IAAI,CAAC,OAAO,UAAU,CAAC;AAZ5B,wBAY6B;AAS7B,eAAO,MAAM,OAAO,UAAW,eAAe,CAAC,QAAQ,CAAC,4CAsKvD,CAAC;AAQF,eAAO,MAAM,UAAU;YAAW,eAAe,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe1D,CAAC"}

package/dist/src/components/icon_button.stories.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// eslint-disable-next-line import/extensions
+import { action } from 'storybook/actions';
+import styled from 'styled-components';
+import { BellIcon, DeleteIcon, PeopleIcon, } from '@apify/ui-icons';
+import { ICON_BUTTON_VARIANTS, IconButton, } from './icon_button.js';
+export default {
+    title: 'UI-Library/IconButton',
+    component: IconButton,
+    args: {
+        onClick: action('onClick'),
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5236-40552&t=fCZgSCLJK79g0Omo-4',
+        },
+    },
+};
+const Table = styled.table `
+    td {
+        padding: 8px;
+    }
+    margin-bottom: 32px;
+`;
+export const Default = (props) => {
+    return (_jsx(_Fragment, { children: _jsx(Table, { children: _jsx("tbody", { children: Object.values(ICON_BUTTON_VARIANTS).map((variant) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'extraLarge', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'large', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'medium', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'small', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'extraSmall', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'extraLarge', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'large', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'medium', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'small', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'extraSmall', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'extraLarge', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'extraLarge', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'large', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'medium', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'small', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'extraSmall', title: 'Loading delete example' }) })] }, variant))) }) }) }));
+};
+const StyledPlayground = styled.div `
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+`;
+export const Playground = (props) => {
+    return (_jsxs(StyledPlayground, { children: [_jsx(IconButton, { ...props, Icon: PeopleIcon }), _jsx(IconButton, { ...props, Icon: DeleteIcon }), _jsx(IconButton, { ...props, Icon: BellIcon })] }));
+};
+Playground.args = {
+    variant: ICON_BUTTON_VARIANTS.DEFAULT,
+    size: 'medium',
+    disabled: false,
+    isLoading: false,
+};
+Playground.argTypes = {
+    variant: {
+        options: ICON_BUTTON_VARIANTS,
+        control: 'select',
+    },
+    size: {
+        options: ['medium', 'small'],
+        control: 'select',
+    },
+    disabled: {
+        control: 'boolean',
+    },
+    isLoading: {
+        control: 'boolean',
+    },
+};
+//# sourceMappingURL=icon_button.stories.js.map

package/dist/src/components/icon_button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon_button.stories.js","sourceRoot":"","sources":["../../../src/components/icon_button.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/index.d.ts

@@ -21,4 +21,6 @@ export * from './badge.js';
 export * from './tag.js';
 export * from './tabs/index.js';
 export * from './shortcut.js';
+export * from './icon_button.js';
+export * from './spinner.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/dist/src/components/index.js

@@ -21,4 +21,6 @@ export * from './badge.js';
 export * from './tag.js';
 export * from './tabs/index.js';
 export * from './shortcut.js';
+export * from './icon_button.js';
+export * from './spinner.js';
 //# sourceMappingURL=index.js.map

package/dist/src/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/dist/src/components/spinner.d.ts

@@ -0,0 +1,32 @@
+export declare const spinnerClassNames: {
+    SPINNER: string;
+};
+export type SpinnerProps = {
+    id?: string;
+    as?: React.ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    small?: boolean;
+    loadingReason?: string;
+};
+/**
+ * Visualize loading state of a component.
+ *
+ * Use this spinner when a page or section is waiting for asynchronous data.
+ * Do not use it for buttons and small components, apply only for bigger sections.
+ *
+ * Keep the spinner centered (eg. by setting position to parent container).
+ */
+export declare const Spinner: ({ loadingReason, small, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Spinner with basic block styling
+ * This styles should probably be in default spinner, but it's dangerous to modify it as it's used on so many places
+ */
+export declare const BlockSpinner: import("styled-components").StyledComponent<({ loadingReason, small, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/**
+ * Use the inline variant within buttons, texts etc. The color of the spinner is set to current color of text.
+ */
+export declare const InlineSpinner: import("styled-components").StyledComponent<({ loadingReason, small, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element, any, {
+    size?: string;
+}, never>;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/src/components/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB;;CAE7B,CAAC;AAuBF,MAAM,MAAM,YAAY,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AA4BF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,uCAAwC,YAAY,4CAgBvE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,mFAtBmC,YAAY,6DA0BvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,mFA/BkC,YAAY;WA+BnB,MAAM;SAW1D,CAAC"}

package/dist/src/components/spinner.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { keyframes } from 'styled-components';
+import { theme } from '../design_system/theme.js';
+export const spinnerClassNames = {
+    SPINNER: 'spinner',
+};
+const rotate = keyframes `
+    100% {
+        transform: rotate(360deg);
+    }
+`;
+const dash = keyframes `
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+    }
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
+`;
+// styled-components used in order to make 'as' prop work by default
+// span is intentional instead of div, so it can be validly nested in a <p>
+// display: block is used because it was div before and we don't wanna break anything
+const SpinnerWrapper = styled.span `
+    display: block;
+
+    .${spinnerClassNames.SPINNER} {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+
+        width: ${({ $small }) => ($small ? '3rem' : '5rem')};
+        height: ${({ $small }) => ($small ? '3rem' : '5rem')};
+
+        & .path {
+            transform-origin: center;
+            stroke: ${theme.color.primary.text};
+            animation: ${dash} 1.5s ease-in-out infinite, ${rotate} 2s linear infinite;
+        }
+    }
+`;
+/**
+ * Visualize loading state of a component.
+ *
+ * Use this spinner when a page or section is waiting for asynchronous data.
+ * Do not use it for buttons and small components, apply only for bigger sections.
+ *
+ * Keep the spinner centered (eg. by setting position to parent container).
+ */
+export const Spinner = ({ loadingReason, small, ...props }) => {
+    return (_jsx(SpinnerWrapper, { ...props, title: loadingReason, "$small": small, children: _jsx("svg", { className: spinnerClassNames.SPINNER, viewBox: "0 0 50 50", children: _jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5", strokeLinecap: "round" }) }) }));
+};
+/**
+ * Spinner with basic block styling
+ * This styles should probably be in default spinner, but it's dangerous to modify it as it's used on so many places
+ */
+export const BlockSpinner = styled(Spinner) `
+    position: relative; /* "hold" absolutely positioned spinner */
+    width: 100%;
+    min-height: 8rem;
+`;
+/**
+ * Use the inline variant within buttons, texts etc. The color of the spinner is set to current color of text.
+ */
+export const InlineSpinner = styled(Spinner) `
+    display: inline-block;
+    position: relative;
+    height: ${({ size }) => size || theme.space.space12};
+    width: ${({ size }) => size || theme.space.space12};
+    vertical-align: middle;
+
+    .${spinnerClassNames.SPINNER} {
+        width: 100%;
+        height: 100%;
+    }
+`;
+//# sourceMappingURL=spinner.js.map

package/dist/src/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGlD,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC7B,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;;CAIvB,CAAC;AAEF,MAAM,IAAI,GAAG,SAAS,CAAA;;;;;;;;;;;;;CAarB,CAAC;AAaF,oEAAoE;AACpE,2EAA2E;AAC3E,qFAAqF;AACrF,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAqB;;;OAGhD,iBAAiB,CAAC,OAAO;;;;;;;iBAOf,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;kBACzC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;;;;sBAItC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;yBACrB,IAAI,+BAA+B,MAAM;;;CAGjE,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACxE,OAAO,CACH,KAAC,cAAc,OAAK,KAAK,EAAE,KAAK,EAAE,aAAa,YAAU,KAAK,YAC1D,cAAK,SAAS,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAC,WAAW,YAC1D,iBACI,SAAS,EAAC,MAAM,EAChB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACf,GACR,GACO,CACpB,CAAC;AACN,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;;;CAI1C,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAiB;;;cAG/C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO;aAC1C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO;;;OAG/C,iBAAiB,CAAC,OAAO;;;;CAI/B,CAAC"}

package/dist/src/components/spinner.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta } from '@storybook/react-vite';
+import { Spinner, type SpinnerProps } from './spinner.js';
+declare const _default: Meta<typeof Spinner>;
+export default _default;
+export declare const Standalone: (args: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithinContainer: (args: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Inline: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=spinner.stories.d.ts.map

package/dist/src/components/spinner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAiB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;wBAOpE,IAAI,CAAC,OAAO,OAAO,CAAC;AALzB,wBAK0B;AAI1B,eAAO,MAAM,UAAU,SAFC,YAAY,4CAEO,CAAC;AAE5C,eAAO,MAAM,eAAe,SAAU,YAAY,4CAYjD,CAAC;AAEF,eAAO,MAAM,MAAM,+CAOlB,CAAC"}

package/dist/src/components/spinner.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InlineSpinner, Spinner } from './spinner.js';
+export default {
+    title: 'UI-Library/Spinner',
+    parameters: { layout: 'padded' },
+    component: Spinner,
+    args: {},
+};
+const Template = (args) => _jsx(Spinner, { ...args });
+export const Standalone = Template.bind({});
+export const WithinContainer = (args) => {
+    return (_jsx("div", { style: {
+            minWidth: '100px',
+            minHeight: '200px',
+            border: 'solid 1px lightgray',
+            borderRadius: '1rem',
+            position: 'relative',
+        }, children: _jsx(Spinner, { ...args }) }));
+};
+export const Inline = () => {
+    const elements = ['h1', 'h2', 'h3', 'p'];
+    return (_jsx("div", { style: { width: '100%' }, children: elements.map((Element) => _jsxs(Element, { children: [Element, ": There was a ", _jsx(InlineSpinner, {}), " in New Orleans."] }, Element)) }));
+};
+//# sourceMappingURL=spinner.stories.js.map

package/dist/src/components/spinner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAqB,MAAM,cAAc,CAAC;AAEzE,eAAe;IACX,KAAK,EAAE,oBAAoB;IAC3B,UAAU,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;IAChC,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE,EAAE;CACa,CAAC;AAE1B,MAAM,QAAQ,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,KAAC,OAAO,OAAK,IAAI,GAAI,CAAC;AAE/D,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAkB,EAAE,EAAE;IAClD,OAAO,CACH,cAAK,KAAK,EAAE;YACR,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,OAAO;YAClB,MAAM,EAAE,qBAAqB;YAC7B,YAAY,EAAE,MAAM;YACpB,QAAQ,EAAE,UAAU;SACvB,YACG,KAAC,OAAO,OAAK,IAAI,GAAI,GACnB,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,EAAE;IACvB,MAAM,QAAQ,GAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;IAC9D,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YACxB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,MAAC,OAAO,eAAgB,OAAO,oBAAe,KAAC,aAAa,KAAG,yBAAjD,OAAO,CAAoE,CAAC,GACnH,CACT,CAAC;AACN,CAAC,CAAC"}