@openfin/ui-library 0.1.40 → 0.2.0-alpha.1657388871

package/dist/components/templates/ContactCard/contactCard.js

@@ -1,114 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContactCard = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-// import { getColorForName, getInitials } from '../utils/name';
-const DefinitionList_1 = require("../../layout/DefinitionList");
-const name_1 = require("../utils/name");
-const ContactCard = (_a) => {
-    var { name, title, photoUrl, useInitials = false, details } = _a, rest = __rest(_a, ["name", "title", "photoUrl", "useInitials", "details"]);
-    const renderProfileImage = photoUrl || useInitials;
-    const initials = react_1.default.useMemo(() => name_1.getInitials(name), [name]);
-    const color = react_1.default.useMemo(() => name_1.getColorForName(name), [name]);
-    return (jsx_runtime_1.jsxs(Container, Object.assign({}, rest, { children: [jsx_runtime_1.jsxs(Header, { children: [renderProfileImage && (jsx_runtime_1.jsx(ProfileImage, Object.assign({ iconColor: color }, { children: photoUrl ? jsx_runtime_1.jsx(Photo, { alt: title, src: photoUrl }, void 0) : jsx_runtime_1.jsx(LetterIcon, { children: initials }, void 0) }), void 0)),
-                    jsx_runtime_1.jsxs(Identity, { children: [jsx_runtime_1.jsxs(Name, { children: [" ", name, " "] }, void 0),
-                            title && jsx_runtime_1.jsxs(Title, { children: [" ", title, " "] }, void 0)] }, void 0)] }, void 0),
-            jsx_runtime_1.jsx(DetailsPane, { children: details.map((list, index) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [jsx_runtime_1.jsx(DetailList, { definitions: list }, void 0),
-                        index < details.length - 1 && jsx_runtime_1.jsx(HorizontalLine, {}, void 0)] }, `${name}-details-${index}`))) }, void 0)] }), void 0));
-};
-exports.ContactCard = ContactCard;
-const Container = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: ${({ theme }) => theme.px.base};
-`;
-const Header = styled_components_1.default.div `
-  border-bottom: solid 1px ${({ theme }) => theme.palette.background6};
-  display: flex;
-  margin-bottom: ${({ theme }) => theme.px.base};
-  padding-bottom: ${({ theme }) => theme.px.small};
-`;
-const ProfileImage = styled_components_1.default.div `
-  align-items: center;
-  background-color: ${(attrs) => attrs.iconColor};
-  border-radius: ${({ theme }) => theme.px.xsmall};
-  display: flex;
-  height: ${({ theme }) => theme.iconSize.xxxlarge};
-  justify-content: center;
-  margin-right: ${({ theme }) => theme.px.small};
-  width: ${({ theme }) => theme.iconSize.xxxlarge};
-`;
-const LetterIcon = styled_components_1.default.span `
-  font-size: ${({ theme }) => theme.fontSize.base};
-  text-transform: uppercase;
-`;
-const Photo = styled_components_1.default.img `
-  border-radius: ${({ theme }) => theme.px.xsmall};
-  height: ${({ theme }) => theme.iconSize.xxxlarge};
-  object-fit: cover;
-  user-select: none;
-  width: ${({ theme }) => theme.iconSize.xxxlarge};
-`;
-const Identity = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: 0;
-`;
-const Name = styled_components_1.default.span `
-  font-size: ${({ theme }) => theme.fontSize.large};
-  line-height: ${({ theme }) => theme.px.large};
-  overflow: hidden;
-  padding-bottom: ${({ theme }) => theme.px.xsmall};
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-const Title = styled_components_1.default.span `
-  color: ${({ theme }) => theme.palette.textHelp};
-  line-height: ${({ theme }) => theme.px.base};
-  overflow: hidden;
-  padding-bottom: 2px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-const DetailsPane = styled_components_1.default.div `
-  background-color: ${({ theme }) => theme.palette.background5};
-  border-radius: 2px;
-  flex: 1;
-  overflow-y: auto;
-  padding: ${({ theme }) => theme.px.small};
-`;
-const HorizontalLine = styled_components_1.default.div `
-  border-bottom: solid 1px ${({ theme }) => theme.palette.background6};
-  margin-bottom: ${({ theme }) => theme.px.base};
-`;
-const DetailList = styled_components_1.default(DefinitionList_1.DefinitionList) `
-  dt {
-    text-align: left;
-    text-transform: capitalize;
-  }
-
-  dd {
-    overflow: hidden;
-    text-align: right;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;

package/dist/components/templates/ContactCard/index.js

@@ -1,13 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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("./contactCard"), exports);

package/dist/components/templates/utils/name.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColorForName = exports.getInitials = void 0;
-const getInitials = (name) => {
-    const trimmed = name.trim();
-    const lastWordPos = trimmed.lastIndexOf(' ');
-    if (lastWordPos > -1) {
-        return [trimmed.charAt(0), trimmed.charAt(lastWordPos + 1)].join('');
-    }
-    return trimmed.slice(0, 2);
-};
-exports.getInitials = getInitials;
-const colors = ['#8C61FF', '#00CC88', '#FF8FB8', '#FF976B', '#FD5E60', '#36C3FE', '#5254FB'];
-const getColorForName = (name = '') => {
-    let total = 0;
-    for (let i = 0; i < name.length; i++) {
-        const code = name.codePointAt(i);
-        total += code;
-    }
-    return colors[total % colors.length];
-};
-exports.getColorForName = getColorForName;

package/dist/components/typography/Heading/heading.js

@@ -1,64 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Heading = exports.defaultSize = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../../system/ThemeProvider/lib/constants");
-const Text_1 = require("../Text");
-exports.defaultSize = {
-    h1: constants_1.Size.xxxlarge,
-    h2: constants_1.Size.xxlarge,
-    h3: constants_1.Size.xlarge,
-    h4: constants_1.Size.large,
-    h5: constants_1.Size.base,
-    h6: constants_1.Size.small,
-};
-/**
- * ## Heading
- *
- * @example <Heading level={1}>Pizza</Heading>
- *          <Heading level={2}>Pizza</Heading>
- *          <Heading level={3}>Pizza</Heading>
- *          <Heading level={4}>Pizza</Heading>
- *          <Heading level={5}>Pizza</Heading>
- *          <Heading level={6}>Pizza</Heading>
- *
- * @example <H1>Pizza</H1>
- *          <H2>Pizza</H2>
- *          <H3>Pizza</H3>
- *          <H4>Pizza</H4>
- *          <H5>Pizza</H5>
- *          <H6>Pizza</H6>
- */
-const Heading = (_a) => {
-    var { level = 1, className } = _a, props = __rest(_a, ["level", "className"]);
-    const htag = `h${level}`;
-    return (jsx_runtime_1.jsx(StyledHeading, Object.assign({ className: className, as: htag, size: exports.defaultSize[htag], weight: "bold" }, props), void 0));
-};
-exports.Heading = Heading;
-const StyledHeading = styled_components_1.default(Text_1.Text) `
-  line-height: ${({ theme }) => theme.lineHeight.heading};
-`;
-/**
- * ## Heading Variants
- */
-exports.H1 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 1 }))) ``;
-exports.H2 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 2 }))) ``;
-exports.H3 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 3 }))) ``;
-exports.H4 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 4 }))) ``;
-exports.H5 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 5 }))) ``;
-exports.H6 = styled_components_1.default(exports.Heading).attrs((props) => (Object.assign(Object.assign({}, props), { level: 6 }))) ``;

package/dist/components/typography/Heading/index.js

@@ -1,13 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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("./heading"), exports);

package/dist/components/typography/Text/index.js

@@ -1,13 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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("./text"), exports);

package/dist/components/typography/Text/text.js

@@ -1,21 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-/**
- * ## Text
- *
- * @example <Text>Okay Cool</Text>
- *          <Text size="small">Okay Cool</Text>
- *          <Text weight="bold">Okay Cool</Text>
- */
-exports.Text = styled_components_1.default.span `
-  color: ${({ theme }) => theme.palette.textDefault};
-  font-size: ${({ theme, size = 'base' }) => theme.fontSize[size]};
-  font-weight: ${({ theme, weight = 'normal' }) => theme.fontWeight[weight]};
-  line-height: ${({ theme }) => theme.lineHeight.text};
-`;
-exports.Text.displayName = 'Text';

package/dist/hooks/useColorScheme.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColorScheme = exports.ColorScheme = void 0;
-const useMediaQuery_1 = require("./useMediaQuery");
-exports.ColorScheme = {
-    dark: 'dark',
-    light: 'light',
-    /**
-     * This is a valid MediaQuery string that we're not using to identify Browsers (older Operating Systems)
-     * that maybe do not have a concept of color scheme.
-     */
-    // none = 'no-preference',
-};
-const buildQuery = (scheme) => `(prefers-color-scheme: ${scheme})`;
-/**
- * ## useColorScheme
- * Returns system preference for Color Scheme
- */
-const useColorScheme = ({ defaultScheme = exports.ColorScheme.light, }) => {
-    const isDark = useMediaQuery_1.useMediaQuery(buildQuery(exports.ColorScheme.dark));
-    const isLight = useMediaQuery_1.useMediaQuery(buildQuery(exports.ColorScheme.light));
-    const isNone = !isDark && !isLight;
-    switch (true) {
-        case isDark:
-            return exports.ColorScheme.dark;
-        case isLight:
-            return exports.ColorScheme.light;
-        case isNone:
-        default:
-            return defaultScheme;
-    }
-};
-exports.useColorScheme = useColorScheme;

package/dist/hooks/useMediaQuery.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLayoutMediaQuery = exports.useMediaQuery = void 0;
-const react_1 = require("react");
-/**
- * ## MediaQuery Hooks
- *
- * Inspired by:
- * @link https://github.com/streamich/use-media
- */
-const useMq = (effect) => (query) => {
-    const [matches, setMatches] = react_1.useState(false);
-    effect(() => {
-        const media = window.matchMedia(query);
-        if (media) {
-            if (media.matches !== matches) {
-                setMatches(media.matches);
-            }
-            const listener = () => setMatches(media.matches);
-            const cleanup = () => media.removeEventListener('change', listener);
-            media.addEventListener('change', listener);
-            return cleanup;
-        }
-        return;
-    }, [matches, query]);
-    return matches;
-};
-/**
- * ## useMediaQuery
- * @example   const isPageWide = useMediaQuery('(min-width: 800px)')
- * @example   const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
- */
-exports.useMediaQuery = useMq(react_1.useEffect);
-/**
- * ## useLayoutMediaQuery
- * @example   const isPageWide = useLayoutMediaQuery('(min-width: 800px)')
- * @example   const reduceMotion = useLayoutMediaQuery('(prefers-reduced-motion: reduce)');
- */
-exports.useLayoutMediaQuery = useMq(react_1.useLayoutEffect);

package/dist/hooks/usePrevious.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePrevious = void 0;
-const react_1 = require("react");
-const usePrevious = (value) => {
-    const ref = react_1.useRef();
-    react_1.useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-};
-exports.usePrevious = usePrevious;

package/dist/hooks/useTheme.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = void 0;
-const theme_1 = require("../components/system/ThemeProvider/theme");
-const useColorScheme_1 = require("../hooks/useColorScheme");
-const ThemeProvider_1 = require("../components/system/ThemeProvider");
-const Themes = {
-    [useColorScheme_1.ColorScheme.dark]: theme_1.OpenFinDarkTheme,
-    [useColorScheme_1.ColorScheme.light]: theme_1.OpenFinLightTheme,
-};
-const useTheme = ({ themes, scheme, config, }) => {
-    // 1. Get Current Scheme
-    //    Use user - provided color scheme
-    //    OR fallback to System Preference Color Scheme (if available)
-    //    OR default to "light"
-    const currentScheme = scheme
-        ? useColorScheme_1.ColorScheme[scheme]
-        : useColorScheme_1.useColorScheme({
-            defaultScheme: useColorScheme_1.ColorScheme.light,
-        });
-    // 2. Get Current Theme
-    const currentTheme = themes === undefined
-        ? // Built-in Theme
-            Themes[currentScheme]
-        : // Built-in Theme with User-provided Palette
-            // @todo – This is a potential performance bottleneck
-            ThemeProvider_1.createTheme(Object.assign(Object.assign({}, Themes[currentScheme].palette), themes[currentScheme].palette));
-    // 3. Merge any User-provided Config
-    if (config) {
-        currentTheme._config = Object.assign(Object.assign({}, currentTheme._config), config);
-    }
-    return currentTheme;
-};
-exports.useTheme = useTheme;

package/dist/index.js

@@ -1,46 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 __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);
-};
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StoryHelpers = void 0;
-__exportStar(require("./components/controls/Button"), exports);
-__exportStar(require("./components/controls/Toggle"), exports);
-__exportStar(require("./components/elements/Badge"), exports);
-__exportStar(require("./components/elements/Icon"), exports);
-__exportStar(require("./components/elements/Loader"), exports);
-__exportStar(require("./components/input/RawInput"), exports);
-__exportStar(require("./components/input/TextInput"), exports);
-__exportStar(require("./components/input/NumberInput"), exports);
-__exportStar(require("./components/input/Checkbox"), exports);
-__exportStar(require("./components/layout/Box"), exports);
-__exportStar(require("./components/layout/DefinitionList"), exports);
-__exportStar(require("./components/system/GlobalStyles"), exports);
-__exportStar(require("./components/system/ThemeProvider"), exports);
-__exportStar(require("./components/templates/ContactCard"), exports);
-__exportStar(require("./components/typography/Heading"), exports);
-__exportStar(require("./components/typography/Text"), exports);
-__exportStar(require("./hooks/useColorScheme"), exports);
-__exportStar(require("./hooks/useMediaQuery"), exports);
-__exportStar(require("./hooks/usePrevious"), exports);
-exports.StoryHelpers = __importStar(require("./storybookHelpers"));
-__exportStar(require("./lib/whenFin"), exports);

package/dist/lib/math.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.clamp = void 0;
-/**
- * Returns a number whose value is limited to the given range.
- *
- * @param {Number} min The lower boundary of the output range
- * @param {Number} max The upper boundary of the output range
- * @returns A number in the range [min, max]
- * @type Number
- */
-const clamp = (num, min, max) => {
-    if (min && max) {
-        return Math.min(Math.max(num, min), max);
-    }
-    if (max && !min) {
-        return Math.min(num, max);
-    }
-    if (min && !max) {
-        return Math.max(num, min);
-    }
-    return num;
-};
-exports.clamp = clamp;

package/dist/lib/whenFin.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.whenFin = void 0;
-/**
- * OpenFin/Non-OpenFin context expression switch.
- * @param finValue Expression invoked/returned when running in the fin environment.
- * @param noFinValue Expression invoked/returned when not running in the fin environment.
- */
-function whenFin(finValue, noFinValue) {
-    const expression = typeof fin !== 'undefined' ? finValue : noFinValue;
-    return typeof expression === 'function' ? expression() : expression;
-}
-exports.whenFin = whenFin;

package/dist/lib/whenFin.spec.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const whenFin_1 = require("./whenFin");
-describe('whenFin', () => {
-    afterEach(() => {
-        delete global.fin;
-    });
-    describe('When `fin` is present', () => {
-        beforeEach(() => {
-            global.fin = {};
-        });
-        test('And a function provided the function is invoked', () => {
-            let value = 0;
-            whenFin_1.whenFin(() => {
-                value = 1;
-            });
-            expect(value).toEqual(1);
-        });
-        test('And a value provided the value is returned', () => {
-            const value = whenFin_1.whenFin(1, undefined);
-            expect(value).toEqual(1);
-        });
-    });
-    describe('When `fin` is not present', () => {
-        test('And a function provided the function is invoked', () => {
-            let value = 0;
-            whenFin_1.whenFin(() => {
-                value = 0;
-            }, () => {
-                value = 1;
-            });
-            expect(value).toEqual(1);
-        });
-        test('And a value provided the value is returned', () => {
-            const value = whenFin_1.whenFin(undefined, 1);
-            expect(value).toEqual(1);
-        });
-    });
-});

package/dist/react-app-env.d.js

@@ -1,2 +0,0 @@
-/// <reference types="react-scripts" />
-"use strict";

package/dist/storybookHelpers.js

@@ -1,58 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpatialLink = exports.JSONData = exports.Pre = exports.PlaceholderContent = exports.StoryGrid = exports.StoryColumn = exports.StoryRow = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Box_1 = require("./components/layout/Box");
-exports.StoryRow = styled_components_1.default(Box_1.Box).attrs({
-    gap: 'large',
-    alignItems: 'flex-start',
-}) ``;
-exports.StoryColumn = styled_components_1.default(Box_1.Box).attrs({
-    flexDirection: 'column',
-    gap: 'large',
-    alignItems: 'flex-start',
-}) `
-  max-width: 500px;
-`;
-exports.StoryGrid = styled_components_1.default(Box_1.Box).attrs({
-    gap: 'large',
-}) `
-  display: grid;
-`;
-exports.PlaceholderContent = styled_components_1.default(exports.StoryColumn) `
-  background: ${({ theme }) => theme.palette.background2};
-  box-shadow: ${({ theme }) => `0 0 0 1px ${theme.palette.background3}`};
-  padding: ${({ theme }) => theme.px.small};
-  border-radius: ${({ theme }) => theme.radius.small};
-  user-select: none;
-`;
-exports.Pre = styled_components_1.default.pre `
-  margin: ${({ theme }) => theme.px.base} 0;
-  padding: ${({ theme }) => theme.px.base};
-  border-radius: ${({ theme }) => theme.radius.base};
-`;
-const JSONData = ({ data }) => {
-    return jsx_runtime_1.jsx(exports.Pre, { children: JSON.stringify(data, undefined, 2) }, void 0);
-};
-exports.JSONData = JSONData;
-exports.SpatialLink = styled_components_1.default.a.attrs({
-    href: 'https://docs.google.com/spreadsheets/d/10fcDXFdGJ8-cQxJ5X1EPSKP-aMrxgqnM8YIlYmcOPoQ',
-    target: '_blank',
-    rel: 'noreferrer',
-    title: 'Spatial',
-}) `
-  display: block;
-  color: ${({ theme }) => theme.palette.textDefault};
-  text-decoration: none;
-  padding: ${({ theme }) => theme.px.small};
-  border: 1px solid ${({ theme }) => theme.palette.textDefault};
-  border-radius: ${({ theme }) => theme.radius.small};
-  &:after {
-    display: block;
-    content: 'Source: Spatial';
-  }
-`;