@autoguru/overdrive 4.14.4 → 4.14.6

package/dist/components/Anchor/Anchor.d.ts

@@ -1,10 +1,6 @@
 import { IconType } from '@autoguru/icons';
-import { ElementType, FunctionComponent, ReactElement, ReactNode } from 'react';
-export interface Props {
-    rel?: string;
-    href?: string;
-    title?: string;
-    target?: string;
+import { AnchorHTMLAttributes, ElementType, FunctionComponent, ReactElement, ReactNode } from 'react';
+export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'style' | 'is'> {
     className?: string;
     is?: ElementType | ReactElement;
     disabled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EAGN,WAAW,EACX,iBAAiB,EAEjB,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,KAAK;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAgD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../../lib/components/Anchor/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,EACN,oBAAoB,EAGpB,WAAW,EACX,iBAAiB,EAEjB,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,KAAM,SAAQ,IAAI,CAClC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,CAC3B;IACA,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAyC3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Anchor/Anchor.js

@@ -1,5 +1,10 @@
 "use strict";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "is", "disabled", "children", "icon"];
+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 clsx from 'clsx';
 import * as React from 'react';
 import { cloneElement, createElement, isValidElement } from 'react';
@@ -12,30 +17,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const Anchor = _ref => {
   let {
-    rel,
-    href,
-    target,
-    title,
-    className = '',
-    is: Component = 'a',
-    disabled = false,
-    children,
-    icon
-  } = _ref;
+      className = '',
+      is: Component = 'a',
+      disabled = false,
+      children,
+      icon
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const textStyles = useTextStyles({
     colour: 'link'
   });
-  const props = {
+  const props = _objectSpread({
     className: clsx(styles.root, textStyles, useBoxStyles({
       is: typeof Component === 'string' ? Component : undefined,
       display: 'inline'
     }), className),
-    disabled,
-    rel,
-    href,
-    target,
-    title
-  };
+    disabled
+  }, rest);
   const childs = _jsxs(Inline, {
     space: "2",
     children: [icon && _jsx(Icon, {

package/dist/components/Switch/Switch.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-export interface Props {
+import { AnchorHTMLAttributes, FunctionComponent } from 'react';
+export interface Props extends Omit<AnchorHTMLAttributes<HTMLButtonElement>, 'children' | 'style' | 'is' | 'onChange'> {
     className?: string;
     disabled?: boolean;
     toggled?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAOvD,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAsD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAO7E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAClC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,UAAU,CACxC;IACA,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAwD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Switch/Switch.js

@@ -1,5 +1,10 @@
 "use strict";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "disabled", "toggled", "onChange"];
+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 clsx from 'clsx';
 import * as React from 'react';
 import { useCallback } from 'react';
@@ -9,11 +14,12 @@ import * as styles from "./Switch.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Switch = _ref => {
   let {
-    className = '',
-    disabled = false,
-    toggled = false,
-    onChange
-  } = _ref;
+      className = '',
+      disabled = false,
+      toggled = false,
+      onChange
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const onToggle = useCallback(() => {
     if (disabled) {
       return;
@@ -22,8 +28,9 @@ export const Switch = _ref => {
       onChange(!toggled);
     }
   }, [disabled, toggled]);
-  return _jsx(Box, {
-    is: "button",
+  return _jsx(Box, _objectSpread(_objectSpread({
+    is: "button"
+  }, rest), {}, {
     className: clsx(styles.root, useTextStyles({
       size: '5'
     }), {
@@ -52,6 +59,6 @@ export const Switch = _ref => {
         [styles.handle.transition]: toggled
       })
     })
-  });
+  }));
 };
 export default Switch;

package/dist/themes/base/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;AAgE9C,eAAO,MAAM,YAAY,iDAA4B,CAAC;AAItD,eAAO,MAAM,MAAM,EAAE,MAuNpB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;AAgE9C,eAAO,MAAM,YAAY,iDAAqC,CAAC;AAI/D,eAAO,MAAM,MAAM,EAAE,MAuNpB,CAAC"}

package/dist/themes/base/tokens.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 { buildColourGamut } from "../makeTheme.js";
-const colours = {
+const baseThemeColours = {
   gray: {
     '900': '#212338',
     '800': '#34384c',
@@ -61,14 +61,14 @@ const colours = {
     '100': '#fdf4f4'
   }
 };
-export const defaultGamut = buildColourGamut(colours);
+export const defaultGamut = buildColourGamut(baseThemeColours);
 const white = '#fff';
-const secondaryForeground = colours.gray['700'];
+const secondaryForeground = baseThemeColours.gray['700'];
 export const tokens = {
   mode: 'light',
   body: {
     backgroundColour: white,
-    colour: colours.gray['900']
+    colour: baseThemeColours.gray['900']
   },
   contentWidth: {
     small: '592px',
@@ -92,87 +92,87 @@ export const tokens = {
       white
     }),
     foreground: {
-      body: colours.gray['900'],
-      link: colours.blue['500']
+      body: baseThemeColours.gray['900'],
+      link: baseThemeColours.blue['500']
     },
     background: {
       body: white,
-      light: colours.gray['200'],
-      neutral: colours.gray['400'],
-      neutralDark: colours.gray['800']
+      light: baseThemeColours.gray['200'],
+      neutral: baseThemeColours.gray['400'],
+      neutralDark: baseThemeColours.gray['800']
     },
     intent: {
       primary: {
         background: {
-          standard: colours.green['700'],
-          mild: colours.green['200'],
-          strong: colours.green['900']
+          standard: baseThemeColours.green['700'],
+          mild: baseThemeColours.green['200'],
+          strong: baseThemeColours.green['900']
         },
         foreground: white,
-        border: colours.green['900']
+        border: baseThemeColours.green['900']
       },
       secondary: {
         background: {
           standard: white,
           mild: white,
-          strong: colours.gray['200']
+          strong: baseThemeColours.gray['200']
         },
         foreground: secondaryForeground,
-        border: colours.gray['300']
+        border: baseThemeColours.gray['300']
       },
       shine: {
         background: {
-          standard: colours.gray['200'],
-          mild: colours.gray['100'],
-          strong: colours.gray['300']
+          standard: baseThemeColours.gray['200'],
+          mild: baseThemeColours.gray['100'],
+          strong: baseThemeColours.gray['300']
         },
-        foreground: colours.yellow['500'],
-        border: colours.gray['300']
+        foreground: baseThemeColours.yellow['500'],
+        border: baseThemeColours.gray['300']
       },
       danger: {
         background: {
-          standard: colours.red['600'],
-          mild: colours.red['100'],
-          strong: colours.red['800']
+          standard: baseThemeColours.red['600'],
+          mild: baseThemeColours.red['100'],
+          strong: baseThemeColours.red['800']
         },
         foreground: white,
-        border: colours.red['800']
+        border: baseThemeColours.red['800']
       },
       warning: {
         background: {
-          standard: colours.yellow['800'],
-          mild: colours.yellow['100'],
-          strong: colours.yellow['900']
+          standard: baseThemeColours.yellow['800'],
+          mild: baseThemeColours.yellow['100'],
+          strong: baseThemeColours.yellow['900']
         },
         foreground: white,
-        border: colours.yellow['900']
+        border: baseThemeColours.yellow['900']
       },
       neutral: {
         background: {
-          standard: colours.gray['700'],
-          mild: colours.gray['200'],
-          strong: colours.gray['900']
+          standard: baseThemeColours.gray['700'],
+          mild: baseThemeColours.gray['200'],
+          strong: baseThemeColours.gray['900']
         },
         foreground: white,
-        border: colours.gray['900']
+        border: baseThemeColours.gray['900']
       },
       success: {
         background: {
-          standard: colours.green['700'],
-          mild: colours.green['200'],
-          strong: colours.green['900']
+          standard: baseThemeColours.green['700'],
+          mild: baseThemeColours.green['200'],
+          strong: baseThemeColours.green['900']
         },
-        foreground: colours.green['200'],
-        border: colours.green['900']
+        foreground: baseThemeColours.green['200'],
+        border: baseThemeColours.green['900']
       },
       information: {
         background: {
-          standard: colours.blue['800'],
-          mild: colours.blue['200'],
-          strong: colours.blue['900']
+          standard: baseThemeColours.blue['800'],
+          mild: baseThemeColours.blue['200'],
+          strong: baseThemeColours.blue['900']
         },
         foreground: white,
-        border: colours.blue['900']
+        border: baseThemeColours.blue['900']
       }
     }
   },
@@ -192,9 +192,9 @@ export const tokens = {
       '3': '4px'
     },
     colours: {
-      light: colours.gray['200'],
-      gray: colours.gray['300'],
-      dark: colours.gray['900']
+      light: baseThemeColours.gray['200'],
+      gray: baseThemeColours.gray['300'],
+      dark: baseThemeColours.gray['900']
     },
     radius: {
       none: 'none',
@@ -244,19 +244,19 @@ export const tokens = {
       }
     },
     colour: {
-      primary: colours.green['600'],
-      secondary: colours.gray['700'],
-      shine: colours.yellow['500'],
-      link: colours.blue['500'],
-      dark: colours.gray['900'],
+      primary: baseThemeColours.green['600'],
+      secondary: baseThemeColours.gray['700'],
+      shine: baseThemeColours.yellow['500'],
+      link: baseThemeColours.blue['500'],
+      dark: baseThemeColours.gray['900'],
       white,
-      muted: colours.gray['400'],
-      neutral: colours.gray['700'],
-      light: colours.gray['600'],
-      danger: colours.red['600'],
-      warning: colours.yellow['800'],
-      success: colours.green['600'],
-      information: colours.blue['500']
+      muted: baseThemeColours.gray['400'],
+      neutral: baseThemeColours.gray['700'],
+      light: baseThemeColours.gray['600'],
+      danger: baseThemeColours.red['600'],
+      warning: baseThemeColours.yellow['800'],
+      success: baseThemeColours.green['600'],
+      information: baseThemeColours.blue['500']
     },
     fontWeight: {
       normal: '400',

package/dist/utils/css.d.ts

@@ -0,0 +1,3 @@
+export declare const cssVarUnwrap: (value: string) => string;
+export declare const getThemeTokenValue: (themeClass: string, token: string) => string | null;
+//# sourceMappingURL=css.d.ts.map

package/dist/utils/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,UAAW,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,MAAM,KAAG,MAAM,GAAG,IAK/E,CAAC"}

package/dist/utils/css.js

@@ -0,0 +1,14 @@
+"use strict";
+
+const cssVarRegExp = /var\(([^)]+)\)/;
+export const cssVarUnwrap = value => {
+  const matches = cssVarRegExp.exec(value);
+  return matches ? matches[1] : value;
+};
+export const getThemeTokenValue = (themeClass, token) => {
+  var _getComputedStyle$get;
+  const cssVar = cssVarUnwrap(token);
+  const themedElement = document.querySelector(".".concat(themeClass));
+  if (!themedElement || !cssVar) return null;
+  return ((_getComputedStyle$get = getComputedStyle(themedElement).getPropertyValue(cssVar)) === null || _getComputedStyle$get === void 0 ? void 0 : _getComputedStyle$get.trim()) || null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.14.4",
+	"version": "4.14.6",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",