@byline/ui 0.9.3 → 0.10.1

package/dist/icons/user-icon.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const UserIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: classnames('user-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsxs("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: applied,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            strokeWidth: 2,
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"
+                })
+            ]
+        })
+    });
+};
+UserIcon.displayName = 'UserIcon';
+export { UserIcon };

package/dist/icons/users-icon.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { IconProps } from './types/icon.js';
+export declare const UsersIcon: {
+    ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=users-icon.d.ts.map

package/dist/icons/users-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"users-icon.d.ts","sourceRoot":"","sources":["../../src/icons/users-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,SAAS;2CAA0C,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAsB5F,CAAA"}

package/dist/icons/users-icon.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const UsersIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = classnames(icons_module["fill-none"], icons_module["stroke-current"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: classnames('users-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsxs("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            className: applied,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            strokeWidth: 2,
+            children: [
+                /*#__PURE__*/ jsx("path", {
+                    d: "M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M16 3.13a4 4 0 0 1 0 7.75"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "M21 21v-2a4 4 0 0 0 -3 -3.85"
+                })
+            ]
+        })
+    });
+};
+UsersIcon.displayName = 'UsersIcon';
+export { UsersIcon };

package/dist/icons/wallet-icon.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { IconProps } from './types/icon.js';
+export declare const WalletIcon: {
+    ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=wallet-icon.d.ts.map

package/dist/icons/wallet-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallet-icon.d.ts","sourceRoot":"","sources":["../../src/icons/wallet-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,UAAU;2CAA0C,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAgB7F,CAAA"}

package/dist/icons/wallet-icon.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const WalletIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = classnames(icons_module["fill-current"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: classnames('wallet-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsx("svg", {
+            className: applied,
+            xmlns: "http://www.w3.org/2000/svg",
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M21 7.28V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-2.28c.59-.35 1-.98 1-1.72V9c0-.74-.41-1.37-1-1.72zM20 9v6h-7V9h7zM5 19V5h14v2h-6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h6v2H5z"
+            })
+        })
+    });
+};
+WalletIcon.displayName = 'WalletIcon';
+export { WalletIcon };

package/dist/icons/warning-icon.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { IconProps } from './types/icon.js';
+export declare const WarningIcon: ({ className, svgClassName, ...rest }: IconProps) => React.JSX.Element;
+//# sourceMappingURL=warning-icon.d.ts.map

package/dist/icons/warning-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"warning-icon.d.ts","sourceRoot":"","sources":["../../src/icons/warning-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,WAAW,GAAI,sCAAsC,SAAS,KAAG,KAAK,CAAC,GAAG,CAAC,OAUvF,CAAA"}

package/dist/icons/warning-icon.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const WarningIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = classnames(icons_module["fill-warning"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: classnames('warning-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsx("svg", {
+            className: applied,
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 24 24",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+            })
+        })
+    });
+};
+export { WarningIcon };

package/dist/icons/x-icon.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { IconProps } from './types/icon.js';
+export declare const XIcon: {
+    ({ className, svgClassName, ...rest }: IconProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=x-icon.d.ts.map

package/dist/icons/x-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"x-icon.d.ts","sourceRoot":"","sources":["../../src/icons/x-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEhD,eAAO,MAAM,KAAK;2CAA0C,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAoBxF,CAAA"}

package/dist/icons/x-icon.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { IconElement } from "./icon-element.js";
+import icons_module from "./icons.module.js";
+const XIcon = ({ className, svgClassName, ...rest })=>{
+    const applied = classnames(icons_module["fill-gray"], svgClassName);
+    return /*#__PURE__*/ jsx(IconElement, {
+        className: classnames('x-icon', className),
+        ...rest,
+        children: /*#__PURE__*/ jsx("svg", {
+            className: applied,
+            xmlns: "http://www.w3.org/2000/svg",
+            focusable: "false",
+            "aria-hidden": "true",
+            viewBox: "0 0 15 15",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z",
+                fillRule: "evenodd",
+                clipRule: "evenodd"
+            })
+        })
+    });
+};
+XIcon.displayName = 'XIcon';
+export { XIcon };

package/dist/lib/ripple.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Material-style ripple effect.
+ *
+ * Based on material-ripple-effects by Sajad Ahmad Nawabi (https://github.com/sajadevo/material-ripple-effects)
+ * Original work licensed under the MIT License.
+ * Copyright (c) 2021 Sajad Ahmad Nawabi
+ *
+ * Adapted for use as an internal ESM/TypeScript module with minor improvements.
+ */
+export type RippleColor = 'light' | 'dark';
+export declare class Ripple {
+    private x;
+    private y;
+    private z;
+    private findFurthestPoint;
+    private applyStyles;
+    private applyAnimation;
+    create(event: MouseEvent | {
+        clientX: number;
+        clientY: number;
+        currentTarget: EventTarget | null;
+    }, color?: RippleColor): void;
+}
+export default Ripple;
+//# sourceMappingURL=ripple.d.ts.map

package/dist/lib/ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../src/lib/ripple.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAE1C,qBAAa,MAAM;IACjB,OAAO,CAAC,CAAC,CAAI;IACb,OAAO,CAAC,CAAC,CAAI;IACb,OAAO,CAAC,CAAC,CAAI;IAEb,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,cAAc;IAatB,MAAM,CACJ,KAAK,EAAE,UAAU,GAAG;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,EAC3F,KAAK,GAAE,WAAqB,GAC3B,IAAI;CA0BR;AAED,eAAe,MAAM,CAAA"}

package/dist/lib/ripple.js

@@ -0,0 +1,53 @@
+class Ripple {
+    findFurthestPoint(clickPointX, elementWidth, offsetX, clickPointY, elementHeight, offsetY) {
+        this.x = clickPointX - offsetX > elementWidth / 2 ? 0 : elementWidth;
+        this.y = clickPointY - offsetY > elementHeight / 2 ? 0 : elementHeight;
+        this.z = Math.hypot(this.x - (clickPointX - offsetX), this.y - (clickPointY - offsetY));
+        return this.z;
+    }
+    applyStyles(element, color, rect, radius, clientX, clientY) {
+        element.classList.add('ripple');
+        element.style.backgroundColor = 'dark' === color ? 'rgba(0,0,0, 0.2)' : 'rgba(255,255,255, 0.3)';
+        element.style.borderRadius = '50%';
+        element.style.pointerEvents = 'none';
+        element.style.position = 'absolute';
+        element.style.left = `${clientX - rect.left - radius}px`;
+        element.style.top = `${clientY - rect.top - radius}px`;
+        element.style.width = element.style.height = `${2 * radius}px`;
+    }
+    applyAnimation(element) {
+        element.animate([
+            {
+                transform: 'scale(0)',
+                opacity: 1
+            },
+            {
+                transform: 'scale(1.5)',
+                opacity: 0
+            }
+        ], {
+            duration: 500,
+            easing: 'linear'
+        });
+    }
+    create(event, color = 'light') {
+        const element = event.currentTarget;
+        element.style.position = 'relative';
+        element.style.overflow = 'hidden';
+        const rect = element.getBoundingClientRect();
+        const radius = this.findFurthestPoint(event.clientX, element.offsetWidth, rect.left, event.clientY, element.offsetHeight, rect.top);
+        const circle = document.createElement('span');
+        this.applyStyles(circle, color, rect, radius, event.clientX, event.clientY);
+        this.applyAnimation(circle);
+        element.appendChild(circle);
+        setTimeout(()=>circle.remove(), 500);
+    }
+    constructor(){
+        this.x = 0;
+        this.y = 0;
+        this.z = 0;
+    }
+}
+const ripple = Ripple;
+export default ripple;
+export { Ripple };

package/dist/loaders/@types/index.d.ts

@@ -0,0 +1,7 @@
+export type LoaderProps = {
+    /** hex color */
+    color?: string;
+    /** size as a number (px) or string with units (e.g. '2rem') */
+    size?: number | string;
+} & React.HTMLAttributes<HTMLDivElement>;
+//# sourceMappingURL=index.d.ts.map

package/dist/loaders/@types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/loaders/@types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA"}

package/dist/loaders/@types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/loaders/ellipses.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { LoaderProps } from './@types/index.js';
+export declare function LoaderEllipsis({ color, size, className, style, ...rest }: LoaderProps): React.JSX.Element;
+//# sourceMappingURL=ellipses.d.ts.map

package/dist/loaders/ellipses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipses.d.ts","sourceRoot":"","sources":["../../src/loaders/ellipses.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4BjC"}

package/dist/loaders/ellipses.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import ellipses_module from "./ellipses.module.js";
+function LoaderEllipsis({ color, size, className, style, ...rest }) {
+    const ellipsisStyle = {
+        ...style
+    };
+    if (null != size) ellipsisStyle['--loader-ellipsis-size'] = 'number' == typeof size ? `${size}px` : size;
+    if (color) ellipsisStyle['--loader-ellipsis-color'] = color;
+    const circles = [
+        ...Array(4)
+    ].map((_, index)=>/*#__PURE__*/ jsx("div", {
+            className: classnames('infonomic-loader-ellipsis-dot', ellipses_module["loader-ellipsis-dot"])
+        }, index));
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('infonomic-loader-ellipsis', ellipses_module["loader-ellipsis"], className),
+        style: ellipsisStyle,
+        ...rest,
+        children: circles
+    });
+}
+export { LoaderEllipsis };

package/dist/loaders/ellipses.module.js

@@ -0,0 +1,14 @@
+import "./ellipses_module.css";
+const ellipses_module = {
+    "loader-ellipsis": "loader-ellipsis-KxN5UN",
+    loaderEllipsis: "loader-ellipsis-KxN5UN",
+    "loader-ellipsis-dot": "loader-ellipsis-dot-o11IHe",
+    loaderEllipsisDot: "loader-ellipsis-dot-o11IHe",
+    "loader-ellipsis-grow": "loader-ellipsis-grow-PDS3mJ",
+    loaderEllipsisGrow: "loader-ellipsis-grow-PDS3mJ",
+    "loader-ellipsis-slide": "loader-ellipsis-slide-hWB8Kb",
+    loaderEllipsisSlide: "loader-ellipsis-slide-hWB8Kb",
+    "loader-ellipsis-shrink": "loader-ellipsis-shrink-CF5JUt",
+    loaderEllipsisShrink: "loader-ellipsis-shrink-CF5JUt"
+};
+export default ellipses_module;

package/dist/loaders/ellipses_module.css

@@ -0,0 +1,73 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.loader-ellipsis-KxN5UN, .infonomic-loader-ellipsis) {
+    --_size: var(--loader-ellipsis-size, 80px);
+    --_color: var(--loader-ellipsis-color, var(--loader-color, currentColor));
+    width: var(--_size);
+    height: calc(var(--_size) * .5);
+    display: inline-block;
+    position: relative;
+  }
+
+  :is(.loader-ellipsis-dot-o11IHe, .infonomic-loader-ellipsis-dot) {
+    background: var(--_color);
+    border-radius: 50%;
+    width: 16.25%;
+    height: 32.25%;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    position: absolute;
+    top: 41.25%;
+  }
+
+  .loader-ellipsis-dot-o11IHe:first-child {
+    animation: .6s infinite loader-ellipsis-grow-PDS3mJ;
+    left: 10%;
+  }
+
+  .loader-ellipsis-dot-o11IHe:nth-child(2) {
+    animation: .6s infinite loader-ellipsis-slide-hWB8Kb;
+    left: 10%;
+  }
+
+  .loader-ellipsis-dot-o11IHe:nth-child(3) {
+    animation: .6s infinite loader-ellipsis-slide-hWB8Kb;
+    left: 40%;
+  }
+
+  .loader-ellipsis-dot-o11IHe:nth-child(4) {
+    animation: .6s infinite loader-ellipsis-shrink-CF5JUt;
+    left: 70%;
+  }
+
+  @keyframes loader-ellipsis-grow-PDS3mJ {
+    0% {
+      transform: scale(0);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes loader-ellipsis-shrink-CF5JUt {
+    0% {
+      transform: scale(1);
+    }
+
+    100% {
+      transform: scale(0);
+    }
+  }
+
+  @keyframes loader-ellipsis-slide-hWB8Kb {
+    0% {
+      transform: translate(0);
+    }
+
+    100% {
+      transform: translate(184.61%);
+    }
+  }
+}
+

package/dist/loaders/ring.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { LoaderProps } from './@types/index.js';
+export declare function LoaderRing({ color, size, className, style, ...rest }: LoaderProps): React.JSX.Element;
+//# sourceMappingURL=ring.d.ts.map

package/dist/loaders/ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ring.d.ts","sourceRoot":"","sources":["../../src/loaders/ring.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA8BjC"}

package/dist/loaders/ring.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import ring_module from "./ring.module.js";
+function LoaderRing({ color, size, className, style, ...rest }) {
+    const ringStyle = {
+        ...style
+    };
+    if (null != size) ringStyle['--loader-ring-size'] = 'number' == typeof size ? `${size}px` : size;
+    if (color) ringStyle['--loader-ring-color'] = color;
+    const circles = [
+        ...Array(4)
+    ].map((_, index)=>/*#__PURE__*/ jsx("div", {
+            className: classnames('infonomic-loader-ring-arc', ring_module["loader-ring-arc"])
+        }, index));
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('infonomic-loader-ring', ring_module["loader-ring"], className),
+        style: ringStyle,
+        ...rest,
+        children: circles
+    });
+}
+export { LoaderRing };

package/dist/loaders/ring.module.js

@@ -0,0 +1,8 @@
+import "./ring_module.css";
+const ring_module = {
+    "loader-ring": "loader-ring-qd6bmX",
+    loaderRing: "loader-ring-qd6bmX",
+    "loader-ring-arc": "loader-ring-arc-MS2FMV",
+    loaderRingArc: "loader-ring-arc-MS2FMV"
+};
+export default ring_module;

package/dist/loaders/ring_module.css

@@ -0,0 +1,49 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.loader-ring-qd6bmX, .infonomic-loader-ring) {
+    --_size: var(--loader-ring-size, 60px);
+    --_color: var(--loader-ring-color, var(--loader-color, currentColor));
+    width: var(--_size);
+    height: var(--_size);
+    display: inline-block;
+    position: relative;
+  }
+
+  :is(.loader-ring-arc-MS2FMV, .infonomic-loader-ring-arc) {
+    box-sizing: border-box;
+    width: calc(var(--_size) * .8);
+    height: calc(var(--_size) * .8);
+    margin: calc(var(--_size) * .1);
+    border-width: calc(var(--_size) * .1);
+    border-style: solid;
+    border-color: var(--_color) transparent transparent transparent;
+    border-radius: 50%;
+    animation: 1.2s cubic-bezier(.5, 0, .5, 1) infinite loader-ring-qd6bmX;
+    display: block;
+    position: absolute;
+  }
+
+  .loader-ring-arc-MS2FMV:first-child {
+    animation-delay: -.45s;
+  }
+
+  .loader-ring-arc-MS2FMV:nth-child(2) {
+    animation-delay: -.3s;
+  }
+
+  .loader-ring-arc-MS2FMV:nth-child(3) {
+    animation-delay: -.15s;
+  }
+
+  @keyframes loader-ring-qd6bmX {
+    0% {
+      transform: rotate(0);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}
+

package/dist/loaders/spinner.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { LoaderProps } from './@types/index.js';
+export declare function LoaderSpinner({ color, size, className, style, ...rest }: LoaderProps): React.JSX.Element;
+//# sourceMappingURL=spinner.d.ts.map

package/dist/loaders/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/loaders/spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,IAAI,EACJ,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqCjC"}

package/dist/loaders/spinner.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import spinner_module from "./spinner.module.js";
+function LoaderSpinner({ color, size, className, style, ...rest }) {
+    const circles = [
+        ...Array(12)
+    ].map((_, index)=>/*#__PURE__*/ jsx("div", {
+            className: classnames('infonomic-loader-spinner-blade', spinner_module["loader-spinner-blade"]),
+            children: /*#__PURE__*/ jsx("div", {
+                className: classnames('infonomic-loader-spinner-blade-inner', spinner_module["loader-spinner-blade-inner"])
+            })
+        }, index));
+    const spinnerStyle = {
+        ...style
+    };
+    if (null != size) spinnerStyle['--loader-spinner-size'] = 'number' == typeof size ? `${size}px` : size;
+    if (color) spinnerStyle['--loader-spinner-color'] = color;
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('infonomic-loader-spinner', spinner_module["loader-spinner"], className),
+        style: spinnerStyle,
+        ...rest,
+        children: circles
+    });
+}
+export { LoaderSpinner };

package/dist/loaders/spinner.module.js

@@ -0,0 +1,10 @@
+import "./spinner_module.css";
+const spinner_module = {
+    "loader-spinner": "loader-spinner-QHtGI_",
+    loaderSpinner: "loader-spinner-QHtGI_",
+    "loader-spinner-blade": "loader-spinner-blade-DQvsAd",
+    loaderSpinnerBlade: "loader-spinner-blade-DQvsAd",
+    "loader-spinner-blade-inner": "loader-spinner-blade-inner-rWTE9U",
+    loaderSpinnerBladeInner: "loader-spinner-blade-inner-rWTE9U"
+};
+export default spinner_module;

package/dist/loaders/spinner_module.css

@@ -0,0 +1,99 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.loader-spinner-QHtGI_, .infonomic-loader-spinner) {
+    --_size: var(--loader-spinner-size, 56px);
+    --_color: var(--loader-spinner-color, var(--loader-color, currentColor));
+    width: var(--_size);
+    height: var(--_size);
+    display: inline-block;
+    position: relative;
+  }
+
+  :is(.loader-spinner-blade-DQvsAd, .infonomic-loader-spinner-blade) {
+    transform-origin: calc(var(--_size) * .5) calc(var(--_size) * .5714);
+    animation: 1.2s linear infinite loader-spinner-QHtGI_;
+  }
+
+  :is(.loader-spinner-blade-inner-rWTE9U, .infonomic-loader-spinner-blade-inner) {
+    top: 0;
+    left: calc(var(--_size) * .4464);
+    width: calc(var(--_size) * .0893);
+    height: calc(var(--_size) * .25);
+    background: var(--_color);
+    border-radius: 20%;
+    display: block;
+    position: absolute;
+  }
+
+  .loader-spinner-blade-DQvsAd:first-child {
+    animation-delay: -1.1s;
+    transform: rotate(0);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(2) {
+    animation-delay: -1s;
+    transform: rotate(30deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(3) {
+    animation-delay: -.9s;
+    transform: rotate(60deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(4) {
+    animation-delay: -.8s;
+    transform: rotate(90deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(5) {
+    animation-delay: -.7s;
+    transform: rotate(120deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(6) {
+    animation-delay: -.6s;
+    transform: rotate(150deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(7) {
+    animation-delay: -.5s;
+    transform: rotate(180deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(8) {
+    animation-delay: -.4s;
+    transform: rotate(210deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(9) {
+    animation-delay: -.3s;
+    transform: rotate(240deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(10) {
+    animation-delay: -.2s;
+    transform: rotate(270deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(11) {
+    animation-delay: -.1s;
+    transform: rotate(300deg);
+  }
+
+  .loader-spinner-blade-DQvsAd:nth-child(12) {
+    animation-delay: 0s;
+    transform: rotate(330deg);
+  }
+
+  @keyframes loader-spinner-QHtGI_ {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+}
+