@autoguru/overdrive 4.1.6 → 4.1.9

package/dist/components/Icon/Icon.js

@@ -1,13 +1,30 @@
+"use strict";
+
 import * as React from 'react';
 import { cloneElement } from 'react';
-import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
-import { Box, useBoxStyles } from '../Box';
-import * as styles from './Icon.css';
-export const Icon = ({ className = '', icon, size = 'small', display = 'block', }) => (React.createElement(Box, { is: "i", display: display, className: [resolveResponsiveStyle(size, styles.size), className], role: "presentation" }, cloneElement(icon, {
-    className: useBoxStyles({
+import { resolveResponsiveStyle } from "../../utils/resolveResponsiveProps.js";
+import { Box, useBoxStyles } from "../Box/index.js";
+import * as styles from "./Icon.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Icon = _ref => {
+  let {
+    className = '',
+    icon,
+    size = 'small',
+    display = 'block'
+  } = _ref;
+  return _jsx(Box, {
+    is: "i",
+    display: display,
+    className: [resolveResponsiveStyle(size, styles.size), className],
+    role: "presentation",
+    children: cloneElement(icon, {
+      className: useBoxStyles({
         is: 'svg',
         display: 'block',
         width: 'full',
-        height: 'full',
-    }),
-})));
+        height: 'full'
+      })
+    })
+  });
+};

package/dist/components/Icon/index.js

@@ -1 +1,3 @@
-export { Icon } from './Icon';
+"use strict";
+
+export { Icon } from "./Icon.js";

package/dist/components/Image/Image.js

@@ -1,5 +1,23 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["unoptimised"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
-import { useImageServer } from './ImageServerProvider';
-import { ResponsiveImage } from './ResponsiveImage';
-import { SimpleImage } from './SimpleImage';
-export const Image = ({ unoptimised = false, ...props }) => ((useImageServer() && !unoptimised) ? (React.createElement(ResponsiveImage, { ...props })) : (React.createElement(SimpleImage, { ...props })));
+import { useImageServer } from "./ImageServerProvider.js";
+import { ResponsiveImage } from "./ResponsiveImage.js";
+import { SimpleImage } from "./SimpleImage.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Image = _ref => {
+  let {
+    unoptimised = false
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return useImageServer() && !unoptimised ? _jsx(ResponsiveImage, _objectSpread({}, props)) : _jsx(SimpleImage, _objectSpread({}, props));
+};

package/dist/components/Image/ImageServerProvider.js

@@ -1,45 +1,62 @@
+"use strict";
+
 import * as React from 'react';
 import { createContext, useCallback, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const widthMap = {
-    '1': 16,
-    '2': 32,
-    '3': 48,
-    '4': 64,
-    '5': 96,
-    '6': 128,
-    '7': 256,
-    '8': 384,
-    '9': 640,
-    '10': 750,
-    '11': 828,
-    '12': 1080,
-    '13': 1200,
-    '14': 1920,
-    '15': 2048,
-    '16': 3840,
+  '1': 16,
+  '2': 32,
+  '3': 48,
+  '4': 64,
+  '5': 96,
+  '6': 128,
+  '7': 256,
+  '8': 384,
+  '9': 640,
+  '10': 750,
+  '11': 828,
+  '12': 1080,
+  '13': 1200,
+  '14': 1920,
+  '15': 2048,
+  '16': 3840
 };
 const defaultValue = {
-    widthMap,
-    getWidthValue: (width) => widthMap[width],
-    srcUrlMapper: null,
-    generateSrcSet: null,
+  widthMap,
+  getWidthValue: width => widthMap[width],
+  srcUrlMapper: null,
+  generateSrcSet: null
 };
 const imageServerCtx = createContext(null);
 export const useImageServer = () => useContext(imageServerCtx);
-export const ImageServerProvider = ({ children, srcUrlMapper = defaultValue.srcUrlMapper, getWidthValue = defaultValue.getWidthValue, widthMap = defaultValue.widthMap, }) => {
-    const generateSrcSet = useCallback(({ quality, src }) => (Object.keys(widthMap).map((key) => {
-        const width = getWidthValue(key);
-        return `${srcUrlMapper({ quality, src, width })} ${width}w`;
-    }).join(', ')), [widthMap, srcUrlMapper, getWidthValue]);
-    return (React.createElement(imageServerCtx.Provider, { value: useMemo(() => ({
-            widthMap,
-            srcUrlMapper,
-            getWidthValue,
-            generateSrcSet,
-        }), [
-            srcUrlMapper,
-            widthMap,
-            getWidthValue,
-            generateSrcSet,
-        ]) }, children));
-};
+export const ImageServerProvider = _ref => {
+  let {
+    children,
+    srcUrlMapper = defaultValue.srcUrlMapper,
+    getWidthValue = defaultValue.getWidthValue,
+    widthMap = defaultValue.widthMap
+  } = _ref;
+  const generateSrcSet = useCallback(_ref2 => {
+    let {
+      quality,
+      src
+    } = _ref2;
+    return Object.keys(widthMap).map(key => {
+      const width = getWidthValue(key);
+      return "".concat(srcUrlMapper({
+        quality,
+        src,
+        width
+      }), " ").concat(width, "w");
+    }).join(', ');
+  }, [widthMap, srcUrlMapper, getWidthValue]);
+  return _jsx(imageServerCtx.Provider, {
+    value: useMemo(() => ({
+      widthMap,
+      srcUrlMapper,
+      getWidthValue,
+      generateSrcSet
+    }), [srcUrlMapper, widthMap, getWidthValue, generateSrcSet]),
+    children: children
+  });
+};

package/dist/components/Image/ResponsiveImage.js

@@ -1,22 +1,49 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["imageWidth", "sizes", "quality", "src"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { useResponsiveValue } from '../../hooks/useResponsiveValue';
-import { useImageServer } from './ImageServerProvider';
-import { SimpleImage } from './SimpleImage';
-export const ResponsiveImage = ({ imageWidth: imageWidthList, sizes: sizesList = '100vw', quality = 70, src: incomingSrc, ...imgProps }) => {
-    invariant(quality > 0 && quality <= 100, 'Image must be a number between 1 and 100.');
-    const imageWidth = useResponsiveValue(imageWidthList);
-    const sizes = useResponsiveValue(sizesList);
-    const { srcUrlMapper, getWidthValue, generateSrcSet } = useImageServer();
-    const src = useMemo(() => srcUrlMapper({
-        src: incomingSrc,
-        width: getWidthValue(imageWidth),
-        quality,
-    }), [incomingSrc, imageWidth, quality, srcUrlMapper, getWidthValue]);
-    const srcset = useMemo(() => imageWidth ? void 0 : generateSrcSet({
-        src: incomingSrc,
-        quality,
-    }), [incomingSrc, quality]);
-    return (React.createElement(SimpleImage, { sizes: sizes, srcSet: srcset, src: src, ...imgProps }));
-};
+import { useResponsiveValue } from "../../hooks/useResponsiveValue/index.js";
+import { useImageServer } from "./ImageServerProvider.js";
+import { SimpleImage } from "./SimpleImage.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ResponsiveImage = _ref => {
+  let {
+    imageWidth: imageWidthList,
+    sizes: sizesList = '100vw',
+    quality = 70,
+    src: incomingSrc
+  } = _ref,
+      imgProps = _objectWithoutProperties(_ref, _excluded);
+
+  !(quality > 0 && quality <= 100) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Image must be a number between 1 and 100.') : invariant(false) : void 0;
+  const imageWidth = useResponsiveValue(imageWidthList);
+  const sizes = useResponsiveValue(sizesList);
+  const {
+    srcUrlMapper,
+    getWidthValue,
+    generateSrcSet
+  } = useImageServer();
+  const src = useMemo(() => srcUrlMapper({
+    src: incomingSrc,
+    width: getWidthValue(imageWidth),
+    quality
+  }), [incomingSrc, imageWidth, quality, srcUrlMapper, getWidthValue]);
+  const srcset = useMemo(() => imageWidth ? void 0 : generateSrcSet({
+    src: incomingSrc,
+    quality
+  }), [incomingSrc, quality]);
+  return _jsx(SimpleImage, _objectSpread({
+    sizes: sizes,
+    srcSet: srcset,
+    src: src
+  }, imgProps));
+};

package/dist/components/Image/SimpleImage.js

@@ -1,2 +1,30 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["eager", "syncDecoding", "className", "src", "srcSet"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
-export const SimpleImage = ({ eager = 'false', syncDecoding = 'false', className = '', src, srcSet, ...imgProps }) => (React.createElement("img", { loading: eager ? 'eager' : 'lazy', decoding: syncDecoding ? 'sync' : 'async', className: className, srcSet: srcSet, src: src, ...imgProps }));
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SimpleImage = _ref => {
+  let {
+    eager = 'false',
+    syncDecoding = 'false',
+    className = '',
+    src,
+    srcSet
+  } = _ref,
+      imgProps = _objectWithoutProperties(_ref, _excluded);
+
+  return _jsx("img", _objectSpread({
+    loading: eager ? 'eager' : 'lazy',
+    decoding: syncDecoding ? 'sync' : 'async',
+    className: className,
+    srcSet: srcSet,
+    src: src
+  }, imgProps));
+};

package/dist/components/Image/index.js

@@ -1 +1,4 @@
-export { Image } from './Image';
+"use strict";
+
+export { Image } from "./Image.js";
+export { ImageServerProvider, useImageServer } from "./ImageServerProvider.js";

package/dist/components/Image/types.js

@@ -1 +1,3 @@
-export {};
+"use strict";
+
+export {};

package/dist/components/Inline/Inline.js

@@ -1,34 +1,75 @@
+"use strict";
+
 import * as React from 'react';
 import { Children, isValidElement } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
-import { useNegativeMarginLeft, useNegativeMarginTop, } from '../../hooks/useNegativeMargin/useNegativeMargin';
-import { Box } from '../Box';
-import { Text } from '../Text';
-const supportedListTypes = [
-    'ul',
-    'ol',
-];
-export const Inline = ({ is = 'div', children, space = '2', alignY = 'center', alignX, noWrap, dividers, }) => {
-    const negativeMarginLeft = useNegativeMarginLeft(space);
-    const negativeMarginTop = useNegativeMarginTop(space);
-    const items = flattenChildren(children);
-    if (items.length < 2) {
-        return React.createElement(React.Fragment, null, items);
-    }
-    const divider = renderDivider(dividers);
-    let listItem = 'div';
-    if (typeof is === 'string')
-        listItem = supportedListTypes.includes(is) ? 'li' : 'div';
-    return (React.createElement(Box, { is: is, position: "relative", display: "flex", alignItems: alignY, justifyContent: alignX, flexDirection: "row", flexWrap: noWrap ? 'nowrap' : 'wrap', className: [negativeMarginTop, !dividers && negativeMarginLeft] }, Children.map(items, (child, idx) => child !== null && child !== undefined ? (React.createElement(Box, { is: listItem, display: "flex", flexDirection: "row", flexWrap: "nowrap", alignItems: alignY, paddingTop: space, paddingLeft: dividers ? undefined : space },
-        child,
-        dividers && idx !== items.length - 1 ? (React.createElement(Box, { paddingX: space }, divider)) : null)) : null)));
-};
-const renderDivider = (dividers) => {
-    if (typeof dividers === 'boolean') {
-        return dividers ? React.createElement(Text, null, "\u2022") : null;
-    }
-    if (isValidElement(dividers)) {
-        return dividers;
-    }
-    return React.createElement(Text, null, dividers);
+import { useNegativeMarginLeft, useNegativeMarginTop } from "../../hooks/useNegativeMargin/useNegativeMargin.js";
+import { Box } from "../Box/index.js";
+import { Text } from "../Text/index.js";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const supportedListTypes = ['ul', 'ol'];
+export const Inline = _ref => {
+  let {
+    is = 'div',
+    children,
+    space = '2',
+    alignY = 'center',
+    alignX,
+    noWrap,
+    dividers
+  } = _ref;
+  const negativeMarginLeft = useNegativeMarginLeft(space);
+  const negativeMarginTop = useNegativeMarginTop(space);
+  const items = flattenChildren(children);
+
+  if (items.length < 2) {
+    return _jsx(_Fragment, {
+      children: items
+    });
+  }
+
+  const divider = renderDivider(dividers);
+  let listItem = 'div';
+  if (typeof is === 'string') listItem = supportedListTypes.includes(is) ? 'li' : 'div';
+  return _jsx(Box, {
+    is: is,
+    position: "relative",
+    display: "flex",
+    alignItems: alignY,
+    justifyContent: alignX,
+    flexDirection: "row",
+    flexWrap: noWrap ? 'nowrap' : 'wrap',
+    className: [negativeMarginTop, !dividers && negativeMarginLeft],
+    children: Children.map(items, (child, idx) => child !== null && child !== undefined ? _jsxs(Box, {
+      is: listItem,
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "nowrap",
+      alignItems: alignY,
+      paddingTop: space,
+      paddingLeft: dividers ? undefined : space,
+      children: [child, dividers && idx !== items.length - 1 ? _jsx(Box, {
+        paddingX: space,
+        children: divider
+      }) : null]
+    }) : null)
+  });
 };
+
+const renderDivider = dividers => {
+  if (typeof dividers === 'boolean') {
+    return dividers ? _jsx(Text, {
+      children: "\u2022"
+    }) : null;
+  }
+
+  if (isValidElement(dividers)) {
+    return dividers;
+  }
+
+  return _jsx(Text, {
+    children: dividers
+  });
+};

package/dist/components/Inline/index.js

@@ -1 +1,3 @@
-export { Inline } from './Inline';
+"use strict";
+
+export { Inline } from "./Inline.js";

package/dist/components/LinearProgressIndicator/LinearProgressIndicator.css.js

@@ -1,54 +1,62 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/LinearProgressIndicator/LinearProgressIndicator.css.ts", "@autoguru/overdrive");
+
 import { keyframes, style } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 export const root = style({
-    height: vars.space['1'],
-    transition: 'opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1) 0ms',
-    transform: 'translateZ(0)',
-});
+  height: vars.space['1'],
+  transition: 'opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+  transform: 'translateZ(0)'
+}, "root");
 const layerOneAnim = keyframes({
-    '0%': {
-        animationTimingFunction: 'cubic-bezier(0.15, 0, 0.51506, 0.40969)',
-        transform: 'translateX(0)',
-    },
-    '25%': {
-        animationTimingFunction: 'cubic-bezier(0.31033, 0.28406, 0.8, 0.73371)',
-        transform: 'translateX(37.65191%)',
-    },
-    '48.35%': {
-        animationTimingFunction: 'cubic-bezier(0.4, 0.62704, 0.6, 0.90203)',
-        transform: 'translateX(84.38617%)',
-    },
-    '100%': {
-        transform: 'translateX(160.27778%)',
-    },
-});
+  '0%': {
+    animationTimingFunction: 'cubic-bezier(0.15, 0, 0.51506, 0.40969)',
+    transform: 'translateX(0)'
+  },
+  '25%': {
+    animationTimingFunction: 'cubic-bezier(0.31033, 0.28406, 0.8, 0.73371)',
+    transform: 'translateX(37.65191%)'
+  },
+  '48.35%': {
+    animationTimingFunction: 'cubic-bezier(0.4, 0.62704, 0.6, 0.90203)',
+    transform: 'translateX(84.38617%)'
+  },
+  '100%': {
+    transform: 'translateX(160.27778%)'
+  }
+}, "layerOneAnim");
 export const linearProgressBar = style({
-    left: '-54.888891%',
-    animationDuration: '2s',
-    animationTimingFunction: 'linear',
-    animationIterationCount: 'infinite',
-    animationName: layerOneAnim,
-});
+  left: '-54.888891%',
+  animationDuration: '2s',
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite',
+  animationName: layerOneAnim
+}, "linearProgressBar");
 const layerTwoAnim = keyframes({
-    '0%': {
-        animationTimingFunction: 'cubic-bezier(0.20503,0.05705,0.57661,0.45397)',
-        transform: 'scaleX(0.08)',
-    },
-    '19.15%': {
-        animationTimingFunction: 'cubic-bezier(0.15231,0.19643,0.64837,1.00432)',
-        transform: 'scaleX(0.4571)',
-    },
-    '44.15%': {
-        animationTimingFunction: 'cubic-bezier(0.25776,-0.00316,0.21176,1.38179)',
-        transform: 'scaleX(0.72796)',
-    },
-    '100%': {
-        transform: 'scaleX(0.08)',
-    },
-});
+  '0%': {
+    animationTimingFunction: 'cubic-bezier(0.20503,0.05705,0.57661,0.45397)',
+    transform: 'scaleX(0.08)'
+  },
+  '19.15%': {
+    animationTimingFunction: 'cubic-bezier(0.15231,0.19643,0.64837,1.00432)',
+    transform: 'scaleX(0.4571)'
+  },
+  '44.15%': {
+    animationTimingFunction: 'cubic-bezier(0.25776,-0.00316,0.21176,1.38179)',
+    transform: 'scaleX(0.72796)'
+  },
+  '100%': {
+    transform: 'scaleX(0.08)'
+  }
+}, "layerTwoAnim");
 export const linearProgressBarInner = style({
-    animationDuration: '2s',
-    animationTimingFunction: 'linear',
-    animationIterationCount: 'infinite',
-    animationName: layerTwoAnim,
-});
+  animationDuration: '2s',
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite',
+  animationName: layerTwoAnim
+}, "linearProgressBarInner");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/LinearProgressIndicator/LinearProgressIndicator.js

@@ -1,9 +1,33 @@
+"use strict";
+
 import * as React from 'react';
 import { memo } from 'react';
-import { Box } from '../Box';
-import * as styles from './LinearProgressIndicator.css';
-export const LinearProgressIndicator = memo(({ className = '' }) => {
-    return (React.createElement(Box, { position: "relative", overflow: "hidden", width: "full", backgroundColour: "gray200", className: [styles.root, className] },
-        React.createElement(Box, { position: "absolute", width: "full", height: "full", className: styles.linearProgressBar },
-            React.createElement(Box, { is: "span", backgroundColour: "green300", position: "absolute", width: "full", height: "full", className: styles.linearProgressBarInner }))));
-});
+import { Box } from "../Box/index.js";
+import * as styles from "./LinearProgressIndicator.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const LinearProgressIndicator = memo(_ref => {
+  let {
+    className = ''
+  } = _ref;
+  return _jsx(Box, {
+    position: "relative",
+    overflow: "hidden",
+    width: "full",
+    backgroundColour: "gray200",
+    className: [styles.root, className],
+    children: _jsx(Box, {
+      position: "absolute",
+      width: "full",
+      height: "full",
+      className: styles.linearProgressBar,
+      children: _jsx(Box, {
+        is: "span",
+        backgroundColour: "green300",
+        position: "absolute",
+        width: "full",
+        height: "full",
+        className: styles.linearProgressBarInner
+      })
+    })
+  });
+});

package/dist/components/LinearProgressIndicator/index.js

@@ -1 +1,3 @@
-export { LinearProgressIndicator } from './LinearProgressIndicator';
+"use strict";
+
+export { LinearProgressIndicator } from "./LinearProgressIndicator.js";

package/dist/components/LoadingBox/LoadingBox.css.js

@@ -1,22 +1,30 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/LoadingBox/LoadingBox.css.ts", "@autoguru/overdrive");
+
 import { keyframes, style } from '@vanilla-extract/css';
-import { vars } from '../../themes/base/vars.css';
+import { vars } from "../../themes/base/vars.css.js";
 export const root = style({
-    minHeight: vars.typography.size['3'].fontSize,
-});
+  minHeight: vars.typography.size['3'].fontSize
+}, "root");
 const blinker = keyframes({
-    '0%': {
-        opacity: 0.4,
-    },
-    '50%': {
-        opacity: 1,
-    },
-    '100%': {
-        opacity: 0.4,
-    },
-});
+  '0%': {
+    opacity: 0.4
+  },
+  '50%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0.4
+  }
+}, "blinker");
 export const blinking = style({
-    animationDuration: '1.5s',
-    animationTimingFunction: vars.animation.easing.standard,
-    animationIterationCount: 'infinite',
-    animationName: blinker,
-});
+  animationDuration: '1.5s',
+  animationTimingFunction: vars.animation.easing.standard,
+  animationIterationCount: 'infinite',
+  animationName: blinker
+}, "blinking");
+
+__vanilla_filescope__.endFileScope();