@autoguru/overdrive 4.3.3 → 4.3.4

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();

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

@@ -1,94 +1,89 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/private/InputBase/NotchedBase.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({
-    transition: `fill 0.2s ${vars.animation.easing.decelerate} 0s`,
-});
+  transition: "fill 0.2s ".concat(vars.animation.easing.decelerate, " 0s")
+}, "root");
 const borderRegionDefaults = style({
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    display: 'inline-flex',
-    transition: `border-color 0.2s ${vars.animation.easing.decelerate} 0s`,
-});
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  display: 'inline-flex',
+  transition: "border-color 0.2s ".concat(vars.animation.easing.decelerate, " 0s")
+}, "borderRegionDefaults");
 const borderVisualDefaults = style({
-    borderRadius: vars.border.radius['1'],
-    boxShadow: vars.elevation['2'],
-});
+  borderRadius: vars.border.radius['1'],
+  boxShadow: vars.elevation['2']
+}, "borderVisualDefaults");
 export const borders = {
-    root: {
-        default: [
-            borderVisualDefaults,
-            style({
-                zIndex: 2,
-                top: 0,
-                right: 0,
-                left: 0,
-            }),
-        ],
-        disabled: style({ boxShadow: 'none' }),
-    },
-    complete: [
-        borderVisualDefaults,
-        borderRegionDefaults,
-        style({
-            borderRadius: `${vars.border.radius['1']}`,
-        }),
-    ],
-    leading: [
-        borderRegionDefaults,
-        style({
-            width: vars.space['2'],
-            borderRight: 'none',
-            borderRadius: `${vars.border.radius['1']} 0 0 ${vars.border.radius['1']}`,
-        }),
-    ],
-    middle: [
-        borderRegionDefaults,
-        style({
-            transition: `width 0.15s ${vars.animation.easing.decelerate}, border-color 0.2s ${vars.animation.easing.decelerate} 0s`,
-            borderTopWidth: 0,
-            borderRightWidth: 0,
-            borderLeftWidth: 0,
-        }),
-    ],
-    trailing: [
-        borderRegionDefaults,
-        style({
-            flexGrow: 1,
-            borderLeft: 'none',
-            borderRadius: `0 ${vars.border.radius['1']} ${vars.border.radius['1']} 0`,
-        }),
-    ],
+  root: {
+    default: [borderVisualDefaults, style({
+      zIndex: 2,
+      top: 0,
+      right: 0,
+      left: 0
+    }, "borders_root_default")],
+    disabled: style({
+      boxShadow: 'none'
+    }, "borders_root_disabled")
+  },
+  complete: [borderVisualDefaults, borderRegionDefaults, style({
+    borderRadius: "".concat(vars.border.radius['1'])
+  }, "borders_complete")],
+  leading: [borderRegionDefaults, style({
+    width: vars.space['2'],
+    borderRight: 'none',
+    borderRadius: "".concat(vars.border.radius['1'], " 0 0 ").concat(vars.border.radius['1'])
+  }, "borders_leading")],
+  middle: [borderRegionDefaults, style({
+    transition: "width 0.15s ".concat(vars.animation.easing.decelerate, ", border-color 0.2s ").concat(vars.animation.easing.decelerate, " 0s"),
+    borderTopWidth: 0,
+    borderRightWidth: 0,
+    borderLeftWidth: 0
+  }, "borders_middle")],
+  trailing: [borderRegionDefaults, style({
+    flexGrow: 1,
+    borderLeft: 'none',
+    borderRadius: "0 ".concat(vars.border.radius['1'], " ").concat(vars.border.radius['1'], " 0")
+  }, "borders_trailing")]
 };
 export const placeholder = styleVariants({
-    default: {
-        lineHeight: 1,
-        top: 0,
-        left: 0,
-        transition: `color 0.2s ${vars.animation.easing.decelerate} 0s, transform 0.2s ${vars.animation.easing.decelerate} 0s`,
-        transformOrigin: 'top left',
-    },
-    mutedLabelStyles: {
-        color: vars.typography.colour.muted,
-    },
-});
+  default: {
+    lineHeight: 1,
+    top: 0,
+    left: 0,
+    transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, transform 0.2s ").concat(vars.animation.easing.decelerate, " 0s"),
+    transformOrigin: 'top left'
+  },
+  mutedLabelStyles: {
+    color: vars.typography.colour.muted
+  }
+}, "placeholder");
 const active_scaling_factor = 0.7777;
+
 const calcPlaceholderTranslate = (notched, prefixed) => {
-    if (notched) {
-        return `calc(${vars.space['2']} + ${vars.space['2']}), calc(-0.5 * ${active_scaling_factor} * ${vars.typography.size['4'].fontSize})`;
-    }
-    return `${prefixed
-        ? `calc(${vars.space['7']} + ${vars.space['3']})`
-        : vars.typography.size['4'].fontSize}, calc((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2)`;
+  if (notched) {
+    return "calc(".concat(vars.space['2'], " + ").concat(vars.space['2'], "), calc(-0.5 * ").concat(active_scaling_factor, " * ").concat(vars.typography.size['4'].fontSize, ")");
+  }
+
+  return "".concat(prefixed ? "calc(".concat(vars.space['7'], " + ").concat(vars.space['3'], ")") : vars.typography.size['4'].fontSize, ", calc((").concat(vars.space['8'], " - ").concat(vars.typography.size['4'].fontSize, ") / 2)");
 };
+
 export const placeholderPlacement = styleVariants({
-    default: {
-        transform: `translate(${calcPlaceholderTranslate(false, false)}) scale(1)`,
-    },
-    defaultPrefixed: {
-        transform: `translate(${calcPlaceholderTranslate(false, true)}) scale(1)`,
-    },
-    shifted: {
-        zIndex: 2,
-        transform: `translate(${calcPlaceholderTranslate(true, false)}) scale(${active_scaling_factor})`,
-    },
-});
+  default: {
+    transform: "translate(".concat(calcPlaceholderTranslate(false, false), ") scale(1)")
+  },
+  defaultPrefixed: {
+    transform: "translate(".concat(calcPlaceholderTranslate(false, true), ") scale(1)")
+  },
+  shifted: {
+    zIndex: 2,
+    transform: "translate(".concat(calcPlaceholderTranslate(true, false), ") scale(").concat(active_scaling_factor, ")")
+  }
+}, "placeholderPlacement");
+
+__vanilla_filescope__.endFileScope();

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

@@ -1,42 +1,87 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { Box } from '../../Box';
-import { useTextStyles } from '../../Text';
-import * as styles from './NotchedBase.css';
+import { Box } from "../../Box/index.js";
+import { useTextStyles } from "../../Text/index.js";
+import * as styles from "./NotchedBase.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ACTIVE_SCALING_FACTOR = 0.7777;
 const ACTIVE_PADDING_ADDED = 16;
 const ROUGH_WIDTH_PER_CHARACTER = 10.2;
-export const NotchedBase = ({ id, placeholder, isEmpty, disabled, prefixed, children, notch = true, borderColourClassName, placeholderColourClassName, className = '', }) => {
-    const labelStyles = useTextStyles({
-        noWrap: true,
-        size: '4',
-    });
-    const labelRef = useRef(null);
-    const [labelWidth, setLabelWidth] = useState(getNotchedComputedWidthForWidth(placeholder.length * ROUGH_WIDTH_PER_CHARACTER));
-    useEffect(() => {
-        if (labelRef.current) {
-            setLabelWidth(labelRef.current.offsetWidth);
-        }
-    }, [placeholder]);
-    const notchedWidth = getNotchedComputedWidthForWidth(labelWidth);
-    return (React.createElement(Box, { position: "relative", width: "full", padding: "none", className: clsx(styles.root, !notch && [styles.borders.complete, borderColourClassName], className) },
-        children,
-        notch && (React.createElement(Box, { className: clsx(styles.borders.root.default, {
-                [styles.borders.root.disabled]: disabled,
-            }), pointerEvents: "none", position: "absolute", display: "flex", width: "full", height: "full", textAlign: "left" },
-            React.createElement("div", { className: clsx(styles.borders.leading, borderColourClassName) }),
-            React.createElement("div", { className: clsx(styles.borders.middle, borderColourClassName), style: { width: isEmpty ? 0 : notchedWidth } },
-                React.createElement(Box, { ref: labelRef, is: "label", pointerEvents: "none", htmlFor: id, position: "absolute", display: "inline", margin: "none", padding: "none", className: clsx(styles.placeholder.default, placeholderColourClassName, labelStyles, {
-                        [styles.placeholder.mutedLabelStyles]: isEmpty || disabled,
-                        [styles.placeholderPlacement.default]: isEmpty && !prefixed,
-                        [styles.placeholderPlacement
-                            .defaultPrefixed]: isEmpty && prefixed,
-                        [styles.placeholderPlacement
-                            .shifted]: !isEmpty,
-                    }) }, placeholder)),
-            React.createElement("div", { className: clsx('chromatic-ignore', styles.borders.trailing, borderColourClassName) })))));
+export const NotchedBase = _ref => {
+  let {
+    id,
+    placeholder,
+    isEmpty,
+    disabled,
+    prefixed,
+    children,
+    notch = true,
+    borderColourClassName,
+    placeholderColourClassName,
+    className = ''
+  } = _ref;
+  const labelStyles = useTextStyles({
+    noWrap: true,
+    size: '4'
+  });
+  const labelRef = useRef(null);
+  const [labelWidth, setLabelWidth] = useState(getNotchedComputedWidthForWidth(placeholder.length * ROUGH_WIDTH_PER_CHARACTER));
+  useEffect(() => {
+    if (labelRef.current) {
+      setLabelWidth(labelRef.current.offsetWidth);
+    }
+  }, [placeholder]);
+  const notchedWidth = getNotchedComputedWidthForWidth(labelWidth);
+  return _jsxs(Box, {
+    position: "relative",
+    width: "full",
+    padding: "none",
+    className: clsx(styles.root, !notch && [styles.borders.complete, borderColourClassName], className),
+    children: [children, notch && _jsxs(Box, {
+      className: clsx(styles.borders.root.default, {
+        [styles.borders.root.disabled]: disabled
+      }),
+      pointerEvents: "none",
+      position: "absolute",
+      display: "flex",
+      width: "full",
+      height: "full",
+      textAlign: "left",
+      children: [_jsx("div", {
+        className: clsx(styles.borders.leading, borderColourClassName)
+      }), _jsx("div", {
+        className: clsx(styles.borders.middle, borderColourClassName),
+        style: {
+          width: isEmpty ? 0 : notchedWidth
+        },
+        children: _jsx(Box, {
+          ref: labelRef,
+          is: "label",
+          pointerEvents: "none",
+          htmlFor: id,
+          position: "absolute",
+          display: "inline",
+          margin: "none",
+          padding: "none",
+          className: clsx(styles.placeholder.default, placeholderColourClassName, labelStyles, {
+            [styles.placeholder.mutedLabelStyles]: isEmpty || disabled,
+            [styles.placeholderPlacement.default]: isEmpty && !prefixed,
+            [styles.placeholderPlacement.defaultPrefixed]: isEmpty && prefixed,
+            [styles.placeholderPlacement.shifted]: !isEmpty
+          }),
+          children: placeholder
+        })
+      }), _jsx("div", {
+        className: clsx(styles.borders.trailing, borderColourClassName)
+      })]
+    })]
+  });
 };
+
 function getNotchedComputedWidthForWidth(width) {
-    return (Math.round((width * ACTIVE_SCALING_FACTOR + ACTIVE_PADDING_ADDED) * 100) / 100);
-}
+  return Math.round((width * ACTIVE_SCALING_FACTOR + ACTIVE_PADDING_ADDED) * 100) / 100;
+}

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

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

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

@@ -1,53 +1,65 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/private/InputBase/withEnhancedInput.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 iconRoot = style({
-    top: '50%',
-    transform: 'translate3d(0, -50%, 0)',
-    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s`,
-    margin: `0 calc(${vars.space['3']} - 1px)`,
-});
+  top: '50%',
+  transform: 'translate3d(0, -50%, 0)',
+  transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s"),
+  margin: "0 calc(".concat(vars.space['3'], " - 1px)")
+}, "iconRoot");
 export const icon = {
-    prefix: [iconRoot, style({ left: 0 })],
-    suffix: [iconRoot, style({ right: 0 })],
+  prefix: [iconRoot, style({
+    left: 0
+  }, "icon_prefix")],
+  suffix: [iconRoot, style({
+    right: 0
+  }, "icon_suffix")]
 };
 export const input = {
-    itself: styleVariants({
-        root: {
-            zIndex: 1,
-            alignSelf: 'flex-end',
-            background: 'transparent',
-            outline: 'none',
-            fontSize: vars.typography.size['4'].fontSize,
-            lineHeight: vars.typography.size['4'].lineHeight,
-            height: vars.space['8'],
-            padding: `calc(((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2) - 3px) calc(${vars.space['4']} - 1px)`,
-            selectors: {
-                '&[disabled]': {
-                    color: vars.typography.colour.muted,
-                    cursor: 'not-allowed',
-                },
-                '&::placeholder': {
-                    fontSize: vars.typography.size['4'].fontSize,
-                    lineHeight: vars.typography.size['4'].lineHeight,
-                    color: vars.typography.colour.muted,
-                    opacity: 1,
-                },
-            },
+  itself: styleVariants({
+    root: {
+      zIndex: 1,
+      alignSelf: 'flex-end',
+      background: 'transparent',
+      outline: 'none',
+      fontSize: vars.typography.size['4'].fontSize,
+      lineHeight: vars.typography.size['4'].lineHeight,
+      height: vars.space['8'],
+      padding: "calc(((".concat(vars.space['8'], " - ").concat(vars.typography.size['4'].fontSize, ") / 2) - 3px) calc(").concat(vars.space['4'], " - 1px)"),
+      selectors: {
+        '&[disabled]': {
+          color: vars.typography.colour.muted,
+          cursor: 'not-allowed'
         },
-        prefixed: {
-            paddingLeft: `calc((${vars.space['3']} - 1px) + (${vars.space['4']} - 1px) + ${vars.space[4]})`,
-        },
-        suffixed: {
-            paddingRight: `calc((${vars.space['3']} - 1px) + (${vars.space['4']} - 1px) + ${vars.space[4]})`,
-        },
-    }),
+        '&::placeholder': {
+          fontSize: vars.typography.size['4'].fontSize,
+          lineHeight: vars.typography.size['4'].lineHeight,
+          color: vars.typography.colour.muted,
+          opacity: 1
+        }
+      }
+    },
+    prefixed: {
+      paddingLeft: "calc((".concat(vars.space['3'], " - 1px) + (").concat(vars.space['4'], " - 1px) + ").concat(vars.space[4], ")")
+    },
+    suffixed: {
+      paddingRight: "calc((".concat(vars.space['3'], " - 1px) + (").concat(vars.space['4'], " - 1px) + ").concat(vars.space[4], ")")
+    }
+  }, "input_itself")
 };
 const textAreaHeight = '107px';
 export const types = styleVariants({
-    textarea: {
-        height: textAreaHeight,
-        minHeight: textAreaHeight,
-        lineHeight: 1.2,
-        resize: 'vertical',
-    },
-});
+  textarea: {
+    height: textAreaHeight,
+    minHeight: textAreaHeight,
+    lineHeight: 1.2,
+    resize: 'vertical'
+  }
+}, "types");
+
+__vanilla_filescope__.endFileScope();