@autoguru/overdrive 4.10.2 → 4.11.0

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

@@ -1,83 +1,123 @@
+"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 { useEffect, useRef, useState } from 'react';
+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, size, children, notch = true, borderColourClassName, placeholderColourClassName, className = '', attach = 'NONE', borderMerged = 'NONE', isFocused = false, isHovered = false, }) => {
-    const labelStyles = useTextStyles({
-        noWrap: true,
-        size: '4',
-    });
-    const labelRef = useRef(null);
-    const [labelWidth, setLabelWidth] = useState(getNotchedComputedWidthForWidth(placeholder.length * ROUGH_WIDTH_PER_CHARACTER));
-    const shouldMerge = !isFocused && !isHovered;
-    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, {
-            [styles.bordersMerged.complete.NONE]: !notch &&
-                shouldMerge &&
-                (!borderMerged || borderMerged === 'NONE'),
-            [styles.bordersMerged.complete.LEFT]: !notch && shouldMerge && borderMerged === 'LEFT',
-            [styles.bordersMerged.complete.TOP]: !notch && shouldMerge && borderMerged === 'TOP',
-            [styles.bordersMerged.complete.RIGHT]: !notch && shouldMerge && borderMerged === 'RIGHT',
-            [styles.bordersMerged.complete.BOTTOM]: !notch && shouldMerge && borderMerged === 'BOTTOM',
-            [styles.bordersMerged.complete.ALL]: !notch && shouldMerge && borderMerged === 'ALL',
-            [styles.bordersAttach.complete.NONE]: !notch && attach === 'NONE',
-            [styles.bordersAttach.complete.LEFT]: !notch && attach === 'LEFT',
-            [styles.bordersAttach.complete.RIGHT]: !notch && attach === 'RIGHT',
-            [styles.bordersAttach.complete.TOP]: !notch && attach === 'TOP',
-            [styles.bordersAttach.complete.BOTTOM]: !notch && attach === 'BOTTOM',
-            [styles.bordersAttach.complete.ALL]: !notch && attach === 'ALL',
-        }) },
-        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, {
-                    [styles.bordersMerged.complete.LEFT]: shouldMerge && borderMerged === 'LEFT',
-                    [styles.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',
-                    [styles.bordersMerged.complete.BOTTOM]: shouldMerge && borderMerged === 'BOTTOM',
-                    [styles.bordersMerged.complete.ALL]: shouldMerge && borderMerged === 'ALL',
-                    [styles.bordersAttach.flatCorners.TOP_LEFT]: attach === 'LEFT' ||
-                        attach === 'TOP' ||
-                        attach === 'ALL',
-                    [styles.bordersAttach.flatCorners.BOTTOM_LEFT]: attach === 'LEFT' ||
-                        attach === 'BOTTOM' ||
-                        attach === 'ALL',
-                }) }),
-            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.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',
-                        [styles.bordersMerged.complete.BOTTOM]: shouldMerge &&
-                            borderMerged === 'BOTTOM',
-                        [styles.bordersMerged.complete.ALL]: shouldMerge && borderMerged === 'ALL',
-                        [styles.placeholder.mutedLabelStyles]: isEmpty || disabled,
-                        [styles.placeholderPlacement[size].default]: isEmpty && !prefixed,
-                        [styles.placeholderPlacement[size]
-                            .defaultPrefixed]: isEmpty && prefixed,
-                        [styles.placeholderPlacement[size].shifted]: !isEmpty,
-                    }) }, placeholder)),
-            React.createElement("div", { className: clsx(styles.borders.trailing, borderColourClassName, borderColourClassName, {
-                    [styles.bordersMerged.complete.RIGHT]: shouldMerge && borderMerged === 'RIGHT',
-                    [styles.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',
-                    [styles.bordersMerged.complete.BOTTOM]: shouldMerge && borderMerged === 'BOTTOM',
-                    [styles.bordersMerged.complete.ALL]: shouldMerge && borderMerged === 'ALL',
-                    [styles.bordersAttach.flatCorners.TOP_RIGHT]: attach === 'RIGHT' ||
-                        attach === 'TOP' ||
-                        attach === 'ALL',
-                    [styles.bordersAttach.flatCorners.BOTTOM_RIGHT]: attach === 'RIGHT' ||
-                        attach === 'BOTTOM' ||
-                        attach === 'ALL',
-                }) })))));
+export const NotchedBase = _ref => {
+  let {
+    id,
+    placeholder,
+    isEmpty,
+    disabled,
+    prefixed,
+    size,
+    children,
+    notch = true,
+    borderColourClassName,
+    placeholderColourClassName,
+    className = '',
+    attach = 'NONE',
+    borderMerged = 'NONE',
+    isFocused = false,
+    isHovered = false
+  } = _ref;
+  const labelStyles = useTextStyles({
+    noWrap: true,
+    size: '4'
+  });
+  const labelRef = useRef(null);
+  const [labelWidth, setLabelWidth] = useState(getNotchedComputedWidthForWidth(placeholder.length * ROUGH_WIDTH_PER_CHARACTER));
+  const shouldMerge = !isFocused && !isHovered;
+  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, {
+      [styles.bordersMerged.complete.NONE]: !notch && shouldMerge && (!borderMerged || borderMerged === 'NONE'),
+      [styles.bordersMerged.complete.LEFT]: !notch && shouldMerge && borderMerged === 'LEFT',
+      [styles.bordersMerged.complete.TOP]: !notch && shouldMerge && borderMerged === 'TOP',
+      [styles.bordersMerged.complete.RIGHT]: !notch && shouldMerge && borderMerged === 'RIGHT',
+      [styles.bordersMerged.complete.BOTTOM]: !notch && shouldMerge && borderMerged === 'BOTTOM',
+      [styles.bordersMerged.complete.ALL]: !notch && shouldMerge && borderMerged === 'ALL',
+      [styles.bordersAttach.complete.NONE]: !notch && attach === 'NONE',
+      [styles.bordersAttach.complete.LEFT]: !notch && attach === 'LEFT',
+      [styles.bordersAttach.complete.RIGHT]: !notch && attach === 'RIGHT',
+      [styles.bordersAttach.complete.TOP]: !notch && attach === 'TOP',
+      [styles.bordersAttach.complete.BOTTOM]: !notch && attach === 'BOTTOM',
+      [styles.bordersAttach.complete.ALL]: !notch && attach === 'ALL'
+    }),
+    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, {
+          [styles.bordersMerged.complete.LEFT]: shouldMerge && borderMerged === 'LEFT',
+          [styles.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',
+          [styles.bordersMerged.complete.BOTTOM]: shouldMerge && borderMerged === 'BOTTOM',
+          [styles.bordersMerged.complete.ALL]: shouldMerge && borderMerged === 'ALL',
+          [styles.bordersAttach.flatCorners.TOP_LEFT]: attach === 'LEFT' || attach === 'TOP' || attach === 'ALL',
+          [styles.bordersAttach.flatCorners.BOTTOM_LEFT]: attach === 'LEFT' || attach === 'BOTTOM' || attach === 'ALL'
+        })
+      }), _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.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',
+            [styles.bordersMerged.complete.BOTTOM]: shouldMerge && borderMerged === 'BOTTOM',
+            [styles.bordersMerged.complete.ALL]: shouldMerge && borderMerged === 'ALL',
+            [styles.placeholder.mutedLabelStyles]: isEmpty || disabled,
+            [styles.placeholderPlacement[size].default]: isEmpty && !prefixed,
+            [styles.placeholderPlacement[size].defaultPrefixed]: isEmpty && prefixed,
+            [styles.placeholderPlacement[size].shifted]: !isEmpty
+          }),
+          children: placeholder
+        })
+      }), _jsx("div", {
+        className: clsx(styles.borders.trailing, borderColourClassName, borderColourClassName, {
+          [styles.bordersMerged.complete.RIGHT]: shouldMerge && borderMerged === 'RIGHT',
+          [styles.bordersMerged.complete.TOP]: shouldMerge && borderMerged === 'TOP',
+          [styles.bordersMerged.complete.BOTTOM]: shouldMerge && borderMerged === 'BOTTOM',
+          [styles.bordersMerged.complete.ALL]: shouldMerge && borderMerged === 'ALL',
+          [styles.bordersAttach.flatCorners.TOP_RIGHT]: attach === 'RIGHT' || attach === 'TOP' || attach === 'ALL',
+          [styles.bordersAttach.flatCorners.BOTTOM_RIGHT]: attach === 'RIGHT' || attach === 'BOTTOM' || attach === 'ALL'
+        })
+      })]
+    })]
+  });
 };
+
 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,123 +1,131 @@
+"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 { themeContractVars as vars } from '../../../themes/theme.css';
+import { themeContractVars as vars } from "../../../themes/theme.css.js";
 export const input = {
-    itself: styleVariants({
-        root: {
-            zIndex: 1,
-            alignSelf: 'flex-end',
-            background: 'transparent',
-            outline: 'none',
-            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',
+      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
+        }
+      }
+    }
+  }, "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");
 export const inputWrapperSize = {
-    small: {
-        root: styleVariants({
-            textarea: {
-                paddingTop: `${vars.space['2']}`,
-            },
-        }),
-    },
-    medium: {
-        root: styleVariants({
-            textarea: {
-                paddingTop: `${vars.space['2']}`,
-            },
-        }),
-    },
+  small: {
+    root: styleVariants({
+      textarea: {
+        paddingTop: "".concat(vars.space['2'])
+      }
+    }, "inputWrapperSize_small_root")
+  },
+  medium: {
+    root: styleVariants({
+      textarea: {
+        paddingTop: "".concat(vars.space['2'])
+      }
+    }, "inputWrapperSize_medium_root")
+  }
 };
 export const inputItselfSize = {
-    small: {
-        root: styleVariants({
-            any: {
-                fontSize: vars.typography.size['3'].fontSize,
-                lineHeight: vars.typography.size['3'].lineHeight,
-                padding: `${vars.space['2']}`,
-                minHeight: `calc(${vars.typography.size['3'].lineHeight} + (2* ${vars.space['2']}))`,
-            },
-            textarea: {
-                padding: `0 ${vars.space['2']} ${vars.space['2']}`,
-            },
-        }),
-        prefixed: styleVariants({
-            any: {
-                paddingLeft: `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})`,
-            },
-            textarea: {
-                paddingLeft: `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})`,
-            },
-        }),
-        suffixed: styleVariants({
-            any: {
-                paddingRight: `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})`,
-            },
-            textarea: {
-                paddingRight: `calc(${vars.space['2']} + ${vars.space['5']} + ${vars.space['2']})`,
-            },
-        }),
-    },
-    medium: {
-        root: styleVariants({
-            any: {
-                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)`,
-            },
-            textarea: {
-                padding: `${vars.space['1']} calc(${vars.space['4']} - 1px) calc(((${vars.space['8']} - ${vars.typography.size['4'].fontSize}) / 2) - 3px)`,
-            },
-        }),
-        prefixed: styleVariants({
-            any: {
-                paddingLeft: `calc((${vars.space['3']} - 1px) + (${vars.space['4']} - 1px) + ${vars.space[4]})`,
-            },
-        }),
-        suffixed: styleVariants({
-            any: {
-                paddingRight: `calc((${vars.space['3']} - 1px) + (${vars.space['4']} - 1px) + ${vars.space[4]})`,
-            },
-        }),
-    },
+  small: {
+    root: styleVariants({
+      any: {
+        fontSize: vars.typography.size['3'].fontSize,
+        lineHeight: vars.typography.size['3'].lineHeight,
+        padding: "".concat(vars.space['2']),
+        minHeight: "calc(".concat(vars.typography.size['3'].lineHeight, " + (2* ").concat(vars.space['2'], "))")
+      },
+      textarea: {
+        padding: "0 ".concat(vars.space['2'], " ").concat(vars.space['2'])
+      }
+    }, "inputItselfSize_small_root"),
+    prefixed: styleVariants({
+      any: {
+        paddingLeft: "calc(".concat(vars.space['2'], " + ").concat(vars.space['5'], " + ").concat(vars.space['2'], ")")
+      },
+      textarea: {
+        paddingLeft: "calc(".concat(vars.space['2'], " + ").concat(vars.space['5'], " + ").concat(vars.space['2'], ")")
+      }
+    }, "inputItselfSize_small_prefixed"),
+    suffixed: styleVariants({
+      any: {
+        paddingRight: "calc(".concat(vars.space['2'], " + ").concat(vars.space['5'], " + ").concat(vars.space['2'], ")")
+      },
+      textarea: {
+        paddingRight: "calc(".concat(vars.space['2'], " + ").concat(vars.space['5'], " + ").concat(vars.space['2'], ")")
+      }
+    }, "inputItselfSize_small_suffixed")
+  },
+  medium: {
+    root: styleVariants({
+      any: {
+        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)")
+      },
+      textarea: {
+        padding: "".concat(vars.space['1'], " calc(").concat(vars.space['4'], " - 1px) calc(((").concat(vars.space['8'], " - ").concat(vars.typography.size['4'].fontSize, ") / 2) - 3px)")
+      }
+    }, "inputItselfSize_medium_root"),
+    prefixed: styleVariants({
+      any: {
+        paddingLeft: "calc((".concat(vars.space['3'], " - 1px) + (").concat(vars.space['4'], " - 1px) + ").concat(vars.space[4], ")")
+      }
+    }, "inputItselfSize_medium_prefixed"),
+    suffixed: styleVariants({
+      any: {
+        paddingRight: "calc((".concat(vars.space['3'], " - 1px) + (").concat(vars.space['4'], " - 1px) + ").concat(vars.space[4], ")")
+      }
+    }, "inputItselfSize_medium_suffixed")
+  }
 };
 export const iconRoot = style({
-    zIndex: 1,
-    top: '50%',
-    transform: 'translate3d(0, -50%, 0)',
-    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s`,
-});
+  zIndex: 1,
+  top: '50%',
+  transform: 'translate3d(0, -50%, 0)',
+  transition: "color 0.2s ".concat(vars.animation.easing.decelerate, " 0s")
+}, "iconRoot");
 export const prefixIcon = style({
-    left: 0,
-});
+  left: 0
+}, "prefixIcon");
 export const suffixIcon = style({
-    right: 0,
-});
+  right: 0
+}, "suffixIcon");
 export const iconSize = styleVariants({
-    small: {
-        margin: `0 ${vars.space['2']}`,
-    },
-    medium: {
-        margin: `0 calc(${vars.space['3']} - 1px)`,
-    },
-});
+  small: {
+    margin: "0 ".concat(vars.space['2'])
+  },
+  medium: {
+    margin: "0 calc(".concat(vars.space['3'], " - 1px)")
+  }
+}, "iconSize");
+
+__vanilla_filescope__.endFileScope();