@autoguru/overdrive 4.45.0-next.0 → 4.45.0-next.2

package/dist/components/Button/Button.css.js

@@ -30,7 +30,6 @@ export const button = recipe({
     alignItems: 'center',
     borderRadius: 'md',
     borderStyle: 'none',
-    display: 'flex',
     fontWeight: 'semiBold',
     gap: '1',
     justifyContent: 'center',
@@ -40,6 +39,7 @@ export const button = recipe({
     '@layer': {
       [cssLayerComponent]: {
         cursor: 'pointer',
+        display: 'flex',
         lineHeight: 1,
         padding: `0 ${vars.space[4]}`,
         transform: 'translate(0, 0) scale(1)',

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

@@ -0,0 +1,2 @@
+export declare const numberStyle: string;
+//# sourceMappingURL=NumberBubble.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBubble.css.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,QAMtB,CAAC"}

package/dist/components/NumberBubble/NumberBubble.css.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/NumberBubble/NumberBubble.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { cssLayerComponent } from "../../styles/layers.css.js";
+export const numberStyle = style({
+  '@layer': {
+    [cssLayerComponent]: {
+      transform: 'translateY(-0.51px)'
+    }
+  }
+}, "numberStyle");
+__vanilla_filescope__.endFileScope();

package/dist/components/NumberBubble/NumberBubble.d.ts

@@ -1,10 +1,11 @@
-import { ComponentProps, FunctionComponent } from 'react';
-import { Box } from '../Box/Box';
-import { Text } from '../Text/Text';
-export interface NumberBubbleProps extends Omit<ComponentProps<typeof Box>, 'borderRadius' | 'position' | 'padding'> {
+import React from 'react';
+import { type UseBoxProps } from '../Box/useBox/useBox';
+import { type TextProps } from '../Text/Text';
+export interface NumberBubbleProps extends Pick<UseBoxProps, 'backgroundColor' | 'backgroundColour'> {
     value: number;
     rawNumbers?: boolean;
-    textColour?: ComponentProps<typeof Text>['colour'];
+    textColor?: TextProps['color'];
+    textColour?: TextProps['colour'];
 }
-export declare const NumberBubble: FunctionComponent<NumberBubbleProps>;
+export declare const NumberBubble: ({ backgroundColor, backgroundColour, rawNumbers, textColor, textColour, value, }: NumberBubbleProps) => React.JSX.Element;
 //# sourceMappingURL=NumberBubble.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,GAAG,EAAiB,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,MAAM,WAAW,iBAChB,SAAQ,IAAI,CACX,cAAc,CAAC,OAAO,GAAG,CAAC,EAC1B,cAAc,GAAG,UAAU,GAAG,SAAS,CACvC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AASD,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoC7D,CAAC"}
+{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,MAAM,WAAW,iBAChB,SAAQ,IAAI,CAAC,WAAW,EAAE,iBAAiB,GAAG,kBAAkB,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;CACjC;AASD,eAAO,MAAM,YAAY,GAAI,kFAO1B,iBAAiB,sBAgCnB,CAAC"}

package/dist/components/NumberBubble/NumberBubble.js

@@ -1,28 +1,27 @@
 "use strict";
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["value", "textColour", "rawNumbers"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import * as React from 'react';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { textStyles } from "../../styles/typography.js";
 import { toPrettyBigNumber } from "../../utils/number.js";
 import { useBox } from "../Box/useBox/useBox.js";
+import * as styles from "./NumberBubble.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const sizeMap = {
   SMALL: '4',
   MEDIUM: '6',
   LARGE: '7'
 };
-export const NumberBubble = _ref => {
-  let {
-      value,
-      textColour = 'white',
-      rawNumbers = false
-    } = _ref,
-    boxProps = _objectWithoutProperties(_ref, _excluded);
+export const NumberBubble = ({
+  backgroundColor,
+  backgroundColour = backgroundColor ? undefined : 'gray900',
+  rawNumbers = false,
+  textColor,
+  textColour = textColor ? undefined : 'white',
+  value
+}) => {
   const size = useMemo(() => {
     if (value < 10) return 'SMALL';
     if (value >= 10 && value < 100) return 'MEDIUM';
@@ -31,19 +30,22 @@ export const NumberBubble = _ref => {
   const {
     Component,
     componentProps
-  } = useBox(_objectSpread({
+  } = useBox({
     odComponent: 'number-bubble',
     alignItems: 'center',
-    backgroundColour: 'gray900',
+    backgroundColor,
+    backgroundColour,
     borderRadius: 'full',
     display: 'inline-flex',
     justifyContent: 'center',
     size: sizeMap[size]
-  }, boxProps));
+  });
   return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
     children: /*#__PURE__*/_jsx("span", {
       className: textStyles({
         size: '2',
+        className: styles.numberStyle,
+        color: textColor,
         colour: textColour,
         strong: true
       }),

package/package.json

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