@autoguru/overdrive 4.1.4 → 4.1.5

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

@@ -1,65 +1,53 @@
-"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.js";
+import { vars } from '../../../themes/base/vars.css';
 const iconRoot = style({
-  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");
+    top: '50%',
+    transform: 'translate3d(0, -50%, 0)',
+    transition: `color 0.2s ${vars.animation.easing.decelerate} 0s`,
+    margin: `0 calc(${vars.space['3']} - 1px)`,
+});
 export const icon = {
-  prefix: [iconRoot, style({
-    left: 0
-  }, "icon_prefix")],
-  suffix: [iconRoot, style({
-    right: 0
-  }, "icon_suffix")]
+    prefix: [iconRoot, style({ left: 0 })],
+    suffix: [iconRoot, style({ right: 0 })],
 };
 export const input = {
-  itself: styleVariants({
-    root: {
-      zIndex: 1,
-      alignSelf: 'flex-end',
-      background: 'transparent',
-      outline: 'none',
-      fontSize: vars.typography.size['4'].fontSize,
-      lineHeight: 1,
-      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'
+    itself: styleVariants({
+        root: {
+            zIndex: 1,
+            alignSelf: 'flex-end',
+            background: 'transparent',
+            outline: 'none',
+            fontSize: vars.typography.size['4'].fontSize,
+            lineHeight: 1,
+            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,
+                },
+            },
         },
-        '&::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")
+        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]})`,
+        },
+    }),
 };
 const textAreaHeight = '107px';
 export const types = styleVariants({
-  textarea: {
-    height: textAreaHeight,
-    minHeight: textAreaHeight,
-    lineHeight: 1.2,
-    resize: 'vertical'
-  }
-}, "types");
-
-__vanilla_filescope__.endFileScope();
+    textarea: {
+        height: textAreaHeight,
+        minHeight: textAreaHeight,
+        lineHeight: 1.2,
+        resize: 'vertical',
+    },
+});

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

@@ -0,0 +1,57 @@
+import { IconType } from '@autoguru/icons';
+import * as React from 'react';
+import { AriaAttributes, ChangeEventHandler, ComponentType, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, MutableRefObject, ReactNode, Ref } from 'react';
+export interface EventHandlers<PrimitiveElementType> {
+    onChange?: ChangeEventHandler<PrimitiveElementType>;
+    onBlur?: FocusEventHandler<PrimitiveElementType>;
+    onFocus?: FocusEventHandler<PrimitiveElementType>;
+    onKeyDown?: KeyboardEventHandler<PrimitiveElementType>;
+    onClick?: MouseEventHandler<PrimitiveElementType>;
+    onMouseEnter?: MouseEventHandler<PrimitiveElementType>;
+    onMouseLeave?: MouseEventHandler<PrimitiveElementType>;
+    onReset?(): void;
+}
+export interface EnhanceInputPrimitiveProps extends AriaAttributes {
+    name: string;
+    placeholder: string;
+    id?: string;
+    className?: string;
+    value?: string;
+    hintText?: ReactNode;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    notch?: boolean;
+    reserveHintSpace?: boolean;
+    fieldIcon?: IconType;
+    prefixIcon?: IconType;
+    suffixIcon?: IconType;
+    wrapperRef?: Ref<HTMLDivElement>;
+    isLoading?: boolean;
+    isFocused?: boolean;
+}
+export interface ValidationProps {
+    isTouched?: boolean;
+    isValid?: boolean;
+}
+export declare type EnhanceInputProps<IncomingProps, PrimitiveElementType> = IncomingProps & EnhanceInputPrimitiveProps & EventHandlers<PrimitiveElementType> & ValidationProps;
+export declare type WrappedComponentProps<IncomingProps, PrimitiveElementType> = {
+    validation: ValidationProps;
+    eventHandlers: EventHandlers<PrimitiveElementType>;
+    field: Omit<EnhanceInputPrimitiveProps, 'placeholder' | 'hintText' | 'fieldIcon'> & {
+        ref: MutableRefObject<PrimitiveElementType>;
+    };
+    fieldIcon?: EnhanceInputPrimitiveProps['fieldIcon'];
+    isFocused?: boolean;
+    className?: boolean;
+    prefixed: boolean;
+    suffixed: boolean;
+    isLoading: boolean;
+} & IncomingProps;
+interface EnhancedInputConfigs {
+    withPrefixIcon?: boolean;
+    withSuffixIcon?: boolean;
+    primitiveType: 'textarea' | 'text' | 'number' | 'date' | 'select';
+}
+export declare const withEnhancedInput: <IncomingProps extends {} = {}, PrimitiveElementType extends HTMLElement = HTMLInputElement>(WrappingComponent: React.ComponentType<WrappedComponentProps<IncomingProps, PrimitiveElementType>>, { primitiveType, withPrefixIcon, withSuffixIcon, }?: EnhancedInputConfigs) => React.ForwardRefExoticComponent<React.PropsWithoutRef<EnhanceInputProps<IncomingProps, PrimitiveElementType>> & React.RefAttributes<PrimitiveElementType>>;
+export {};
+//# sourceMappingURL=withEnhancedInput.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -1,196 +1,109 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["placeholder", "name", "id", "hintText", "disabled", "className", "isTouched", "isValid", "isLoading", "notch", "reserveHintSpace", "value", "onChange", "onReset", "onMouseLeave", "onMouseEnter", "onBlur", "onFocus", "onKeyDown", "prefixIcon", "suffixIcon", "wrapperRef", "autoFocus"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import { invariant, wrapEvent } from '@autoguru/utilities';
 import clsx from 'clsx';
 import * as React from 'react';
-import { forwardRef, useCallback, useState } from 'react';
-import { useInputControlledState } from "../../../utils/index.js";
-import { Box, useBoxStyles } from "../../Box/index.js";
-import { Icon } from "../../Icon/index.js";
-import { ProgressSpinner } from "../../ProgressSpinner/index.js";
-import { HintText } from "./HintText.js";
-import * as inputStateStyles from "./InputState.css.js";
-import { NotchedBase } from "./NotchedBase.js";
-import * as styles from "./withEnhancedInput.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export const withEnhancedInput = function withEnhancedInput(WrappingComponent) {
-  let {
-    primitiveType = 'text',
-    withPrefixIcon = true,
-    withSuffixIcon = true
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    primitiveType: 'text'
-  };
-  return forwardRef((_ref, ref) => {
-    let {
-      placeholder,
-      name,
-      id = name,
-      hintText,
-      disabled = false,
-      className,
-      isTouched,
-      isValid,
-      isLoading = false,
-      notch = true,
-      reserveHintSpace = false,
-      value: incomingValue = '',
-      onChange: incomingOnChange,
-      onReset,
-      onMouseLeave,
-      onMouseEnter,
-      onBlur,
-      onFocus,
-      onKeyDown,
-      prefixIcon,
-      suffixIcon,
-      wrapperRef,
-      autoFocus
-    } = _ref,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    !!(prefixIcon && !withPrefixIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, 'prefix icon is not supported for this component') : invariant(false) : void 0;
-    !!(suffixIcon && !withSuffixIcon) ? process.env.NODE_ENV !== "production" ? invariant(false, 'suffix icon is not supported for this component') : invariant(false) : void 0;
+import { forwardRef, useCallback, useState, } from 'react';
+import { useInputControlledState } from '../../../utils';
+import { Box, useBoxStyles } from '../../Box';
+import { Icon } from '../../Icon';
+import { ProgressSpinner } from '../../ProgressSpinner';
+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, } = { primitiveType: 'text' }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, value: incomingValue = '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, ...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);
     const [isActive, setActive] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
     const isEmpty = primitiveType === 'date' && value === '' ? false : value === '';
     const derivedColours = derivedColourIntent({
-      isValid,
-      isHovered,
-      isActive,
-      isTouched,
-      disabled
+        isValid,
+        isHovered,
+        isActive,
+        isTouched,
+        disabled,
     }, inputStateStyles);
     const inputItselfClassName = clsx(useBoxStyles({
-      is: primitiveType === 'textarea' ? 'textarea' : 'input',
-      width: 'full',
-      position: 'relative',
-      display: 'flex'
+        is: primitiveType === 'textarea' ? 'textarea' : 'input',
+        width: 'full',
+        position: 'relative',
+        display: 'flex',
     }), styles.types[primitiveType], styles.input.itself.root, {
-      [styles.input.itself.prefixed]: Boolean(prefixIcon),
-      [styles.input.itself.suffixed]: Boolean(suffixIcon || isLoading)
+        [styles.input.itself.prefixed]: Boolean(prefixIcon),
+        [styles.input.itself.suffixed]: Boolean(suffixIcon || isLoading),
     });
-
-    const wrappingComponent = _objectSpread({
-      validation: {
-        isTouched,
-        isValid
-      },
-      eventHandlers: {
-        onChange: wrapEvent(event => {
-          if (disabled) {
-            event.preventDefault();
-            return false;
-          }
-
-          return true;
-        }, onChange),
-        onFocus: wrapEvent(() => setActive(true), onFocus),
-        onBlur: wrapEvent(() => setActive(false), onBlur),
-        onMouseEnter,
-        onMouseLeave,
-        onKeyDown,
-        onReset
-      },
-      field: {
-        name,
-        id,
-        disabled,
-        value,
-        autoFocus,
-        className: inputItselfClassName,
-        placeholder: notch ? undefined : placeholder,
-        ref
-      },
-      prefixed: Boolean(prefixIcon),
-      suffixed: Boolean(suffixIcon),
-      isLoading,
-      'aria-busy': isLoading || void 0
-    }, rest);
-
+    const wrappingComponent = {
+        validation: {
+            isTouched,
+            isValid,
+        },
+        eventHandlers: {
+            onChange: wrapEvent((event) => {
+                if (disabled) {
+                    event.preventDefault();
+                    return false;
+                }
+                return true;
+            }, onChange),
+            onFocus: wrapEvent(() => setActive(true), onFocus),
+            onBlur: wrapEvent(() => setActive(false), onBlur),
+            onMouseEnter,
+            onMouseLeave,
+            onKeyDown,
+            onReset,
+        },
+        field: {
+            name,
+            id,
+            disabled,
+            value,
+            autoFocus,
+            className: inputItselfClassName,
+            placeholder: notch ? undefined : placeholder,
+            ref,
+        },
+        prefixed: Boolean(prefixIcon),
+        suffixed: Boolean(suffixIcon),
+        isLoading,
+        'aria-busy': isLoading || void 0,
+        ...rest,
+    };
     const onMouseOver = useCallback(() => {
-      setIsHovered(true);
+        setIsHovered(true);
     }, []);
     const onMouseOut = useCallback(() => {
-      setIsHovered(false);
+        setIsHovered(false);
     }, []);
     const iconStyles = useBoxStyles({
-      pointerEvents: 'none',
-      position: 'absolute'
+        pointerEvents: 'none',
+        position: 'absolute',
     });
-    return _jsxs(Box, {
-      width: "full",
-      className: className,
-      onMouseEnter: onMouseOver,
-      onMouseLeave: onMouseOut,
-      children: [_jsx(NotchedBase, {
-        id: id,
-        prefixed: Boolean(prefixIcon),
-        isEmpty: isEmpty,
-        disabled: disabled,
-        notch: notch,
-        placeholder: placeholder,
-        placeholderColourClassName: clsx({
-          [derivedColours.colour]: !isEmpty
-        }),
-        borderColourClassName: derivedColours.borderColour,
-        children: _jsxs(Box, {
-          ref: wrapperRef,
-          width: "full",
-          height: "full",
-          children: [prefixIcon ? _jsx(Icon, {
-            icon: prefixIcon,
-            size: "medium",
-            className: clsx(iconStyles, styles.icon.prefix, derivedColours.colour)
-          }) : null, isLoading ? _jsx(ProgressSpinner, {
-            className: clsx(iconStyles, styles.icon.suffix, derivedColours.colour)
-          }) : null, suffixIcon && !isLoading ? _jsx(Icon, {
-            icon: suffixIcon,
-            size: "medium",
-            className: clsx(iconStyles, styles.icon.suffix, derivedColours.colour)
-          }) : null, _jsx(WrappingComponent, _objectSpread({}, wrappingComponent))]
-        })
-      }), hintText || reserveHintSpace ? _jsx(HintText, {
-        className: derivedColours.colour,
-        hintText: hintText,
-        disabled: disabled,
-        reserveHintSpace: reserveHintSpace
-      }) : null]
-    });
-  });
+    return (React.createElement(Box, { width: "full", className: className, onMouseEnter: onMouseOver, onMouseLeave: onMouseOut },
+        React.createElement(NotchedBase, { id: id, prefixed: Boolean(prefixIcon), isEmpty: isEmpty, disabled: disabled, notch: notch, placeholder: placeholder, placeholderColourClassName: clsx({
+                [derivedColours.colour]: !isEmpty,
+            }), borderColourClassName: derivedColours.borderColour },
+            React.createElement(Box, { ref: wrapperRef, width: "full", height: "full" },
+                prefixIcon ? (React.createElement(Icon, { icon: prefixIcon, size: "medium", className: clsx(iconStyles, styles.icon.prefix, derivedColours.colour) })) : null,
+                isLoading ? (React.createElement(ProgressSpinner, { className: clsx(iconStyles, styles.icon.suffix, derivedColours.colour) })) : null,
+                suffixIcon && !isLoading ? (React.createElement(Icon, { icon: suffixIcon, size: "medium", className: clsx(iconStyles, styles.icon.suffix, derivedColours.colour) })) : null,
+                React.createElement(WrappingComponent, { ...wrappingComponent }))),
+        hintText || reserveHintSpace ? (React.createElement(HintText, { className: derivedColours.colour, hintText: hintText, disabled: disabled, reserveHintSpace: reserveHintSpace })) : null));
+});
+const stateNodeGetter = (styles) => (isHovered, isActive) => {
+    if (isHovered)
+        return styles.hover;
+    if (isActive)
+        return styles.active;
+    return styles.default;
 };
-
-const stateNodeGetter = styles => (isHovered, isActive) => {
-  if (isHovered) return styles.hover;
-  if (isActive) return styles.active;
-  return styles.default;
-};
-
-const derivedColourIntent = (_ref2, styles) => {
-  let {
-    isTouched,
-    isValid,
-    disabled,
-    isHovered,
-    isActive
-  } = _ref2;
-  if (disabled) return styles.disabled;
-
-  if (isTouched === true) {
-    const node = stateNodeGetter(isValid ? styles.success : styles.error);
+const derivedColourIntent = ({ isTouched, isValid, disabled, isHovered, isActive }, styles) => {
+    if (disabled)
+        return styles.disabled;
+    if (isTouched === true) {
+        const node = stateNodeGetter(isValid ? styles.success : styles.error);
+        return node(isHovered, isActive);
+    }
+    const node = stateNodeGetter(isActive ? styles.active : styles.natural);
     return node(isHovered, isActive);
-  }
-
-  const node = stateNodeGetter(isActive ? styles.active : styles.natural);
-  return node(isHovered, isActive);
-};
+};

package/dist/hooks/useAttachedBoxes/index.d.ts

@@ -0,0 +1,2 @@
+export { useAttachedBoxes } from './useAttachedBoxes';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useAttachedBoxes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useAttachedBoxes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/hooks/useAttachedBoxes/index.js

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

package/dist/hooks/useAttachedBoxes/useAttachedBoxes.css.d.ts

@@ -0,0 +1,9 @@
+export declare const grid: {
+    default: string;
+    gaps: Record<string | number, any>;
+    topLeft: string;
+    topRight: string;
+    bottomRight: string;
+    bottomLeft: string;
+};
+//# sourceMappingURL=useAttachedBoxes.css.d.ts.map

package/dist/hooks/useAttachedBoxes/useAttachedBoxes.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAttachedBoxes.css.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useAttachedBoxes/useAttachedBoxes.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI;;;;;;;CAiBhB,CAAC"}

package/dist/hooks/useAttachedBoxes/useAttachedBoxes.css.js

@@ -1,29 +1,21 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/hooks/useAttachedBoxes/useAttachedBoxes.css.ts", "@autoguru/overdrive");
-
 import { style } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
-import { makeResponsiveStyle } from "../../utils/responsiveProps.css.js";
+import { vars } from '../../themes/base/vars.css';
+import { makeResponsiveStyle } from '../../utils/responsiveProps.css';
 export const grid = {
-  default: style({
-    display: 'grid'
-  }, "grid_default"),
-  gaps: makeResponsiveStyle(vars.space, 'gridGap'),
-  topLeft: style({
-    borderTopLeftRadius: vars.border.radius['1']
-  }, "grid_topLeft"),
-  topRight: style({
-    borderTopRightRadius: vars.border.radius['1']
-  }, "grid_topRight"),
-  bottomRight: style({
-    borderBottomRightRadius: vars.border.radius['1']
-  }, "grid_bottomRight"),
-  bottomLeft: style({
-    borderBottomLeftRadius: vars.border.radius['1']
-  }, "grid_bottomLeft")
+    default: style({
+        display: 'grid',
+    }),
+    gaps: makeResponsiveStyle(vars.space, 'gridGap'),
+    topLeft: style({
+        borderTopLeftRadius: vars.border.radius['1'],
+    }),
+    topRight: style({
+        borderTopRightRadius: vars.border.radius['1'],
+    }),
+    bottomRight: style({
+        borderBottomRightRadius: vars.border.radius['1'],
+    }),
+    bottomLeft: style({
+        borderBottomLeftRadius: vars.border.radius['1'],
+    }),
 };
-
-__vanilla_filescope__.endFileScope();

package/dist/hooks/useAttachedBoxes/useAttachedBoxes.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { Box } from '../../components';
+import { ResponsiveProp } from '../../utils/responsiveProps.css';
+import * as styles from './useAttachedBoxes.css';
+interface Props extends Pick<ComponentProps<typeof Box>, 'backgroundColour'> {
+    count: number;
+    columnCount: ResponsiveProp<number>;
+    gap?: ResponsiveProp<keyof typeof styles.grid.gaps>;
+}
+declare type AttachedBoxProps = Omit<ComponentProps<typeof Box>, 'borderRadius'>;
+declare type Returns = [
+    boxes: FunctionComponent<AttachedBoxProps>[],
+    wrapperCls: string,
+    style: ComponentProps<typeof Box>['style']
+];
+export declare const useAttachedBoxes: ({ count, columnCount: incomingColumnCount, gap, backgroundColour, }: Props) => Returns;
+export {};
+//# sourceMappingURL=useAttachedBoxes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAttachedBoxes.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useAttachedBoxes/useAttachedBoxes.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAKvC,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,KAAK,MAAM,MAAM,wBAAwB,CAAC;AAEjD,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACpC,GAAG,CAAC,EAAE,cAAc,CAAC,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;CACpD;AAED,aAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC;AAiBzE,aAAK,OAAO,GAAG;IACd,KAAK,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,EAAE;IAC5C,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC;CAC1C,CAAC;AACF,eAAO,MAAM,gBAAgB,wEAK1B,KAAK,YA0DP,CAAC"}