react-science 0.19.1

package/lib/components/accordion/Accordion.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const index_1 = require("../hooks/index");
+const AccordionContext_1 = require("./AccordionContext");
+const styles = {
+    container: (0, react_1.css)({
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+    }),
+    item: (isOpen) => {
+        return (0, react_1.css)([
+            {
+                display: 'flex',
+                flexDirection: 'column',
+            },
+            isOpen && { flex: '1 1 0%' },
+        ]);
+    },
+    header: (0, react_1.css)({
+        cursor: 'pointer',
+        padding: '5px 12px',
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: '1em',
+        borderColor: 'rgb(213, 213, 213) currentcolor currentcolor',
+        borderStyle: 'solid none none',
+        color: 'rgb(45, 45, 45)',
+        fontWeight: 'bold',
+        textDecoration: 'none',
+        textShadow: 'rgb(255, 255, 255) 0px 1px 0px',
+        background: 'rgb(255, 255, 255) linear-gradient(rgb(240, 240, 240) 5%, rgb(225, 225, 225) 100%) repeat scroll 0% 0%',
+    }),
+};
+function Accordion(props) {
+    return (0, jsx_runtime_1.jsx)("div", { css: styles.container, children: props.children });
+}
+exports.Accordion = Accordion;
+Accordion.Item = function AccordionItem(props) {
+    const { item, utils } = (0, AccordionContext_1.useAccordionContext)(props.title, props.defaultOpened);
+    const onClickHandle = (0, index_1.useDoubleClick)({
+        onClick: utils.toggle,
+        onDoubleClick: utils.clear,
+    });
+    let displayable = false;
+    if (item) {
+        displayable = item.isOpen;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            flex: displayable ? '1 1 1px' : 'none',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onClickHandle, type: "button", style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    width: '100%',
+                    userSelect: 'text',
+                }, css: styles.header, children: props.title }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: displayable ? 'flex' : 'none',
+                    flex: displayable ? '1 1 1px' : 'none',
+                    backgroundColor: 'white',
+                    maxHeight: '100%',
+                    overflow: 'hidden',
+                }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        height: '100%',
+                        width: '100%',
+                        overflow: 'auto',
+                        display: 'flex',
+                        flexDirection: 'column',
+                    }, children: props.children }) })] }));
+};

package/lib/components/accordion/AccordionContext.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionProvider = exports.useAccordionContext = exports.useToggleAccordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const immer_1 = require("immer");
+const react_1 = require("react");
+const accordionContext = (0, react_1.createContext)(null);
+const reducer = (0, immer_1.produce)((draft, actions) => {
+    switch (actions.type) {
+        case 'TOGGLE': {
+            const item = getItem(actions.payload, draft.items);
+            if (!item) {
+                draft.items.push({ isOpen: true, title: actions.payload });
+                return draft;
+            }
+            item.isOpen = !item.isOpen;
+            return draft;
+        }
+        case 'CLEAR': {
+            const item = getItem(actions.payload, draft.items);
+            if (!item) {
+                draft.items.push({ isOpen: true, title: actions.payload });
+                return draft;
+            }
+            for (const element of draft.items) {
+                element.isOpen = element.title === item.title;
+            }
+            return draft;
+        }
+        case 'REMOVE_ITEM': {
+            draft.items = draft.items.filter((element) => element.title !== actions.payload);
+            return draft;
+        }
+        case 'CREATE_ITEM': {
+            draft.items.push(actions.payload);
+            return draft;
+        }
+        case 'CHANGE_ITEM': {
+            const item = getItem(actions.payload.title, draft.items);
+            if (item) {
+                item.isOpen = actions.payload.isOpen;
+            }
+            return draft;
+        }
+        default: {
+            return draft;
+        }
+    }
+});
+function useToggleAccordion() {
+    const context = (0, react_1.useContext)(accordionContext);
+    if (!context) {
+        throw new Error('AccordionContext was not found');
+    }
+    const [, utils] = context;
+    return (0, react_1.useMemo)(() => {
+        return {
+            open: (title) => utils.change(title, true),
+            close: (title) => utils.change(title, false),
+        };
+    }, [utils]);
+}
+exports.useToggleAccordion = useToggleAccordion;
+function useAccordionContext(title, defaultOpened) {
+    const context = (0, react_1.useContext)(accordionContext);
+    if (!context) {
+        throw new Error('AccordionContext was not found');
+    }
+    const [state, utils] = context;
+    (0, react_1.useEffect)(() => {
+        utils.create(title, defaultOpened);
+        return () => utils.remove(title);
+    }, [defaultOpened, title, utils]);
+    let item = getItem(title, state.items);
+    return (0, react_1.useMemo)(() => ({
+        item,
+        utils: {
+            clear: () => utils.clear(title),
+            toggle: () => utils.toggle(title),
+            remove: () => utils.remove(title),
+            create: (defaultOpened) => utils.create(title, defaultOpened),
+        },
+    }), [item, title, utils]);
+}
+exports.useAccordionContext = useAccordionContext;
+function AccordionProvider(props) {
+    const [state, dispatch] = (0, react_1.useReducer)(reducer, {
+        items: [],
+    });
+    const utils = (0, react_1.useMemo)(() => ({
+        change: (title, isOpen) => {
+            return dispatch({
+                type: 'CHANGE_ITEM',
+                payload: { isOpen, title },
+            });
+        },
+        clear: (except) => {
+            return dispatch({ type: 'CLEAR', payload: except });
+        },
+        toggle: (title) => {
+            return dispatch({ type: 'TOGGLE', payload: title });
+        },
+        remove: (title) => {
+            return dispatch({ type: 'REMOVE_ITEM', payload: title });
+        },
+        create: (title, defaultOpened) => {
+            const item = { title, isOpen: defaultOpened || false };
+            dispatch({ type: 'CREATE_ITEM', payload: item });
+            return item;
+        },
+    }), [dispatch]);
+    const value = (0, react_1.useMemo)(() => {
+        return [{ items: state.items }, utils];
+    }, [state.items, utils]);
+    return ((0, jsx_runtime_1.jsx)(accordionContext.Provider, { value: value, children: props.children }));
+}
+exports.AccordionProvider = AccordionProvider;
+function getItem(title, items) {
+    const item = items.find((element) => element.title === title);
+    return item;
+}

package/lib/components/accordion/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Accordion"), exports);
+__exportStar(require("./AccordionContext"), exports);

package/lib/components/button/Button.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+function Button(props) {
+    const { backgroundColor = {
+        basic: 'hsl(21deg, 90%, 48%)',
+        hover: 'hsl(21deg, 90%, 40%)',
+    }, color = { basic: 'white', hover: 'white' }, style, onClick, children, } = props;
+    return ((0, jsx_runtime_1.jsx)("button", { style: style, onClick: onClick, css: (0, react_1.css)({
+            display: 'flex',
+            alignItems: 'center',
+            paddingLeft: 10,
+            paddingRight: 10,
+            paddingTop: 6,
+            paddingBottom: 6,
+            borderWidth: 1,
+            borderColor: 'transparent',
+            fontSize: '1.125em',
+            borderRadius: 6,
+            color: color.basic,
+            minWidth: 30,
+            justifyContent: 'center',
+            backgroundColor: backgroundColor.basic,
+            ':hover': {
+                color: color.hover,
+                backgroundColor: backgroundColor.hover,
+            },
+        }), type: "button", children: children }));
+}
+exports.Button = Button;

package/lib/components/button/ButtonGroup.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const styles = {
+    root: (0, react_1.css) `
+    display: inline-flex;
+    border-radius: 0.375rem;
+    isolation: isolate;
+  `,
+    firstButton: (0, react_1.css) `
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-width: 1px;
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  `,
+    secondButton: (0, react_1.css) `
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-width: 1px;
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+    margin-left: -1px;
+  `,
+};
+function ButtonGroup(props) {
+    const { children } = props;
+    return (0, jsx_runtime_1.jsx)("div", { css: styles.root, children: children });
+}
+exports.ButtonGroup = ButtonGroup;
+ButtonGroup.Button = function ButtonGroupButton(props) {
+    const { position, label, onClick } = props;
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, css: position === 'first' ? styles.firstButton : styles.secondButton, children: label }));
+};

package/lib/components/button/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Button"), exports);
+__exportStar(require("./ButtonGroup"), exports);

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js

@@ -0,0 +1,71 @@
+"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.ColorPickerDropdown = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/** @jsxImportSource @emotion/react */
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const useModifiedPopper_1 = require("../../hooks/useModifiedPopper");
+const useOnClickOutside_1 = require("../../hooks/useOnClickOutside");
+const useOnOff_1 = require("../../hooks/useOnOff");
+const Portal_1 = require("../../root-layout/Portal");
+const FixedColorPreview_1 = __importDefault(require("../preview/FixedColorPreview"));
+const ColorPicker_1 = require("../react-color/ColorPicker");
+const colorHelper = __importStar(require("../react-color/helpers/color"));
+const colorPickerDropdownCss = {
+    root: (0, react_1.css) `
+    position: relative;
+    width: 100%;
+    border: 1px solid darkgray;
+    border-radius: 0.25rem;
+    height: 30px;
+    padding: 5px;
+  `,
+    preview: (0, react_1.css) `
+    height: 100%;
+    width: 100%;
+    border-radius: 0.125rem;
+  `,
+};
+function ColorPickerDropdown(props) {
+    const { color, ...otherProps } = props;
+    const ref = (0, react_2.useRef)(null);
+    const [isOpened, , close, toggle] = (0, useOnOff_1.useOnOff)(false);
+    const { hex } = colorHelper.toState(color || 'white');
+    const { setReferenceElement, setPopperElement, popperProps } = (0, useModifiedPopper_1.useModifiedPopper)({
+        placement: 'bottom-start',
+        offset: 6,
+    });
+    (0, useOnClickOutside_1.useOnClickOutside)(ref, close);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", ref: setReferenceElement, css: colorPickerDropdownCss.root, onClick: toggle, children: (0, jsx_runtime_1.jsx)("div", { css: colorPickerDropdownCss.preview, children: (0, jsx_runtime_1.jsx)(FixedColorPreview_1.default, { color: hex }) }) }), isOpened && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: (div) => {
+                        setPopperElement(div);
+                        ref.current = div;
+                    }, ...popperProps, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { color: color, ...otherProps }) }) }))] }));
+}
+exports.ColorPickerDropdown = ColorPickerDropdown;

package/lib/components/color-picker/gradient-select/GradientSelect.js

@@ -0,0 +1,84 @@
+"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.GradientSelect = exports.fixedGradientScales = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@headlessui/react");
+const scaleChromatic = __importStar(require("d3-scale-chromatic"));
+const react_2 = require("react");
+const fa_1 = require("react-icons/fa");
+const FixedGradientPreview_1 = __importDefault(require("../preview/FixedGradientPreview"));
+exports.fixedGradientScales = {
+    turbo: scaleChromatic.interpolateTurbo,
+    viridis: scaleChromatic.interpolateViridis,
+    inferno: scaleChromatic.interpolateInferno,
+    magma: scaleChromatic.interpolateMagma,
+    plasma: scaleChromatic.interpolatePlasma,
+};
+const scaleOptions = Object.keys(exports.fixedGradientScales);
+const GradientSelectListbox = styled_1.default.div `
+  position: relative;
+  width: 100%;
+  border: 1px solid darkgray;
+  border-radius: 0.25rem;
+`;
+const GradientSelectButton = styled_1.default.button `
+  position: relative;
+  width: 100%;
+  height: 30px;
+  padding: 3px;
+`;
+const GradientSelectChevron = (0, styled_1.default)(fa_1.FaChevronDown) `
+  position: absolute;
+  height: 100%;
+  top: 0;
+  right: 0.5rem;
+`;
+const GradientSelectOptions = styled_1.default.ul `
+  position: absolute;
+  width: 100%;
+  margin-top: 5px;
+  border: 1px solid darkgray;
+  border-radius: 0.25rem;
+  padding-inline: 3px;
+  padding-bottom: 5px;
+`;
+const GradientSelectOption = styled_1.default.li `
+  display: flex;
+  flex-direction: column;
+  padding-top: 5px;
+  cursor: pointer;
+  ${(props) => !props.active && 'opacity: 0.8;'}
+  ${(props) => props.active && 'font-weight: bold;'}
+`;
+function GradientSelect(props) {
+    const { value, onChange } = props;
+    return ((0, jsx_runtime_1.jsx)(react_1.Listbox, { value: value, onChange: onChange, children: (0, jsx_runtime_1.jsxs)(GradientSelectListbox, { children: [(0, jsx_runtime_1.jsxs)(react_1.Listbox.Button, { as: GradientSelectButton, children: [(0, jsx_runtime_1.jsx)(FixedGradientPreview_1.default, { gradient: value }), (0, jsx_runtime_1.jsx)(GradientSelectChevron, {})] }), (0, jsx_runtime_1.jsx)(react_1.Listbox.Options, { as: GradientSelectOptions, children: scaleOptions.map((option) => ((0, jsx_runtime_1.jsx)(react_1.Listbox.Option, { as: react_2.Fragment, value: option, children: ({ active }) => ((0, jsx_runtime_1.jsxs)(GradientSelectOption, { active: active, children: [option, (0, jsx_runtime_1.jsx)("div", { style: { height: 15 }, children: (0, jsx_runtime_1.jsx)(FixedGradientPreview_1.default, { gradient: option }) })] })) }, option))) })] }) }));
+}
+exports.GradientSelect = GradientSelect;

package/lib/components/color-picker/index.js

@@ -0,0 +1,21 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./color-picker-dropdown/ColorPickerDropdown"), exports);
+__exportStar(require("./gradient-select/GradientSelect"), exports);
+__exportStar(require("./preview/ColorPreview"), exports);
+__exportStar(require("./react-color/ColorPicker"), exports);
+__exportStar(require("./palette"), exports);

package/lib/components/color-picker/palette.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultColorPalette = void 0;
+// Taken from https://personal.sron.nl/~pault/#fig:scheme_muted
+exports.defaultColorPalette = [
+    '#CC6677',
+    '#332288',
+    '#DDCC77',
+    '#117733',
+    '#88CCEE',
+    '#882255',
+    '#44AA99',
+    '#999933',
+    '#AA4499',
+];

package/lib/components/color-picker/preview/ColorPreview.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const assert_1 = require("../../utils/assert");
+const FixedColorPreview_1 = __importDefault(require("./FixedColorPreview"));
+const FixedGradientPreview_1 = __importDefault(require("./FixedGradientPreview"));
+function ColorPreview(props) {
+    const { color } = props;
+    switch (color.kind) {
+        case 'fixed': {
+            return (0, jsx_runtime_1.jsx)(FixedColorPreview_1.default, { color: color.color });
+        }
+        case 'fixedGradient': {
+            return (0, jsx_runtime_1.jsx)(FixedGradientPreview_1.default, { gradient: color.gradient });
+        }
+        default:
+            (0, assert_1.assertUnreachable)(color);
+    }
+}
+exports.ColorPreview = ColorPreview;

package/lib/components/color-picker/preview/FixedColorPreview.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function FixedColorPreview(props) {
+    const { color } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: '100%', backgroundColor: color } }));
+}
+exports.default = FixedColorPreview;

package/lib/components/color-picker/preview/FixedGradientPreview.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const GradientSelect_1 = require("../gradient-select/GradientSelect");
+function FixedGradientPreview(props) {
+    const { gradient } = props;
+    const scale = GradientSelect_1.fixedGradientScales[gradient];
+    const gradientCss = (0, react_1.useMemo)(() => {
+        const stops = [];
+        for (let i = 0; i <= 100; i++) {
+            stops.push(scale(i / 100));
+        }
+        return `linear-gradient(to right, ${stops.join(', ')})`;
+    }, [scale]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            width: '100%',
+            height: '100%',
+            borderRadius: '0.125rem',
+            background: gradientCss,
+        } }));
+}
+exports.default = FixedGradientPreview;