@onepercentio/one-ui 0.6.2 → 0.6.3

package/dist/components/AsyncWrapper/AsyncWrapper.stories.js

@@ -1,34 +1,34 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitialImplementation = void 0;
-const react_1 = __importDefault(require("react"));
-const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
-const Loader_1 = __importDefault(require("../Loader"));
-const AsyncWrapper_1 = __importDefault(require("./AsyncWrapper"));
-exports.default = {
-    component: AsyncWrapper_1.default,
-    title: "Async Wrapper",
-};
-const InitialImplementation = (args) => (react_1.default.createElement(OneUIProvider_1.default, { config: {
-        component: {
-            asyncWrapper: {
-                LoadingComponent: () => react_1.default.createElement(Loader_1.default, null),
-                messages: {
-                    error: {
-                        title: "Exemplo de error",
-                        retryBtn: "Tentar novamente",
-                    },
-                },
-            },
-        },
-    } },
-    react_1.default.createElement(AsyncWrapper_1.default, Object.assign({}, args))));
-exports.InitialImplementation = InitialImplementation;
-exports.InitialImplementation.args = {
-    loading: true,
-    error: false
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
+const Loader_1 = __importDefault(require("../Loader"));
+const AsyncWrapper_1 = __importDefault(require("./AsyncWrapper"));
+exports.default = {
+    component: AsyncWrapper_1.default,
+    title: "Async Wrapper",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(OneUIProvider_1.default, { config: {
+        component: {
+            asyncWrapper: {
+                LoadingComponent: () => react_1.default.createElement(Loader_1.default, null),
+                messages: {
+                    error: {
+                        title: "Exemplo de error",
+                        retryBtn: "Tentar novamente",
+                    },
+                },
+            },
+        },
+    } },
+    react_1.default.createElement(AsyncWrapper_1.default, Object.assign({}, args))));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    loading: true,
+    error: false
+};
 //# sourceMappingURL=AsyncWrapper.stories.js.map

package/dist/components/AsyncWrapper/AsyncWrapper.test.d.ts

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

package/dist/components/AsyncWrapper/AsyncWrapper.test.js

@@ -1,19 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-const AsyncWrapper_stories_1 = require("./AsyncWrapper.stories");
-function renderScreen(props) {
-    return (0, react_2.render)(react_1.default.createElement(AsyncWrapper_stories_1.InitialImplementation, Object.assign({}, props)));
-}
-it('Should at least render :)', () => {
-    renderScreen({});
-});
-it.todo("Should show the modal when ther is error");
-it.todo("Should show the loading screen when it's loading");
-it.todo("Should be able to retry");
-it.todo("Should be able to exit without retrying");
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const AsyncWrapper_stories_1 = require("./AsyncWrapper.stories");
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(AsyncWrapper_stories_1.InitialImplementation, Object.assign({}, props)));
+}
+it('Should at least render :)', () => {
+    renderScreen({});
+});
+it.todo("Should show the modal when ther is error");
+it.todo("Should show the loading screen when it's loading");
+it.todo("Should be able to retry");
+it.todo("Should be able to exit without retrying");
 //# sourceMappingURL=AsyncWrapper.test.js.map

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

@@ -1 +1 @@
-export { default } from './AsyncWrapper';
+export { default } from './AsyncWrapper';

package/dist/components/AsyncWrapper/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var AsyncWrapper_1 = require("./AsyncWrapper");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AsyncWrapper_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var AsyncWrapper_1 = require("./AsyncWrapper");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(AsyncWrapper_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/Avatar/Avatar.d.ts

@@ -1,8 +1,8 @@
-/**
- * A simple avatar that shows the image of the user or it's initials as fallback
- **/
-export default function Avatar({ name, imgSrc, size, }: {
-    imgSrc?: string;
-    name: string;
-    size?: number;
-}): JSX.Element;
+/**
+ * A simple avatar that shows the image of the user or it's initials as fallback
+ **/
+export default function Avatar({ name, imgSrc, size, }: {
+    imgSrc?: string;
+    name: string;
+    size?: number;
+}): JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -1,45 +1,45 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
-/**
- * A simple avatar that shows the image of the user or it's initials as fallback
- **/
-function Avatar({ name, imgSrc, size = 48, }) {
-    const initials = (0, react_1.useMemo)(() => {
-        const nameParts = name.trim().split(" ");
-        if (nameParts.length === 1)
-            return nameParts[0].charAt(0).toUpperCase();
-        const [firstName, lastName] = [nameParts[0], nameParts.slice(-1)[0]];
-        return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-    }, [name]);
-    return (react_1.default.createElement("div", { className: Avatar_module_scss_1.default.container, style: { fontSize: size }, title: name }, imgSrc ? react_1.default.createElement("img", { src: imgSrc, alt: name }) : react_1.default.createElement("span", null, initials)));
-}
-exports.default = Avatar;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
+/**
+ * A simple avatar that shows the image of the user or it's initials as fallback
+ **/
+function Avatar({ name, imgSrc, size = 48, }) {
+    const initials = (0, react_1.useMemo)(() => {
+        const nameParts = name.trim().split(" ");
+        if (nameParts.length === 1)
+            return nameParts[0].charAt(0).toUpperCase();
+        const [firstName, lastName] = [nameParts[0], nameParts.slice(-1)[0]];
+        return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+    }, [name]);
+    return (react_1.default.createElement("div", { className: Avatar_module_scss_1.default.container, style: { fontSize: size }, title: name }, imgSrc ? react_1.default.createElement("img", { src: imgSrc, alt: name }) : react_1.default.createElement("span", null, initials)));
+}
+exports.default = Avatar;
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -1,14 +1,14 @@
-import Avatar from "./Avatar";
-declare const _default: {
-    component: typeof Avatar;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        imgSrc?: string | undefined;
-        name: string;
-        size?: number | undefined;
-    }>;
-};
+import Avatar from "./Avatar";
+declare const _default: {
+    component: typeof Avatar;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        imgSrc?: string | undefined;
+        name: string;
+        size?: number | undefined;
+    }>;
+};

package/dist/components/Avatar/Avatar.stories.js

@@ -1,19 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitialImplementation = void 0;
-const react_1 = __importDefault(require("react"));
-const Avatar_1 = __importDefault(require("./Avatar"));
-exports.default = {
-    component: Avatar_1.default,
-    title: "Avatar"
-};
-const InitialImplementation = (args) => react_1.default.createElement(Avatar_1.default, Object.assign({}, args));
-exports.InitialImplementation = InitialImplementation;
-exports.InitialImplementation.args = {
-    name: "Put your name here",
-    size: 48
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const Avatar_1 = __importDefault(require("./Avatar"));
+exports.default = {
+    component: Avatar_1.default,
+    title: "Avatar"
+};
+const InitialImplementation = (args) => react_1.default.createElement(Avatar_1.default, Object.assign({}, args));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    name: "Put your name here",
+    size: 48
+};
 //# sourceMappingURL=Avatar.stories.js.map

package/dist/components/Avatar/Avatar.test.d.ts

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

package/dist/components/Avatar/Avatar.test.js

@@ -1,36 +1,36 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-const Avatar_stories_1 = require("./Avatar.stories");
-function renderScreen(props) {
-    return (0, react_2.render)(react_1.default.createElement(Avatar_stories_1.InitialImplementation, Object.assign({}, props)));
-}
-it("Should show the image if provided", () => {
-    const MOCK_IMG = `data:base64//somebase64`;
-    const MOCK_NAME = "Francesco Silva";
-    const { container } = renderScreen({
-        name: MOCK_NAME,
-        imgSrc: MOCK_IMG,
-    });
-    expect(container.textContent).toBe("");
-    expect(container.querySelector("img").getAttribute("alt")).toEqual(MOCK_NAME);
-});
-it.each([
-    ["Murilo", "M"],
-    ["Murilo Oliveira de Araujo", "MA"],
-    ["Murilo Araujo", "MA"],
-    ["Francesco Espacio ", "FE"],
-    ["   This Is the Way  ", "TW"],
-    ["Mano Mano", "MM"],
-    ["Single", "S"],
-])("Should show the initials for the name %s as %s", (name, expectation) => {
-    const { container } = renderScreen({
-        name: name,
-    });
-    expect(container.textContent).toEqual(expectation);
-});
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Avatar_stories_1 = require("./Avatar.stories");
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(Avatar_stories_1.InitialImplementation, Object.assign({}, props)));
+}
+it("Should show the image if provided", () => {
+    const MOCK_IMG = `data:base64//somebase64`;
+    const MOCK_NAME = "Francesco Silva";
+    const { container } = renderScreen({
+        name: MOCK_NAME,
+        imgSrc: MOCK_IMG,
+    });
+    expect(container.textContent).toBe("");
+    expect(container.querySelector("img").getAttribute("alt")).toEqual(MOCK_NAME);
+});
+it.each([
+    ["Murilo", "M"],
+    ["Murilo Oliveira de Araujo", "MA"],
+    ["Murilo Araujo", "MA"],
+    ["Francesco Espacio ", "FE"],
+    ["   This Is the Way  ", "TW"],
+    ["Mano Mano", "MM"],
+    ["Single", "S"],
+])("Should show the initials for the name %s as %s", (name, expectation) => {
+    const { container } = renderScreen({
+        name: name,
+    });
+    expect(container.textContent).toEqual(expectation);
+});
 //# sourceMappingURL=Avatar.test.js.map

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

@@ -1 +1 @@
-export { default } from './Avatar';
+export { default } from './Avatar';

package/dist/components/Avatar/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Avatar_1 = require("./Avatar");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Avatar_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Avatar_1 = require("./Avatar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Avatar_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/BucketFill/BucketFill.d.ts

@@ -1,12 +1,12 @@
-import { PropsWithChildren, ReactNode } from "react";
-/**
- * A weird name for a component, but it's objective is to change element colors as the user progresses through a series of steps
- *
- * IT IS NOT READY (AND PROBABLY NEVER WILL) FOR FRAGMENT NODES
- **/
-export default function BucketFill({ children, background, fillTo, }: {
-    children: ReactNode[];
-    fillTo: number;
-    background: string;
-}): JSX.Element;
-export declare function IgnoreFill({ children }: PropsWithChildren<{}>): JSX.Element;
+import { PropsWithChildren, ReactNode } from "react";
+/**
+ * A weird name for a component, but it's objective is to change element colors as the user progresses through a series of steps
+ *
+ * IT IS NOT READY (AND PROBABLY NEVER WILL) FOR FRAGMENT NODES
+ **/
+export default function BucketFill({ children, background, fillTo, }: {
+    children: ReactNode[];
+    fillTo: number;
+    background: string;
+}): JSX.Element;
+export declare function IgnoreFill({ children }: PropsWithChildren<{}>): JSX.Element;

package/dist/components/BucketFill/BucketFill.js

@@ -1,66 +1,66 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IgnoreFill = void 0;
-const react_1 = __importStar(require("react"));
-const BucketFill_module_scss_1 = __importDefault(require("./BucketFill.module.scss"));
-/**
- * A weird name for a component, but it's objective is to change element colors as the user progresses through a series of steps
- *
- * IT IS NOT READY (AND PROBABLY NEVER WILL) FOR FRAGMENT NODES
- **/
-function BucketFill({ children, background, fillTo, }) {
-    const rootRef = (0, react_1.useRef)(null);
-    function resize() {
-        const childs = rootRef.current.children;
-        const s = rootRef.current.style;
-        const elementAtPosition = fillTo === 0 ? null : childs.item(fillTo - 1);
-        const elementOffsetAndHeight = elementAtPosition === null
-            ? 0
-            : elementAtPosition.offsetTop + elementAtPosition.clientHeight;
-        const elementRootHeight = rootRef.current.clientHeight;
-        const percentToFill = Math.min((elementOffsetAndHeight * 100) / elementRootHeight, 100);
-        s.setProperty("--fill-height", `${percentToFill}%`);
-        s.setProperty("--empty-height", `${100 - percentToFill}%`);
-        s.setProperty("--bg-offset", `${percentToFill === 100 ? -1000 : 100 / ((100 - percentToFill) / 100)}%`);
-    }
-    (0, react_1.useEffect)(() => {
-        resize();
-        window.addEventListener("resize", resize);
-        return () => window.removeEventListener("resize", resize);
-    }, [fillTo]);
-    return (react_1.default.createElement("div", { ref: rootRef, style: {
-            "--bg": background,
-        }, className: BucketFill_module_scss_1.default.root }, children));
-}
-exports.default = BucketFill;
-function IgnoreFill({ children }) {
-    return react_1.default.createElement("div", { className: BucketFill_module_scss_1.default.ignoreFill }, children);
-}
-exports.IgnoreFill = IgnoreFill;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IgnoreFill = void 0;
+const react_1 = __importStar(require("react"));
+const BucketFill_module_scss_1 = __importDefault(require("./BucketFill.module.scss"));
+/**
+ * A weird name for a component, but it's objective is to change element colors as the user progresses through a series of steps
+ *
+ * IT IS NOT READY (AND PROBABLY NEVER WILL) FOR FRAGMENT NODES
+ **/
+function BucketFill({ children, background, fillTo, }) {
+    const rootRef = (0, react_1.useRef)(null);
+    function resize() {
+        const childs = rootRef.current.children;
+        const s = rootRef.current.style;
+        const elementAtPosition = fillTo === 0 ? null : childs.item(fillTo - 1);
+        const elementOffsetAndHeight = elementAtPosition === null
+            ? 0
+            : elementAtPosition.offsetTop + elementAtPosition.clientHeight;
+        const elementRootHeight = rootRef.current.clientHeight;
+        const percentToFill = Math.min((elementOffsetAndHeight * 100) / elementRootHeight, 100);
+        s.setProperty("--fill-height", `${percentToFill}%`);
+        s.setProperty("--empty-height", `${100 - percentToFill}%`);
+        s.setProperty("--bg-offset", `${percentToFill === 100 ? -1000 : 100 / ((100 - percentToFill) / 100)}%`);
+    }
+    (0, react_1.useEffect)(() => {
+        resize();
+        window.addEventListener("resize", resize);
+        return () => window.removeEventListener("resize", resize);
+    }, [fillTo]);
+    return (react_1.default.createElement("div", { ref: rootRef, style: {
+            "--bg": background,
+        }, className: BucketFill_module_scss_1.default.root }, children));
+}
+exports.default = BucketFill;
+function IgnoreFill({ children }) {
+    return react_1.default.createElement("div", { className: BucketFill_module_scss_1.default.ignoreFill }, children);
+}
+exports.IgnoreFill = IgnoreFill;
 //# sourceMappingURL=BucketFill.js.map

package/dist/components/BucketFill/BucketFill.stories.d.ts

@@ -1,17 +1,17 @@
-import React from "react";
-import BucketFill from "./BucketFill";
-import "./BucketFill.stories.module.scss";
-declare const _default: {
-    component: typeof BucketFill;
-    title: string;
-};
-export default _default;
-export declare const AutoFill: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        children: React.ReactNode[];
-        fillTo: number;
-        background: string;
-    }>;
-};
-export declare const Sandbox: (args: any) => JSX.Element;
+import React from "react";
+import BucketFill from "./BucketFill";
+import "./BucketFill.stories.module.scss";
+declare const _default: {
+    component: typeof BucketFill;
+    title: string;
+};
+export default _default;
+export declare const AutoFill: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        children: React.ReactNode[];
+        fillTo: number;
+        background: string;
+    }>;
+};
+export declare const Sandbox: (args: any) => JSX.Element;