Mission Control Dashboard - Initial implementation

node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs

@@ -0,0 +1,67 @@
+import { isMotionValue } from 'motion-dom';
+import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';
+
+let shouldForward = (key) => !isValidMotionProp(key);
+function loadExternalIsValidProp(isValidProp) {
+    if (typeof isValidProp !== "function")
+        return;
+    // Explicitly filter our events
+    shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
+}
+/**
+ * Emotion and Styled Components both allow users to pass through arbitrary props to their components
+ * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which
+ * of these should be passed to the underlying DOM node.
+ *
+ * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props
+ * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props
+ * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of
+ * `@emotion/is-prop-valid`, however to fix this problem we need to use it.
+ *
+ * By making it an optionalDependency we can offer this functionality only in the situations where it's
+ * actually required.
+ */
+try {
+    /**
+     * We attempt to import this package but require won't be defined in esm environments, in that case
+     * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed
+     * in favour of explicit injection.
+     *
+     * String concatenation prevents bundlers like webpack (e.g. Storybook)
+     * from statically resolving this optional dependency at build time.
+     */
+    const emotionPkg = "@emotion/is-prop-" + "valid";
+    loadExternalIsValidProp(require(emotionPkg).default);
+}
+catch {
+    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
+}
+function filterProps(props, isDom, forwardMotionProps) {
+    const filteredProps = {};
+    for (const key in props) {
+        /**
+         * values is considered a valid prop by Emotion, so if it's present
+         * this will be rendered out to the DOM unless explicitly filtered.
+         *
+         * We check the type as it could be used with the `feColorMatrix`
+         * element, which we support.
+         */
+        if (key === "values" && typeof props.values === "object")
+            continue;
+        if (isMotionValue(props[key]))
+            continue;
+        if (shouldForward(key) ||
+            (forwardMotionProps === true && isValidMotionProp(key)) ||
+            (!isDom && !isValidMotionProp(key)) ||
+            // If trying to use native HTML drag events, forward drag listeners
+            (props["draggable"] &&
+                key.startsWith("onDrag"))) {
+            filteredProps[key] =
+                props[key];
+        }
+    }
+    return filteredProps;
+}
+
+export { filterProps, loadExternalIsValidProp };
+//# sourceMappingURL=filter-props.mjs.map

node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-props.mjs","sources":["../../../../../src/render/dom/utils/filter-props.ts"],"sourcesContent":["import { isMotionValue } from \"motion-dom\"\nimport type { MotionProps } from \"../../../motion/types\"\nimport { isValidMotionProp } from \"../../../motion/utils/valid-prop\"\n\nlet shouldForward = (key: string) => !isValidMotionProp(key)\n\nexport type IsValidProp = (key: string) => boolean\n\nexport function loadExternalIsValidProp(isValidProp?: IsValidProp) {\n    if (typeof isValidProp !== \"function\") return\n\n    // Explicitly filter our events\n    shouldForward = (key: string) =>\n        key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key)\n}\n\n/**\n * Emotion and Styled Components both allow users to pass through arbitrary props to their components\n * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which\n * of these should be passed to the underlying DOM node.\n *\n * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props\n * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props\n * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of\n * `@emotion/is-prop-valid`, however to fix this problem we need to use it.\n *\n * By making it an optionalDependency we can offer this functionality only in the situations where it's\n * actually required.\n */\ntry {\n    /**\n     * We attempt to import this package but require won't be defined in esm environments, in that case\n     * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed\n     * in favour of explicit injection.\n     *\n     * String concatenation prevents bundlers like webpack (e.g. Storybook)\n     * from statically resolving this optional dependency at build time.\n     */\n    const emotionPkg = \"@emotion/is-prop-\" + \"valid\"\n    loadExternalIsValidProp(require(emotionPkg).default)\n} catch {\n    // We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\n\nexport function filterProps(\n    props: MotionProps,\n    isDom: boolean,\n    forwardMotionProps: boolean\n) {\n    const filteredProps: MotionProps = {}\n\n    for (const key in props) {\n        /**\n         * values is considered a valid prop by Emotion, so if it's present\n         * this will be rendered out to the DOM unless explicitly filtered.\n         *\n         * We check the type as it could be used with the `feColorMatrix`\n         * element, which we support.\n         */\n        if (key === \"values\" && typeof props.values === \"object\") continue\n\n        if (isMotionValue(props[key as keyof typeof props])) continue\n\n        if (\n            shouldForward(key) ||\n            (forwardMotionProps === true && isValidMotionProp(key)) ||\n            (!isDom && !isValidMotionProp(key)) ||\n            // If trying to use native HTML drag events, forward drag listeners\n            (props[\"draggable\" as keyof MotionProps] &&\n                key.startsWith(\"onDrag\"))\n        ) {\n            filteredProps[key as keyof MotionProps] =\n                props[key as keyof MotionProps]\n        }\n    }\n\n    return filteredProps\n}\n"],"names":[],"mappings":";;;AAIA,IAAI,aAAa,GAAG,CAAC,GAAW,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC;AAItD,SAAU,uBAAuB,CAAC,WAAyB,EAAA;IAC7D,IAAI,OAAO,WAAW,KAAK,UAAU;QAAE;;IAGvC,aAAa,GAAG,CAAC,GAAW,KACxB,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,GAAG,CAAC;AACzE;AAEA;;;;;;;;;;;;AAYG;AACH,IAAI;AACA;;;;;;;AAOG;AACH,IAAA,MAAM,UAAU,GAAG,mBAAmB,GAAG,OAAO;IAChD,uBAAuB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;AACxD;AAAE,MAAM;;AAER;SAEgB,WAAW,CACvB,KAAkB,EAClB,KAAc,EACd,kBAA2B,EAAA;IAE3B,MAAM,aAAa,GAAgB,EAAE;AAErC,IAAA,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;AACrB;;;;;;AAMG;QACH,IAAI,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ;YAAE;AAE1D,QAAA,IAAI,aAAa,CAAC,KAAK,CAAC,GAAyB,CAAC,CAAC;YAAE;QAErD,IACI,aAAa,CAAC,GAAG,CAAC;aACjB,kBAAkB,KAAK,IAAI,IAAI,iBAAiB,CAAC,GAAG,CAAC,CAAC;aACtD,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;;aAElC,KAAK,CAAC,WAAgC,CAAC;AACpC,gBAAA,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,EAC/B;YACE,aAAa,CAAC,GAAwB,CAAC;gBACnC,KAAK,CAAC,GAAwB,CAAC;QACvC;IACJ;AAEA,IAAA,OAAO,aAAa;AACxB;;;;"}

node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs

@@ -0,0 +1,31 @@
+import { lowercaseSVGElements } from '../../svg/lowercase-elements.mjs';
+
+function isSVGComponent(Component) {
+    if (
+    /**
+     * If it's not a string, it's a custom React component. Currently we only support
+     * HTML custom React components.
+     */
+    typeof Component !== "string" ||
+        /**
+         * If it contains a dash, the element is a custom HTML webcomponent.
+         */
+        Component.includes("-")) {
+        return false;
+    }
+    else if (
+    /**
+     * If it's in our list of lowercase SVG tags, it's an SVG component
+     */
+    lowercaseSVGElements.indexOf(Component) > -1 ||
+        /**
+         * If it contains a capital letter, it's an SVG component
+         */
+        /[A-Z]/u.test(Component)) {
+        return true;
+    }
+    return false;
+}
+
+export { isSVGComponent };
+//# sourceMappingURL=is-svg-component.mjs.map

node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-svg-component.mjs","sources":["../../../../../src/render/dom/utils/is-svg-component.ts"],"sourcesContent":["import * as React from \"react\"\nimport { lowercaseSVGElements } from \"../../svg/lowercase-elements\"\n\nexport function isSVGComponent(Component: string | React.ComponentType<any>) {\n    if (\n        /**\n         * If it's not a string, it's a custom React component. Currently we only support\n         * HTML custom React components.\n         */\n        typeof Component !== \"string\" ||\n        /**\n         * If it contains a dash, the element is a custom HTML webcomponent.\n         */\n        Component.includes(\"-\")\n    ) {\n        return false\n    } else if (\n        /**\n         * If it's in our list of lowercase SVG tags, it's an SVG component\n         */\n        lowercaseSVGElements.indexOf(Component) > -1 ||\n        /**\n         * If it contains a capital letter, it's an SVG component\n         */\n        /[A-Z]/u.test(Component)\n    ) {\n        return true\n    }\n\n    return false\n}\n"],"names":[],"mappings":";;AAGM,SAAU,cAAc,CAAC,SAA4C,EAAA;AACvE,IAAA;AACI;;;AAGG;IACH,OAAO,SAAS,KAAK,QAAQ;AAC7B;;AAEG;AACH,QAAA,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,EACzB;AACE,QAAA,OAAO,KAAK;IAChB;AAAO,SAAA;AACH;;AAEG;AACH,IAAA,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE;AAC5C;;AAEG;AACH,QAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAC1B;AACE,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,OAAO,KAAK;AAChB;;;;"}