@autoguru/overdrive 4.3.4 → 4.3.5

package/dist/components/Button/Button.css.js

@@ -1,262 +1,254 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Button/Button.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';
 export const root = style({
-  transitionDelay: '0s',
-  transitionTimingFunction: vars.animation.easing.standard,
-  transitionDuration: '0.1s',
-  transitionProperty: 'color, background-color, border-color, box-shadow, transform',
-  transform: 'translate3d(0, 0, 1) scale(1)',
-  willChange: 'transform'
-}, "root");
+    transitionDelay: '0s',
+    transitionTimingFunction: vars.animation.easing.standard,
+    transitionDuration: '0.1s',
+    transitionProperty: 'color, background-color, border-color, box-shadow, transform',
+    transform: 'translate3d(0, 0, 1) scale(1)',
+    willChange: 'transform',
+});
 export const body = style({
-  display: 'grid',
-  gridAutoFlow: 'column dense',
-  gridGap: vars.space['1']
-}, "body");
+    display: 'grid',
+    gridAutoFlow: 'column dense',
+    gridGap: vars.space['1'],
+});
 export const hiddenContent = style({
-  visibility: 'hidden'
-}, "hiddenContent");
+    visibility: 'hidden',
+});
 export const loading = style({
-  cursor: 'not-allowed'
-}, "loading");
+    cursor: 'not-allowed',
+});
 export const enabled = style({
-  cursor: 'pointer'
-}, "enabled");
+    cursor: 'pointer',
+});
 export const disabled = style({
-  cursor: 'not-allowed',
-  opacity: '0.3'
-}, "disabled");
+    cursor: 'not-allowed',
+    opacity: '0.3',
+});
 export const spinner = style({
-  margin: '0 auto'
-}, "spinner");
+    margin: '0 auto',
+});
 const smallHeight = '36px';
 export const size = {
-  small: styleVariants({
-    default: {
-      minWidth: vars.space['8'],
-      height: smallHeight,
-      gridGap: vars.space['1']
-    },
-    rounded: {
-      minWidth: smallHeight
-    },
-    iconOnly: {
-      width: smallHeight
-    }
-  }, "size_small"),
-  medium: styleVariants({
-    default: {
-      minWidth: vars.space['9'],
-      height: vars.space['8'],
-      gridGap: vars.space['2']
-    },
-    rounded: {
-      minWidth: vars.space['8']
-    },
-    iconOnly: {
-      width: vars.space['8']
-    }
-  }, "size_medium")
+    small: styleVariants({
+        default: {
+            minWidth: vars.space['8'],
+            height: smallHeight,
+            gridGap: vars.space['1'],
+        },
+        rounded: {
+            minWidth: smallHeight,
+        },
+        iconOnly: {
+            width: smallHeight,
+        },
+    }),
+    medium: styleVariants({
+        default: {
+            minWidth: vars.space['9'],
+            height: vars.space['8'],
+            gridGap: vars.space['2'],
+        },
+        rounded: {
+            minWidth: vars.space['8'],
+        },
+        iconOnly: {
+            width: vars.space['8'],
+        },
+    }),
 };
 export const variant = {
-  primary: style({
-    color: vars.colours.intent.primary.foreground,
-    backgroundColor: vars.colours.intent.primary.background.standard,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.border, ", ").concat(vars.elevation['2'])
-  }, "variant_primary"),
-  secondary: style({
-    color: vars.colours.intent.secondary.foreground,
-    backgroundColor: vars.colours.intent.secondary.background.standard,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.secondary.border, ", ").concat(vars.elevation['2'])
-  }, "variant_secondary"),
-  danger: style({
-    backgroundColor: vars.colours.intent.danger.background.standard,
-    color: vars.colours.intent.danger.foreground,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.danger.border, ", ").concat(vars.elevation['2'])
-  }, "variant_danger"),
-  information: style({
-    backgroundColor: vars.colours.intent.information.background.standard,
-    color: vars.colours.intent.information.foreground,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.information.border, ", ").concat(vars.elevation['2'])
-  }, "variant_information"),
-  warning: style({
-    backgroundColor: vars.colours.intent.warning.background.standard,
-    color: vars.colours.intent.warning.foreground,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.warning.border, ", ").concat(vars.elevation['2'])
-  }, "variant_warning"),
-  success: style({
-    backgroundColor: vars.colours.intent.success.background.standard,
-    color: vars.colours.intent.success.foreground,
-    boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.success.border, ", ").concat(vars.elevation['2'])
-  }, "variant_success")
+    primary: style({
+        color: vars.colours.intent.primary.foreground,
+        backgroundColor: vars.colours.intent.primary.background.standard,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.border}, ${vars.elevation['2']}`,
+    }),
+    secondary: style({
+        color: vars.colours.intent.secondary.foreground,
+        backgroundColor: vars.colours.intent.secondary.background.standard,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.border}, ${vars.elevation['2']}`,
+    }),
+    danger: style({
+        backgroundColor: vars.colours.intent.danger.background.standard,
+        color: vars.colours.intent.danger.foreground,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['2']}`,
+    }),
+    information: style({
+        backgroundColor: vars.colours.intent.information.background.standard,
+        color: vars.colours.intent.information.foreground,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['2']}`,
+    }),
+    warning: style({
+        backgroundColor: vars.colours.intent.warning.background.standard,
+        color: vars.colours.intent.warning.foreground,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['2']}`,
+    }),
+    success: style({
+        backgroundColor: vars.colours.intent.success.background.standard,
+        color: vars.colours.intent.success.foreground,
+        boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['2']}`,
+    }),
 };
 export const defaultStates = {
-  primary: style({
-    ':hover': {
-      color: vars.colours.intent.primary.foreground,
-      backgroundColor: vars.colours.intent.primary.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.border, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.border, ", ").concat(vars.elevation['1']),
-      color: vars.colours.intent.primary.foreground,
-      backgroundColor: vars.colours.intent.primary.background.strong
-    }
-  }, "defaultStates_primary"),
-  secondary: style({
-    ':hover': {
-      color: vars.colours.intent.secondary.foreground,
-      backgroundColor: vars.colours.intent.secondary.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.secondary.border, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      color: vars.colours.intent.secondary.foreground,
-      backgroundColor: vars.colours.intent.secondary.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.secondary.border, ", ").concat(vars.elevation['1'])
-    }
-  }, "defaultStates_secondary"),
-  danger: style({
-    ':hover': {
-      color: vars.colours.intent.danger.foreground,
-      backgroundColor: vars.colours.intent.danger.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.danger.border, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      color: vars.colours.intent.danger.foreground,
-      backgroundColor: vars.colours.intent.danger.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.danger.border, ", ").concat(vars.elevation['1'])
-    }
-  }, "defaultStates_danger"),
-  information: style({
-    ':hover': {
-      color: vars.colours.intent.information.foreground,
-      backgroundColor: vars.colours.intent.information.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.information.border, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      color: vars.colours.intent.information.foreground,
-      backgroundColor: vars.colours.intent.information.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.information.border, ", ").concat(vars.elevation['1'])
-    }
-  }, "defaultStates_information"),
-  warning: style({
-    ':hover': {
-      color: vars.colours.intent.warning.foreground,
-      backgroundColor: vars.colours.intent.warning.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.warning.border, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      color: vars.colours.intent.warning.foreground,
-      backgroundColor: vars.colours.intent.warning.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.warning.border, ", ").concat(vars.elevation['1'])
-    }
-  }, "defaultStates_warning"),
-  success: style({
-    ':hover': {
-      color: vars.colours.intent.success.foreground,
-      backgroundColor: vars.colours.intent.success.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.success.border, ", ").concat(vars.elevation['3'])
-    },
-    ':active': {
-      transform: 'scale(0.97)',
-      color: vars.colours.intent.success.foreground,
-      backgroundColor: vars.colours.intent.success.background.strong,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.success.border, ", ").concat(vars.elevation['1'])
-    }
-  }, "defaultStates_success")
+    primary: style({
+        ':hover': {
+            color: vars.colours.intent.primary.foreground,
+            backgroundColor: vars.colours.intent.primary.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.border}, ${vars.elevation['1']}`,
+            color: vars.colours.intent.primary.foreground,
+            backgroundColor: vars.colours.intent.primary.background.strong,
+        },
+    }),
+    secondary: style({
+        ':hover': {
+            color: vars.colours.intent.secondary.foreground,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.secondary.foreground,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.secondary.border}, ${vars.elevation['1']}`,
+        },
+    }),
+    danger: style({
+        ':hover': {
+            color: vars.colours.intent.danger.foreground,
+            backgroundColor: vars.colours.intent.danger.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.danger.foreground,
+            backgroundColor: vars.colours.intent.danger.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.danger.border}, ${vars.elevation['1']}`,
+        },
+    }),
+    information: style({
+        ':hover': {
+            color: vars.colours.intent.information.foreground,
+            backgroundColor: vars.colours.intent.information.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.information.foreground,
+            backgroundColor: vars.colours.intent.information.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.information.border}, ${vars.elevation['1']}`,
+        },
+    }),
+    warning: style({
+        ':hover': {
+            color: vars.colours.intent.warning.foreground,
+            backgroundColor: vars.colours.intent.warning.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.warning.foreground,
+            backgroundColor: vars.colours.intent.warning.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.warning.border}, ${vars.elevation['1']}`,
+        },
+    }),
+    success: style({
+        ':hover': {
+            color: vars.colours.intent.success.foreground,
+            backgroundColor: vars.colours.intent.success.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['3']}`,
+        },
+        ':active': {
+            transform: 'scale(0.97)',
+            color: vars.colours.intent.success.foreground,
+            backgroundColor: vars.colours.intent.success.background.strong,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.success.border}, ${vars.elevation['1']}`,
+        },
+    }),
 };
 export const minimal = {
-  defaults: style({
-    color: vars.typography.colour.neutral
-  }, "minimal_defaults"),
-  noneRounded: style({
-    minWidth: '50px'
-  }, "minimal_noneRounded")
+    defaults: style({
+        color: vars.typography.colour.neutral,
+    }),
+    noneRounded: style({
+        minWidth: '50px',
+    }),
 };
 export const minimalStates = {
-  primary: style({
-    ':hover': {
-      color: vars.colours.intent.primary.background.strong,
-      backgroundColor: vars.colours.intent.primary.background.mild,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.colours.intent.primary.background.strong,
-      backgroundColor: vars.colours.intent.primary.background.mild,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_primary"),
-  secondary: style({
-    ':hover': {
-      color: vars.typography.colour.secondary,
-      backgroundColor: vars.colours.intent.secondary.background.strong,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.typography.colour.secondary,
-      backgroundColor: vars.colours.intent.secondary.background.strong,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_secondary"),
-  danger: style({
-    ':hover': {
-      color: vars.colours.intent.danger.background.strong,
-      backgroundColor: vars.colours.intent.danger.background.mild,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.colours.intent.danger.background.strong,
-      backgroundColor: vars.colours.intent.danger.background.mild,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_danger"),
-  information: style({
-    ':hover': {
-      color: vars.colours.intent.information.background.strong,
-      backgroundColor: vars.colours.intent.information.background.mild,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.colours.intent.information.background.strong,
-      backgroundColor: vars.colours.intent.information.background.mild,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_information"),
-  warning: style({
-    ':hover': {
-      color: vars.colours.intent.warning.background.strong,
-      backgroundColor: vars.colours.intent.warning.background.mild,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.colours.intent.warning.background.strong,
-      backgroundColor: vars.colours.intent.warning.background.mild,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_warning"),
-  success: style({
-    ':hover': {
-      color: vars.colours.intent.success.background.strong,
-      backgroundColor: vars.colours.intent.success.background.mild,
-      boxShadow: 'none'
-    },
-    ':active': {
-      color: vars.colours.intent.success.background.strong,
-      backgroundColor: vars.colours.intent.success.background.mild,
-      boxShadow: 'none'
-    }
-  }, "minimalStates_success")
+    primary: style({
+        ':hover': {
+            color: vars.colours.intent.primary.background.strong,
+            backgroundColor: vars.colours.intent.primary.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.primary.background.strong,
+            backgroundColor: vars.colours.intent.primary.background.mild,
+            boxShadow: 'none',
+        },
+    }),
+    secondary: style({
+        ':hover': {
+            color: vars.typography.colour.secondary,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.typography.colour.secondary,
+            backgroundColor: vars.colours.intent.secondary.background.strong,
+            boxShadow: 'none',
+        },
+    }),
+    danger: style({
+        ':hover': {
+            color: vars.colours.intent.danger.background.strong,
+            backgroundColor: vars.colours.intent.danger.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.danger.background.strong,
+            backgroundColor: vars.colours.intent.danger.background.mild,
+            boxShadow: 'none',
+        },
+    }),
+    information: style({
+        ':hover': {
+            color: vars.colours.intent.information.background.strong,
+            backgroundColor: vars.colours.intent.information.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.information.background.strong,
+            backgroundColor: vars.colours.intent.information.background.mild,
+            boxShadow: 'none',
+        },
+    }),
+    warning: style({
+        ':hover': {
+            color: vars.colours.intent.warning.background.strong,
+            backgroundColor: vars.colours.intent.warning.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.warning.background.strong,
+            backgroundColor: vars.colours.intent.warning.background.mild,
+            boxShadow: 'none',
+        },
+    }),
+    success: style({
+        ':hover': {
+            color: vars.colours.intent.success.background.strong,
+            backgroundColor: vars.colours.intent.success.background.mild,
+            boxShadow: 'none',
+        },
+        ':active': {
+            color: vars.colours.intent.success.background.strong,
+            backgroundColor: vars.colours.intent.success.background.mild,
+            boxShadow: 'none',
+        },
+    }),
 };
-
-__vanilla_filescope__.endFileScope();

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,20 @@
+import { IconType } from '@autoguru/icons';
+import * as React from 'react';
+import { AriaAttributes, ButtonHTMLAttributes, ElementType, ReactElement } from 'react';
+import * as styles from './Button.css';
+declare type ButtonPrimitive = ButtonHTMLAttributes<HTMLButtonElement>;
+declare type AllowedChildren = string | IconType;
+export interface Props extends Pick<ButtonPrimitive, 'id' | 'onClick' | 'type' | 'className'>, Pick<AriaAttributes, 'aria-label'> {
+    children: AllowedChildren | AllowedChildren[];
+    disabled?: boolean;
+    is?: ElementType | ReactElement;
+    isLoading?: boolean;
+    isFullWidth?: boolean;
+    minimal?: boolean;
+    rounded?: boolean;
+    size?: keyof typeof styles.size;
+    variant?: keyof typeof styles.variant;
+}
+export declare const Button: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAGX,YAAY,EAEZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;CACtC;AAqBD,eAAO,MAAM,MAAM,iFAkJlB,CAAC"}