@sk-web-gui/core 0.1.47 → 0.1.49

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2021 Sundsvalls Kommun
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2021 Sundsvalls Kommun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,5 @@
-## Installation
-
-```sh
-yarn add @sk-web-gui/core
-```
+## Installation
+
+```sh
+yarn add @sk-web-gui/core
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "a14791d11b9d1fa052b5135525d06707fc3d9e7d"
+  "gitHead": "912bdad3a7424a09778be13da0010f89d183b401"
 }

package/src/colors.js

@@ -1,145 +1,145 @@
-const withOpacity = require('./with-opacity');
-
-module.exports = {
-  primary: {
-    DEFAULT: withOpacity('--vc-colors-primary-DEFAULT'),
-    dark: withOpacity('--vc-colors-primary-dark'),
-    light: withOpacity('--vc-colors-primary-light'),
-    active: withOpacity('--vc-colors-primary-active'),
-    50: withOpacity('--vc-colors-primary-DEFAULT'),
-    100: withOpacity('--vc-colors-primary-DEFAULT'),
-    200: withOpacity('--vc-colors-primary-DEFAULT'),
-    300: withOpacity('--vc-colors-primary-DEFAULT'),
-    400: withOpacity('--vc-colors-primary-DEFAULT'),
-    500: withOpacity('--vc-colors-primary-DEFAULT'),
-    600: withOpacity('--vc-colors-primary-DEFAULT'),
-    700: withOpacity('--vc-colors-primary-DEFAULT'),
-    800: withOpacity('--vc-colors-primary-DEFAULT'),
-    900: withOpacity('--vc-colors-primary-DEFAULT'),
-  },
-
-  secondary: {
-    DEFAULT: withOpacity('--vc-colors-secondary-DEFAULT'),
-    dark: withOpacity('--vc-colors-secondary-dark'),
-    light: withOpacity('--vc-colors-secondary-light'),
-    active: withOpacity('--vc-colors-secondary-active'),
-    50: withOpacity('--vc-colors-secondary-DEFAULT'),
-    100: withOpacity('--vc-colors-secondary-DEFAULT'),
-    200: withOpacity('--vc-colors-secondary-DEFAULT'),
-    300: withOpacity('--vc-colors-secondary-DEFAULT'),
-    400: withOpacity('--vc-colors-secondary-DEFAULT'),
-    500: withOpacity('--vc-colors-secondary-DEFAULT'),
-    600: withOpacity('--vc-colors-secondary-DEFAULT'),
-    700: withOpacity('--vc-colors-secondary-DEFAULT'),
-    800: withOpacity('--vc-colors-secondary-DEFAULT'),
-    900: withOpacity('--vc-colors-secondary-DEFAULT'),
-  },
-
-  success: {
-    DEFAULT: withOpacity('--vc-colors-success-DEFAULT'),
-    dark: withOpacity('--vc-colors-success-dark'),
-    light: withOpacity('--vc-colors-success-light'),
-    active: withOpacity('--vc-colors-success-active'),
-    50: withOpacity('--vc-colors-success-DEFAULT'),
-    100: withOpacity('--vc-colors-success-DEFAULT'),
-    200: withOpacity('--vc-colors-success-DEFAULT'),
-    300: withOpacity('--vc-colors-success-DEFAULT'),
-    400: withOpacity('--vc-colors-success-DEFAULT'),
-    500: withOpacity('--vc-colors-success-DEFAULT'),
-    600: withOpacity('--vc-colors-success-DEFAULT'),
-    700: withOpacity('--vc-colors-success-DEFAULT'),
-    800: withOpacity('--vc-colors-success-DEFAULT'),
-    900: withOpacity('--vc-colors-success-DEFAULT'),
-  },
-
-  info: {
-    DEFAULT: withOpacity('--vc-colors-info-DEFAULT'),
-    dark: withOpacity('--vc-colors-info-dark'),
-    light: withOpacity('--vc-colors-info-light'),
-    active: withOpacity('--vc-colors-info-active'),
-    50: withOpacity('--vc-colors-info-DEFAULT'),
-    100: withOpacity('--vc-colors-info-DEFAULT'),
-    200: withOpacity('--vc-colors-info-DEFAULT'),
-    300: withOpacity('--vc-colors-info-DEFAULT'),
-    400: withOpacity('--vc-colors-info-DEFAULT'),
-    500: withOpacity('--vc-colors-info-DEFAULT'),
-    600: withOpacity('--vc-colors-info-DEFAULT'),
-    700: withOpacity('--vc-colors-info-DEFAULT'),
-    800: withOpacity('--vc-colors-info-DEFAULT'),
-    900: withOpacity('--vc-colors-info-DEFAULT'),
-  },
-
-  warning: {
-    DEFAULT: withOpacity('--vc-colors-warning-DEFAULT'),
-    dark: withOpacity('--vc-colors-warning-dark'),
-    light: withOpacity('--vc-colors-warning-light'),
-    active: withOpacity('--vc-colors-warning-active'),
-    50: withOpacity('--vc-colors-warning-DEFAULT'),
-    100: withOpacity('--vc-colors-warning-DEFAULT'),
-    200: withOpacity('--vc-colors-warning-DEFAULT'),
-    300: withOpacity('--vc-colors-warning-DEFAULT'),
-    400: withOpacity('--vc-colors-warning-DEFAULT'),
-    500: withOpacity('--vc-colors-warning-DEFAULT'),
-    600: withOpacity('--vc-colors-warning-DEFAULT'),
-    700: withOpacity('--vc-colors-warning-DEFAULT'),
-    800: withOpacity('--vc-colors-warning-DEFAULT'),
-    900: withOpacity('--vc-colors-warning-DEFAULT'),
-  },
-
-  error: {
-    DEFAULT: withOpacity('--vc-colors-error-DEFAULT'),
-    dark: withOpacity('--vc-colors-error-dark'),
-    light: withOpacity('--vc-colors-error-light'),
-    active: withOpacity('--vc-colors-error-active'),
-    50: withOpacity('--vc-colors-error-DEFAULT'),
-    100: withOpacity('--vc-colors-error-DEFAULT'),
-    200: withOpacity('--vc-colors-error-DEFAULT'),
-    300: withOpacity('--vc-colors-error-DEFAULT'),
-    400: withOpacity('--vc-colors-error-DEFAULT'),
-    500: withOpacity('--vc-colors-error-DEFAULT'),
-    600: withOpacity('--vc-colors-error-DEFAULT'),
-    700: withOpacity('--vc-colors-error-DEFAULT'),
-    800: withOpacity('--vc-colors-error-DEFAULT'),
-    900: withOpacity('--vc-colors-error-DEFAULT'),
-  },
-
-  neutral: {
-    DEFAULT: withOpacity('--vc-colors-neutral'),
-    50: withOpacity('--vc-colors-neutral-50'),
-    100: withOpacity('--vc-colors-neutral-100'),
-    200: withOpacity('--vc-colors-neutral-200'),
-    300: withOpacity('--vc-colors-neutral-300'),
-    400: withOpacity('--vc-colors-neutral-400'),
-    500: withOpacity('--vc-colors-neutral-500'),
-    600: withOpacity('--vc-colors-neutral-600'),
-    700: withOpacity('--vc-colors-neutral-700'),
-    800: withOpacity('--vc-colors-neutral-800'),
-    900: withOpacity('--vc-colors-neutral-900'),
-  },
-
-  whiteAlpha: {
-    50: 'rgba(255, 255, 255, 0.04)',
-    100: 'rgba(255, 255, 255, 0.06)',
-    200: 'rgba(255, 255, 255, 0.08)',
-    300: 'rgba(255, 255, 255, 0.16)',
-    400: 'rgba(255, 255, 255, 0.24)',
-    500: 'rgba(255, 255, 255, 0.36)',
-    600: 'rgba(255, 255, 255, 0.48)',
-    700: 'rgba(255, 255, 255, 0.64)',
-    800: 'rgba(255, 255, 255, 0.80)',
-    900: 'rgba(255, 255, 255, 0.92)',
-  },
-
-  blackAlpha: {
-    50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.06)',
-    200: 'rgba(0, 0, 0, 0.08)',
-    300: 'rgba(0, 0, 0, 0.16)',
-    400: 'rgba(0, 0, 0, 0.24)',
-    500: 'rgba(0, 0, 0, 0.36)',
-    600: 'rgba(0, 0, 0, 0.48)',
-    700: 'rgba(0, 0, 0, 0.64)',
-    800: 'rgba(0, 0, 0, 0.80)',
-    900: 'rgba(0, 0, 0, 0.92)',
-  },
-};
+const withOpacity = require('./with-opacity');
+
+module.exports = {
+  primary: {
+    DEFAULT: withOpacity('--vc-colors-primary-DEFAULT'),
+    dark: withOpacity('--vc-colors-primary-dark'),
+    light: withOpacity('--vc-colors-primary-light'),
+    active: withOpacity('--vc-colors-primary-active'),
+    50: withOpacity('--vc-colors-primary-DEFAULT'),
+    100: withOpacity('--vc-colors-primary-DEFAULT'),
+    200: withOpacity('--vc-colors-primary-DEFAULT'),
+    300: withOpacity('--vc-colors-primary-DEFAULT'),
+    400: withOpacity('--vc-colors-primary-DEFAULT'),
+    500: withOpacity('--vc-colors-primary-DEFAULT'),
+    600: withOpacity('--vc-colors-primary-DEFAULT'),
+    700: withOpacity('--vc-colors-primary-DEFAULT'),
+    800: withOpacity('--vc-colors-primary-DEFAULT'),
+    900: withOpacity('--vc-colors-primary-DEFAULT'),
+  },
+
+  secondary: {
+    DEFAULT: withOpacity('--vc-colors-secondary-DEFAULT'),
+    dark: withOpacity('--vc-colors-secondary-dark'),
+    light: withOpacity('--vc-colors-secondary-light'),
+    active: withOpacity('--vc-colors-secondary-active'),
+    50: withOpacity('--vc-colors-secondary-DEFAULT'),
+    100: withOpacity('--vc-colors-secondary-DEFAULT'),
+    200: withOpacity('--vc-colors-secondary-DEFAULT'),
+    300: withOpacity('--vc-colors-secondary-DEFAULT'),
+    400: withOpacity('--vc-colors-secondary-DEFAULT'),
+    500: withOpacity('--vc-colors-secondary-DEFAULT'),
+    600: withOpacity('--vc-colors-secondary-DEFAULT'),
+    700: withOpacity('--vc-colors-secondary-DEFAULT'),
+    800: withOpacity('--vc-colors-secondary-DEFAULT'),
+    900: withOpacity('--vc-colors-secondary-DEFAULT'),
+  },
+
+  success: {
+    DEFAULT: withOpacity('--vc-colors-success-DEFAULT'),
+    dark: withOpacity('--vc-colors-success-dark'),
+    light: withOpacity('--vc-colors-success-light'),
+    active: withOpacity('--vc-colors-success-active'),
+    50: withOpacity('--vc-colors-success-DEFAULT'),
+    100: withOpacity('--vc-colors-success-DEFAULT'),
+    200: withOpacity('--vc-colors-success-DEFAULT'),
+    300: withOpacity('--vc-colors-success-DEFAULT'),
+    400: withOpacity('--vc-colors-success-DEFAULT'),
+    500: withOpacity('--vc-colors-success-DEFAULT'),
+    600: withOpacity('--vc-colors-success-DEFAULT'),
+    700: withOpacity('--vc-colors-success-DEFAULT'),
+    800: withOpacity('--vc-colors-success-DEFAULT'),
+    900: withOpacity('--vc-colors-success-DEFAULT'),
+  },
+
+  info: {
+    DEFAULT: withOpacity('--vc-colors-info-DEFAULT'),
+    dark: withOpacity('--vc-colors-info-dark'),
+    light: withOpacity('--vc-colors-info-light'),
+    active: withOpacity('--vc-colors-info-active'),
+    50: withOpacity('--vc-colors-info-DEFAULT'),
+    100: withOpacity('--vc-colors-info-DEFAULT'),
+    200: withOpacity('--vc-colors-info-DEFAULT'),
+    300: withOpacity('--vc-colors-info-DEFAULT'),
+    400: withOpacity('--vc-colors-info-DEFAULT'),
+    500: withOpacity('--vc-colors-info-DEFAULT'),
+    600: withOpacity('--vc-colors-info-DEFAULT'),
+    700: withOpacity('--vc-colors-info-DEFAULT'),
+    800: withOpacity('--vc-colors-info-DEFAULT'),
+    900: withOpacity('--vc-colors-info-DEFAULT'),
+  },
+
+  warning: {
+    DEFAULT: withOpacity('--vc-colors-warning-DEFAULT'),
+    dark: withOpacity('--vc-colors-warning-dark'),
+    light: withOpacity('--vc-colors-warning-light'),
+    active: withOpacity('--vc-colors-warning-active'),
+    50: withOpacity('--vc-colors-warning-DEFAULT'),
+    100: withOpacity('--vc-colors-warning-DEFAULT'),
+    200: withOpacity('--vc-colors-warning-DEFAULT'),
+    300: withOpacity('--vc-colors-warning-DEFAULT'),
+    400: withOpacity('--vc-colors-warning-DEFAULT'),
+    500: withOpacity('--vc-colors-warning-DEFAULT'),
+    600: withOpacity('--vc-colors-warning-DEFAULT'),
+    700: withOpacity('--vc-colors-warning-DEFAULT'),
+    800: withOpacity('--vc-colors-warning-DEFAULT'),
+    900: withOpacity('--vc-colors-warning-DEFAULT'),
+  },
+
+  error: {
+    DEFAULT: withOpacity('--vc-colors-error-DEFAULT'),
+    dark: withOpacity('--vc-colors-error-dark'),
+    light: withOpacity('--vc-colors-error-light'),
+    active: withOpacity('--vc-colors-error-active'),
+    50: withOpacity('--vc-colors-error-DEFAULT'),
+    100: withOpacity('--vc-colors-error-DEFAULT'),
+    200: withOpacity('--vc-colors-error-DEFAULT'),
+    300: withOpacity('--vc-colors-error-DEFAULT'),
+    400: withOpacity('--vc-colors-error-DEFAULT'),
+    500: withOpacity('--vc-colors-error-DEFAULT'),
+    600: withOpacity('--vc-colors-error-DEFAULT'),
+    700: withOpacity('--vc-colors-error-DEFAULT'),
+    800: withOpacity('--vc-colors-error-DEFAULT'),
+    900: withOpacity('--vc-colors-error-DEFAULT'),
+  },
+
+  neutral: {
+    DEFAULT: withOpacity('--vc-colors-neutral'),
+    50: withOpacity('--vc-colors-neutral-50'),
+    100: withOpacity('--vc-colors-neutral-100'),
+    200: withOpacity('--vc-colors-neutral-200'),
+    300: withOpacity('--vc-colors-neutral-300'),
+    400: withOpacity('--vc-colors-neutral-400'),
+    500: withOpacity('--vc-colors-neutral-500'),
+    600: withOpacity('--vc-colors-neutral-600'),
+    700: withOpacity('--vc-colors-neutral-700'),
+    800: withOpacity('--vc-colors-neutral-800'),
+    900: withOpacity('--vc-colors-neutral-900'),
+  },
+
+  whiteAlpha: {
+    50: 'rgba(255, 255, 255, 0.04)',
+    100: 'rgba(255, 255, 255, 0.06)',
+    200: 'rgba(255, 255, 255, 0.08)',
+    300: 'rgba(255, 255, 255, 0.16)',
+    400: 'rgba(255, 255, 255, 0.24)',
+    500: 'rgba(255, 255, 255, 0.36)',
+    600: 'rgba(255, 255, 255, 0.48)',
+    700: 'rgba(255, 255, 255, 0.64)',
+    800: 'rgba(255, 255, 255, 0.80)',
+    900: 'rgba(255, 255, 255, 0.92)',
+  },
+
+  blackAlpha: {
+    50: 'rgba(0, 0, 0, 0.04)',
+    100: 'rgba(0, 0, 0, 0.06)',
+    200: 'rgba(0, 0, 0, 0.08)',
+    300: 'rgba(0, 0, 0, 0.16)',
+    400: 'rgba(0, 0, 0, 0.24)',
+    500: 'rgba(0, 0, 0, 0.36)',
+    600: 'rgba(0, 0, 0, 0.48)',
+    700: 'rgba(0, 0, 0, 0.64)',
+    800: 'rgba(0, 0, 0, 0.80)',
+    900: 'rgba(0, 0, 0, 0.92)',
+  },
+};

package/src/components/accordion.js

@@ -1,93 +1,93 @@
-module.exports = Accordion = (colors) => ({
-  '.accordion': {
-    '&-header': {
-      '@apply flex flex-col text-left': {},
-
-      '[aria-expanded="true"] &': {
-        '@apply bg-hover': {},
-      },
-
-      '&-icon': {
-        '@apply ml-auto !text-2xl': {},
-      },
-    },
-
-    '&-is-open &-header': {
-      '@apply bg-hover': {},
-    },
-
-    '&-toggle': {
-      '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
-      fontWeight: 'bold',
-      //"@apply focus-visible:shadow shadow-lg": {},
-      '&:focus-visible': {
-        boxShadow: '0 0 0 0.4rem #fff!important',
-        outline: '0',
-        //"@apply border-4": {},
-      },
-      '.accordion-title': {
-        '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},
-      },
-      '.accordion-subtitle': {
-        '@apply m-0 mr-md text-sm font-normal': {},
-      },
-    },
-
-    '&-body': {
-      '@apply h-0 overflow-hidden m-lg': {},
-      transitionProperty: 'visibility, height, padding, margin',
-      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-      transitionDuration: '180ms',
-
-      '&[aria-hidden="true"], &[data-hidden="true"]': {
-        '@apply my-0 invisible': {},
-      },
-
-      '&[aria-hidden="false"], &[data-hidden="false"]': {
-        '@apply block h-auto visible': {},
-      },
-    },
-
-    '&-solid': {
-      '@apply border border-primary': {},
-      '.accordion-header': {
-        '@apply bg-primary text-white': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-hover': {},
-        },
-      },
-    },
-
-    '&-is-open': {
-      '@apply border border-gray-stroke': {},
-      '& .accordion-header': {
-        '@apply bg-hover text-white': {},
-      },
-    },
-
-    '&-is-open &-body': {
-      '@apply overflow-visible animate-reset-overflow': {},
-    },
-
-    '&-outline': {
-      '@apply border border-gray-stroke': {},
-      '.accordion-body': {
-        '@apply mt-0': {},
-      },
-      '.accordion-toggle': {
-        '&:focus-visible': {
-          boxShadow: '0 0 0 0.4rem #4b4b4b!important',
-          outline: '0',
-        },
-      },
-      '.accordion-header': {
-        '@apply bg-transparent text-body': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-hover': {},
-        },
-      },
-    },
-  },
-});
+module.exports = Accordion = (colors) => ({
+  '.accordion': {
+    '&-header': {
+      '@apply flex flex-col text-left': {},
+
+      '[aria-expanded="true"] &': {
+        '@apply bg-hover': {},
+      },
+
+      '&-icon': {
+        '@apply ml-auto !text-2xl': {},
+      },
+    },
+
+    '&-is-open &-header': {
+      '@apply bg-hover': {},
+    },
+
+    '&-toggle': {
+      '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
+      fontWeight: 'bold',
+      //"@apply focus-visible:shadow shadow-lg": {},
+      '&:focus-visible': {
+        boxShadow: '0 0 0 0.4rem #fff!important',
+        outline: '0',
+        //"@apply border-4": {},
+      },
+      '.accordion-title': {
+        '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},
+      },
+      '.accordion-subtitle': {
+        '@apply m-0 mr-md text-sm font-normal': {},
+      },
+    },
+
+    '&-body': {
+      '@apply h-0 overflow-hidden m-lg': {},
+      transitionProperty: 'visibility, height, padding, margin',
+      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      transitionDuration: '180ms',
+
+      '&[aria-hidden="true"], &[data-hidden="true"]': {
+        '@apply my-0 invisible': {},
+      },
+
+      '&[aria-hidden="false"], &[data-hidden="false"]': {
+        '@apply block h-auto visible': {},
+      },
+    },
+
+    '&-solid': {
+      '@apply border border-primary': {},
+      '.accordion-header': {
+        '@apply bg-primary text-white': {},
+
+        '[aria-expanded="true"] &': {
+          '@apply bg-hover': {},
+        },
+      },
+    },
+
+    '&-is-open': {
+      '@apply border border-gray-stroke': {},
+      '& .accordion-header': {
+        '@apply bg-hover text-white': {},
+      },
+    },
+
+    '&-is-open &-body': {
+      '@apply overflow-visible animate-reset-overflow': {},
+    },
+
+    '&-outline': {
+      '@apply border border-gray-stroke': {},
+      '.accordion-body': {
+        '@apply mt-0': {},
+      },
+      '.accordion-toggle': {
+        '&:focus-visible': {
+          boxShadow: '0 0 0 0.4rem #4b4b4b!important',
+          outline: '0',
+        },
+      },
+      '.accordion-header': {
+        '@apply bg-transparent text-body': {},
+
+        '[aria-expanded="true"] &': {
+          '@apply bg-hover': {},
+        },
+      },
+    },
+  },
+});

package/src/components/alert-banner.js

@@ -1,25 +1,25 @@
-module.exports = Modal = () => ({
-  '.alert-banner': {
-    '@apply p-md': {},
-
-    '&-content': {
-      '@apply w-full m-auto flex': {},
-
-      '&-wrapper': {
-        '@apply flex-grow flex': {},
-      },
-    },
-
-    '&-icon': {
-      '@apply mr-[10px]': {},
-    },
-
-    '&-message': {
-      '@apply underline inline-block max-w-[800px] text-body text-base': {},
-    },
-
-    '&-close': {
-      '@apply p-4 -m-4 inline-flex': {},
-    },
-  },
-});
+module.exports = Modal = () => ({
+  '.alert-banner': {
+    '@apply p-md': {},
+
+    '&-content': {
+      '@apply w-full m-auto flex': {},
+
+      '&-wrapper': {
+        '@apply flex-grow flex': {},
+      },
+    },
+
+    '&-icon': {
+      '@apply mr-[10px]': {},
+    },
+
+    '&-message': {
+      '@apply underline inline-block max-w-[800px] text-body text-base': {},
+    },
+
+    '&-close': {
+      '@apply p-4 -m-4 inline-flex': {},
+    },
+  },
+});