@autoguru/overdrive 4.43.8 → 4.43.9

package/dist/styles/componentStyles.d.ts

@@ -3,7 +3,7 @@ import type { ElementType, ReactElement } from 'react';
 import { type ResetVariantProps } from './elementReset.css';
 import { type Sprinkles } from './sprinkles.css';
 type ResetPropsWithoutAs = Omit<ResetVariantProps, 'as'>;
-export declare const resetStyles: (element: string, options?: ResetPropsWithoutAs) => string;
+export declare const resetStyles: (element: unknown, options?: ResetPropsWithoutAs) => string;
 export interface ComponentStylesProps extends Sprinkles {
     as?: string | ElementType | ReactElement;
     className?: ClassName;

package/dist/styles/componentStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"componentStyles.d.ts","sourceRoot":"","sources":["../../lib/styles/componentStyles.ts"],"names":[],"mappings":"AAAA,OAAa,EAAE,KAAK,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAGN,KAAK,iBAAiB,EACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5D,KAAK,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAuCzD,eAAO,MAAM,WAAW,GAAI,SAAS,MAAM,EAAE,UAAU,mBAAmB,WAQzE,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACtD,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,CAAC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,eAAO,MAAM,eAAe,GAAI,kCAI7B,oBAAoB,WAStB,CAAC"}
+{"version":3,"file":"componentStyles.d.ts","sourceRoot":"","sources":["../../lib/styles/componentStyles.ts"],"names":[],"mappings":"AAAA,OAAa,EAAE,KAAK,UAAU,IAAI,SAAS,EAAE,MAAM,MAAM,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAGN,KAAK,iBAAiB,EACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5D,KAAK,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;AAuCzD,eAAO,MAAM,WAAW,GACvB,SAAS,OAAO,EAChB,UAAU,mBAAmB,WAW7B,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACtD,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,CAAC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,eAAO,MAAM,eAAe,GAAI,kCAI7B,oBAAoB,WAKrB,CAAC"}

package/dist/styles/componentStyles.js

@@ -7,6 +7,7 @@ import { elementReset, resetVariants } from "./elementReset.css.js";
 import { sprinkles } from "./sprinkles.css.js";
 const hasBorderRelatedProp = props => Boolean(props.borderColor || props.borderStyle || props.borderWidth || props.borderWidthX || props.borderWidthY || props.borderBottomColor || props.borderBottomStyle || props.borderBottomWidth || props.borderLeftColor || props.borderLeftStyle || props.borderLeftWidth || props.borderRightColor || props.borderRightStyle || props.borderRightWidth || props.borderTopColor || props.borderTopStyle || props.borderTopWidth || props.borderWidthTop || props.borderWidthRight || props.borderWidthBottom || props.borderWidthLeft || props.borderColour || props.borderColourX || props.borderColourY || props.borderBottomColour || props.borderLeftColour || props.borderRightColour || props.borderTopColour);
 export const resetStyles = (element, options) => {
+  if (typeof element !== 'string') return '';
   const as = element in elementReset ? element : undefined;
   return resetVariants({
     as,
@@ -19,9 +20,7 @@ export const componentStyles = _ref => {
       className
     } = _ref,
     styleProps = _objectWithoutProperties(_ref, _excluded);
-  if (typeof as !== 'string') return clsx(className);
-  const hasBorder = hasBorderRelatedProp(styleProps);
   return clsx(resetStyles(as, {
-    hasBorder
+    hasBorder: hasBorderRelatedProp(styleProps)
   }), sprinkles(styleProps), className);
 };

package/dist/styles/componentStyles.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=componentStyles.spec.d.ts.map

package/dist/styles/componentStyles.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentStyles.spec.d.ts","sourceRoot":"","sources":["../../lib/styles/componentStyles.spec.ts"],"names":[],"mappings":""}

package/dist/styles/componentStyles.spec.js

@@ -0,0 +1,247 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { describe, expect, it } from 'vitest';
+import { componentStyles } from "./componentStyles.js";
+const MOCK_CLASS_NAME = 'custom-class';
+const MockComponent = () => null;
+const createMockSprinklesProps = props => props;
+describe('componentStyles', () => {
+  describe('with no props', () => {
+    it('should return empty string when no props are provided', () => {
+      const result = componentStyles({});
+      expect(result).toBe('');
+    });
+    it('should return empty string when only non-string as prop is provided', () => {
+      const result = componentStyles({
+        as: MockComponent
+      });
+      expect(result).toBe('');
+    });
+  });
+  describe('with className only', () => {
+    it('should return the className when only className is provided', () => {
+      const result = componentStyles({
+        className: MOCK_CLASS_NAME
+      });
+      expect(result).toBe(MOCK_CLASS_NAME);
+    });
+    it('should return the className when className and non-string as prop are provided', () => {
+      const result = componentStyles({
+        className: MOCK_CLASS_NAME,
+        as: MockComponent
+      });
+      expect(result).toBe(MOCK_CLASS_NAME);
+    });
+  });
+  describe('with as prop', () => {
+    it('should return styles with length when as prop is a valid HTML element', () => {
+      const result = componentStyles({
+        as: 'div'
+      });
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when as prop is a known element with reset styles', () => {
+      const result = componentStyles({
+        as: 'button'
+      });
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when as prop is an unknown element', () => {
+      const result = componentStyles({
+        as: 'custom-element'
+      });
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return only className when as prop is not a string', () => {
+      const result = componentStyles({
+        as: MockComponent,
+        className: 'test-class'
+      });
+      expect(result).toBe('test-class');
+    });
+  });
+  describe('with style props', () => {
+    it('should return styles with length when padding prop is provided', () => {
+      const result = componentStyles(_objectSpread({}, createMockSprinklesProps({
+        padding: '4'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when margin prop is provided', () => {
+      const result = componentStyles(_objectSpread({}, createMockSprinklesProps({
+        margin: '2'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when multiple style props are provided', () => {
+      const result = componentStyles(_objectSpread({}, createMockSprinklesProps({
+        padding: '4',
+        margin: '2',
+        backgroundColor: 'transparent'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+  describe('with border props', () => {
+    it('should return styles with length when borderColor is provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div'
+      }, createMockSprinklesProps({
+        borderColor: 'default'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when borderWidth is provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div'
+      }, createMockSprinklesProps({
+        borderWidth: '1'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when borderStyle is provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div'
+      }, createMockSprinklesProps({
+        borderStyle: 'solid'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when specific border side props are provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div'
+      }, createMockSprinklesProps({
+        borderTopColor: 'default',
+        borderBottomWidth: '2'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when legacy border colour props are provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div'
+      }, createMockSprinklesProps({
+        borderColour: 'gray'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when borderColourX is provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div'
+      }, createMockSprinklesProps({
+        borderColourX: 'light'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when borderColourY is provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div'
+      }, createMockSprinklesProps({
+        borderColourY: 'dark'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when specific side borderColour props are provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div'
+      }, createMockSprinklesProps({
+        borderTopColour: 'primary',
+        borderLeftColour: 'secondary'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+  describe('with combined props', () => {
+    it('should return styles with length when as, className, and style props are provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'div',
+        className: MOCK_CLASS_NAME
+      }, createMockSprinklesProps({
+        padding: '4',
+        borderColor: 'default'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should return styles with length when complex combination of props is provided', () => {
+      const result = componentStyles(_objectSpread({
+        as: 'section',
+        className: 'complex-component'
+      }, createMockSprinklesProps({
+        padding: '8',
+        margin: '4',
+        backgroundColor: 'transparent',
+        borderTopWidth: '1',
+        borderTopColor: 'default',
+        borderBottomColour: 'primary'
+      })));
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+  describe('edge cases', () => {
+    it('should handle undefined className', () => {
+      const result = componentStyles({
+        as: 'span',
+        className: undefined
+      });
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should handle null className', () => {
+      const result = componentStyles({
+        as: 'section',
+        className: null
+      });
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    it('should handle array className', () => {
+      const result = componentStyles({
+        as: 'ul',
+        className: ['class1', 'class2']
+      });
+      expect(typeof result).toBe('string');
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+  describe('type safety', () => {
+    it('should accept all optional props', () => {
+      expect(() => {
+        componentStyles({});
+        componentStyles({
+          as: 'div'
+        });
+        componentStyles({
+          className: 'test'
+        });
+        componentStyles(createMockSprinklesProps({
+          padding: '4'
+        }));
+        componentStyles(_objectSpread({
+          as: 'div',
+          className: 'test'
+        }, createMockSprinklesProps({
+          padding: '4',
+          borderColor: 'default'
+        })));
+      }).not.toThrow();
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.43.8",
+	"version": "4.43.9",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -87,18 +87,18 @@
 		"@babel/preset-react": "7.27.1",
 		"@babel/preset-typescript": "7.27.1",
 		"@babel/runtime-corejs3": "7.27.6",
-		"@changesets/cli": "2.29.4",
-		"@chromatic-com/storybook": "4.0.0",
+		"@changesets/cli": "2.29.5",
+		"@chromatic-com/storybook": "4.0.1",
 		"@internationalized/date": "^3.8.2",
 		"@octokit/rest": "^22.0.0",
 		"@popperjs/core": "^2.11.8",
 		"@react-stately/toggle": "^3.8.5",
-		"@storybook/addon-a11y": "9.0.10",
-		"@storybook/addon-docs": "9.0.10",
-		"@storybook/addon-links": "9.0.10",
-		"@storybook/addon-onboarding": "9.0.10",
-		"@storybook/addon-vitest": "9.0.10",
-		"@storybook/react-vite": "9.0.10",
+		"@storybook/addon-a11y": "9.0.12",
+		"@storybook/addon-docs": "9.0.12",
+		"@storybook/addon-links": "9.0.12",
+		"@storybook/addon-onboarding": "9.0.12",
+		"@storybook/addon-vitest": "9.0.12",
+		"@storybook/react-vite": "9.0.12",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.3.0",
@@ -116,23 +116,23 @@
 		"@vanilla-extract/sprinkles": "^1.6.5",
 		"@vanilla-extract/vite-plugin": "^5.0.6",
 		"@vanilla-extract/webpack-plugin": "^2.3.22",
-		"@vitest/browser": "3.2.3",
-		"@vitest/coverage-v8": "3.2.3",
+		"@vitest/browser": "3.2.4",
+		"@vitest/coverage-v8": "3.2.4",
 		"@vitest/eslint-plugin": "1.2.7",
 		"babel-plugin-add-import-extension": "^1.6.0",
 		"babel-plugin-dev-expression": "^0.2.3",
 		"babel-plugin-macros": "^3.1.0",
 		"browserslist-config-autoguru": "^2.4.4",
-		"chromatic": "13.0.0",
+		"chromatic": "13.0.1",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
 		"concurrently": "^9.1.2",
 		"core-js": "^3.43.0",
 		"csstype": "^3.1.3",
 		"deepmerge": "^4.3.1",
-		"es-toolkit": "1.39.3",
+		"es-toolkit": "1.39.4",
 		"eslint": "9.29.0",
-		"eslint-plugin-storybook": "9.0.10",
+		"eslint-plugin-storybook": "9.0.12",
 		"husky": "^9.1.7",
 		"intersection-observer": "^0.12.2",
 		"jsdom": "26.1.0",
@@ -140,7 +140,7 @@
 		"magic-string": "^0.30.17",
 		"mini-css-extract-plugin": "^2.9.2",
 		"mockdate": "^3.0.5",
-		"playwright": "^1.53.0",
+		"playwright": "1.53.1",
 		"plop": "^4.0.1",
 		"postcss": "^8.5.6",
 		"prettier": "^3.5.3",
@@ -156,7 +156,7 @@
 		"react-stately": "^3.39.0",
 		"react-swipeable": "^7.0.2",
 		"rollup-plugin-visualizer": "^6.0.3",
-		"storybook": "9.0.10",
+		"storybook": "9.0.12",
 		"storybook-addon-tag-badges": "^2.0.1",
 		"typescript": "5.8.3",
 		"url-loader": "^4.1.1",