@autoguru/overdrive 4.3.4 → 4.4.0

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps, FunctionComponent } from 'react';
+import { ResponsiveImage } from './ResponsiveImage';
+interface Props extends ComponentProps<typeof ResponsiveImage> {
+    unoptimised?: boolean;
+}
+export declare const Image: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,UAAU,KAAM,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC;IAI7D,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAQzC,CAAC"}

package/dist/components/Image/Image.js

@@ -1,23 +1,5 @@
-"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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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.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));
-};
+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 }));

package/dist/components/Image/ImageServerProvider.d.ts

@@ -0,0 +1,19 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { WidthScale } from './types';
+interface UrlParams {
+    src: string;
+    width: number;
+    quality: number;
+}
+interface ImageServerContext {
+    children?: ReactNode;
+    widthMap?: Record<WidthScale, number>;
+    getWidthValue?(width: WidthScale): number;
+    srcUrlMapper(params: UrlParams): string;
+    generateSrcSet(params: Omit<UrlParams, 'width'>): string;
+}
+export declare const widthMap: ImageServerContext['widthMap'];
+export declare const useImageServer: () => ImageServerContext;
+export declare const ImageServerProvider: FunctionComponent<Omit<ImageServerContext, 'generateSrcSet'>>;
+export {};
+//# sourceMappingURL=ImageServerProvider.d.ts.map

package/dist/components/Image/ImageServerProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageServerProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ImageServerProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAGN,iBAAiB,EACjB,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,UAAU,SAAS;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,kBAAkB;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAEtC,aAAa,CAAC,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IAE1C,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC;IAExC,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC;CACzD;AAED,eAAO,MAAM,QAAQ,EAAE,kBAAkB,CAAC,UAAU,CAiBnD,CAAC;AAWF,eAAO,MAAM,cAAc,0BAAmC,CAAC;AAE/D,eAAO,MAAM,mBAAmB,EAAE,iBAAiB,CAClD,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAgC1C,CAAC"}

package/dist/components/Image/ImageServerProvider.js

@@ -1,62 +1,42 @@
-"use strict";
-
 import * as React from 'react';
-import { createContext, useCallback, useContext, useMemo } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, } from 'react';
 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 = _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
-  });
-};
+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));
+};

package/dist/components/Image/ResponsiveImage.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, FunctionComponent } from 'react';
+import { ResponsiveProp } from '../../utils/responsiveProps.css';
+import { widthMap } from './ImageServerProvider';
+import { SimpleImage } from './SimpleImage';
+export interface Props extends Omit<ComponentProps<typeof SimpleImage>, 'sizes'> {
+    imageWidth?: ResponsiveProp<keyof typeof widthMap>;
+    sizes?: ResponsiveProp<string>;
+    quality?: number;
+}
+export declare const ResponsiveImage: FunctionComponent<Props>;
+//# sourceMappingURL=ResponsiveImage.d.ts.map

package/dist/components/Image/ResponsiveImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/ResponsiveImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAkB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,OAAO,CAAC;IAQzD,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;IAanD,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAM/B,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,iBAAiB,CAAC,KAAK,CAuCpD,CAAC"}

package/dist/components/Image/ResponsiveImage.js

@@ -1,49 +1,24 @@
-"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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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/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));
-};
+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 }));
+};

package/dist/components/Image/SimpleImage.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+export interface Props extends Partial<Omit<HTMLImageElement, 'loading' | 'className' | 'width' | 'height'>> {
+    src: string;
+    eager?: boolean;
+    srcSet?: string;
+    syncDecoding?: boolean;
+    width?: string;
+    height?: string;
+    className?: string;
+}
+export declare const SimpleImage: FunctionComponent<Props>;
+//# sourceMappingURL=SimpleImage.d.ts.map

package/dist/components/Image/SimpleImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleImage.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/SimpleImage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,KAChB,SAAQ,OAAO,CACd,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC,CACpE;IACD,GAAG,EAAE,MAAM,CAAC;IAKZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAMhB,MAAM,CAAC,EAAE,MAAM,CAAC;IAMhB,YAAY,CAAC,EAAE,OAAO,CAAC;IAMvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CAiBhD,CAAC"}

package/dist/components/Image/SimpleImage.js

@@ -1,30 +1,2 @@
-"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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
-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));
-};
+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 }));

package/dist/components/Image/index.d.ts

@@ -0,0 +1,3 @@
+export { Image } from './Image';
+export { ImageServerProvider, useImageServer } from './ImageServerProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/Image/index.js

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

package/dist/components/Image/types.d.ts

@@ -0,0 +1,2 @@
+export declare type WidthScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16';
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Image/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/Image/types.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU,GACnB,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,CAAC"}

package/dist/components/Image/types.js

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

package/dist/components/Inline/Inline.d.ts

@@ -0,0 +1,15 @@
+import type { FunctionComponent } from 'react';
+import { ReactNode } from 'react';
+import { Tokens } from '../../themes/tokens';
+import { ResponsiveProp } from '../../utils/responsiveProps.css';
+import type { BoxStyleProps } from '../Box';
+export interface Props extends Pick<BoxStyleProps, 'is' | 'width'> {
+    space?: ResponsiveProp<keyof Tokens['space']>;
+    alignY?: BoxStyleProps['alignItems'];
+    alignX?: BoxStyleProps['justifyContent'];
+    noWrap?: boolean;
+    children: ReactNode;
+    dividers?: boolean | ReactNode;
+}
+export declare const Inline: FunctionComponent<Props>;
+//# sourceMappingURL=Inline.d.ts.map

package/dist/components/Inline/Inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../lib/components/Inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AAE7D,OAAO,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI5C,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,OAAO,CAAC;IACjE,KAAK,CAAC,EAAE,cAAc,CAAC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B;AAOD,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAwD3C,CAAC"}

package/dist/components/Inline/Inline.js

@@ -1,75 +1,34 @@
-"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.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)
-  });
+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, width, }) => {
+    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, width: width, 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);
 };
-
-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.d.ts

@@ -0,0 +1,2 @@
+export { Inline } from './Inline';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Inline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Inline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Inline/index.js

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

package/dist/components/Inline/stories.js

@@ -35,6 +35,11 @@ export default {
       control: {
         type: 'select'
       }
+    },
+    dividers: {
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -114,4 +119,10 @@ const differentSizeItemsProps = {
   dividers: true
 };
 export const differentSizeItems = DiffSizeTemplate.bind(differentSizeItemsProps);
-differentSizeItems.args = differentSizeItemsProps;
+differentSizeItems.args = differentSizeItemsProps;
+const withFullWidthProps = {
+  width: 'full',
+  alignX: 'spaceBetween'
+};
+export const withFullWidth = DiffSizeTemplate.bind(withFullWidthProps);
+withFullWidth.args = withFullWidthProps;

package/dist/components/LinearProgressIndicator/LinearProgressIndicator.css.d.ts

@@ -0,0 +1,4 @@
+export declare const root: string;
+export declare const linearProgressBar: string;
+export declare const linearProgressBarInner: string;
+//# sourceMappingURL=LinearProgressIndicator.css.d.ts.map

package/dist/components/LinearProgressIndicator/LinearProgressIndicator.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearProgressIndicator.css.d.ts","sourceRoot":"","sources":["../../../lib/components/LinearProgressIndicator/LinearProgressIndicator.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAIf,CAAC;AAoBH,eAAO,MAAM,iBAAiB,QAM5B,CAAC;AAsBH,eAAO,MAAM,sBAAsB,QAKjC,CAAC"}

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

@@ -1,62 +1,54 @@
-"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.js";
+import { vars } from '../../themes/base/vars.css';
 export const root = style({
-  height: vars.space['1'],
-  transition: 'opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1) 0ms',
-  transform: 'translateZ(0)'
-}, "root");
+    height: vars.space['1'],
+    transition: 'opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1) 0ms',
+    transform: 'translateZ(0)',
+});
 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%)'
-  }
-}, "layerOneAnim");
+    '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%)',
+    },
+});
 export const linearProgressBar = style({
-  left: '-54.888891%',
-  animationDuration: '2s',
-  animationTimingFunction: 'linear',
-  animationIterationCount: 'infinite',
-  animationName: layerOneAnim
-}, "linearProgressBar");
+    left: '-54.888891%',
+    animationDuration: '2s',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+    animationName: layerOneAnim,
+});
 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)'
-  }
-}, "layerTwoAnim");
+    '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)',
+    },
+});
 export const linearProgressBarInner = style({
-  animationDuration: '2s',
-  animationTimingFunction: 'linear',
-  animationIterationCount: 'infinite',
-  animationName: layerTwoAnim
-}, "linearProgressBarInner");
-
-__vanilla_filescope__.endFileScope();
+    animationDuration: '2s',
+    animationTimingFunction: 'linear',
+    animationIterationCount: 'infinite',
+    animationName: layerTwoAnim,
+});

package/dist/components/LinearProgressIndicator/LinearProgressIndicator.d.ts

@@ -0,0 +1,6 @@
+import { NamedExoticComponent } from 'react';
+export interface Props {
+    className?: string;
+}
+export declare const LinearProgressIndicator: NamedExoticComponent<Props>;
+//# sourceMappingURL=LinearProgressIndicator.d.ts.map