@autoguru/overdrive 4.43.9-next.0 → 4.43.10-next.0

package/dist/hooks/useTooltip/useTooltip.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { EAlignment } from '../../components/Positioner/alignment';
+export type ToolTipSize = 'medium' | 'large';
+export interface UseTooltipProps {
+    /**
+     * Whether the tooltip should be controlled externally
+     */
+    isOpen?: boolean;
+    /**
+     * Auto-close the tooltip after this many milliseconds
+     */
+    closeAfter?: number | null;
+    /**
+     * Called when the tooltip open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * Hook for managing tooltip state and interactions
+ */
+export declare const useTooltip: ({ isOpen: controlledIsOpen, closeAfter, onOpenChange, }: UseTooltipProps) => {
+    isOpen: boolean;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    triggerProps: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+        'aria-describedby': string | undefined;
+    };
+    PositionedTooltip: ({ alignment, className, label, size, }: {
+        alignment?: EAlignment;
+        className?: string;
+        label: string;
+        size?: ToolTipSize;
+    }) => React.JSX.Element;
+};
+//# sourceMappingURL=useTooltip.d.ts.map

package/dist/hooks/useTooltip/useTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useTooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAI/E,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAGnE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,WAAW,eAAe;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC;AAOD;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,yDAIxB,eAAe;;;;;;;;;;gEAmFb;QACF,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,WAAW,CAAC;KACnB;CAwCF,CAAC"}

package/dist/hooks/useTooltip/useTooltip.js

@@ -0,0 +1,125 @@
+"use strict";
+
+import React, { useCallback, useEffect, useRef, useState, useId } from 'react';
+import { Box } from "../../components/Box/Box.js";
+import { Positioner } from "../../components/Positioner/Positioner.js";
+import { EAlignment } from "../../components/Positioner/alignment.js";
+import { Text } from "../../components/Text/Text.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const sizeMap = {
+  medium: '2',
+  large: '3'
+};
+
+/**
+ * Hook for managing tooltip state and interactions
+ */
+export const useTooltip = _ref => {
+  let {
+    isOpen: controlledIsOpen,
+    closeAfter = null,
+    onOpenChange
+  } = _ref;
+  const tooltipId = useId();
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const leaveTimer = useRef(null);
+
+  // Use controlled state if provided, otherwise use internal state
+  const isOpen = typeof controlledIsOpen === 'boolean' ? controlledIsOpen : internalIsOpen;
+  const setIsOpen = useCallback(newIsOpen => {
+    if (typeof controlledIsOpen !== 'boolean') {
+      setInternalIsOpen(newIsOpen);
+    }
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(newIsOpen);
+  }, [controlledIsOpen, onOpenChange]);
+  const enterHandler = useCallback(() => {
+    if (leaveTimer.current) {
+      clearTimeout(leaveTimer.current);
+      leaveTimer.current = null;
+    }
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const leaveHandler = useCallback(() => {
+    if (leaveTimer.current) {
+      clearTimeout(leaveTimer.current);
+    }
+    leaveTimer.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 500); // 500ms delay
+  }, [setIsOpen]);
+  const focusHandler = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const blurHandler = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
+
+  // Handle the closeAfter prop
+  useEffect(() => {
+    let timeout;
+    if (isOpen && typeof closeAfter === 'number') {
+      timeout = setTimeout(() => setIsOpen(false), closeAfter);
+    }
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [closeAfter, isOpen, setIsOpen]);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (leaveTimer.current) {
+        clearTimeout(leaveTimer.current);
+      }
+    };
+  }, []);
+  const triggerProps = {
+    onMouseEnter: enterHandler,
+    onMouseLeave: leaveHandler,
+    onFocus: focusHandler,
+    onBlur: blurHandler,
+    'aria-describedby': isOpen ? tooltipId : undefined
+  };
+  const PositionedTooltip = useCallback(_ref2 => {
+    let {
+      alignment = EAlignment.RIGHT,
+      className,
+      label,
+      size = 'medium'
+    } = _ref2;
+    const textSize = sizeMap[size];
+    return /*#__PURE__*/_jsx(Positioner, {
+      triggerRef: triggerRef,
+      alignment: alignment,
+      isOpen: isOpen,
+      children: /*#__PURE__*/_jsx(Box, {
+        className: className,
+        id: tooltipId,
+        ref: tooltipRef,
+        width: "full",
+        pointerEvents: "none",
+        userSelect: "none",
+        overflow: "hidden",
+        borderRadius: "1",
+        boxShadow: "4",
+        backgroundColour: "gray900",
+        paddingY: "2",
+        paddingX: "3",
+        role: "tooltip",
+        children: /*#__PURE__*/_jsx(Text, {
+          size: textSize,
+          colour: "white",
+          children: label
+        })
+      })
+    });
+  }, [isOpen, tooltipId]);
+  return {
+    isOpen,
+    triggerRef,
+    triggerProps,
+    PositionedTooltip
+  };
+};

package/dist/hooks/useWindowHeightFill/useWindowHeightFill.js

@@ -14,6 +14,7 @@ export const useWindowHeightFill = _ref => {
     observedElementRef,
     maxHeight
   } = _ref;
+  // Create an observer instance linked to the callback function
   const cappedHeight = useResponsiveValue([includeMobile,, true]);
   const {
     themeClass

package/dist/hooks/useWindowScrollLock/index.js

@@ -1,6 +1,8 @@
 "use strict";
 
 import { useEffect } from 'react';
+
+//Block window scrolling till unmounted
 export const useWindowScrollLock = () => useEffect(() => {
   const scrollPos = window.scrollY;
   document.documentElement.style.position = 'fixed';

package/dist/styles/componentStyles.d.ts

@@ -3,11 +3,24 @@ 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;
+/**
+ * Returns the reset styles based on the `as` prop tag name passed in.
+ * A wrapper around `resetVariants` recipe to allow any string to be passed in
+ */
+export declare const resetStyles: (element: unknown, options?: ResetPropsWithoutAs) => string;
 export interface ComponentStylesProps extends Sprinkles {
     as?: string | ElementType | ReactElement;
     className?: ClassName;
 }
+/**
+ * Convenience function that combines element reset styles via `as` props and sprinkles utility styles.
+ * Allows `as` prop that is JSX or other React element to safely be passed in so it does not have to be filtered out.
+ * Includes logic for adding border reset styles when any border props are used.
+ *
+ * @example <svg className={componentStyles({ as: 'svg', padding: '1', size: '4' })} ... />
+ * @example <div className={componentStyles({ borderTopWidth: '1', borderTopColor: 'soft' })}
+ * // ^ this will trigger the border reset ^
+ */
 export declare const componentStyles: ({ as, className, ...styleProps }: ComponentStylesProps) => string;
 export {};
 //# sourceMappingURL=componentStyles.d.ts.map

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;AAmCzD;;;GAGG;AACH,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;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,GAAI,kCAI7B,oBAAoB,WAKrB,CAAC"}

package/dist/styles/componentStyles.js

@@ -5,23 +5,37 @@ const _excluded = ["as", "className"];
 import clsx from 'clsx';
 import { elementReset, resetVariants } from "./elementReset.css.js";
 import { sprinkles } from "./sprinkles.css.js";
+/** Will check for any border-related prop out of any style props */
 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);
+
+/**
+ * Returns the reset styles based on the `as` prop tag name passed in.
+ * A wrapper around `resetVariants` recipe to allow any string to be passed in
+ */
 export const resetStyles = (element, options) => {
+  if (typeof element !== 'string') return '';
   const as = element in elementReset ? element : undefined;
   return resetVariants({
     as,
     hasBorder: options === null || options === void 0 ? void 0 : options.hasBorder
   });
 };
+/**
+ * Convenience function that combines element reset styles via `as` props and sprinkles utility styles.
+ * Allows `as` prop that is JSX or other React element to safely be passed in so it does not have to be filtered out.
+ * Includes logic for adding border reset styles when any border props are used.
+ *
+ * @example <svg className={componentStyles({ as: 'svg', padding: '1', size: '4' })} ... />
+ * @example <div className={componentStyles({ borderTopWidth: '1', borderTopColor: 'soft' })}
+ * // ^ this will trigger the border reset ^
+ */
 export const componentStyles = _ref => {
   let {
       as,
       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,251 @@
+"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";
+// Test constants
+const MOCK_CLASS_NAME = 'custom-class';
+const MockComponent = () => null;
+
+// Type-safe mock sprinkles properties for testing
+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', () => {
+      // This test verifies that all props are optional by not causing TypeScript errors
+      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/dist/styles/elementReset.css.d.ts

@@ -5,6 +5,7 @@ export declare const trimmed: {
 };
 export declare const borderReset: string;
 export declare const container: string;
+/** controls the list html tag names to reset and maps them to the reset style */
 export declare const elementReset: {
     div: string;
     p: string;

package/dist/styles/elementReset.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elementReset.css.d.ts","sourceRoot":"","sources":["../../lib/styles/elementReset.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQlE,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAUF,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,SAAS,QASpB,CAAC;AAuHH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,YAAY,CAAC;AAEtD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcxB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAC1C,cAAc,CAAC,OAAO,aAAa,CAAC,CACpC,CAAC"}
+{"version":3,"file":"elementReset.css.d.ts","sourceRoot":"","sources":["../../lib/styles/elementReset.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAQlE,eAAO,MAAM,OAAO;;;CAGnB,CAAC;AAUF,eAAO,MAAM,WAAW,QAOtB,CAAC;AAEH,eAAO,MAAM,SAAS,QASpB,CAAC;AAsHH,iFAAiF;AACjF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCxB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,YAAY,CAAC;AAEtD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcxB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAC1C,cAAc,CAAC,OAAO,aAAa,CAAC,CACpC,CAAC"}

package/dist/styles/elementReset.css.js

@@ -129,6 +129,8 @@ const vAlignMiddle = [trimmedElement, style({
     }
   }
 }, "vAlignMiddle")];
+
+/** controls the list html tag names to reset and maps them to the reset style */
 export const elementReset = {
   div: block,
   p: trimmedElement,
@@ -172,6 +174,8 @@ export const resetVariants = recipe({
   base: {},
   variants: {
     as: elementReset,
+    // When any border color or width is specified, automatically set borderWidth to 'none'
+    // and borderStyle to 'solid'. This handles properties with old naming and css-aligned
     hasBorder: {
       true: borderReset
     }

package/dist/styles/global/reset.css.js

@@ -42,6 +42,8 @@ globalStyle('*, *::after, *::before', {
     }
   }
 });
+
+// inspired from https://fokus.dev/tools/uaplus/
 globalStyle(':where(button, input, select, textarea)', {
   '@layer': {
     [cssLayerReset]: {

package/dist/styles/layers.css.d.ts

@@ -1,7 +1,8 @@
 export declare const cssLayerReset: string;
 export declare const cssLayerTheme: string;
-export declare const cssLayerTypography: string;
-export declare const cssLayerUtil: string;
 export declare const cssColorSet: string;
+export declare const cssLayerTypography: string;
+export declare const cssLayerStyleprops: string;
 export declare const cssLayerComponent: string;
+export declare const cssLayerUtil: string;
 //# sourceMappingURL=layers.css.d.ts.map

package/dist/styles/layers.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layers.css.d.ts","sourceRoot":"","sources":["../../lib/styles/layers.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,QAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,QAAuB,CAAC;AAClD,eAAO,MAAM,kBAAkB,QAG9B,CAAC;AACF,eAAO,MAAM,YAAY,QAAsB,CAAC;AAChD,eAAO,MAAM,WAAW,QAA0B,CAAC;AACnD,eAAO,MAAM,iBAAiB,QAA2B,CAAC"}
+{"version":3,"file":"layers.css.d.ts","sourceRoot":"","sources":["../../lib/styles/layers.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAAuB,CAAC;AAClD,eAAO,MAAM,aAAa,QAAuB,CAAC;AAClD,eAAO,MAAM,WAAW,QAAqD,CAAC;AAC9E,eAAO,MAAM,kBAAkB,QAG9B,CAAC;AACF,eAAO,MAAM,kBAAkB,QAA4B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,QAA2B,CAAC;AAC1D,eAAO,MAAM,YAAY,QAAsB,CAAC"}

package/dist/styles/layers.css.js

@@ -3,12 +3,16 @@
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/styles/layers.css.ts", "@autoguru/overdrive");
 import { globalLayer } from '@vanilla-extract/css';
+globalLayer('ag, reset, theme, styleprops, component, util');
 export const cssLayerReset = globalLayer('reset');
 export const cssLayerTheme = globalLayer('theme');
+export const cssColorSet = globalLayer({
+  parent: cssLayerTheme
+}, 'colorset');
 export const cssLayerTypography = globalLayer({
   parent: cssLayerTheme
 }, 'typography');
-export const cssLayerUtil = globalLayer('util');
-export const cssColorSet = globalLayer('colorset');
+export const cssLayerStyleprops = globalLayer('styleprops');
 export const cssLayerComponent = globalLayer('component');
+export const cssLayerUtil = globalLayer('util');
 __vanilla_filescope__.endFileScope();

package/dist/styles/sprinkles.css.d.ts

@@ -1,3 +1,10 @@
+export declare const valueArrays: {
+    borderColors: ("page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled")[];
+    gapSizesWithVar: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none")[];
+    intentBackgroundColoursStandard: ("success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information")[];
+    intentBorderColours: ("success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information")[];
+    intentForegroundColours: ("success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information")[];
+};
 export declare const responsiveConditions: {
     mobile: {};
     tablet: {
@@ -465,16 +472,9 @@ export declare const sprinkles: ((props: {
     properties: Set<"colour" | "backgroundColour" | "color" | "width" | "size" | "fontSize" | "lineHeight" | "fontWeight" | "opacity" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "columnGap" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "height" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "wordBreak" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "gap" | "margin" | "overflow" | "padding" | "placeItems" | "text" | "borderBottomColour" | "borderLeftColour" | "borderRightColour" | "borderTopColour" | "useVar" | "bg" | "fg" | "borderColorX" | "borderColorY" | "borderColour" | "borderColourX" | "borderColourY" | "borderStyleBottom" | "borderStyleLeft" | "borderStyleRight" | "borderStyleTop" | "gridColumns" | "borderWidthX" | "borderWidthY" | "borderWidthBottom" | "borderWidthLeft" | "borderWidthRight" | "borderWidthTop" | "p" | "paddingX" | "px" | "paddingY" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "marginX" | "mx" | "marginY" | "my" | "mt" | "mr" | "mb" | "ml">;
 };
 export type Sprinkles = Parameters<typeof sprinkles>[0];
+/**
+ * Legacy colours are not a discreet combination of all colours as many typeography colour
+ * tokens are overwritten by the intentional colour sets
+ */
 export type SprinklesLegacyColours = Pick<Sprinkles, 'backgroundColour' | 'borderColour' | 'borderBottomColour' | 'borderLeftColour' | 'borderRightColour' | 'borderTopColour' | 'colour'>;
-export declare const valueArrays: {
-    alignItems: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart")[];
-    borderColors: ("page" | "hard" | "soft" | "accent" | "success" | "info" | "danger" | "warning" | "muted" | "default" | "disabled")[];
-    gapSizesWithVar: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none")[];
-    intentBackgroundColoursStandard: ("success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information")[];
-    intentBorderColours: ("success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information")[];
-    intentForegroundColours: ("success" | "danger" | "warning" | "neutral" | "primary" | "brand" | "secondary" | "shine" | "information")[];
-    justifyContent: ("space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart")[];
-    spaceWithNone: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none")[];
-    width: ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content")[];
-};
 //# sourceMappingURL=sprinkles.css.d.ts.map

package/dist/styles/sprinkles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AA2LA,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AAoIF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAMxD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC;AAIF,eAAO,MAAM,WAAW;;;;;;;;;;CAcvB,CAAC"}
+{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AA4GA,eAAO,MAAM,WAAW;;;;;;CAQvB,CAAC;AAmFF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AAoIF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC"}