@autoguru/overdrive 4.43.6-next.9 → 4.43.7-next.0

package/dist/components/Text/textStyles.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import clsx from 'clsx';
-import { resetStyles } from "../../styles/resetStyles.js";
+import { resetStyles } from "../../styles/elementStyles.js";
 import { sprinkles, sprinklesLegacyText } from "../../styles/sprinkles.css.js";
 import { typographyStyles } from "../../styles/typography.css.js";
 import { onlyString } from "../../utils/propGuards.js";

package/dist/components/TextBubble/TextBubble.js

@@ -50,7 +50,7 @@ export const TextBubble = _ref => {
   return _jsx(Box, _objectSpread(_objectSpread({
     borderRadius: "full",
     backgroundColour: "gray900",
-    display: "inlineBlock",
+    display: "inline-block",
     position: "relative",
     padding: valuePaddingMap[size]
   }, boxProps), {}, {

package/dist/components/TextLink/TextLink.js

@@ -46,7 +46,7 @@ export const TextLink = forwardRef((_ref, ref) => {
     children: [children, icon ? _jsx(Icon, {
       icon: icon,
       size: "small",
-      display: "inlineBlock",
+      display: "inline-block",
       className: clsx(styles.icon)
     }) : null]
   });

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,12 +1,13 @@
-import { FunctionComponent, ReactElement } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
+import type { TestId } from '../../types';
 import { EAlignment } from '../Positioner/alignment';
 type ToolTipSize = 'medium' | 'large';
-export interface TooltipProps {
+export interface TooltipProps extends TestId {
     size?: ToolTipSize;
     isOpen?: boolean;
     label: string;
     alignment?: EAlignment;
-    children: ReactElement;
+    children: ReactNode;
     closeAfter?: number;
 }
 export declare const Tooltip: FunctionComponent<TooltipProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAIN,iBAAiB,EACjB,YAAY,EAKZ,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKrD,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtC,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CA2EnD,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../lib/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAc,EAEb,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAMd,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAI1C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAKrD,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtC,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAkGnD,CAAC"}

package/dist/components/Tooltip/Tooltip.js

@@ -1,13 +1,17 @@
 "use strict";
 
-import * as React from 'react';
-import { Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+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 React, { useCallback, useEffect, useRef, useState, useId } from 'react';
+import { sprinkles } from "../../styles/sprinkles.css.js";
+import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Box } from "../Box/Box.js";
 import { Positioner } from "../Positioner/Positioner.js";
 import { EAlignment } from "../Positioner/alignment.js";
 import { Text } from "../Text/Text.js";
 import * as styles from "./Tooltip.css.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   medium: '2',
   large: '3'
@@ -19,11 +23,13 @@ export const Tooltip = _ref => {
     label,
     children,
     size = 'medium',
-    closeAfter = null
+    closeAfter = null,
+    testId
   } = _ref;
+  const tooltipId = useId();
   const [isOpen, setIsOpen] = useState(incomingIsOpen);
-  const childRef = useRef(null);
   const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
   const leaveTimer = useRef(null);
   const enterHandler = useCallback(() => {
     if (leaveTimer.current) {
@@ -36,22 +42,47 @@ export const Tooltip = _ref => {
       setIsOpen(false);
     }, 1e3 / 2);
   }, [setIsOpen]);
+  const focusHandler = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const blurHandler = useCallback(() => {
+    setIsOpen(false);
+  }, [setIsOpen]);
   useEffect(() => {
     let timeout;
-    if (isOpen && typeof closeAfter === 'number') timeout = setTimeout(() => setIsOpen(false), closeAfter);
-    return () => timeout ? clearTimeout(timeout) : void 0;
-  }, [closeAfter, isOpen, label]);
-  return (label === null || label === void 0 ? void 0 : label.length) > 0 ? _jsxs(_Fragment, {
-    children: [cloneElement(Children.only(children), {
+    if (isOpen && typeof closeAfter === 'number') {
+      timeout = setTimeout(() => setIsOpen(false), closeAfter);
+    }
+    return () => {
+      if (timeout) clearTimeout(timeout);
+    };
+  }, [closeAfter, isOpen]);
+  if (!label) return _jsx(_Fragment, {
+    children: children
+  });
+  return _jsxs(_Fragment, {
+    children: [_jsx("span", _objectSpread(_objectSpread({
       ref: triggerRef,
       onMouseEnter: enterHandler,
-      onMouseLeave: leaveHandler
-    }), _jsx(Positioner, {
+      onMouseLeave: leaveHandler,
+      onFocus: focusHandler,
+      onBlur: blurHandler,
+      tabIndex: 0,
+      className: sprinkles({
+        display: 'inline-block'
+      }),
+      "aria-describedby": isOpen ? tooltipId : undefined
+    }, dataAttrs({
+      testid: testId
+    })), {}, {
+      children: children
+    })), _jsx(Positioner, {
       triggerRef: triggerRef,
       alignment: alignment,
       isOpen: typeof incomingIsOpen === 'boolean' ? incomingIsOpen : isOpen,
       children: _jsx(Box, {
-        ref: childRef,
+        id: tooltipId,
+        ref: tooltipRef,
         className: styles.root,
         width: "full",
         pointerEvents: "none",
@@ -62,6 +93,7 @@ export const Tooltip = _ref => {
         backgroundColour: "gray900",
         paddingY: "2",
         paddingX: "3",
+        role: "tooltip",
         children: _jsx(Text, {
           size: sizeMap[size],
           colour: "white",
@@ -69,7 +101,6 @@ export const Tooltip = _ref => {
         })
       })
     })]
-  }) : _jsx(_Fragment, {
-    children: children
   });
-};
+};
+Tooltip.displayName = 'Tooltip';

package/dist/components/private/CheckableBase/CheckableBase.js

@@ -31,7 +31,7 @@ export const CheckableBase = forwardRef((_ref, ref) => {
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    justifyContent: "flex-start",
+    justifyContent: "start",
     paddingY: "3",
     paddingRight: label ? '3' : 'none',
     paddingLeft: "none",

package/dist/styles/{reset.css.d.ts → element.css.d.ts}

@@ -87,4 +87,4 @@ export declare const resetVariants: import("@vanilla-extract/recipes").RuntimeFn
     };
 }>;
 export type ResetVariantProps = NonNullable<RecipeVariants<typeof resetVariants>>;
-//# sourceMappingURL=reset.css.d.ts.map
+//# sourceMappingURL=element.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.css.d.ts","sourceRoot":"","sources":["../../lib/styles/element.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,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,OAAO,CAAC;AAEjD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQxB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAC1C,cAAc,CAAC,OAAO,aAAa,CAAC,CACpC,CAAC"}

package/dist/styles/{reset.css.js → element.css.js}

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-__vanilla_filescope__.setFileScope("lib/styles/reset.css.ts", "@autoguru/overdrive");
+__vanilla_filescope__.setFileScope("lib/styles/element.css.ts", "@autoguru/overdrive");
 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 { style } from '@vanilla-extract/css';

package/dist/styles/{resetStyles.d.ts → elementStyles.d.ts}

@@ -7,4 +7,4 @@ export declare const elementResetStyles: (tag: unknown) => string;
 export declare const componentStyles: ({ as, ...styleProps }: {
     as?: string | ElementType | ReactElement;
 } & Sprinkles) => string;
-//# sourceMappingURL=resetStyles.d.ts.map
+//# sourceMappingURL=elementStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"elementStyles.d.ts","sourceRoot":"","sources":["../../lib/styles/elementStyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5D,eAAO,MAAM,WAAW,GAAI,aAAa;IAAE,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,WAKlE,CAAC;AAOF,eAAO,MAAM,kBAAkB,GAAI,KAAK,OAAO,WAG9C,CAAC;AAOF,eAAO,MAAM,eAAe,GAAI,uBAG7B;IAAE,EAAE,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,YAAY,CAAA;CAAE,GAAG,SAAS,WACP,CAAC"}

package/dist/styles/{resetStyles.js → elementStyles.js}

@@ -3,7 +3,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["as"];
 import clsx from 'clsx';
-import { element, resetVariants } from "./reset.css.js";
+import { element, resetVariants } from "./element.css.js";
 import { sprinkles } from "./sprinkles.css.js";
 export const resetStyles = _ref => {
   let {

package/dist/styles/index.d.ts

@@ -1,5 +1,5 @@
 export { cssLayerComponent, cssLayerTheme } from './layers.css';
-export { resetVariants, type ResetVariantProps } from './reset.css';
-export { componentStyles, elementResetStyles, resetStyles, } from './resetStyles';
+export { resetVariants, type ResetVariantProps } from './element.css';
+export { componentStyles, elementResetStyles, resetStyles, } from './elementStyles';
 export { sprinkles, type Sprinkles, type SprinklesLegacyColours, } from './sprinkles.css';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EACN,eAAe,EACf,kBAAkB,EAClB,WAAW,GACX,MAAM,eAAe,CAAC;AACvB,OAAO,EACN,SAAS,EACT,KAAK,SAAS,EACd,KAAK,sBAAsB,GAC3B,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EACN,eAAe,EACf,kBAAkB,EAClB,WAAW,GACX,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACN,SAAS,EACT,KAAK,SAAS,EACd,KAAK,sBAAsB,GAC3B,MAAM,iBAAiB,CAAC"}

package/dist/styles/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
 export { cssLayerComponent, cssLayerTheme } from "./layers.css.js";
-export { resetVariants } from "./reset.css.js";
-export { componentStyles, elementResetStyles, resetStyles } from "./resetStyles.js";
+export { resetVariants } from "./element.css.js";
+export { componentStyles, elementResetStyles, resetStyles } from "./elementStyles.js";
 export { sprinkles } from "./sprinkles.css.js";

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

@@ -175,36 +175,30 @@ export declare const sprinkles: ((props: {
         desktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
         largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | undefined;
     } | undefined);
-    alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
-        largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | "baseline" | "centre" | "flexEnd" | "flexStart" | null>;
-    justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | {
-        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
-        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
-        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
-        largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | null>;
-    alignContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | {
-        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
-        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
-        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
-        largeDesktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "spaceAround" | "spaceBetween" | "spaceEvenely" | "space-evenely" | "flexEnd" | "flexStart" | null>;
-    alignSelf?: ("stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-        largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | null>;
-    justifySelf?: ("center" | "flex-end" | "flex-start" | {
-        mobile?: "center" | "flex-end" | "flex-start" | undefined;
-        tablet?: "center" | "flex-end" | "flex-start" | undefined;
-        desktop?: "center" | "flex-end" | "flex-start" | undefined;
-        largeDesktop?: "center" | "flex-end" | "flex-start" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "center" | "flex-end" | "flex-start" | null>;
+    alignContent?: ("space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | {
+        mobile?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | null>;
+    alignItems?: ("stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | {
+        mobile?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "baseline" | "centre" | "flexEnd" | "flexStart" | null>;
+    alignSelf?: ("stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | {
+        mobile?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | null>;
+    justifyContent?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | null> | ("space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | {
+        mobile?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | "centre" | "spaceAround" | "spaceBetween" | "flexEnd" | "flexStart" | undefined;
+    } | undefined);
     flexDirection?: ("column" | "column-reverse" | "row" | "row-reverse" | {
         mobile?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
         tablet?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
@@ -349,12 +343,12 @@ export declare const sprinkles: ((props: {
         desktop?: "1" | "2" | "3" | "none" | undefined;
         largeDesktop?: "1" | "2" | "3" | "none" | undefined;
     } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "none" | null>;
-    placeItems?: ("stretch" | "center" | "flex-end" | "flex-start" | "centre" | "flexEnd" | "flexStart" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "flexEnd" | "flexStart" | undefined;
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "flexEnd" | "flexStart" | undefined;
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "flexEnd" | "flexStart" | undefined;
-        largeDesktop?: "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "flexEnd" | "flexStart" | undefined;
-    } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "flex-end" | "flex-start" | "centre" | "flexEnd" | "flexStart" | null>;
+    placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | null> | ("stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | {
+        mobile?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        tablet?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        desktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+        largeDesktop?: "stretch" | "center" | "end" | "start" | "centre" | "flexEnd" | "flexStart" | undefined;
+    } | undefined);
     size?: import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | null> | ("1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | {
         mobile?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
         tablet?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "full" | "auto" | "fit-content" | "max-content" | "min-content" | undefined;
@@ -482,7 +476,7 @@ export declare const sprinkles: ((props: {
         largeDesktop?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | undefined;
     } | undefined) | import("@vanilla-extract/sprinkles").ResponsiveArray<1 | 2 | 3 | 4, "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "none" | "auto" | null>;
 }) => string) & {
-    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" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textWrap" | "userSelect" | "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">;
+    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" | "textWrap" | "userSelect" | "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];
 export type SprinklesLegacyColours = Pick<Sprinkles, 'backgroundColour' | 'borderColour' | 'borderBottomColour' | 'borderLeftColour' | 'borderRightColour' | 'borderTopColour' | 'colour'>;

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":"AAqKA,eAAO,MAAM,WAAW;;;;;;6BAUlB,sBAAsB,CAAC,QAAQ,CAAC,EAAE;;CAEvC,CAAC;AA0FF,eAAO,MAAM,mBAAmB;;;;;CAAwC,CAAC;AACzE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACrC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,EACzC,OAAO,CACP,CAAC;AAGF,eAAO,MAAM,oBAAoB;;;;;;;;;;;CAOhC,CAAC;AAmIF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAC;AAC/E,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAGxD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC"}
+{"version":3,"file":"sprinkles.css.d.ts","sourceRoot":"","sources":["../../lib/styles/sprinkles.css.ts"],"names":[],"mappings":"AAoKA,eAAO,MAAM,WAAW;;;;;;6BAUlB,sBAAsB,CAAC,QAAQ,CAAC,EAAE;;CAEvC,CAAC;AA0FF,eAAO,MAAM,mBAAmB;;;;;CAAwC,CAAC;AACzE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACrC,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC,CAAC,CAAC,EACzC,OAAO,CACP,CAAC;AAGF,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;AAGxD,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACxC,SAAS,EACP,kBAAkB,GAClB,cAAc,GACd,oBAAoB,GACpB,kBAAkB,GAClB,mBAAmB,GACnB,iBAAiB,GACjB,QAAQ,CACV,CAAC"}

package/dist/styles/sprinkles.css.js

@@ -19,12 +19,12 @@ const {
   } = space,
   spaceWithoutNone = _objectWithoutProperties(space, ["none"]);
 const flexAlignments = {
-  flexEnd: 'flex-end',
-  'flex-end': 'flex-end',
-  flexStart: 'flex-start',
-  'flex-start': 'flex-start',
   center: 'center',
   centre: 'center',
+  end: 'end',
+  flexEnd: 'end',
+  flexStart: 'start',
+  start: 'start',
   stretch: 'stretch'
 };
 const flexAlignmentsWithSpace = _objectSpread(_objectSpread({}, flexAlignments), {}, {
@@ -32,8 +32,7 @@ const flexAlignmentsWithSpace = _objectSpread(_objectSpread({}, flexAlignments),
   'space-around': 'space-around',
   spaceBetween: 'space-between',
   'space-between': 'space-between',
-  spaceEvenely: 'space-evenly',
-  'space-evenely': 'space-evenly'
+  'space-evenly': 'space-evenly'
 });
 const fontSizes = Object.entries(tokens.typography.size).reduce((sizes, _ref) => {
   let [scale, fontSize] = _ref;
@@ -271,13 +270,12 @@ const responsiveProperties = defineProperties({
     gap: gapSizesWithVar,
     columnGap: space,
     rowGap: space,
+    alignContent: flexAlignmentsWithSpace,
     alignItems: _objectSpread(_objectSpread({}, flexAlignments), {}, {
       baseline: 'baseline'
     }),
-    justifyContent: flexAlignmentsWithSpace,
-    alignContent: flexAlignmentsWithSpace,
-    alignSelf: ['flex-start', 'center', 'flex-end', 'stretch'],
-    justifySelf: ['flex-start', 'center', 'flex-end'],
+    alignSelf: flexAlignments,
+    justifyContent: _objectSpread({}, flexAlignmentsWithSpace),
     flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
     flexGrow: [0, '0', '1'],
     flexShrink: [0, '0', '1'],

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

@@ -1,2 +1,2 @@
-export declare const gapVar: `var(--${string})` | `var(--${string}, ${string})`;
+export declare const gapVar: `var(--${string})`;
 //# sourceMappingURL=vars.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"vars.css.d.ts","sourceRoot":"","sources":["../../lib/styles/vars.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,oDAAgC,CAAC"}
+{"version":3,"file":"vars.css.d.ts","sourceRoot":"","sources":["../../lib/styles/vars.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,oBAAgC,CAAC"}