@jobber/components 4.85.4-CJS-to-ESM.1 → 4.85.4-CJS-to-ESM.4

package/dist/DataListStatusBar-e17eff45.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var DataList_utils = require('./DataList.utils-b72b8d0d.js');
+var DataListContext = require('./DataListContext-f40570a7.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+// This component is meant to capture the props of the DataList.Filters
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function DataListStatusBar(_) {
+    return null;
+}
+/**
+ * Renders the DataList.StatusBar component
+ */
+function InternalDataListStatusBar() {
+    const { children: parentChildren } = DataListContext.useDataListContext();
+    const component = DataList_utils.getCompoundComponent(parentChildren, DataListStatusBar);
+    if (!component)
+        return null;
+    const children = component === null || component === void 0 ? void 0 : component.props.children;
+    return React__default["default"].createElement(React__default["default"].Fragment, null, children);
+}
+
+exports.DataListStatusBar = DataListStatusBar;
+exports.InternalDataListStatusBar = InternalDataListStatusBar;

package/dist/DataListStickyHeader-0728e21b.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var classnames = require('classnames');
+var React = require('react');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var DataList_const = require('./DataList.const-c05b47de.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      100ms,\n    width var(--sticky-header-transition-properties);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: calc(16px / 8);\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) 100ms;\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
+var styles = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListStickyHeader({ children }) {
+    const [isStuck, setIsStuck] = React.useState(false);
+    const ref = React.useRef(null);
+    const handleObserver = React.useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
+    React.useEffect(() => {
+        if (!window.IntersectionObserver)
+            return;
+        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
+        ref.current && observer.observe(ref.current);
+        return () => {
+            ref.current && observer.unobserve(ref.current);
+        };
+    }, [handleObserver, ref.current]);
+    return (React__default["default"].createElement("div", { "data-testid": DataList_const.DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames__default["default"](styles.header, { [styles.stuck]: isStuck }) }, children));
+}
+
+exports.DataListStickyHeader = DataListStickyHeader;

package/dist/DataListStickyHeader-ce11cbd9.js

@@ -0,0 +1,26 @@
+import classnames from 'classnames';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { a as DATA_LIST_STICKY_HEADER_TEST_ID } from './DataList.const-3ae7ceef.js';
+
+var css_248z = ".PGOHzrMh374- {\n  --offset: 1px;\n  --sticky-header-transition-properties: var(--timing-base) ease-in-out;\n\n  position: sticky;\n  top: calc(1px * -1);\n  top: calc(var(--offset) * -1);\n  z-index: 1;\n  z-index: var(--elevation-base);\n  padding-top: 1px;\n  padding-top: var(--offset);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n/**\n * Draw a border that gets covered by the column headers border when it shows up.\n *\n * Mostly to prevent us from writing some complex JS to remove the border when\n * the column headers show up.\n */\n\n.PGOHzrMh374-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  z-index: -1;\n  width: 0;\n  height: 0;\n  background-color: rgb(217, 223, 225);\n  background-color: var(--color-border);\n  -webkit-transform: translateX(-50%);\n          transform: translateX(-50%);\n  transition: height var(--sticky-header-transition-properties)\n      100ms,\n    width var(--sticky-header-transition-properties);\n  transition: height var(--sticky-header-transition-properties)\n      var(--timing-quick),\n    width var(--sticky-header-transition-properties);\n}\n\n.PGjWc5ocjpI-::before {\n  width: 100%;\n  height: calc(16px / 8);\n  height: var(--border-thick);\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) 100ms;\n  transition: height var(--sticky-header-transition-properties),\n    width var(--sticky-header-transition-properties) var(--timing-quick);\n}\n";
+var styles = {"header":"PGOHzrMh374-","stuck":"PGjWc5ocjpI-"};
+styleInject(css_248z);
+
+function DataListStickyHeader({ children }) {
+    const [isStuck, setIsStuck] = useState(false);
+    const ref = useRef(null);
+    const handleObserver = useCallback(([e]) => setIsStuck(e.intersectionRatio < 1), [setIsStuck]);
+    useEffect(() => {
+        if (!window.IntersectionObserver)
+            return;
+        const observer = new IntersectionObserver(handleObserver, { threshold: 1 });
+        ref.current && observer.observe(ref.current);
+        return () => {
+            ref.current && observer.unobserve(ref.current);
+        };
+    }, [handleObserver, ref.current]);
+    return (React.createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames(styles.header, { [styles.stuck]: isStuck }) }, children));
+}
+
+export { DataListStickyHeader as D };

package/dist/DataListTags-68b3a874.js

@@ -0,0 +1,65 @@
+import React, { useRef, useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { I as InlineLabel } from './InlineLabel-b7d9e402.js';
+import { T as Text } from './Text-c9162504.js';
+
+var css_248z = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  --inline-label-height: calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  );\n\n  display: -ms-flexbox;\n\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  max-height: calc((\n    ((16px * 1) * 0.75) * 1.5 + ((16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(calc(\n    calc(calc(16px * 1) * 0.75) * 1.5 + calc(calc(16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(var(--inline-label-height) * 2);\n  overflow: hidden;\n  white-space: nowrap;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
+styleInject(css_248z);
+
+function DataListTags({ items }) {
+    const ref = useRef(null);
+    const [visibleIndex, setVisibleIndex] = useState([]);
+    const visibleItems = visibleIndex.filter(Boolean).length;
+    const shouldShowTagCount = Boolean(visibleItems);
+    useEffect(() => {
+        var _a;
+        if (!window.IntersectionObserver)
+            return;
+        setVisibleIndex([]);
+        const observer = new IntersectionObserver(handleIntersection, {
+            root: ref.current,
+            threshold: buildIntersectionThreshold(items),
+        });
+        const elements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-tag-element]");
+        elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.observe(element));
+        return () => {
+            elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
+        };
+    }, [items]);
+    return (React.createElement("div", { className: styles.tagWrapper, ref: ref },
+        React.createElement("div", { className: classnames(styles.tags, {
+                [styles.tagsMask]: shouldShowTagCount,
+            }) }, items.filter(Boolean).map((tag, index) => (React.createElement("div", { key: tag, "data-tag-element": index },
+            React.createElement(InlineLabel, null, tag))))),
+        shouldShowTagCount && (React.createElement("div", { className: styles.tagCount },
+            React.createElement(Text, null,
+                "+",
+                visibleItems)))));
+    function handleIntersection(...[entries]) {
+        entries.forEach(entry => {
+            const index = entry.target.getAttribute("data-tag-element");
+            const indexNumber = Number(index);
+            if (!index || isNaN(indexNumber))
+                return;
+            setVisibleIndex(prevState => {
+                const newState = [...prevState];
+                newState[indexNumber] = entry.intersectionRatio !== 1;
+                return newState;
+            });
+        });
+    }
+}
+function buildIntersectionThreshold(items) {
+    const thresholds = [];
+    const totalItems = items.length;
+    for (let i = 1.0; i <= totalItems; i++) {
+        const ratio = i / totalItems;
+        thresholds.push(ratio);
+    }
+    thresholds.push(0);
+    return thresholds;
+}
+
+export { DataListTags as D };

package/dist/DataListTags-f4038ea1.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var InlineLabel = require('./InlineLabel-a6557829.js');
+var Text = require('./Text-259af966.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var css_248z = "._8MYxAQYdZzM- {\n  position: relative;\n}\n\n.WRV-UmQmPzo- {\n  --inline-label-height: calc(\n    var(--typography--fontSize-small) * 1.5 + calc(var(--space-smaller) * 1.25) *\n      2\n  );\n\n  display: -ms-flexbox;\n\n  display: flex;\n  z-index: 0;\n  z-index: var(--elevation-default);\n  max-height: calc((\n    ((16px * 1) * 0.75) * 1.5 + ((16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(calc(\n    calc(calc(16px * 1) * 0.75) * 1.5 + calc(calc(16px / 4) * 1.25) *\n      2\n  ) * 2);\n  max-height: calc(var(--inline-label-height) * 2);\n  overflow: hidden;\n  white-space: nowrap;\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n.ND-cN-mX5-c- {\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n  -webkit-mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent calc(16px * 1.5),\n    rgba(0, 0, 0, 1) calc(16px * 3),\n    rgba(0, 0, 0, 1)\n  );\n          mask-image: linear-gradient(\n    to left,\n    transparent,\n    transparent var(--space-large),\n    rgba(0, 0, 0, 1) var(--space-largest),\n    rgba(0, 0, 0, 1)\n  );\n}\n\n.liQeWCMenD0- {\n  display: -ms-flexbox;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
+var styles = {"tagWrapper":"_8MYxAQYdZzM-","tags":"WRV-UmQmPzo-","tagsMask":"ND-cN-mX5-c-","tagCount":"liQeWCMenD0-"};
+styleInject_es.styleInject(css_248z);
+
+function DataListTags({ items }) {
+    const ref = React.useRef(null);
+    const [visibleIndex, setVisibleIndex] = React.useState([]);
+    const visibleItems = visibleIndex.filter(Boolean).length;
+    const shouldShowTagCount = Boolean(visibleItems);
+    React.useEffect(() => {
+        var _a;
+        if (!window.IntersectionObserver)
+            return;
+        setVisibleIndex([]);
+        const observer = new IntersectionObserver(handleIntersection, {
+            root: ref.current,
+            threshold: buildIntersectionThreshold(items),
+        });
+        const elements = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("[data-tag-element]");
+        elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.observe(element));
+        return () => {
+            elements === null || elements === void 0 ? void 0 : elements.forEach(element => observer.unobserve(element));
+        };
+    }, [items]);
+    return (React__default["default"].createElement("div", { className: styles.tagWrapper, ref: ref },
+        React__default["default"].createElement("div", { className: classnames__default["default"](styles.tags, {
+                [styles.tagsMask]: shouldShowTagCount,
+            }) }, items.filter(Boolean).map((tag, index) => (React__default["default"].createElement("div", { key: tag, "data-tag-element": index },
+            React__default["default"].createElement(InlineLabel.InlineLabel, null, tag))))),
+        shouldShowTagCount && (React__default["default"].createElement("div", { className: styles.tagCount },
+            React__default["default"].createElement(Text.Text, null,
+                "+",
+                visibleItems)))));
+    function handleIntersection(...[entries]) {
+        entries.forEach(entry => {
+            const index = entry.target.getAttribute("data-tag-element");
+            const indexNumber = Number(index);
+            if (!index || isNaN(indexNumber))
+                return;
+            setVisibleIndex(prevState => {
+                const newState = [...prevState];
+                newState[indexNumber] = entry.intersectionRatio !== 1;
+                return newState;
+            });
+        });
+    }
+}
+function buildIntersectionThreshold(items) {
+    const thresholds = [];
+    const totalItems = items.length;
+    for (let i = 1.0; i <= totalItems; i++) {
+        const ratio = i / totalItems;
+        thresholds.push(ratio);
+    }
+    thresholds.push(0);
+    return thresholds;
+}
+
+exports.DataListTags = DataListTags;

package/dist/DataListTotalCount-8373c2df.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var styleInject_es = require('./style-inject.es-9d2f5f4e.js');
+var Text = require('./Text-259af966.js');
+var Glimmer = require('./Glimmer-84dee1ed.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var css_248z = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles = {"results":"F56prQsXm3A-"};
+styleInject_es.styleInject(css_248z);
+
+const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+function DataListTotalCount({ totalCount, loading, }) {
+    if (totalCount === undefined)
+        return null;
+    let output = null;
+    if (totalCount === null && loading) {
+        output = React__default["default"].createElement(Glimmer.Glimmer, { size: "auto", shape: "rectangle" });
+    }
+    if (typeof totalCount === "number") {
+        output = (React__default["default"].createElement(Text.Text, { variation: "subdued" },
+            "(",
+            totalCount.toLocaleString(),
+            " results)"));
+    }
+    return (React__default["default"].createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+}
+
+exports.DATALIST_TOTALCOUNT_TEST_ID = DATALIST_TOTALCOUNT_TEST_ID;
+exports.DataListTotalCount = DataListTotalCount;

package/dist/DataListTotalCount-cce98cf6.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
+import { T as Text } from './Text-c9162504.js';
+import { G as Glimmer } from './Glimmer-aea7f8ae.js';
+
+var css_248z = ".F56prQsXm3A- {\n  min-width: 80px;\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
+var styles = {"results":"F56prQsXm3A-"};
+styleInject(css_248z);
+
+const DATALIST_TOTALCOUNT_TEST_ID = "ATL-DataList-TotalCount";
+function DataListTotalCount({ totalCount, loading, }) {
+    if (totalCount === undefined)
+        return null;
+    let output = null;
+    if (totalCount === null && loading) {
+        output = React.createElement(Glimmer, { size: "auto", shape: "rectangle" });
+    }
+    if (typeof totalCount === "number") {
+        output = (React.createElement(Text, { variation: "subdued" },
+            "(",
+            totalCount.toLocaleString(),
+            " results)"));
+    }
+    return (React.createElement("div", { className: styles.results, "data-testid": DATALIST_TOTALCOUNT_TEST_ID }, output));
+}
+
+export { DataListTotalCount as D, DATALIST_TOTALCOUNT_TEST_ID as a };

package/dist/DataTable/index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DataTable = require('../DataTable-4afcfbc6.js');
+var helpers = require('../helpers-8ea80269.js');
+var reactTable = require('@tanstack/react-table');
+require('classnames');
+require('react');
+require('@jobber/hooks/useResizeObserver');
+require('../style-inject.es-9d2f5f4e.js');
+require('../Glimmer-84dee1ed.js');
+require('../tslib.es6-754e2961.js');
+require('../Content-e3f7b6fc.js');
+require('../Option-3c4d377e.js');
+require('../FormField-6ff183f8.js');
+require('react-hook-form');
+require('@jobber/hooks/useShowClear');
+require('../Button-b73a5e01.js');
+require('react-router-dom');
+require('../Icon-405a216c.js');
+require('@jobber/design');
+require('../Typography-c45bf216.js');
+require('../Text-259af966.js');
+require('../InputValidation-05e839fa.js');
+require('framer-motion');
+require('../Spinner-9d8fc7ff.js');
+
+
+
+exports.DataTable = DataTable.DataTable;
+exports.mockContainerWidth = helpers.mockContainerWidth;
+Object.defineProperty(exports, 'createColumnHelper', {
+	enumerable: true,
+	get: function () { return reactTable.createColumnHelper; }
+});

package/dist/DataTable/index.mjs

@@ -0,0 +1,23 @@
+export { D as DataTable } from '../DataTable-8d4b2d3a.js';
+export { m as mockContainerWidth } from '../helpers-686e91da.js';
+export { createColumnHelper } from '@tanstack/react-table';
+import 'classnames';
+import 'react';
+import '@jobber/hooks/useResizeObserver';
+import '../style-inject.es-a0e1a0ba.js';
+import '../Glimmer-aea7f8ae.js';
+import '../tslib.es6-c563c1dd.js';
+import '../Content-c4ea919f.js';
+import '../Option-18ddab50.js';
+import '../FormField-8118cfc8.js';
+import 'react-hook-form';
+import '@jobber/hooks/useShowClear';
+import '../Button-9ae092b3.js';
+import 'react-router-dom';
+import '../Icon-22723fe6.js';
+import '@jobber/design';
+import '../Typography-7cc5daf5.js';
+import '../Text-c9162504.js';
+import '../InputValidation-d68fb034.js';
+import 'framer-motion';
+import '../Spinner-5d8359b8.js';

package/dist/DataTable/test-utilities/index.js

@@ -0,0 +1,243 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var helpers = require('../../helpers-8ea80269.js');
+require('@jobber/hooks/useResizeObserver');
+
+const data = [
+    {
+        name: "Eddard",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "No",
+    },
+    {
+        name: "Catelyn",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "No",
+    },
+    {
+        name: "Jon Snow",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "Yes",
+    },
+    {
+        name: "Robert",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "No",
+    },
+    {
+        name: "Rickon",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "No",
+    },
+    {
+        name: "Robert",
+        house: "Baratheon",
+        region: "Stormlands",
+        sigil: "Black Stag",
+        isAlive: "No",
+    },
+    {
+        name: "Cercei",
+        house: "Lannister",
+        region: "Westerlands",
+        sigil: "Golden Lion",
+        isAlive: "Yes",
+    },
+    {
+        name: "Sansa",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "Yes",
+    },
+    {
+        name: "Arya",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "Yes",
+    },
+    {
+        name: "Bran",
+        house: "Stark",
+        region: "North",
+        sigil: "Direwolf",
+        isAlive: "Yes",
+    },
+    {
+        name: "Joffrey",
+        house: "Baratheon",
+        region: "Stormlands",
+        sigil: "Black Stag",
+        isAlive: "No",
+    },
+    {
+        name: "Myrcella",
+        house: "Baratheon",
+        region: "Stormlands",
+        sigil: "Black Stag",
+        isAlive: "Yes",
+    },
+    {
+        name: "Tommen",
+        house: "Baratheon",
+        region: "Stormlands",
+        sigil: "Black Stag",
+        isAlive: "Yes",
+    },
+];
+const columns = [
+    {
+        accessorKey: "name",
+        cell: info => info.getValue(),
+        header: "Name",
+    },
+    {
+        accessorKey: "house",
+        cell: info => info.getValue(),
+        header: "House",
+    },
+    {
+        accessorKey: "region",
+        cell: info => info.getValue(),
+        header: "Region",
+    },
+    {
+        accessorKey: "sigil",
+        cell: info => info.getValue(),
+        header: "Sigil",
+    },
+    {
+        accessorKey: "isAlive",
+        accessorFn: row => (row.name === "Jon Snow" ? "Resurrected" : row.isAlive),
+        cell: info => info.getValue(),
+        header: "Alive",
+    },
+];
+const royaltyReportColumns = [
+    {
+        id: "franchiseName",
+        accessorKey: "franchiseName",
+        header: "Franchise Name",
+        footer: "Report Totals ($)",
+    },
+    {
+        id: "payment",
+        accessorKey: "payment",
+        header: "Payment ($)",
+        footer: "10,050,400",
+    },
+    {
+        id: "royaltyRate",
+        accessorKey: "royaltyRate",
+        header: "Royalty Rate (%)",
+    },
+    {
+        id: "royaltyAmount",
+        accessorKey: "royaltyAmount",
+        header: "Royalty Amount ($)",
+        footer: "300,000",
+    },
+];
+const royaltyReportData = [
+    {
+        franchiseName: "The Patch Boys of Macon and Warner Robins",
+        payment: "1,000,000",
+        royaltyRate: 5,
+        royaltyAmount: "50,000",
+    },
+    {
+        franchiseName: "The Patch Boys of San Antonio",
+        payment: "2,000,000",
+        royaltyRate: 5,
+        royaltyAmount: "40,000",
+    },
+    {
+        franchiseName: "The Patch Boys of Phoenix",
+        payment: "1,250,000",
+        royaltyRate: 8,
+        royaltyAmount: "20,000",
+    },
+];
+const columnSizeData = [
+    {
+        name: "Daenerys Stormborn of House Targaryen, the First of Her Name, Queen of the Andals and the First Men, Protector of the Seven Kingdoms, the Mother of Dragons, the Khaleesi of the Great Grass Sea, the Unburnt, the Breaker of Chains.",
+        points: "1,000,000",
+        chance: 5,
+        power: "50,000",
+    },
+    {
+        name: "Aegon “The Conqueror” Targaryen and Rhaenys Targaryen",
+        points: "2,000,000",
+        chance: 5,
+        power: "40,000",
+    },
+    {
+        name: "Jaehaerys “The Old King” Targaryen and Alysanne Targaryen",
+        points: "1,250,000",
+        chance: 8,
+        power: "20,000",
+    },
+];
+const columSizeColumns = [
+    {
+        id: "name",
+        accessorKey: "name",
+        header: "Name",
+        footer: "Totals",
+        enableResizing: false,
+        cell: (info) => info.getValue(),
+        size: 538,
+        minSize: 438,
+        maxSize: 538,
+    },
+    {
+        id: "points",
+        accessorKey: "points",
+        header: "Points",
+        footer: "10,050,400",
+        cell: (info) => info.getValue(),
+        size: 268,
+        minSize: 168,
+        maxSize: 268,
+    },
+    {
+        id: "chance",
+        accessorKey: "chance",
+        header: "Chance (%)",
+        cell: (info) => info.getValue(),
+        size: 268,
+        minSize: 168,
+        maxSize: 268,
+    },
+    {
+        id: "power",
+        accessorKey: "power",
+        header: "Power",
+        footer: "300,000",
+        cell: (info) => info.getValue(),
+        size: 268,
+        minSize: 168,
+        maxSize: 268,
+    },
+];
+
+exports.mockContainerWidth = helpers.mockContainerWidth;
+exports.columSizeColumns = columSizeColumns;
+exports.columnSizeData = columnSizeData;
+exports.columns = columns;
+exports.data = data;
+exports.royaltyReportColumns = royaltyReportColumns;
+exports.royaltyReportData = royaltyReportData;