Up th e size limit

Author: mikeldking

package.json

@@ -55,11 +55,11 @@
   "size-limit": [
     {
       "path": "dist/components.cjs.production.min.js",
-      "limit": "150 KB"
+      "limit": "170 KB"
     },
     {
       "path": "dist/components.esm.js",
-      "limit": "150 KB"
+      "limit": "170 KB"
     }
   ],
   "devDependencies": {

src/overlays/Modal.tsx

@@ -29,6 +29,7 @@ const modalCSS = css`
   opacity: 0;
   &.ac-modal--slideOver {
     border-left: 1px solid ${theme.colors.gray500};
+    box-shadow: -10px 0px 30px 10px rgba(0, 0, 0, 0.1);
     /* Start offset by the animation distance */
     transform: translateX(500px);
 

src/overlays/Underlay.tsx

@@ -8,12 +8,10 @@ const underlayCSS = css`
   visibility: none;
 
   // Exit animations
-  transition: opacity 100ms cubic-bezier(0, 0, 0.4, 1) 100ms,
-    visibility 0ms linear 100ms;
+  transition: opacity 0.2s ease-out 0.2s;
   &.is-open {
     /* Entry animations */
-    transition: opacity 100ms cubic-bezier(0.5, 0, 1, 1) 0;
-
+    transition: opacity 0.2s ease-in 0.1s;
     visibility: visible;
     opacity: 1;
     pointer-events: auto;

stories/SlideOver.stories.tsx

@@ -26,7 +26,8 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<DialogProps> = args => {
-  args.title = args.title || 'Title';
+  const { isDismissable, onDismiss, ...props } = args;
+  props.title = props.title || 'Title';
   const [isOpen, setIsOpen] = useState(false);
   return (
     <Provider>
@@ -39,7 +40,7 @@ const Template: Story<DialogProps> = args => {
         onDismiss={() => setIsOpen(false)}
       >
         {isOpen && (
-          <Dialog {...args}>
+          <Dialog {...props}>
             <Text>hello</Text>
           </Dialog>
         )}