@autoguru/overdrive 4.44.3 → 4.44.4-next.1

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

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

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

@@ -3,9 +3,12 @@
 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 bubbleText = style({
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)'
+  '@layer': {
+    [cssLayerComponent]: {
+      transform: 'translateY(-0.525px)'
+    }
+  }
 }, "bubbleText");
 __vanilla_filescope__.endFileScope();

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":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,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;AAaD,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAqC7D,CAAC"}
+{"version":3,"file":"NumberBubble.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberBubble/NumberBubble.tsx"],"names":[],"mappings":"AAEA,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;AAIpC,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,CAmC7D,CAAC"}

package/dist/components/NumberBubble/NumberBubble.js

@@ -8,17 +8,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import clsx from 'clsx';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { sprinkles } from "../../styles/index.js";
+import { textStyles } from "../../styles/typography.js";
 import { toPrettyBigNumber } from "../../utils/number.js";
-import { Box } from "../Box/Box.js";
-import { Text } from "../Text/Text.js";
+import { useBox } from "../Box/useBox/useBox.js";
 import * as styles from "./NumberBubble.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const valuePaddingMap = {
-  SMALL: '2',
-  MEDIUM: '3',
-  LARGE: '4',
-  X_LARGE: '5'
+const sizeMap = {
+  SMALL: '4',
+  MEDIUM: '6',
+  LARGE: '7'
 };
 export const NumberBubble = _ref => {
   let {
@@ -28,26 +26,29 @@ export const NumberBubble = _ref => {
     } = _ref,
     boxProps = _objectWithoutProperties(_ref, _excluded);
   const size = useMemo(() => {
-    if (value > 9 && value < 100) return 'MEDIUM';
-    if (value > 99 && value < 9999) return 'LARGE';
-    if (value >= 9999) return 'LARGE';
-    return 'SMALL';
+    if (value < 10) return 'SMALL';
+    if (value >= 10 && value < 100) return 'MEDIUM';
+    return 'LARGE';
   }, [value]);
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
-    borderRadius: "full",
-    backgroundColour: "gray900",
-    display: "inline-block",
-    position: "relative",
-    padding: valuePaddingMap[size],
-    odComponent: "number-bubble"
-  }, boxProps), {}, {
-    children: /*#__PURE__*/_jsx(Text, {
-      size: "2",
-      strong: true,
-      className: clsx(styles.bubbleText, sprinkles({
-        position: 'absolute'
+  const {
+    Component,
+    componentProps
+  } = useBox(_objectSpread({
+    odComponent: 'number-bubble',
+    alignItems: 'center',
+    backgroundColour: 'gray900',
+    borderRadius: 'full',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    size: sizeMap[size]
+  }, boxProps));
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({}, componentProps), {}, {
+    children: /*#__PURE__*/_jsx("span", {
+      className: clsx(styles.bubbleText, textStyles({
+        size: '2',
+        colour: textColour,
+        strong: true
       })),
-      colour: textColour,
       children: rawNumbers ? value : toPrettyBigNumber(value)
     })
   }));

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

@@ -1,3 +1,2 @@
 export { Text } from './Text';
-export { textStyles as useTextStyles } from '../../styles/typography';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/Text/index.js

@@ -1,4 +1,3 @@
 "use strict";
 
-export { Text } from "./Text.js";
-export { textStyles as useTextStyles } from "../../styles/typography.js";
+export { Text } from "./Text.js";

package/dist/index.d.ts

@@ -3,5 +3,6 @@ export * from './hooks';
 export * from './styles';
 export { overdriveTokens as tokens } from './themes/theme.css';
 export { sprinkles as css } from './styles/sprinkles.css';
+export { elementStyles as useBoxStyles, textStyles as useTextStyles, type ElementStylesProps as BoxStyleProps, } from './styles';
 export { useId, arrayRingLookup } from './utils/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,IAAI,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,eAAe,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,SAAS,IAAI,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EACN,aAAa,IAAI,YAAY,EAC7B,UAAU,IAAI,aAAa,EAC3B,KAAK,kBAAkB,IAAI,aAAa,GACxC,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -5,4 +5,5 @@ export * from "./hooks/index.js";
 export * from "./styles/index.js";
 export { overdriveTokens as tokens } from "./themes/theme.css.js";
 export { sprinkles as css } from "./styles/sprinkles.css.js";
+export { elementStyles as useBoxStyles, textStyles as useTextStyles } from "./styles/index.js";
 export { useId, arrayRingLookup } from "./utils/index.js";

package/package.json

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