@autoguru/overdrive 4.33.1 → 4.35.0

package/dist/components/TextInput/stories.js

@@ -1,260 +0,0 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CheckIcon, CurrencyUsdIcon, PlusIcon, StarIcon } from '@autoguru/icons';
-import { action } from '@storybook/addon-actions';
-import * as React from 'react';
-import { boxArgTypes } from "../Box/argTypes.js";
-import { TextInput } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Components/Inputs/Text',
-  component: TextInput,
-  parameters: {
-    chromatic: {}
-  }
-};
-const defaultValue = 'Jane Doe';
-const defaultPlaceholder = 'What is your first name?';
-const iconOptions = {
-  CalendarIcon,
-  AccountEditIcon,
-  AlertCircleIcon,
-  CarMultipleIcon,
-  CurrencyUsdIcon,
-  PlusIcon,
-  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',
-    options: iconOptions,
-    control: {
-      type: 'select'
-    }
-  },
-  suffixIcon: {
-    defaultValue: null,
-    description: 'Input suffix Icon',
-    options: iconOptions,
-    control: {
-      type: 'select'
-    }
-  },
-  backgroundColour: boxArgTypes['backgroundColour'],
-  maxLength: {
-    defaultValue: null,
-    description: 'Set the max length of the input',
-    control: {
-      type: 'number'
-    }
-  }
-};
-const Template = args => _jsx(TextInput, _objectSpread({}, args));
-const sharedProps = {
-  disabled: false,
-  name: 'text',
-  placeholder: defaultPlaceholder,
-  isValid: false,
-  isTouched: false,
-  isLoading: false,
-  isFocused: false,
-  reserveHintSpace: false,
-  hintText: '',
-  notch: true,
-  prefixIcon: void 0,
-  onChange: action('onChange'),
-  onFocus: action('onFocus'),
-  onBlur: action('onBlur')
-};
-const standardProps = sharedProps;
-const withAValueProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  value: defaultValue,
-  placeholder: defaultPlaceholder
-});
-const withHintTextProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  hintText: 'Hint Text',
-  placeholder: defaultPlaceholder
-});
-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 mergedLeftProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  borderMerged: 'LEFT'
-});
-const mergedTopProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  borderMerged: 'TOP'
-});
-const mergedRightProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  borderMerged: 'RIGHT'
-});
-const mergedBottomProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  borderMerged: 'BOTTOM'
-});
-const mergedAllProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  borderMerged: 'ALL'
-});
-const withSuffixIconProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  suffixIcon: AccountEditIcon
-});
-const withBothIconsProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  prefixIcon: CalendarIcon,
-  suffixIcon: AccountEditIcon
-});
-const disabledProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  value: defaultValue,
-  placeholder: defaultPlaceholder,
-  disabled: true
-});
-const validProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  value: defaultValue,
-  placeholder: defaultPlaceholder,
-  isTouched: true,
-  isValid: true
-});
-const invalidProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  value: 'Bob the builder',
-  placeholder: defaultPlaceholder,
-  isTouched: true,
-  isValid: false,
-  hintText: 'Cannot be Bob the builder'
-});
-const noNotchProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  placeholder: defaultPlaceholder,
-  notch: false
-});
-const noNotchWithValueProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  value: defaultValue,
-  placeholder: defaultPlaceholder,
-  notch: false
-});
-const loadingProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
-  isLoading: true
-});
-export const standard = Template.bind(standardProps);
-standard.args = standardProps;
-standard.argTypes = argTypes;
-export const withAValue = Template.bind(withAValueProps);
-withAValue.args = withAValueProps;
-withAValue.argTypes = argTypes;
-export const withHintText = Template.bind(withHintTextProps);
-withHintText.args = withHintTextProps;
-withHintText.argTypes = argTypes;
-export const notchDisabled = Template.bind(noNotchProps);
-notchDisabled.args = noNotchProps;
-notchDisabled.argTypes = argTypes;
-export const notchDisabledWithValue = Template.bind(noNotchWithValueProps);
-notchDisabledWithValue.args = noNotchWithValueProps;
-notchDisabledWithValue.argTypes = argTypes;
-export const withPrefixIcon = Template.bind(withPrefixIconProps);
-withPrefixIcon.args = withPrefixIconProps;
-withPrefixIcon.argTypes = argTypes;
-export const withSuffixIcon = Template.bind(withSuffixIconProps);
-withSuffixIcon.args = withSuffixIconProps;
-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 attachedAll = Template.bind(attachedAllProps);
-attachedAll.args = attachedAllProps;
-attachedAll.argTypes = argTypes;
-export const mergedLeft = Template.bind(mergedLeftProps);
-mergedLeft.args = mergedLeftProps;
-mergedLeft.argTypes = argTypes;
-export const mergedTop = Template.bind(mergedTopProps);
-mergedTop.args = mergedTopProps;
-mergedTop.argTypes = argTypes;
-export const mergedRight = Template.bind(mergedRightProps);
-mergedRight.args = mergedRightProps;
-mergedRight.argTypes = argTypes;
-export const mergedBottom = Template.bind(mergedBottomProps);
-mergedBottom.args = mergedBottomProps;
-mergedBottom.argTypes = argTypes;
-export const mergedAll = Template.bind(mergedAllProps);
-mergedAll.args = mergedAllProps;
-mergedAll.argTypes = argTypes;
-export const disabled = Template.bind(disabledProps);
-disabled.args = disabledProps;
-disabled.argTypes = argTypes;
-export const valid = Template.bind(validProps);
-valid.args = validProps;
-valid.argTypes = argTypes;
-export const invalid = Template.bind(invalidProps);
-invalid.args = invalidProps;
-invalid.argTypes = argTypes;
-export const loading = Template.bind(loadingProps);
-loading.args = loadingProps;
-loading.argTypes = argTypes;
-const smallProps = _objectSpread(_objectSpread({}, standardProps), {}, {
-  size: 'small'
-});
-export const small = Template.bind(smallProps);
-small.args = smallProps;
-small.argTypes = argTypes;
-const withValueSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
-  size: 'small'
-});
-export const withValueSmall = Template.bind(withValueSmallProps);
-withValueSmall.args = withValueSmallProps;
-withValueSmall.argTypes = argTypes;
-const withIconSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
-  prefixIcon: CarIcon,
-  size: 'small'
-});
-export const withIconSmall = Template.bind(withIconSmallProps);
-withIconSmall.args = withIconSmallProps;
-withIconSmall.argTypes = argTypes;
-const loadingSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
-  isLoading: true,
-  size: 'small'
-});
-export const loadingSmall = Template.bind(loadingSmallProps);
-loadingSmall.args = loadingSmallProps;
-loadingSmall.argTypes = argTypes;

package/dist/components/TextLink/stories.js

@@ -1,111 +0,0 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { ArrowRightIcon, ChevronRightIcon } from '@autoguru/icons';
-import * as React from 'react';
-import { Box } from "../Box/index.js";
-import { Text } from "../Text/index.js";
-import { TextLink } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const sizeScale = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
-const alignOptions = ['left', 'center', 'right'];
-const fontWeightOptions = ['normal', 'semiBold', 'bold'];
-const iconOptions = {
-  ArrowRightIcon,
-  ChevronRightIcon
-};
-const noWrapOptions = [false, true];
-const transformOptions = ['uppercase', 'capitalize', undefined];
-export default {
-  title: 'Foundation/Typography/TextLink',
-  decorators: [story => _jsx("div", {
-    style: {
-      width: '100%',
-      maxWidth: 300,
-      display: 'grid',
-      gridTemplateColumns: '1fr'
-    },
-    children: story()
-  })],
-  argTypes: {
-    icon: {
-      defaultValue: void 0,
-      description: 'Input field Icon',
-      options: iconOptions,
-      control: {
-        type: 'select'
-      }
-    },
-    noWrap: {
-      options: noWrapOptions,
-      defaultValue: false,
-      control: {
-        type: 'boolean'
-      }
-    },
-    transform: {
-      options: transformOptions,
-      defaultValue: null,
-      control: {
-        type: 'select'
-      }
-    },
-    fontWeight: {
-      options: fontWeightOptions,
-      defaultValue: null,
-      control: {
-        type: 'select'
-      }
-    },
-    size: {
-      options: sizeScale,
-      defaultValue: void 0,
-      control: {
-        type: 'select'
-      }
-    },
-    align: {
-      options: alignOptions,
-      defaultValue: 'left',
-      control: {
-        type: 'select'
-      }
-    },
-    is: {
-      control: {
-        disable: true
-      }
-    }
-  }
-};
-const Template = args => _jsx(Box, {
-  children: _jsx(TextLink, _objectSpread(_objectSpread({}, args), {}, {
-    children: "Hello"
-  }))
-});
-const InsideParagraphTemplate = args => _jsxs(Text, {
-  is: "p",
-  children: ["Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad,", ' ', _jsx(TextLink, _objectSpread(_objectSpread({}, args), {}, {
-    children: "Hello"
-  })), " autem consectetur consequuntur eius fugiat illo ipsum nobis numquam, officiis placeat quia, quidem reprehenderit rerum temporibus veniam vero."]
-});
-const standardProps = {
-  muted: false,
-  size: '4',
-  align: 'left',
-  fontWeight: 'semiBold'
-};
-export const standard = Template.bind(standardProps);
-standard.args = standardProps;
-export const insideParagraph = InsideParagraphTemplate.bind(standardProps);
-insideParagraph.args = standardProps;
-const withIconProps = _objectSpread(_objectSpread({}, standardProps), {}, {
-  icon: ArrowRightIcon
-});
-export const withIcon = Template.bind(withIconProps);
-withIcon.args = withIconProps;
-export const withIconInsideParagraph = InsideParagraphTemplate.bind(withIconProps);
-withIconInsideParagraph.args = withIconProps;

package/dist/components/Toaster/stories.js

@@ -1,59 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Actions } from "../Actions/index.js";
-import { Button } from "../Button/index.js";
-import { StandardModal } from "../StandardModal/index.js";
-import { Text } from "../Text/index.js";
-import { ToastProvider, useToast } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
-  title: 'Utility/Toaster',
-  decorators: [Story => _jsx(ToastProvider, {
-    children: _jsx(Story, {})
-  })]
-};
-export const Standard = () => {
-  const toast = useToast();
-  return _jsxs(Actions, {
-    children: [_jsx(Button, {
-      onClick: () => toast.success('Successful message!'),
-      children: "Success"
-    }), _jsx(Button, {
-      onClick: () => toast.danger('Danger  message!'),
-      children: "Danger"
-    }), _jsx(Button, {
-      onClick: () => toast.information(_jsxs(Text, {
-        children: ["Im some text, which is ", _jsx(Text, {
-          strong: true,
-          children: "bolded!"
-        })]
-      })),
-      children: "Custom"
-    })]
-  });
-};
-export const InsideModal = () => {
-  const toast = useToast();
-  return _jsx(StandardModal, {
-    isOpen: true,
-    title: "Test inside modal",
-    children: _jsx("div", {
-      style: {
-        padding: 20
-      },
-      children: _jsx(Button, {
-        onClick: () => toast.success('Successful message!'),
-        children: "Success"
-      })
-    })
-  });
-};
-InsideModal.story = {
-  parameters: {
-    chromatic: {
-      disable: true
-    }
-  }
-};

package/dist/components/Tooltip/stories.js

@@ -1,90 +0,0 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import * as React from 'react';
-import { EAlignment } from "../Positioner/alignment.js";
-import { Tooltip } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const sizeScale = ['medium', 'large'];
-export default {
-  title: 'Components/Tooltip',
-  decorators: [Story => _jsx("div", {
-    style: {
-      marginLeft: 100,
-      marginTop: 100
-    },
-    children: _jsx(Story, {})
-  })],
-  parameters: {
-    chromatic: {
-      disable: true
-    }
-  },
-  argTypes: {
-    alignment: {
-      options: EAlignment,
-      defaultValue: EAlignment.RIGHT,
-      control: {
-        type: 'select'
-      }
-    },
-    size: {
-      options: sizeScale,
-      defaultValue: void 0,
-      control: {
-        type: 'select'
-      }
-    },
-    label: {
-      defaultValue: ''
-    },
-    closeAfter: {
-      defaultValue: EAlignment.RIGHT,
-      control: {
-        type: 'number'
-      }
-    }
-  }
-};
-const Template = args => _jsx(Tooltip, _objectSpread(_objectSpread({}, args), {}, {
-  children: _jsx("div", {
-    style: {
-      display: 'inline'
-    },
-    children: "Im the tooltip trigger"
-  })
-}));
-const standardProps = {
-  label: 'Im the tooltip body',
-  closeAfter: null
-};
-export const standard = Template.bind(standardProps);
-standard.args = standardProps;
-const withAtuCloseProps = {
-  label: 'I will automatically close after 5 seconds',
-  closeAfter: 5e3
-};
-export const withAutoClose = Template.bind(withAtuCloseProps);
-withAutoClose.args = withAtuCloseProps;
-const withLongTextProps = {
-  label: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.',
-  alignment: EAlignment.BOTTOM
-};
-export const withLongText = Template.bind(withLongTextProps);
-withLongText.args = withLongTextProps;
-const withSmallTextSizeProps = {
-  label: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.',
-  alignment: EAlignment.BOTTOM,
-  size: 'large'
-};
-export const withLargeTextSize = Template.bind(withSmallTextSizeProps);
-withLargeTextSize.args = withSmallTextSizeProps;
-const withEmptyLabelProps = {
-  label: '',
-  alignment: EAlignment.BOTTOM,
-  size: 'large'
-};
-export const withEmptyLabel = Template.bind(withEmptyLabelProps);
-withEmptyLabel.args = withEmptyLabelProps;

package/dist/components/VisuallyHidden/stories.js

@@ -1,36 +0,0 @@
-"use strict";
-
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import * as React from 'react';
-import { Text } from "../Text/index.js";
-import { VisuallyHidden } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
-  title: 'Utility/VisuallyHidden',
-  argTypes: {
-    is: {
-      options: ['button', 'a', 'div'],
-      control: {
-        type: 'select'
-      }
-    }
-  }
-};
-const Template = args => _jsxs(_Fragment, {
-  children: [_jsx(Text, {
-    children: "Bellow text is invisible"
-  }), _jsx(VisuallyHidden, _objectSpread(_objectSpread({}, args), {}, {
-    children: _jsx(Text, {
-      children: "I'm not visually present on the screens"
-    })
-  }))]
-});
-const standardProps = {
-  is: 'div'
-};
-export const standard = Template.bind(standardProps);
-standard.args = standardProps;

package/dist/hooks/useAttachedBoxes/stories.js

@@ -1,94 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Box } from "../../components/index.js";
-import { Text } from "../../components/Text/Text.js";
-import { useAttachedBoxes } from "./index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default {
-  title: 'Foundation/Layout/Attached Boxes'
-};
-const columnCount = [2, 3, 4, 5];
-const gap = ['1', '2', '3', '4'];
-export const One = () => {
-  const count = 1;
-  const [attachedBoxes, wrapperCls, wrapperStyle] = useAttachedBoxes({
-    count,
-    columnCount,
-    gap,
-    backgroundColour: 'gray700'
-  });
-  return _jsx(Box, {
-    className: wrapperCls,
-    style: wrapperStyle,
-    children: attachedBoxes.map((AttachedBox, index) => _jsx(AttachedBox, {
-      children: _jsx(Text, {
-        is: "p",
-        colour: "white",
-        align: "center",
-        children: index + 1
-      })
-    }, index))
-  });
-};
-export const Five = () => {
-  const count = 5;
-  const [attachedBoxes, wrapperCls, wrapperStyle] = useAttachedBoxes({
-    count,
-    columnCount,
-    gap
-  });
-  return _jsx(Box, {
-    className: wrapperCls,
-    style: wrapperStyle,
-    children: attachedBoxes.map((AttachedBox, index) => _jsx(AttachedBox, {
-      children: _jsx(Text, {
-        is: "p",
-        colour: "white",
-        align: "center",
-        children: index + 1
-      })
-    }, index))
-  });
-};
-export const Seven = () => {
-  const count = 7;
-  const [attachedBoxes, wrapperCls, wrapperStyle] = useAttachedBoxes({
-    count,
-    columnCount,
-    gap,
-    backgroundColour: 'gray700'
-  });
-  return _jsx(Box, {
-    className: wrapperCls,
-    style: wrapperStyle,
-    children: attachedBoxes.map((AttachedBox, index) => _jsx(AttachedBox, {
-      children: _jsx(Text, {
-        is: "p",
-        colour: "white",
-        align: "center",
-        children: index + 1
-      })
-    }, index))
-  });
-};
-export const TwentyThree = () => {
-  const count = 23;
-  const [attachedBoxes, wrapperCls, wrapperStyle] = useAttachedBoxes({
-    count,
-    columnCount,
-    gap
-  });
-  return _jsx(Box, {
-    className: wrapperCls,
-    style: wrapperStyle,
-    children: attachedBoxes.map((AttachedBox, index) => _jsx(AttachedBox, {
-      children: _jsx(Text, {
-        is: "p",
-        colour: "white",
-        align: "center",
-        children: index + 1
-      })
-    }, index))
-  });
-};

package/dist/hooks/useMedia/stories.js

@@ -1,46 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { Stack } from "../../components/Stack/Stack.js";
-import { Text } from "../../components/Text/Text.js";
-import { breakpoints } from "../../themes/makeTheme.js";
-import { useMedia } from "./useMedia.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default {
-  title: 'Utility/Hooks/useMedia',
-  parameters: {
-    chromatic: {
-      disable: true
-    }
-  }
-};
-export const Standard = () => {
-  const Impl = () => {
-    const [isMobile, isTable, isDesktop, isLargeDesktop] = useMedia(['mobile', 'tablet', 'desktop', 'largeDesktop']);
-    return _jsxs(Stack, {
-      children: [_jsxs(Text, {
-        children: ["isMobile: ", _jsx(Text, {
-          strong: true,
-          children: isMobile ? 'true' : 'false'
-        }), ' ', "- ", breakpoints.mobile]
-      }), _jsxs(Text, {
-        children: ["isTable: ", _jsx(Text, {
-          strong: true,
-          children: isTable ? 'true' : 'false'
-        }), " -", ' ', breakpoints.tablet]
-      }), _jsxs(Text, {
-        children: ["isDesktop:", ' ', _jsx(Text, {
-          strong: true,
-          children: isDesktop ? 'true' : 'false'
-        }), " -", ' ', breakpoints.desktop]
-      }), _jsxs(Text, {
-        children: ["isLargeDesktop:", ' ', _jsx(Text, {
-          strong: true,
-          children: isLargeDesktop ? 'true' : 'false'
-        }), " -", ' ', breakpoints.largeDesktop]
-      })]
-    });
-  };
-  return _jsx(Impl, {});
-};