@sk-web-gui/core 0.1.65 → 0.1.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.65",
+  "version": "0.1.67",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "2450d55629199505cd09f29fbe96359a708eca2e"
+  "gitHead": "3b28fd1c88425187460540587be093692cf39cd4"
 }

package/src/components/button.js

@@ -6,6 +6,10 @@ function buttonSolid(colors) {
       '@apply text-body bg-white': {},
       /* hover */
       '@apply hover:text-white hover:bg-hover hover:border-primary-active': {},
+      /* keyboard active */
+      '&.active': {
+        '@apply text-white bg-hover border-primary-active': {},
+      },
       /* focus */
       '@apply focus-visible:z-base': {},
       '@apply focus-visible:border-primary': {},
@@ -18,6 +22,10 @@ function buttonSolid(colors) {
       '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
       /* dark hover */
       '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},
+      /* dark keyboard active */
+      '&.active': {
+        '@apply dark:border-hover dark:bg-neutral-600': {},
+      },
       /* dark focus */
       '@apply dark:focus-visible:border-primary-500': {},
       /* dark active */
@@ -31,6 +39,10 @@ function buttonSolid(colors) {
             [`@apply text-white bg-${color}`]: {},
             // hover
             [`@apply hover:text-white hover:bg-${color}-active`]: {},
+            // keyboard active
+            '&.active': {
+              [`@apply text-white bg-${color}-active`]: {},
+            },
 
             [`@apply active:text-white active:bg-${color}-active`]: {},
             [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},
@@ -58,11 +70,17 @@ function buttonSolid(colors) {
 
       "&[data-color='primary']": {
         '@apply border-primary hover:border-primary-active': {},
+        '&.active': {
+          '@apply border-primary-active': {},
+        },
       },
 
       '&.btn': {
         '&-disabled': {
           '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+          '&.active': {
+            '@apply border-gray-stroke': {},
+          },
         },
       },
     },
@@ -76,6 +94,10 @@ function buttonOutline(colors) {
       '@apply text-body bg-transparent': {},
       /* hover */
       '@apply hover:text-white hover:bg-primary-active hover:border-primary-active': {},
+      /* keyboard active */
+      '&.active': {
+        '@apply text-white bg-primary-active border-primary-active': {},
+      },
       /* focus */
       '@apply focus-visible:z-base': {},
       '@apply focus-visible:border-primary-500': {},
@@ -87,6 +109,10 @@ function buttonOutline(colors) {
       '@apply dark:text-neutral-100 dark:bg-transparent': {},
       /* dark hover */
       '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
+      /* dark keyboard active */
+      '&.active': {
+        '@apply dark:border-neutral-300 dark:bg-neutral-700': {},
+      },
       /* dark focus */
       '@apply dark:focus-visible:border-primary-500': {},
       /* dark active */
@@ -100,6 +126,10 @@ function buttonOutline(colors) {
             [`@apply text-${color}-600 bg-transparent`]: {},
             /* hover */
             [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},
+            /* keyboard active */
+            '&.active': {
+              [`@apply text-white bg-${color}-active border-${color}-active`]: {},
+            },
             /* focus */
             [`@apply focus-visible:border-${color}-500`]: {},
             [`@apply focus-visible:ring-${color}-500`]: {},
@@ -112,6 +142,11 @@ function buttonOutline(colors) {
             /* dark hover */
             [`@apply dark:hover:bg-${color}-200`]: {},
             [`@apply dark:hover:bg-opacity-15`]: {},
+            /* dark keyboard active */
+            '&.active': {
+              [`@apply dark:bg-${color}-200`]: {},
+              [`@apply dark:bg-opacity-15`]: {},
+            },
             /* dark focus */
             [`@apply dark:focus-visible:border-${color}-500`]: {},
             [`@apply dark:focus-visible:ring-${color}-500`]: {},
@@ -126,6 +161,9 @@ function buttonOutline(colors) {
       '&.btn': {
         '&-disabled': {
           '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
+          '&.active': {
+            '@apply border-gray-stroke': {},
+          },
         },
       },
     },
@@ -232,6 +270,9 @@ function buttonLink(colors) {
   return {
     '&-link': {
       '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},
+      '&.active': {
+        '@apply underline': {},
+      },
       '@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500': {},
       // dark colors
       '@apply dark:text-neutral-200': {},
@@ -258,15 +299,15 @@ module.exports = Button = (colors) => ({
   '.btn': {
     '@apply relative': {},
     '@apply m-0': {},
-    '@apply rounded-lg inline-flex items-center justify-center flex-shrink-0 align-middle': {},
+    '@apply px-[3.2rem]': {},
+    '@apply py-0': {},
+    '@apply rounded-[0.4rem] inline-flex items-center justify-center flex-shrink-0 align-middle': {},
     '@apply font-medium leading-tight': {},
     transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',
     '@apply	duration-75 ease-out': {},
     '@apply outline-none appearance-none cursor-base select-none whitespace-nowrap': {},
     '@apply focus-visible:outline-none': {},
 
-    padding: '1.2rem 3.2rem',
-
     "&[data-rounded='true']": {
       borderRadius: '3.2rem',
     },
@@ -274,17 +315,24 @@ module.exports = Button = (colors) => ({
     // sizing
     '&-sm': {
       '@apply text-xs': {},
-      // minWidth: "1.75rem",
+      minHeight: '4rem',
+      maxHeight: '4rem',
     },
 
     '&-md': {
       '@apply text-sm': {},
-      // minWidth: "2rem",
+      minHeight: '4.4rem',
+      maxHeight: '4.4rem',
     },
 
     '&-lg': {
       '@apply text-base': {},
-      // minWidth: "2.5rem",
+      minHeight: '4.8rem',
+      maxHeight: '4.8rem',
+    },
+    '&-fit-content': {
+      '@apply p-0': {},
+      fontSize: 'inherit',
     },
 
     // State
@@ -293,6 +341,11 @@ module.exports = Button = (colors) => ({
       '@apply disabled:shadow-none disabled:cursor-not-allowed': {},
       '@apply disabled:text-gray disabled:bg-gray-light !important': {},
     },
+    '.MuiSvgIcon-root': {
+      fontSize: '1.5em',
+      width: '1em',
+      height: '1em',
+    },
 
     // variants
     ...buttonSolid(colors),
@@ -301,4 +354,12 @@ module.exports = Button = (colors) => ({
     //...buttonLight(colors),
     ...buttonLink(colors),
   },
+  '.btn-has-icon': {
+    '&-left .MuiSvgIcon-root': {
+      '@apply mr-sm': {},
+    },
+    '&-right .MuiSvgIcon-root': {
+      '@apply ml-sm': {},
+    },
+  },
 });

package/src/components/context-menu.js

@@ -0,0 +1,11 @@
+module.exports = ContextMenu = () => ({
+  '.context-menu-wrapper': {
+    '.context-menu-items': {
+      '@apply absolute bg-white border border-body z-10 drop-shadow-md mt-sm flex flex-col space-y-4 justify-start items-start p-sm':
+        {},
+      '.context-menu-item': {
+        '@apply px-sm': {},
+      },
+    },
+  },
+});

package/src/components/dialog.js

@@ -0,0 +1,12 @@
+module.exports = Dialog = () => ({
+  '.dialog': {
+    '@apply w-fit max-w-prose': {},
+    '&-buttons': {
+      '@apply grid grid-flow-col gap-lg place-content-stretch': {},
+      gridAutoColumns: 'minmax(0, 1fr)',
+    },
+    '&-content': {
+      '@apply text-center mb-lg': {},
+    },
+  },
+});

package/src/components/dropdown-filter.js

@@ -1,5 +1,5 @@
 module.exports = DropdownFilter = () => ({
-  '.DropdownFilter': {
+  '.dropdown-filter': {
     position: 'relative',
     height: 50,
     border: '1px solid #939393',
@@ -8,11 +8,10 @@ module.exports = DropdownFilter = () => ({
     borderRadius: 2,
 
     '.dropdown-button': {
-      justifyContent: 'space-between',
-      display: 'flex',
-      flexGrow: 1,
-      alignItems: 'center',
-      padding: '0 1rem',
+      '@apply flex justify-between items-center  grow': {},
+      '.dropdown-button-icon': {
+        '@apply justify-self-end grow-0': {},
+      },
     },
 
     '.filter-container': {
@@ -23,28 +22,24 @@ module.exports = DropdownFilter = () => ({
       width: 'calc(100% + 2px)',
       background: '#fff',
       border: '1px solid #939393',
-      padding: '1rem',
       borderRadius: 2,
 
       '.filter-controls': {
         display: 'flex',
         justifyContent: 'flex-end',
-        padding: '0 1rem',
-        paddingBottom: 12,
-
         button: {
           marginLeft: '1rem',
           textDecoration: 'underline',
         },
       },
 
-      '.FilterItem': {
+      '.filter-item': {
+        '@apply px-md': {},
         height: 48,
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
         borderBottom: '1px solid #939393',
-        padding: '0 1rem',
 
         '> label:first-child': {
           '@apply flex-grow': {},

package/src/components/forms.js

@@ -196,19 +196,25 @@ module.exports = Forms = (colors) => ({
     '&-sm': {
       '@apply text-sm leading-sm': {},
       borderRadius: '0.2rem',
-      padding: '1.08rem 1.44rem',
+      padding: '0 1.44rem',
+      minHeight: '4rem',
+      maxHeight: '4rem',
     },
 
     '&-md': {
       '@apply text-base leading-base': {},
       borderRadius: '0.2rem',
-      padding: '1.2rem 1.6rem',
+      padding: '0 1.6rem',
+      minHeight: '4.4rem',
+      maxHeight: '4.4rem',
     },
 
     '&-lg': {
       '@apply text-lg leading-lg': {},
       borderRadius: '0.2rem',
-      padding: '1.32rem 1.76rem',
+      padding: '0 1.76rem',
+      minHeight: '4.8rem',
+      maxHeight: '4.8rem',
     },
 
     '&-disabled, &&-disabled': {
@@ -218,7 +224,7 @@ module.exports = Forms = (colors) => ({
       //"@apply disabled:border-neutral-200 disabled:bg-neutral-200": {},
       //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20": {},
     },
-    
+
     "&[data-rounded='true']": {
       borderRadius: '3.2rem',
     },
@@ -229,7 +235,7 @@ module.exports = Forms = (colors) => ({
   },
 
   '.form-close-button': {
-    '@apply p-sm border-0 rounded-[50%] ml-auto': {},
+    '@apply border-0 ml-auto': {},
 
     '&-icon': {
       '@apply inline-flex': {},
@@ -250,20 +256,40 @@ module.exports = Forms = (colors) => ({
   },
 
   '.form-select': {
-    '@apply min-h-[50px] text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke': {},
+    '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':
+      {},
     'background-image': 'none',
-
+    '&-wrapper': {
+      '@apply block w-full relative': {},
+    },
+    '&-icon': {
+      '@apply grow-0': {},
+    },
     '&-list': {
       '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0': {},
     },
-
+    '&-has-multiple-choices': {
+      '@apply flex w-full h-full justify-between items-center pr-md': {},
+    },
+    '&-multiple-chioces': {
+      '@apply truncate pr-md': {},
+    },
     '&-option': {
-      '@apply rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary':
+      '@apply text-body rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary flex items-center':
         {},
 
+      '&.multiple.selected': {
+        '@apply bg-background-one': {},
+      },
       '&.active': {
         '@apply bg-primary text-white': {},
       },
+      '&.active.selected': {
+        '@apply bg-primary text-white': {},
+      },
+      '&.disabled': {
+        '@apply opacity-75 cursor-not-allowed hover:bg-white hover:text-black': {},
+      },
     },
   },
 

package/src/components/icon-button.js

@@ -1,5 +1,30 @@
 module.exports = IconButton = () => ({
-  '.btn-icon': {
+  '.btn-icon, [data-icon="true"]': {
     '@apply p-0': {},
+    "&[data-rounded='true']": {
+      '@apply rounded-full': {},
+    },
+    '&.btn-sm': {
+      minWidth: '4rem',
+      maxWidth: '4rem',
+    },
+
+    '&.btn-md': {
+      minWidth: '4.4rem',
+      maxWidth: '4.4rem',
+    },
+
+    '&.btn-lg': {
+      minWidth: '4.8rem',
+      maxWidth: '4.8rem',
+    },
+    '.btn-has-icon': {
+      '&-left .MuiSvgIcon-root': {
+        '@apply mr-0': {},
+      },
+      '&-right .MuiSvgIcon-root': {
+        '@apply ml-0': {},
+      },
+    },
   },
 });

package/src/components/link.js

@@ -6,6 +6,9 @@ module.exports = Link = () => ({
 
     '@apply hover:text-primary-active': {},
 
+    '&.active': {
+      '@apply underline text-primary-active': {},
+    },
     '&-external-icon': {
       fontSize: '0.875em !important',
       lineHeight: '1',

package/src/components/side-menu.js

@@ -1,9 +1,9 @@
 module.exports = Menu = () => ({
-  '.SideMenu': {
+  '.side-menu': {
     '@apply w-[440px]': {},
 
     '.menu-header': {
-      '@apply py-[2rem] px-[1.6rem] bg-primary rounded-t-sm': {},
+      '@apply py-[2rem] px-[1.6rem] bg-primary text-white rounded-t-sm': {},
 
       'label, .label': {
         '@apply text-xl font-bold text-white': {},
@@ -29,37 +29,36 @@ module.exports = Menu = () => ({
         },
       },
     },
-    
 
-    '.menu-body': {
-      '@apply border border-gray-stroke': {},
-      '>.MenuItem:first-child': {
-        '@apply border-t-0': {},
-      },
-    },
-
-    '.MenuItem': {
-      '@apply bg-white h-full border-t border-gray-stroke': {},
+    '.menu-item': {
+      '@apply bg-white h-full': {},
 
       '.items': {
         '@apply block': {},
       },
 
+      '&-label': {
+        '@apply flex-grow select-none': {},
+      },
+
       '&.active': {
         '> .wrapper': {
           boxShadow: 'inset 6px 0 0 0 #005595',
-
-          '> .MenuItem-link': {
+          '.menu-item-label': {
             '@apply underline': {},
           },
         },
       },
 
-      '.wrapper': {
-        '@apply flex items-center': {},
+      '.expand path': {
+        '@apply fill-primary': {},
+      },
+
+      '& .wrapper': {
+        '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {},
 
-        '.MenuItem-link': {
-          '@apply flex-grow text-left justify-start py-sm pr-[15px] h-full': {},
+        '.menu-item-link': {
+          '@apply flex-grow flex items-center text-base text-left justify-start py-sm pr-sm h-full': {},
         },
 
         '.expand': {
@@ -71,98 +70,309 @@ module.exports = Menu = () => ({
         },
       },
 
-      /*'&.lvl-1, &.lvl-2, &.lvl-3, &.lvl-4, &.lvl-5, &.lvl-6, &.lvl-7, &.lvl-8, &.lvl-9, &.lvl-10': {
-        '.MenuItem-link ': {
-          '@apply py-sm': {},
+      '&.open': {
+        '&:not(.moved-away) + .menu-item:not(.new-item) > .wrapper': {
+          '@apply border-t': {},
         },
-        '@apply py-sm': {},
       },
-      */
 
-      '&.isSubNode': {
-        '@apply bg-gray-lighter': {},
-        '> .wrapper ': {
-          '@apply min-h-[56px]': {},
+      '&.draggable': {
+        '&.dragenter': {
+          '> .wrapper': {
+            '@apply h-full max-h-full': {},
+          },
+          "> .wrapper > *:not([draggable='true'])": {
+            '@apply pointer-events-none': {},
+          },
+
+          '& > .wrapper::after': {
+            '@apply bg-info-light block relative w-full h-[44px]': {},
+            content: "''",
+          },
+        },
+
+        '&.moving': {
+          '@apply hidden': {},
         },
-      },
 
-      '&.isLeafNode': {
-        '@apply bg-gray-middle': {},
-        '> .wrapper ': {
-          '@apply min-h-[48px]': {},
+        '& .menu-item-move-button': {
+          '@apply -translate-x-full text-gray-stroke absolute py-sm inset-y-0 my-auto': {},
+
+          svg: {
+            '@apply h-full': {},
+          },
+          '&-label': {
+            '@apply text-[#B65A06]': {},
+          },
+        },
+
+        '.menu-item-error': {
+          '@apply text-error -ml-[5px] absolute -translate-x-full': {},
+        },
+
+        '&.moved-away': {
+          '@apply text-gray pointer-events-none': {},
+
+          '.menu-item-link': {
+            '@apply opacity-[78%] relative': {},
+
+            '&::before': {
+              '@apply absolute -translate-x-full -ml-sm block w-[10px] h-[10px] rounded-full bg-warning': {},
+              content: '""',
+            },
+          },
+
+          '.menu-item-error, .menu-item-changes, .items': {
+            '@apply hidden': {},
+          },
+
+          '.menu-item-changes': {
+            '@apply bg-gray': {},
+          },
+
+          '.menu-item-move-button': {
+            '@apply hidden': {},
+          },
+
+          '.expand': {
+            '@apply opacity-[78%]': {},
+            path: {
+              '@apply fill-gray-stroke': {},
+            },
+          },
+        },
+
+        '&.movedHere': {
+          "[draggable='true']": {
+            '@apply text-warning': {},
+          },
+        },
+
+        '&.separator': {
+          '@apply bg-transparent relative': {},
+
+          '> div.wrapper, > .menu-item-link': {
+            '@apply h-[44px]': {},
+          },
+        },
+
+        '&.new-item': {
+          '.wrapper': {
+            '@apply border-[3px] border-dashed border-[rgba(0,0,0,0.3)]': {},
+            boxSizing: 'border-box',
+
+            '.menu-item-move-button': {
+              '@apply -ml-[3px]': {},
+            },
+          },
+        },
+
+        '& .menu-item-changes': {
+          '@apply bg-warning rounded-full w-[24px] h-[24px] text-center text-sm font-bold text-white': {},
         },
       },
 
+      '&-separator': {
+        '@apply text-svartvik-200': {},
+        height: '1px',
+        width: '100%',
+        backgroundImage: `repeating-linear-gradient(0deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(90deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(180deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(270deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px)`,
+        backgroundSize: '2px 100%, 100% 2px, 2px 100% , 100% 2px',
+        backgroundPosition: '0 0, 0 0, 100% 0, 0 100%',
+        backgroundRepeat: 'no-repeat',
+      },
+
       '&.lvl-0': {
-        '> .wrapper ': {
-          '@apply min-h-[64px]': {},
+        '&:first-child > .wrapper': {
+          '@apply border-t-0': {},
+        },
+        '> .wrapper': {
+          '@apply h-[64px] max-h-[64px] border border-svartvik-200': {},
 
-          '> .MenuItem-link': {
-            '@apply py-md': {},
+          '> .menu-item-link': {
+            '@apply  py-md': {},
             paddingLeft: '3.2rem',
           },
         },
+
+        '.menu-item-link': {
+          '@apply h-[64px] max-h-[64px]': {},
+        },
+
+        '& + .menu-item > .wrapper': {
+          '@apply border-t-0': {},
+        },
+
+        '> .items': {
+          '@apply border-l border-r border-svartvik-200': {},
+        },
+
+        '&:last-child.open > .items': {
+          '@apply border-b border-svartvik-200': {},
+        },
+
+        '&.separator > .wrapper': {
+          '@apply border-l-0 border-r-0': {},
+        },
       },
 
       '&.lvl-1': {
-        '> .wrapper > .MenuItem-link': {
+        '@apply bg-gray-lighter': {},
+
+        '> .wrapper, .menu-item-link': {
+          '@apply h-[56px] max-h-[56px]': {},
+        },
+
+        '&.new-item': {
+          '> .wrapper .menu-item-link': {
+            '@apply h-[50px] max-h-[50px]': {},
+          },
+        },
+
+        '&.open:not(.new-item) > .wrapper': {
+          '@apply border-b border-svartvik-200': {},
+        },
+
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '4.8rem',
         },
       },
 
       '&.lvl-2': {
-        '> .wrapper > .MenuItem-link': {
+        '.wrapper': {
+          '@apply bg-gray-middle h-[48px] max-h-[48px]': {},
+
+          '> .menu-item-link': {
+            '@apply h-[48px] max-h-[48px]': {},
+          },
+        },
+
+        '&.new-item, .new-item': {
+          '> .wrapper .menu-item-link': {
+            '@apply h-[42px] max-h-[42px]': {},
+          },
+        },
+
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '6.4rem',
         },
       },
 
       '&.lvl-3': {
-        '> .wrapper > .MenuItem-link': {
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '8rem',
         },
       },
 
       '&.lvl-4': {
-        '> .wrapper > .MenuItem-link': {
+        '.wrapper': {
+          '@apply bg-[#d4d4d4]': {},
+        },
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '9.6rem',
         },
       },
 
       '&.lvl-5': {
-        '> .wrapper > .MenuItem-link': {
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '11.2rem',
         },
       },
 
       '&.lvl-6': {
-        '> .wrapper > .MenuItem-link': {
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '12.8rem',
         },
       },
 
       '&.lvl-7': {
-        '> .wrapper > .MenuItem-link': {
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '14.4rem',
         },
       },
 
       '&.lvl-8': {
-        '> .wrapper > .MenuItem-link': {
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '16rem',
         },
       },
 
       '&.lvl-9': {
-        '> .wrapper > .MenuItem-link': {
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '17.6rem',
         },
       },
 
       '&.lvl-10': {
-        '> .wrapper > .MenuItem-link': {
+        '> .wrapper > .menu-item-link': {
           paddingLeft: '19.2rem',
         },
       },
     },
   },
+
+  // Sparkle icon scss
+  '.sparkle-icon': {
+    '@apply inline-flex w-[25px] h-[18px] ml-md  gap-[6px]': {},
+  },
+  '.sparkle-vert-lg': {
+    '@apply relative w-0 h-0 border-b-[10px] border-b-primary border-x-[4px] border-x-transparent border-t-[4px] border-t-transparent top-[-4px]':
+      {},
+    '&::after': {
+      '@apply content-[""] absolute left-[-4px] top-[12px] w-0 h-0 border-x-[4px] border-b-[4px] border-x-transparent border-b-transparent border-t-[10px] border-t-primary':
+        {},
+    },
+  },
+  '.sparkle-horizontal-lg': {
+    '@apply relative w-0 h-0 border-b-[10px] border-b-primary border-x-[4px] border-x-transparent border-t-[4px] border-t-transparent right-[-7px] top-[-10px] rotate-[90deg]':
+      {},
+    '&::after': {
+      '@apply content-[""] absolute left-[-4px] top-[10px] w-0 h-0 border-x-[4px] border-b-[4px] border-x-transparent border-b-transparent border-t-[10px] border-t-primary':
+        {},
+    },
+  },
+  '.sparkle-vert-sm': {
+    '@apply relative w-0 h-0 border-b-[6px] border-b-primary border-x-[2px] border-x-transparent border-t-[2px] border-t-transparent top-[-2px]':
+      {},
+    '&::after': {
+      '@apply content-[""] absolute left-[-1.8px] top-[6px] w-0 h-0 border-x-[2px] border-b-[2px] border-x-transparent border-b-transparent border-t-[6px] border-t-primary':
+        {},
+    },
+  },
+  '.sparkle-horizontal-sm': {
+    '@apply relative w-0 h-0 border-b-[6px] border-b-primary border-x-[2px] border-x-transparent border-t-[6px] border-t-transparent right-[-5.5px] top-[-8px] rotate-[90deg]':
+      {},
+    '&::after': {
+      '@apply content-[""] absolute left-[-2.2px] top-[5px] w-0 h-0 border-x-[2px] border-b-[6px] border-x-transparent border-b-transparent border-t-[6px] border-t-primary':
+        {},
+    },
+  },
+  '.twinkling-1': {
+    '@apply animate-pulse delay-75': {},
+  },
+  '.twinkling-2': {
+    '@apply animate-fast-pulse delay-75': {},
+  },
+  '.twinkling-3': {
+    '@apply animate-slow-pulse delay-1000': {},
+  },
+
+  '@keyframes slow-pulse': {
+    '75%': {
+      opacity: 0,
+    },
+  },
+  '@keyframes fast-pulse': {
+    '65%': {
+      opacity: 0,
+    },
+  },
+
+  '.animate-slow-pulse': {
+    animation: 'slow-pulse 2s cubic-bezier(0.1, 0.8, 0.2, 0.8) infinite',
+  },
+
+  '.animate-fast-pulse': {
+    animation: 'fast-pulse 1.5s cubic-bezier(0.4, 0.8, 0.8, 1) infinite',
+  },
 });

package/src/components/tag.js

@@ -79,8 +79,7 @@ module.exports = Tag = (colors) => ({
   ...tagLight(colors),
 
   '.tag-close-button': {
-    '@apply text-body border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base':
-      {},
+    '@apply border-transparent cursor-base': {},
     fontSize: '1em',
     padding: '0.36em',
     marginLeft: '0.25em',

package/src/index.js

@@ -10,6 +10,8 @@ const Breadcrumb = require('./components/breadcrumb');
 const ButtonGroup = require('./components/button-group');
 
 const Checkbox = require('./components/checkbox');
+const ContextMenu = require('./components/context-menu');
+const Dialog = require('./components/dialog');
 const Dot = require('./components/dot');
 const Forms = require('./components/forms');
 const Calendar = require('./components/calendar');
@@ -51,6 +53,8 @@ const components = [
   ButtonGroup,
   Button,
   Checkbox,
+  ContextMenu,
+  Dialog,
   Dot,
   Forms,
   Calendar,