@autoguru/overdrive 4.9.4 → 4.9.5

package/dist/components/AutoSuggest/stories.js

@@ -31,6 +31,14 @@ const iconOptions = {
   StarIcon,
   CheckIcon
 };
+const attachOptions = {
+  NONE: 'NONE',
+  TOP: 'TOP',
+  RIGHT: 'RIGHT',
+  LEFT: 'LEFT',
+  BOTTOM: 'BOTTOM',
+  ALL: 'ALL'
+};
 export default {
   title: 'Components/Inputs/AutoSuggest',
   component: AutoSuggest,
@@ -53,6 +61,14 @@ export default {
         type: 'select'
       }
     },
+    attach: {
+      defaultValue: 'NONE',
+      description: 'Input attach',
+      options: attachOptions,
+      control: {
+        type: 'select'
+      }
+    },
     fieldIcon: {
       defaultValue: void 0,
       description: 'Input field Icon',

package/dist/components/ColourInput/stories.js

@@ -30,12 +30,28 @@ const iconOptions = {
   PlusIcon,
   StarIcon
 };
+const attachOptions = {
+  NONE: 'NONE',
+  TOP: 'TOP',
+  RIGHT: 'RIGHT',
+  LEFT: 'LEFT',
+  BOTTOM: 'BOTTOM',
+  ALL: 'ALL'
+};
 const argTypes = {
   value: {
     control: {
       type: 'color'
     }
   },
+  attach: {
+    defaultValue: 'NONE',
+    description: 'Input attach',
+    options: attachOptions,
+    control: {
+      type: 'select'
+    }
+  },
   suffixIcon: {
     defaultValue: null,
     description: 'Input suffix Icon',

package/dist/components/DateInput/stories.js

@@ -40,12 +40,28 @@ const iconOptions = {
   PlusIcon,
   StarIcon
 };
+const attachOptions = {
+  NONE: 'NONE',
+  TOP: 'TOP',
+  RIGHT: 'RIGHT',
+  LEFT: 'LEFT',
+  BOTTOM: 'BOTTOM',
+  ALL: 'ALL'
+};
 const argTypes = {
   value: {
     control: {
       type: 'date'
     }
   },
+  attach: {
+    defaultValue: 'NONE',
+    description: 'Input attach',
+    options: attachOptions,
+    control: {
+      type: 'select'
+    }
+  },
   prefixIcon: {
     defaultValue: null,
     description: 'Input prefix Icon',

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

@@ -1 +1 @@
-{"version":3,"file":"MinimalModal.d.ts","sourceRoot":"","sources":["../../../lib/components/MinimalModal/MinimalModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,cAAc,EACd,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,KAChB,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,EACnC,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,YAAY,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CAmEjD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MinimalModal.d.ts","sourceRoot":"","sources":["../../../lib/components/MinimalModal/MinimalModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,cAAc,EACd,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,KAChB,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,EACnC,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,YAAY,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CAqEjD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/MinimalModal/MinimalModal.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useLayoutEffect, useRef } from 'react';
-import { useEventCallback, useId } from '../../utils';
+import { isBrowser, useEventCallback, useId } from '../../utils';
 import { Box } from '../Box';
 import { Modal } from '../Modal';
 import * as styles from './MinimalModal.css';
@@ -16,12 +16,14 @@ export const MinimalModal = ({ isOpen, alignItems = 'center', className = '', on
         if (typeof onRequestClose === 'function')
             onRequestClose('backdrop');
     });
-    useLayoutEffect(() => {
-        document.body.style.overflow = isOpen ? 'hidden' : '';
-        return () => {
-            document.body.style.overflow = '';
-        };
-    }, [isOpen]);
+    if (isBrowser) {
+        useLayoutEffect(() => {
+            document.body.style.overflow = isOpen ? 'hidden' : '';
+            return () => {
+                document.body.style.overflow = '';
+            };
+        }, [isOpen]);
+    }
     return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: onRequestClose },
         React.createElement(Box, { className: [styles.container, className], height: "full", display: "flex", alignItems: alignItems, justifyContent: "center", "aria-hidden": isOpen ? 'false' : 'true', role: "none presentation", onMouseDown: unlockModal, onClick: backdropHandler },
             React.createElement(Box, { is: "article", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, display: "flex", flexDirection: "column" },

package/dist/components/NumberInput/stories.js

@@ -34,6 +34,14 @@ const iconOptions = {
   StarIcon,
   CheckIcon
 };
+const attachOptions = {
+  NONE: 'NONE',
+  TOP: 'TOP',
+  RIGHT: 'RIGHT',
+  LEFT: 'LEFT',
+  BOTTOM: 'BOTTOM',
+  ALL: 'ALL'
+};
 const argTypes = {
   prefixIcon: {
     defaultValue: null,
@@ -43,6 +51,14 @@ const argTypes = {
       type: 'select'
     }
   },
+  attach: {
+    defaultValue: 'NONE',
+    description: 'Input attach',
+    options: attachOptions,
+    control: {
+      type: 'select'
+    }
+  },
   suffixIcon: {
     defaultValue: null,
     description: 'Input suffix Icon',

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

@@ -1 +1 @@
-{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../lib/components/Portal/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAa,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID,iBAAS,MAAM,CACd,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,KAAK,EAC/C,GAAG,EAAE,GAAG,CAAC,OAAO,SAAS,CAAC,4BA2B1B;AAED,QAAA,MAAM,OAAO,mFAAqB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../lib/components/Portal/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAa,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID,iBAAS,MAAM,CACd,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,KAAK,EAC/C,GAAG,EAAE,GAAG,CAAC,OAAO,SAAS,CAAC,4BA6B1B;AAED,QAAA,MAAM,OAAO,mFAAqB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,CAAC;AAE7B,eAAe,MAAM,CAAC"}

package/dist/components/Portal/Portal.js

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import { forwardRef, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { isHtmlElement, setRef } from '../../utils';
+import { isBrowser, isHtmlElement, setRef } from '../../utils';
 import { useTheme } from '../ThemeProvider';
 function Portal({ children, container, noThemedWrapper }, ref) {
     const themeClass = useTheme()?.themeClass;
     const [mountNode, setMountNode] = useState(null);
-    useLayoutEffect(() => {
-        setMountNode(isHtmlElement(container) ? container : document.body);
-    }, [container]);
-    useLayoutEffect(() => {
-        if (mountNode) {
-            setRef(ref, mountNode);
-        }
-        return () => {
-            void setRef(ref, null);
-        };
-    }, [ref, mountNode]);
+    if (isBrowser) {
+        useLayoutEffect(() => {
+            setMountNode(isHtmlElement(container) ? container : document.body);
+        }, [container]);
+        useLayoutEffect(() => {
+            if (mountNode) {
+                setRef(ref, mountNode);
+            }
+            return () => {
+                void setRef(ref, null);
+            };
+        }, [ref, mountNode]);
+    }
     if (!mountNode)
         return null;
     return noThemedWrapper

package/dist/components/SelectInput/stories.js

@@ -39,6 +39,14 @@ const iconOptions = {
   StarIcon,
   CheckIcon
 };
+const attachOptions = {
+  NONE: 'NONE',
+  TOP: 'TOP',
+  RIGHT: 'RIGHT',
+  LEFT: 'LEFT',
+  BOTTOM: 'BOTTOM',
+  ALL: 'ALL'
+};
 const argTypes = {
   value: {
     options: valueOptions,
@@ -47,6 +55,14 @@ const argTypes = {
       type: 'select'
     }
   },
+  attach: {
+    defaultValue: 'NONE',
+    description: 'Input attach',
+    options: attachOptions,
+    control: {
+      type: 'select'
+    }
+  },
   prefixIcon: {
     defaultValue: null,
     description: 'Input prefix Icon',

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

@@ -1 +1 @@
-{"version":3,"file":"StandardModal.d.ts","sourceRoot":"","sources":["../../../lib/components/StandardModal/StandardModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,cAAc,EACd,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,oBAAY,KAAK;IAChB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AAED,aAAK,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7C,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC;IAC1D,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAoHlD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"StandardModal.d.ts","sourceRoot":"","sources":["../../../lib/components/StandardModal/StandardModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,cAAc,EACd,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,oBAAY,KAAK;IAChB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,QAAQ,aAAa;CACrB;AAED,aAAK,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE7C,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC;IAC1D,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAsHlD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/StandardModal/StandardModal.js

@@ -2,7 +2,7 @@ import { WindowCloseIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
 import { useLayoutEffect, useRef } from 'react';
-import { useEventCallback, useId } from '../../utils';
+import { isBrowser, useEventCallback, useId } from '../../utils';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { Heading } from '../Heading';
@@ -32,12 +32,14 @@ export const StandardModal = ({ isOpen, size = 'standard', className = '', title
         if (typeof onRequestClose === 'function')
             onRequestClose('backdrop');
     });
-    useLayoutEffect(() => {
-        document.body.style.overflow = isOpen ? 'hidden' : '';
-        return () => {
-            document.body.style.overflow = '';
-        };
-    }, [isOpen]);
+    if (isBrowser) {
+        useLayoutEffect(() => {
+            document.body.style.overflow = isOpen ? 'hidden' : '';
+            return () => {
+                document.body.style.overflow = '';
+            };
+        }, [isOpen]);
+    }
     return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: onRequestClose },
         React.createElement(Box, { className: styles.container, height: "full", display: "flex", alignItems: "center", justifyContent: "center", "aria-hidden": isOpen ? 'false' : 'true', role: "none presentation", onMouseDown: unlockModal, onClick: backdropHandler },
             React.createElement(Box, { is: "article", overflow: "hidden", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, display: "flex", flexDirection: "column", backgroundColour: "white", marginTop: "8", className: clsx([

package/dist/components/TextInput/stories.js

@@ -32,7 +32,23 @@ const iconOptions = {
   StarIcon,
   CheckIcon
 };
+const attachOptions = {
+  NONE: 'NONE',
+  TOP: 'TOP',
+  RIGHT: 'RIGHT',
+  LEFT: 'LEFT',
+  BOTTOM: 'BOTTOM',
+  ALL: 'ALL'
+};
 const argTypes = {
+  attach: {
+    defaultValue: 'NONE',
+    description: 'Input attach',
+    options: attachOptions,
+    control: {
+      type: 'select'
+    }
+  },
   prefixIcon: {
     defaultValue: null,
     description: 'Input prefix Icon',
@@ -85,6 +101,26 @@ const withPrefixIconProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
   prefixIcon: CalendarIcon
 });
 
+const attachedLeftProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  attach: 'LEFT'
+});
+
+const attachedTopProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  attach: 'TOP'
+});
+
+const attachedRightProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  attach: 'RIGHT'
+});
+
+const attachedBottomProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  attach: 'BOTTOM'
+});
+
+const attachedAllProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
+  attach: 'ALL'
+});
+
 const withSuffixIconProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
   suffixIcon: AccountEditIcon
 });
@@ -154,6 +190,18 @@ withSuffixIcon.argTypes = argTypes;
 export const withBothIcons = Template.bind(withBothIconsProps);
 withBothIcons.args = withBothIconsProps;
 withBothIcons.argTypes = argTypes;
+export const attachedLeft = Template.bind(attachedLeftProps);
+attachedLeft.args = attachedLeftProps;
+attachedLeft.argTypes = argTypes;
+export const attachedTop = Template.bind(attachedTopProps);
+attachedTop.args = attachedTopProps;
+attachedTop.argTypes = argTypes;
+export const attachedRight = Template.bind(attachedRightProps);
+attachedRight.args = attachedRightProps;
+attachedRight.argTypes = argTypes;
+export const attachedBottom = Template.bind(attachedBottomProps);
+attachedBottom.args = attachedBottomProps;
+attachedBottom.argTypes = argTypes;
 export const disabled = Template.bind(disabledProps);
 disabled.args = disabledProps;
 disabled.argTypes = argTypes;

package/dist/components/Toaster/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../lib/components/Toaster/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,cAAc,EAEd,iBAAiB,EACjB,SAAS,EAOT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAOjC,aAAK,WAAW,GAAG,SAAS,CAAC;AAC7B,aAAK,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;AAEpE,UAAU,aAAa;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CACjB;AAID,UAAU,OACT,SAAQ,QAAQ,CACf,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,CACtE;IACD,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChD;AA0ED,eAAO,MAAM,aAAa;;iBAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,OAwE3B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAC7B,aAAa,GAAG;IACf,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B,CA0BD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../lib/components/Toaster/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,cAAc,EAEd,iBAAiB,EACjB,SAAS,EAOT,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAOjC,aAAK,WAAW,GAAG,SAAS,CAAC;AAC7B,aAAK,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;AAEpE,UAAU,aAAa;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CACjB;AAID,UAAU,OACT,SAAQ,QAAQ,CACf,MAAM,CAAC,WAAW,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC,CACtE;IACD,CAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChD;AA0ED,eAAO,MAAM,aAAa;;iBAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,OAwE3B,CAAC;AAEF,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAC7B,aAAa,GAAG;IACf,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B,CA2BD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Toaster/Toast.js

@@ -1,6 +1,7 @@
 import { invariant } from '@autoguru/utilities';
 import * as React from 'react';
 import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useReducer, } from 'react';
+import { isBrowser } from '../../utils';
 import { Alert } from '../Alert';
 import { Box } from '../Box';
 import { Portal } from '../Portal';
@@ -108,14 +109,16 @@ const Toast = ({ remove, duration, message, id, intent }) => {
     const dismiss = useCallback(() => {
         remove(id);
     }, [id, remove]);
-    useLayoutEffect(() => {
-        const timeout = setTimeout(() => {
-            dismiss();
-        }, duration);
-        return () => {
-            clearTimeout(timeout);
-        };
-    }, [dismiss]);
+    if (isBrowser) {
+        useLayoutEffect(() => {
+            const timeout = setTimeout(() => {
+                dismiss();
+            }, duration);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }, [dismiss]);
+    }
     return (React.createElement(Alert, { dismissible: true, intent: intent, className: styles.alert, onRequestClose: dismiss }, message));
 };
 export default Toast;

package/dist/components/private/InputBase/NotchedBase.css.d.ts

@@ -9,6 +9,10 @@ export declare const borders: {
     middle: string[];
     trailing: string[];
 };
+export declare const bordersAttach: {
+    complete: Record<"NONE" | "LEFT" | "TOP" | "RIGHT" | "BOTTOM" | "ALL", string>;
+    flatCorners: Record<"TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_RIGHT" | "BOTTOM_LEFT", string>;
+};
 export declare const placeholder: Record<"default" | "mutedLabelStyles", string>;
 export declare const placeholderPlacement: any;
 //# sourceMappingURL=NotchedBase.css.d.ts.map

package/dist/components/private/InputBase/NotchedBase.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotchedBase.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/NotchedBase.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAEf,CAAC;AAcH,eAAO,MAAM,OAAO;;;;;;;;;CA6CnB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAWtB,CAAC;AA2BH,eAAO,MAAM,oBAAoB,KAiDhC,CAAC"}
+{"version":3,"file":"NotchedBase.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/NotchedBase.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAEf,CAAC;AAcH,eAAO,MAAM,OAAO;;;;;;;;;CAuCnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;CAmCzB,CAAC;AAEF,eAAO,MAAM,WAAW,gDAWtB,CAAC;AA2BH,eAAO,MAAM,oBAAoB,KAiDhC,CAAC"}

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

@@ -26,13 +26,7 @@ export const borders = {
         ],
         disabled: style({ boxShadow: 'none' }),
     },
-    complete: [
-        borderVisualDefaults,
-        borderRegionDefaults,
-        style({
-            borderRadius: `${vars.border.radius['1']}`,
-        }),
-    ],
+    complete: [borderVisualDefaults, borderRegionDefaults],
     leading: [
         borderRegionDefaults,
         style({
@@ -59,6 +53,42 @@ export const borders = {
         }),
     ],
 };
+export const bordersAttach = {
+    complete: styleVariants({
+        NONE: {
+            borderRadius: `${vars.border.radius['1']}`,
+        },
+        LEFT: {
+            borderRadius: `0 ${vars.border.radius['1']} ${vars.border.radius['1']} 0`,
+        },
+        TOP: {
+            borderRadius: `0 0 ${vars.border.radius['1']} ${vars.border.radius['1']}`,
+        },
+        RIGHT: {
+            borderRadius: `${vars.border.radius['1']} 0 0 ${vars.border.radius['1']}`,
+        },
+        BOTTOM: {
+            borderRadius: `${vars.border.radius['1']} ${vars.border.radius['1']} 0 0`,
+        },
+        ALL: {
+            borderRadius: 0,
+        },
+    }),
+    flatCorners: styleVariants({
+        TOP_LEFT: {
+            borderTopLeftRadius: 0,
+        },
+        TOP_RIGHT: {
+            borderTopRightRadius: 0,
+        },
+        BOTTOM_RIGHT: {
+            borderBottomRightRadius: 0,
+        },
+        BOTTOM_LEFT: {
+            borderBottomLeftRadius: 0,
+        },
+    }),
+};
 export const placeholder = styleVariants({
     default: {
         lineHeight: 1,

package/dist/components/private/InputBase/NotchedBase.d.ts

@@ -12,6 +12,7 @@ export interface Props {
     size: keyof typeof styles.placeholderPlacement;
     className?: string;
     children?: ReactNode;
+    attach?: keyof typeof styles.bordersAttach['complete'];
 }
 export declare const NotchedBase: FunctionComponent<Props>;
 //# sourceMappingURL=NotchedBase.d.ts.map

package/dist/components/private/InputBase/NotchedBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotchedBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/NotchedBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,iBAAiB,EACjB,SAAS,EAIT,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAM5C,MAAM,WAAW,KAAK;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,0BAA0B,EAAE,MAAM,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,MAAM,CAAC,oBAAoB,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CA2GhD,CAAC"}
+{"version":3,"file":"NotchedBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/NotchedBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,iBAAiB,EACjB,SAAS,EAIT,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAC;AAM5C,MAAM,WAAW,KAAK;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,0BAA0B,EAAE,MAAM,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,OAAO,MAAM,CAAC,oBAAoB,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,KAAK,CA8IhD,CAAC"}

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

@@ -7,7 +7,7 @@ import * as styles from './NotchedBase.css';
 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 = '', }) => {
+export const NotchedBase = ({ id, placeholder, isEmpty, disabled, prefixed, size, children, notch = true, borderColourClassName, placeholderColourClassName, className = '', attach = 'NONE', }) => {
     const labelStyles = useTextStyles({
         noWrap: true,
         size: '4',
@@ -20,12 +20,26 @@ export const NotchedBase = ({ id, placeholder, isEmpty, disabled, prefixed, size
         }
     }, [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) },
+    return (React.createElement(Box, { position: "relative", width: "full", padding: "none", className: clsx(styles.root, !notch && [styles.borders.complete, borderColourClassName], className, {
+            [styles.bordersAttach.complete.NONE]: !notch && !attach,
+            [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) }),
+            React.createElement("div", { className: clsx(styles.borders.leading, borderColourClassName, {
+                    [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.placeholder.mutedLabelStyles]: isEmpty || disabled,
@@ -34,7 +48,14 @@ export const NotchedBase = ({ id, placeholder, isEmpty, disabled, prefixed, size
                             .defaultPrefixed]: isEmpty && prefixed,
                         [styles.placeholderPlacement[size].shifted]: !isEmpty,
                     }) }, placeholder)),
-            React.createElement("div", { className: clsx(styles.borders.trailing, borderColourClassName) })))));
+            React.createElement("div", { className: clsx(styles.borders.trailing, borderColourClassName, borderColourClassName, {
+                    [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);

package/dist/components/private/InputBase/withEnhancedInput.d.ts

@@ -1,6 +1,7 @@
 import { IconType } from '@autoguru/icons';
 import * as React from 'react';
-import { AriaAttributes, ChangeEventHandler, ComponentType, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, MutableRefObject, ReactNode, Ref } from 'react';
+import { AriaAttributes, ChangeEventHandler, ComponentProps, ComponentType, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, MutableRefObject, ReactNode, Ref } from 'react';
+import { NotchedBase } from './NotchedBase';
 import * as styles from './withEnhancedInput.css';
 export interface EventHandlers<PrimitiveElementType> {
     onChange?: ChangeEventHandler<PrimitiveElementType>;
@@ -12,16 +13,14 @@ export interface EventHandlers<PrimitiveElementType> {
     onMouseLeave?: MouseEventHandler<PrimitiveElementType>;
     onReset?(): void;
 }
-export interface EnhanceInputPrimitiveProps extends AriaAttributes {
+export interface EnhanceInputPrimitiveProps extends AriaAttributes, Pick<ComponentProps<typeof NotchedBase>, 'notch' | 'placeholder' | 'attach'> {
     name: string;
-    placeholder: string;
     id?: string;
     className?: string;
     value?: string;
     hintText?: ReactNode;
     autoFocus?: boolean;
     disabled?: boolean;
-    notch?: boolean;
     reserveHintSpace?: boolean;
     size?: keyof typeof styles.inputItselfSize;
     fieldIcon?: IconType;
@@ -49,7 +48,7 @@ export declare type WrappedComponentProps<IncomingProps, PrimitiveElementType> =
     prefixed: boolean;
     suffixed: boolean;
     isLoading: boolean;
-} & IncomingProps;
+} & IncomingProps & Pick<ComponentProps<typeof NotchedBase>, 'attach'>;
 interface EnhancedInputConfigs<ValueType = string> {
     defaultValue?: ValueType;
     withPrefixIcon?: boolean;

package/dist/components/private/InputBase/withEnhancedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}

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

@@ -10,7 +10,7 @@ import { HintText } from './HintText';
 import * as inputStateStyles from './InputState.css';
 import { NotchedBase } from './NotchedBase';
 import * as styles from './withEnhancedInput.css';
-export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, defaultValue, } = { primitiveType: 'text', defaultValue: void 0 }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, size = 'medium', value: incomingValue = defaultValue || '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, ...rest }, ref) => {
+export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, defaultValue, } = { primitiveType: 'text', defaultValue: void 0 }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, size = 'medium', value: incomingValue = defaultValue || '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, attach, ...rest }, ref) => {
     invariant(!(prefixIcon && !withPrefixIcon), 'prefix icon is not supported for this component');
     invariant(!(suffixIcon && !withSuffixIcon), 'suffix icon is not supported for this component');
     const [value, onChange] = useInputControlledState(incomingValue, incomingOnChange);
@@ -83,7 +83,7 @@ export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', w
         position: 'absolute',
     });
     return (React.createElement(Box, { width: "full", className: className, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut },
-        React.createElement(NotchedBase, { id: id, prefixed: Boolean(prefixIcon), isEmpty: isEmpty, size: size, disabled: disabled, notch: notch, placeholder: placeholder, placeholderColourClassName: clsx({
+        React.createElement(NotchedBase, { id: id, prefixed: Boolean(prefixIcon), isEmpty: isEmpty, size: size, disabled: disabled, notch: notch, placeholder: placeholder, attach: attach, placeholderColourClassName: clsx({
                 [derivedColours.colour]: !isEmpty,
             }), borderColourClassName: derivedColours.borderColour },
             React.createElement(Box, { ref: wrapperRef, className: styles.inputWrapperSize[size].root[primitiveType], width: "full", height: "full" },

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

@@ -1 +1 @@
-{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useMedia/useMedia.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGvD,eAAO,MAAM,QAAQ,YACX,cAAc,MAAM,WAAW,CAAC,6BAEvC,SAAS,OAAO,EA2ClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useMedia/useMedia.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGvD,eAAO,MAAM,QAAQ,YACX,cAAc,MAAM,WAAW,CAAC,6BAEvC,SAAS,OAAO,EA+ClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/hooks/useMedia/useMedia.js

@@ -8,27 +8,29 @@ export const useMedia = (queries, fallbackCase = false) => {
     const getQueries = useCallback(() => queries.map((media) => `(min-width: ${breakpoints[media]})`), [breakpoints]);
     const matchesInit = useMemo(() => getQueries().map((query) => window.matchMedia(query).matches), [getQueries]);
     const [matches, setMatches] = useState(matchesInit);
-    useLayoutEffect(() => {
-        let isMounted = true;
-        const matchers = getQueries().map((query) => window.matchMedia(query));
-        const removeHandlersFn = matchers.map((matcher, idx) => {
-            const handler = (e) => {
-                if (!isMounted)
-                    return;
-                setMatches((prevState) => {
-                    const newState = [...prevState];
-                    newState[idx] = e.matches;
-                    return newState;
-                });
+    if (isBrowser) {
+        useLayoutEffect(() => {
+            let isMounted = true;
+            const matchers = getQueries().map((query) => window.matchMedia(query));
+            const removeHandlersFn = matchers.map((matcher, idx) => {
+                const handler = (e) => {
+                    if (!isMounted)
+                        return;
+                    setMatches((prevState) => {
+                        const newState = [...prevState];
+                        newState[idx] = e.matches;
+                        return newState;
+                    });
+                };
+                matcher.addEventListener('change', handler, { passive: true });
+                return () => matcher.removeEventListener('change', handler);
+            });
+            return () => {
+                isMounted = false;
+                removeHandlersFn.forEach((item) => item());
             };
-            matcher.addEventListener('change', handler, { passive: true });
-            return () => matcher.removeEventListener('change', handler);
-        });
-        return () => {
-            isMounted = false;
-            removeHandlersFn.forEach((item) => item());
-        };
-    }, [...queries, breakpoints]);
+        }, [...queries, breakpoints]);
+    }
     return matches;
 };
 export default useMedia;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.9.4",
+	"version": "4.9.5",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",