@autoguru/overdrive 4.1.8 → 4.1.9

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

@@ -1,46 +1,54 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/private/CheckableBase/CheckableBase.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../../themes/base/vars.css';
+import { vars } from "../../../themes/base/vars.css.js";
 export const root = style({
-    cursor: 'pointer',
-    transition: `background-color 0.2s ${vars.animation.easing.decelerate} 0s`,
-    ':hover': {
-        backgroundColor: vars.colours.background.body,
-    },
-});
+  cursor: 'pointer',
+  transition: "background-color 0.2s ".concat(vars.animation.easing.decelerate, " 0s"),
+  ':hover': {
+    backgroundColor: vars.colours.background.body
+  }
+}, "root");
 export const label = styleVariants({
-    disabled: {
-        color: vars.typography.colour.dark,
-    },
-});
+  disabled: {
+    color: vars.typography.colour.dark
+  }
+}, "label");
 export const nativeInput = styleVariants({
-    default: {
-        zIndex: 2,
-        top: 0,
-        left: 0,
-        cursor: 'inherit',
-        opacity: 0,
-    },
-    checked: {
-        outline: 'none',
-    },
-});
+  default: {
+    zIndex: 2,
+    top: 0,
+    left: 0,
+    cursor: 'inherit',
+    opacity: 0
+  },
+  checked: {
+    outline: 'none'
+  }
+}, "nativeInput");
 export const checkable = style({
-    width: `calc(${vars.space['4']} + (${vars.space[3]} * 2))`,
-    height: `calc(${vars.space['4']} + (${vars.space[3]} * 2))`,
-    marginTop: `calc(-1*${vars.space['3']})`,
-    marginBottom: `calc(-1*${vars.space['3']})`,
-});
+  width: "calc(".concat(vars.space['4'], " + (").concat(vars.space[3], " * 2))"),
+  height: "calc(".concat(vars.space['4'], " + (").concat(vars.space[3], " * 2))"),
+  marginTop: "calc(-1*".concat(vars.space['3'], ")"),
+  marginBottom: "calc(-1*".concat(vars.space['3'], ")")
+}, "checkable");
 export const checkableItem = style({
-    selectors: {
-        [`${nativeInput.default}:focus:checked ~${checkable} &`]: {
-            boxShadow: `0 0 0 2px ${vars.colours.intent.primary.background.strong}`,
-        },
-        [`${nativeInput.default}:focus:not(:checked) ~${checkable} >&`]: {
-            borderColor: vars.colours.intent.primary.background.strong,
-        },
+  selectors: {
+    ["".concat(nativeInput.default, ":focus:checked ~").concat(checkable, " &")]: {
+      boxShadow: "0 0 0 2px ".concat(vars.colours.intent.primary.background.strong)
     },
-});
+    ["".concat(nativeInput.default, ":focus:not(:checked) ~").concat(checkable, " >&")]: {
+      borderColor: vars.colours.intent.primary.background.strong
+    }
+  }
+}, "checkableItem");
 export const disabled = style({
-    opacity: 0.6,
-    pointerEvents: 'none',
-});
+  opacity: 0.6,
+  pointerEvents: 'none'
+}, "disabled");
+
+__vanilla_filescope__.endFileScope();

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

@@ -1,30 +1,92 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Box, useBoxStyles } from '../../Box';
-import { Text, useTextStyles } from '../../Text';
-import * as styles from './CheckableBase.css';
-export const CheckableBase = forwardRef(({ className = '', label = '', checked = false, disabled = false, inputType, inputName, value, children, handleClick, handleChange, }, ref) => {
-    const onChange = (e) => {
-        if (typeof handleChange === 'function') {
-            handleChange(e.currentTarget.checked);
-        }
-    };
-    const nakedLabel = ['string', 'number'].includes(typeof label);
-    return (React.createElement(Box, { display: "flex", alignItems: "center", flexDirection: "row", justifyContent: "flexStart", padding: "3", paddingLeft: "none", position: "relative", className: [
-            styles.root,
-            useBoxStyles({ is: 'button' }),
-            className,
-            { [styles.disabled]: disabled },
-        ] },
-        React.createElement(Box, { ref: ref, is: "input", position: "absolute", width: "full", height: "full", margin: "none", padding: "none", name: inputName, value: value, checked: checked, disabled: disabled, type: inputType, pointerEvents: disabled ? 'none' : void 0, className: clsx(useBoxStyles({ is: 'button' }), styles.nativeInput.default, {
-                [styles.nativeInput.checked]: checked,
-            }), onClick: handleClick, onChange: onChange }),
-        React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", position: "relative", className: [
-                styles.checkable,
-                useBoxStyles({ is: 'button' }),
-            ] }, children),
-        React.createElement(Box, { is: "label", width: "full", pointerEvents: disabled ? 'none' : void 0, className: clsx(useBoxStyles({ is: 'button' }), useTextStyles({ size: '4' }), {
-                [styles.label.disabled]: disabled,
-            }) }, nakedLabel ? React.createElement(Text, { is: "span" }, label) : label)));
-});
+import { Box, useBoxStyles } from "../../Box/index.js";
+import { Text, useTextStyles } from "../../Text/index.js";
+import * as styles from "./CheckableBase.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const CheckableBase = forwardRef((_ref, ref) => {
+  let {
+    className = '',
+    label = '',
+    checked = false,
+    disabled = false,
+    inputType,
+    inputName,
+    value,
+    children,
+    handleClick,
+    handleChange
+  } = _ref;
+
+  const onChange = e => {
+    if (typeof handleChange === 'function') {
+      handleChange(e.currentTarget.checked);
+    }
+  };
+
+  const nakedLabel = ['string', 'number'].includes(typeof label);
+  return _jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "flexStart",
+    padding: "3",
+    paddingLeft: "none",
+    position: "relative",
+    className: [styles.root, useBoxStyles({
+      is: 'button'
+    }), className, {
+      [styles.disabled]: disabled
+    }],
+    children: [_jsx(Box, {
+      ref: ref,
+      is: "input",
+      position: "absolute",
+      width: "full",
+      height: "full",
+      margin: "none",
+      padding: "none",
+      name: inputName,
+      value: value,
+      checked: checked,
+      disabled: disabled,
+      type: inputType,
+      pointerEvents: disabled ? 'none' : void 0,
+      className: clsx(useBoxStyles({
+        is: 'button'
+      }), styles.nativeInput.default, {
+        [styles.nativeInput.checked]: checked
+      }),
+      onClick: handleClick,
+      onChange: onChange
+    }), _jsx(Box, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      position: "relative",
+      className: [styles.checkable, useBoxStyles({
+        is: 'button'
+      })],
+      children: children
+    }), _jsx(Box, {
+      is: "label",
+      width: "full",
+      pointerEvents: disabled ? 'none' : void 0,
+      className: clsx(useBoxStyles({
+        is: 'button'
+      }), useTextStyles({
+        size: '4'
+      }), {
+        [styles.label.disabled]: disabled
+      }),
+      children: nakedLabel ? _jsx(Text, {
+        is: "span",
+        children: label
+      }) : label
+    })]
+  });
+});

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

@@ -1 +1,3 @@
-export { CheckableBase } from './CheckableBase';
+"use strict";
+
+export { CheckableBase } from "./CheckableBase.js";

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

@@ -1,4 +1,6 @@
-import * as styles from './CheckableBase.css';
+"use strict";
+
+import * as styles from "./CheckableBase.css.js";
 export const useCheckableStyles = () => ({
-    checkableItem: styles.checkableItem,
-});
+  checkableItem: styles.checkableItem
+});

package/dist/components/private/InputBase/HintText.css.js

@@ -1,5 +1,13 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/private/InputBase/HintText.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../../themes/base/vars.css';
+import { vars } from "../../../themes/base/vars.css.js";
 export const hintText = style({
-    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s`,
-});
+  transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s")
+}, "hintText");
+
+__vanilla_filescope__.endFileScope();

package/dist/components/private/InputBase/HintText.js

@@ -1,16 +1,30 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-import { useBoxStyles } from '../../Box';
-import { Text } from '../../Text';
-import * as styles from './HintText.css';
-export const HintText = ({ reserveHintSpace, disabled, hintText, className = '', }) => {
-    const boxStyles = useBoxStyles({
-        is: 'p',
-        marginTop: '2',
-        marginLeft: '4',
-    });
-    if (!hintText && !reserveHintSpace)
-        return null;
-    const showHintText = !disabled && hintText;
-    return (React.createElement(Text, { is: "p", size: "2", colour: "unset", className: clsx(boxStyles, styles.hintText, className) }, showHintText ? hintText : '\u00A0'));
-};
+import { useBoxStyles } from "../../Box/index.js";
+import { Text } from "../../Text/index.js";
+import * as styles from "./HintText.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HintText = _ref => {
+  let {
+    reserveHintSpace,
+    disabled,
+    hintText,
+    className = ''
+  } = _ref;
+  const boxStyles = useBoxStyles({
+    is: 'p',
+    marginTop: '2',
+    marginLeft: '4'
+  });
+  if (!hintText && !reserveHintSpace) return null;
+  const showHintText = !disabled && hintText;
+  return _jsx(Text, {
+    is: "p",
+    size: "2",
+    colour: "unset",
+    className: clsx(boxStyles, styles.hintText, className),
+    children: showHintText ? hintText : '\u00A0'
+  });
+};

package/dist/components/private/InputBase/InputState.css.js

@@ -1,92 +1,108 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/private/InputBase/InputState.css.ts", "@autoguru/overdrive");
+
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../../themes/base/vars.css';
+import { vars } from "../../../themes/base/vars.css.js";
 const activeColour = style({
-    color: vars.typography.colour.information,
-});
+  color: vars.typography.colour.information
+}, "activeColour");
 const activeBorderColour = style({
-    color: vars.typography.colour.information,
-});
+  color: vars.typography.colour.information
+}, "activeBorderColour");
 export const disabled = styleVariants({
-    colour: {
-        color: vars.typography.colour.muted,
-    },
-    borderColour: {
-        borderColor: vars.typography.colour.muted,
-    },
-});
+  colour: {
+    color: vars.typography.colour.muted
+  },
+  borderColour: {
+    borderColor: vars.typography.colour.muted
+  }
+}, "disabled");
 export const natural = {
-    default: {
-        colour: style({
-            color: vars.typography.colour.muted,
-        }),
-        borderColour: style({
-            borderColor: vars.typography.colour.muted,
-        }),
-    },
-    hover: {
-        colour: activeColour,
-        borderColour: activeBorderColour,
-    },
-    active: {
-        colour: activeColour,
-        borderColour: activeBorderColour,
-    },
+  default: {
+    colour: style({
+      color: vars.typography.colour.muted
+    }, "natural_default_colour"),
+    borderColour: style({
+      borderColor: vars.typography.colour.muted
+    }, "natural_default_borderColour")
+  },
+  hover: {
+    colour: activeColour,
+    borderColour: activeBorderColour
+  },
+  active: {
+    colour: activeColour,
+    borderColour: activeBorderColour
+  }
 };
 export const active = {
-    default: {
-        colour: activeColour,
-        borderColour: activeBorderColour,
-    },
-    hover: {
-        colour: activeColour,
-        borderColour: activeBorderColour,
-    },
-    active: {
-        colour: activeColour,
-        borderColour: activeBorderColour,
-    },
+  default: {
+    colour: activeColour,
+    borderColour: activeBorderColour
+  },
+  hover: {
+    colour: activeColour,
+    borderColour: activeBorderColour
+  },
+  active: {
+    colour: activeColour,
+    borderColour: activeBorderColour
+  }
 };
 export const success = {
-    default: {
-        colour: style({ color: vars.typography.colour.success }),
-        borderColour: style({ borderColor: vars.typography.colour.success }),
-    },
-    hover: {
-        colour: style({
-            color: vars.typography.colour.success,
-        }),
-        borderColour: style({
-            borderColor: vars.typography.colour.success,
-        }),
-    },
-    active: {
-        colour: style({
-            color: vars.typography.colour.success,
-        }),
-        borderColour: style({
-            borderColor: vars.typography.colour.success,
-        }),
-    },
+  default: {
+    colour: style({
+      color: vars.typography.colour.success
+    }, "success_default_colour"),
+    borderColour: style({
+      borderColor: vars.typography.colour.success
+    }, "success_default_borderColour")
+  },
+  hover: {
+    colour: style({
+      color: vars.typography.colour.success
+    }, "success_hover_colour"),
+    borderColour: style({
+      borderColor: vars.typography.colour.success
+    }, "success_hover_borderColour")
+  },
+  active: {
+    colour: style({
+      color: vars.typography.colour.success
+    }, "success_active_colour"),
+    borderColour: style({
+      borderColor: vars.typography.colour.success
+    }, "success_active_borderColour")
+  }
 };
 export const error = {
-    default: {
-        colour: style({
-            color: vars.typography.colour.danger,
-        }),
-        borderColour: style({
-            borderColor: vars.typography.colour.danger,
-        }),
-    },
-    hover: {
-        colour: style({ color: vars.typography.colour.danger }),
-        borderColour: style({ borderColor: vars.typography.colour.danger }),
-    },
-    active: {
-        colour: style({
-            color: vars.typography.colour.danger,
-        }),
-        borderColour: style({
-            borderColor: vars.typography.colour.danger,
-        }),
-    },
+  default: {
+    colour: style({
+      color: vars.typography.colour.danger
+    }, "error_default_colour"),
+    borderColour: style({
+      borderColor: vars.typography.colour.danger
+    }, "error_default_borderColour")
+  },
+  hover: {
+    colour: style({
+      color: vars.typography.colour.danger
+    }, "error_hover_colour"),
+    borderColour: style({
+      borderColor: vars.typography.colour.danger
+    }, "error_hover_borderColour")
+  },
+  active: {
+    colour: style({
+      color: vars.typography.colour.danger
+    }, "error_active_colour"),
+    borderColour: style({
+      borderColor: vars.typography.colour.danger
+    }, "error_active_borderColour")
+  }
 };
+
+__vanilla_filescope__.endFileScope();