@sk-web-gui/core 0.1.47 → 0.1.49

package/src/components/calendar.js

@@ -1,82 +1,82 @@
-module.exports = Calendar = () => ({
-  // Month row
-  '.MuiCalendarPicker-root > div:first-of-type': {
-    '@apply ml-2 -mr-2 px-10': {},
-  },
-
-  // Month
-  '.MuiCalendarPicker-root > div:first-of-type > div': {
-    '@apply font-bold text-base text-body': {},
-  },
-
-  // Arrow switchers
-  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root .MuiSvgIcon-root': {
-    '@apply text-body text-lg': {},
-  },
-  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
-    '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
-      {},
-  },
-  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
-    '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
-      {},
-  },
-  // Arrow spacer
-  '.MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer': {
-    '@apply w-11': {},
-  },
-  // Disabled arrow
-  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root[disabled] .MuiSvgIcon-root': {
-    '@apply text-gray-stroke': {},
-  },
-
-  // Weekdays
-  '.MuiCalendarPicker-root div > div:first-of-type > .MuiTypography-root': {
-    '@apply font-bold text-body text-base': {},
-  },
-
-  // Days-Grid
-  '.MuiCalendarPicker-root > div:last-of-type > div:last-of-type': {
-    '@apply min-h-min pb-6': {},
-  },
-
-  // Day picking
-  '.MuiCalendarPicker-root .MuiPickersDay-root': {
-    '@apply text-base': {},
-  },
-  '.MuiCalendarPicker-root .Mui-disabled': {
-    '@apply text-gray-stroke': {},
-  },
-
-  // Day picked
-  '.MuiCalendarPicker-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
-    '@apply bg-background-one text-body focus-visible:bg-background-one hover:bg-background-one focus:bg-background-one':
-      {},
-  },
-
-  // Day hovered
-  '.MuiCalendarPicker-root .MuiPickersDay-root, .MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {
-    '@apply border-primary border-solid focus-visible:border hover:bg-transparent focus:bg-transparent hover:border':
-      {},
-  },
-
-  // today
-  '.MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {
-    '@apply border-0 hover:border': {},
-  },
-
-  '.calendar': {
-    // Input field
-    '.datepicker-input': {
-      '@apply relative': {},
-    },
-
-    '.datepicker-input input': {
-      '@apply pl-20 cursor-pointer': {},
-    },
-
-    '.datepicker-input-icon': {
-      '@apply pointer-events-none absolute m-6 top-0 left-0 text-xl fill-body': {},
-    },
-  },
-});
+module.exports = Calendar = () => ({
+  // Month row
+  '.MuiCalendarPicker-root > div:first-of-type': {
+    '@apply ml-2 -mr-2 px-10': {},
+  },
+
+  // Month
+  '.MuiCalendarPicker-root > div:first-of-type > div': {
+    '@apply font-bold text-base text-body': {},
+  },
+
+  // Arrow switchers
+  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root .MuiSvgIcon-root': {
+    '@apply text-body text-lg': {},
+  },
+  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
+    '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
+      {},
+  },
+  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
+    '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
+      {},
+  },
+  // Arrow spacer
+  '.MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer': {
+    '@apply w-11': {},
+  },
+  // Disabled arrow
+  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root[disabled] .MuiSvgIcon-root': {
+    '@apply text-gray-stroke': {},
+  },
+
+  // Weekdays
+  '.MuiCalendarPicker-root div > div:first-of-type > .MuiTypography-root': {
+    '@apply font-bold text-body text-base': {},
+  },
+
+  // Days-Grid
+  '.MuiCalendarPicker-root > div:last-of-type > div:last-of-type': {
+    '@apply min-h-min pb-6': {},
+  },
+
+  // Day picking
+  '.MuiCalendarPicker-root .MuiPickersDay-root': {
+    '@apply text-base': {},
+  },
+  '.MuiCalendarPicker-root .Mui-disabled': {
+    '@apply text-gray-stroke': {},
+  },
+
+  // Day picked
+  '.MuiCalendarPicker-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected': {
+    '@apply bg-background-one text-body focus-visible:bg-background-one hover:bg-background-one focus:bg-background-one':
+      {},
+  },
+
+  // Day hovered
+  '.MuiCalendarPicker-root .MuiPickersDay-root, .MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {
+    '@apply border-primary border-solid focus-visible:border hover:bg-transparent focus:bg-transparent hover:border':
+      {},
+  },
+
+  // today
+  '.MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today': {
+    '@apply border-0 hover:border': {},
+  },
+
+  '.calendar': {
+    // Input field
+    '.datepicker-input': {
+      '@apply relative': {},
+    },
+
+    '.datepicker-input input': {
+      '@apply pl-20 cursor-pointer': {},
+    },
+
+    '.datepicker-input-icon': {
+      '@apply pointer-events-none absolute m-6 top-0 left-0 text-xl fill-body': {},
+    },
+  },
+});

package/src/components/card.js

@@ -1,54 +1,54 @@
-module.exports = Card = () => ({
-  '.avatar': {
-    '@apply bg-primary-light text-primary rounded-full p-4': {},
-  },
-
-  '.card-list': {
-    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {},
-    //"@apply text-center": {},
-    //"@apply justify-center items-center": {},
-  },
-
-  '.card': {
-    '@apply p-lg rounded shadow-lg bg-white relative': {},
-    '@apply p-0': {},
-    //padding: "2.4rem",
-
-    // clickable
-    '&-clickable': {
-      // Hover
-      '@apply hover:shadow-xl hover:cursor-pointer': {},
-    },
-
-    // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
-    // dark
-    //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
-  },
-  '.card-outlined': {
-    '@apply border-2 border-gray-stroke': {},
-  },
-  '.card-border-top': {
-    '@apply border-t-4 border-t-primary': {},
-  },
-
-  '.card-body': {
-    '@apply text-body p-8': {},
-  },
-
-  '.card-image': {
-    '@apply object-cover': {},
-    width: '100%',
-    height: '250px',
-  },
-
-  '.card-link': {
-    '&::after': {
-      content: "''",
-      position: 'absolute',
-      left: '0',
-      top: '0',
-      right: '0',
-      bottom: '0',
-    },
-  },
-});
+module.exports = Card = () => ({
+  '.avatar': {
+    '@apply bg-primary-light text-primary rounded-full p-4': {},
+  },
+
+  '.card-list': {
+    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {},
+    //"@apply text-center": {},
+    //"@apply justify-center items-center": {},
+  },
+
+  '.card': {
+    '@apply p-lg rounded shadow-lg bg-white relative': {},
+    '@apply p-0': {},
+    //padding: "2.4rem",
+
+    // clickable
+    '&-clickable': {
+      // Hover
+      '@apply hover:shadow-xl hover:cursor-pointer': {},
+    },
+
+    // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
+    // dark
+    //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
+  },
+  '.card-outlined': {
+    '@apply border-2 border-gray-stroke': {},
+  },
+  '.card-border-top': {
+    '@apply border-t-4 border-t-primary': {},
+  },
+
+  '.card-body': {
+    '@apply text-body p-8': {},
+  },
+
+  '.card-image': {
+    '@apply object-cover': {},
+    width: '100%',
+    height: '250px',
+  },
+
+  '.card-link': {
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      left: '0',
+      top: '0',
+      right: '0',
+      bottom: '0',
+    },
+  },
+});

package/src/components/checkbox.js

@@ -1,127 +1,127 @@
-const svgToDataUri = require('mini-svg-data-uri');
-
-module.exports = Checkbox = (colors, theme) => ({
-  '.form-checkbox': {
-    //"@apply rounded shadow-sm": {},
-    backgroundColor: 'inherit',
-    '@apply border-gray-stroke focus:bg-white': {},
-
-    '&[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
-    },
-    '&[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
-    },
-    // dark colors
-    '@apply dark:border-neutral-400': {},
-    '.dark &[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
-    },
-    '.dark &[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
-    },
-
-    '@media (prefers-color-scheme: dark)': {
-      '&[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
-      },
-      '&[aria-invalid=true]:hover': {
-        '--tw-border-opacity': '1',
-        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
-      },
-    },
-
-    '&:checked': {
-      '@apply text-white bg-white border-primary': {},
-      [`@apply focus-visible:border-primary focus-visible:ring-primary`]: {},
-
-      backgroundImage: `url("${svgToDataUri(
-        `<svg viewBox="0 0 16 16" fill="#005595" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
-      )}")`,
-      //borderColor: "transparent",
-    },
-
-    [`&[data-color="primary"]`]: {
-      //[`@apply text-primary`]: {},
-      // dark
-      //[`@apply dark:text-primary`]: {},
-      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},
-    },
-
-    // Fix focus stylign
-    '&:checked:hover, &:checked:focus': {
-      '@apply bg-white border-primary': {},
-    },
-
-    // colors
-    /*...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply text-${color}`]: {},
-          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
-          backgroundImage: `url("${svgToDataUri(
-            `<svg viewBox="0 0 16 16" fill="${theme(`colors.primary_raw.DEFAULT`)}" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
-          )}")`,
-          // dark
-          [`@apply dark:text-${color}`]: {},
-          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
-        },
-      }),
-      {}
-    ),*/
-
-    '@apply dark:focus-visible:ring-offset-neutral-900': {},
-
-    // sizing
-    '&-sm': {
-      width: '1.4rem',
-      height: '1.4rem',
-    },
-
-    '&-md': {
-      width: '1.6rem',
-      height: '1.6rem',
-      //"@apply w-4 h-4": {},
-    },
-
-    '&-lg': {
-      width: '1.8rem',
-      height: '1.8rem',
-    },
-
-    // disabled
-    '&-disabled': {
-      backgroundColor: '#ECECEC',
-      //"@apply disabled:bg-gray-stroke": {},
-      //"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
-      //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
-    },
-
-    // label
-    '&-label': {
-      '@apply text-body select-none text-sm': {},
-      marginLeft: '0.8rem',
-      //"@apply text-black": {},
-      // dark colors
-      '@apply dark:text-neutral-100': {},
-
-      '&-sm': {
-        '@apply text-xs': {},
-      },
-
-      '&-md': {
-        '@apply text-sm': {},
-      },
-
-      '&-lg': {
-        '@apply text-base': {},
-      },
-    },
-  },
-});
+const svgToDataUri = require('mini-svg-data-uri');
+
+module.exports = Checkbox = (colors, theme) => ({
+  '.form-checkbox': {
+    //"@apply rounded shadow-sm": {},
+    backgroundColor: 'inherit',
+    '@apply border-gray-stroke focus:bg-white': {},
+
+    '&[aria-invalid=true]': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
+    },
+    '&[aria-invalid=true]:hover': {
+      '--tw-border-opacity': '1',
+      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
+    },
+    // dark colors
+    '@apply dark:border-neutral-400': {},
+    '.dark &[aria-invalid=true]': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
+    },
+    '.dark &[aria-invalid=true]:hover': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
+    },
+
+    '@media (prefers-color-scheme: dark)': {
+      '&[aria-invalid=true]': {
+        '--tw-border-opacity': '1',
+        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
+      },
+      '&[aria-invalid=true]:hover': {
+        '--tw-border-opacity': '1',
+        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
+      },
+    },
+
+    '&:checked': {
+      '@apply text-white bg-white border-primary': {},
+      [`@apply focus-visible:border-primary focus-visible:ring-primary`]: {},
+
+      backgroundImage: `url("${svgToDataUri(
+        `<svg viewBox="0 0 16 16" fill="#005595" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
+      )}")`,
+      //borderColor: "transparent",
+    },
+
+    [`&[data-color="primary"]`]: {
+      //[`@apply text-primary`]: {},
+      // dark
+      //[`@apply dark:text-primary`]: {},
+      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},
+    },
+
+    // Fix focus stylign
+    '&:checked:hover, &:checked:focus': {
+      '@apply bg-white border-primary': {},
+    },
+
+    // colors
+    /*...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply text-${color}`]: {},
+          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
+          backgroundImage: `url("${svgToDataUri(
+            `<svg viewBox="0 0 16 16" fill="${theme(`colors.primary_raw.DEFAULT`)}" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
+          )}")`,
+          // dark
+          [`@apply dark:text-${color}`]: {},
+          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
+        },
+      }),
+      {}
+    ),*/
+
+    '@apply dark:focus-visible:ring-offset-neutral-900': {},
+
+    // sizing
+    '&-sm': {
+      width: '1.4rem',
+      height: '1.4rem',
+    },
+
+    '&-md': {
+      width: '1.6rem',
+      height: '1.6rem',
+      //"@apply w-4 h-4": {},
+    },
+
+    '&-lg': {
+      width: '1.8rem',
+      height: '1.8rem',
+    },
+
+    // disabled
+    '&-disabled': {
+      backgroundColor: '#ECECEC',
+      //"@apply disabled:bg-gray-stroke": {},
+      //"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
+      //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
+    },
+
+    // label
+    '&-label': {
+      '@apply text-body select-none text-sm': {},
+      marginLeft: '0.8rem',
+      //"@apply text-black": {},
+      // dark colors
+      '@apply dark:text-neutral-100': {},
+
+      '&-sm': {
+        '@apply text-xs': {},
+      },
+
+      '&-md': {
+        '@apply text-sm': {},
+      },
+
+      '&-lg': {
+        '@apply text-base': {},
+      },
+    },
+  },
+});

package/src/components/code.js

@@ -1,9 +1,9 @@
-module.exports = Code = () => ({
-  '.code': {
-    '@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all': {},
-    '@apply bg-neutral-200 border border-neutral-100 text-body': {},
-    // dark
-    '@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300': {},
-    padding: '2px 3px 1px',
-  },
-});
+module.exports = Code = () => ({
+  '.code': {
+    '@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all': {},
+    '@apply bg-neutral-200 border border-neutral-100 text-body': {},
+    // dark
+    '@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300': {},
+    padding: '2px 3px 1px',
+  },
+});

package/src/components/cookie-consent.js

@@ -1,30 +1,30 @@
-module.exports = CookieConsent = () => ({
-  '.cookie-consent': {
-    '@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0 bg-white': {},
-
-    '&-close-btn': {
-      '@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center':
-        {},
-
-      '&-icon': {
-        '@apply !text-2xl': {},
-      },
-    },
-
-    '&-content-wrapper': {
-      '@apply flex flex-col container py-12 px-4 bg-white relative': {},
-    },
-
-    '&-title': {
-      '@apply text-2xl leading-2xl mb-1 mt-4 break-words': {},
-    },
-
-    '&-description': {
-      '@apply text-base leading-base mb-8': {},
-    },
-
-    '&-btn-wrapper': {
-      '@apply flex flex-col space-y-4 lg:block lg:space-y-0 lg:space-x-4': {},
-    },
-  },
-});
+module.exports = CookieConsent = () => ({
+  '.cookie-consent': {
+    '@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0 bg-white': {},
+
+    '&-close-btn': {
+      '@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center':
+        {},
+
+      '&-icon': {
+        '@apply !text-2xl': {},
+      },
+    },
+
+    '&-content-wrapper': {
+      '@apply flex flex-col container py-12 px-4 bg-white relative': {},
+    },
+
+    '&-title': {
+      '@apply text-2xl leading-2xl mb-1 mt-4 break-words': {},
+    },
+
+    '&-description': {
+      '@apply text-base leading-base mb-8': {},
+    },
+
+    '&-btn-wrapper': {
+      '@apply flex flex-col space-y-4 lg:block lg:space-y-0 lg:space-x-4': {},
+    },
+  },
+});

package/src/components/divider.js

@@ -1,12 +1,12 @@
-module.exports = Divider = () => ({
-  '.divider': {
-    '@apply border-0 border-gray-stroke': {},
-    //borderColor: "inherit",
-    '&-vertical': {
-      '@apply border-l border-solid h-auto mx-2': {},
-    },
-    '&-horizontal': {
-      '@apply border-b border-solid w-auto my-2': {},
-    },
-  },
-});
+module.exports = Divider = () => ({
+  '.divider': {
+    '@apply border-0 border-gray-stroke': {},
+    //borderColor: "inherit",
+    '&-vertical': {
+      '@apply border-l border-solid h-auto mx-2': {},
+    },
+    '&-horizontal': {
+      '@apply border-b border-solid w-auto my-2': {},
+    },
+  },
+});