@sk-web-gui/core 0.1.92 → 1.0.0

package/src/theme.js

@@ -1,84 +1,158 @@
-const { colors } = require('@sk-web-gui/theme');
-const withOpacity = require('./with-opacity');
-
-module.exports = {
-  fontSize: {
-    tiny: '1rem',
-    xs: '1.2rem',
-    sm: '1.4rem',
-    base: '1.6rem',
-    lg: '1.8rem',
-    xl: '2.0rem',
-    '2xl': '2.4rem',
-    '3xl': '3.2rem',
-    '4xl': '4.0rem',
-    '5xl': '5.2rem',
-  },
-  extend: {
-    colors: {
-      ...colors,
-      current: 'currentColor',
-    },
-    cursor: {
-      base: 'var(--vc-cursor)',
-    },
-    spacing: {
-      xs: '4px',
-      sm: '8px',
-      md: '16px',
-      lg: '24px',
-      xl: '48px',
-    },
-    lineHeight: {
-      tiny: '1.4rem',
-      xs: '1.6rem',
-      sm: '2rem',
-      base: '2.4rem',
-      lg: '2.4rem',
-      xl: '3.2rem',
-      '2xl': '3.2rem',
-      '3xl': '4rem',
-      '4xl': '4.8rem',
-      '5xl': '5.8rem',
-    },
-    opacity: {
-      15: '0.15',
-    },
-    backgroundColor: {
-      base: withOpacity('--vc-colors-bg-base'),
-      fill: withOpacity('--vc-colors-bg-fill'),
-    },
-    textColor: {
-      foreground: withOpacity('--vc-colors-text-foreground'),
-      muted: withOpacity('--vc-colors-text-muted'),
-    },
-    borderRadius: {
-      base: 'var(--vc-rounded)',
-    },
-    zIndex: {
-      hide: -1,
-      none: 0,
-      base: 1,
-      docked: 10,
-      dropdown: 1000,
-      sticky: 1100,
-      banner: 1200,
-      overlay: 1300,
-      modal: 1400,
-      popover: 1500,
-      skipLink: 1600,
-      toast: 1700,
-      tooltip: 1800,
-    },
-    keyframes: {
-      'reset-overflow': {
-        'from, to': {
-          overflow: 'hidden',
-        },
-      },
-    },
-    animation: {
-      'reset-overflow': 'reset-overflow 180ms backwards',
-    },
-  },
-};
+const withOpacity = require('./with-opacity');
+const colors = require('./colors');
+const units = require('./units');
+const { screens } = require('@sk-web-gui/theme');
+
+module.exports = {
+  fontSize: {
+    ...units.fontSizes,
+    tiny: '1rem',
+    xs: '1.2rem',
+    xl: units.fontSizes['h4'],
+    '2xl': units.fontSizes['h3'],
+    '3xl': units.fontSizes['h2'],
+    '4xl': units.fontSizes['h1'],
+    '5xl': units.fontSizes['h3'],
+  },
+  fontFamily: {
+    DEFAULT: ['Arial', 'Helvetica', 'sans-serif'],
+    sans: ['Arial', 'Helvetica', 'sans-serif'],
+    header: ['Raleway', 'Arial', 'Helvetica', 'sans-serif'],
+    display: ['Raleway', 'Arial', 'Helvetica', 'sans-serif'],
+  },
+  screens,
+  borderRadius: {
+    ...units.radius,
+    base: 'var(--sk-spacing-0)',
+  },
+
+  extend: {
+    backgroundPosition: {
+      ...Object.keys(units.spacing).reduce(
+        (positions, spaceKey) => ({
+          ...positions,
+          [`top-${spaceKey}`]: `center top ${units.spacing[spaceKey]}`,
+          [`right-${spaceKey}`]: `center right ${units.spacing[spaceKey]}`,
+          [`bottom-${spaceKey}`]: `center bottom ${units.spacing[spaceKey]}`,
+          [`left-${spaceKey}`]: `center left ${units.spacing[spaceKey]}`,
+        }),
+        {}
+      ),
+    },
+    boxShadow: {
+      100: [
+        '0 0.6rem 1.6rem 0 rgba(13,13,14, 0.07)',
+        '0 0.181rem 1.2rem 0 rgba(13,13,14, 0.15)',
+        '0 0.075rem 0.2rem 0 rgba(13,13,14, 0.085)',
+        '0 0.027rem 0.072rem 0 rgba(13,13,14, 0.0583)',
+      ],
+      200: [
+        '0 1.5rem 2.7rem 0 rgba(13,13,14, 0.1)',
+        '0 0.452rem 1.2rem 0 rgba(13,13,14, 0.06)',
+        '0 0.188rem 0.338rem 0 rgba(13,13,14, 0.03)',
+        '0 0.068rem 0.122rem 0 rgba(13,13,14, 0.02)',
+      ],
+    },
+    ringColor: {
+      DEFAULT: colors.ring,
+      ...colors,
+    },
+    ringOffsetWidth: {
+      DEFAULT: '0.2rem',
+    },
+    ringWidth: {
+      DEFAULT: '0.3rem',
+      0: '0px',
+    },
+    ringOpacity: {
+      DEFAULT: 1,
+    },
+    colors: {
+      ...colors,
+      current: 'currentColor',
+      gray: {
+        DEFAULT: colors.primitives.gray[600],
+        stroke: colors.divider,
+        middle: colors.primitives.gray[600],
+        light: colors.primitives.gray[300],
+        lighter: colors.primitives.gray[200],
+        ...colors.primitives.gray,
+      },
+      hover: colors.primitives.gray[600],
+      background: {
+        ...colors.background,
+        one: colors.background[100],
+        two: colors.background[200],
+      },
+    },
+    cursor: {
+      base: 'var(--tw-cursor)',
+    },
+    spacing: {
+      ...units.spacing,
+      xs: units.spacing[4],
+      sm: units.spacing[8],
+      md: units.spacing[16],
+      lg: units.spacing[24],
+      xl: units.spacing[48],
+    },
+    maxWidth: {
+      content: '100%',
+    },
+    borderRadius: {
+      ...units.radius,
+      base: 'var(--sk-spacing-0)',
+    },
+    lineHeight: {
+      ...units.lineHeights,
+      xs: '1.6rem',
+      xl: units.lineHeights['h4'],
+      '2xl': units.lineHeights['h3'],
+      '3xl': units.lineHeights['h2'],
+      '4xl': units.lineHeights['h1'],
+      '5xl': units.lineHeights['display-3'],
+    },
+    opacity: {
+      15: '0.15',
+    },
+    borderWidth: {
+      DEFAULT: '0.2rem',
+      1: '0.1rem',
+      2: '0.2rem',
+    },
+    backgroundColor: {
+      base: withOpacity('--sk-colors-primary-surface'),
+      fill: withOpacity('--sk-colors-bg-fill'),
+    },
+    textColor: {
+      foreground: withOpacity('--sk-colors-primary-DEFAULT'),
+      muted: withOpacity('--sk-colors-xt-muted'),
+    },
+
+    zIndex: {
+      hide: -1,
+      none: 0,
+      base: 1,
+      docked: 10,
+      dropdown: 1000,
+      sticky: 1100,
+      banner: 1200,
+      overlay: 1300,
+      modal: 1400,
+      popover: 1500,
+      skipLink: 1600,
+      toast: 1700,
+      tooltip: 1800,
+    },
+    keyframes: {
+      'reset-overflow': {
+        'from, to': {
+          overflow: 'hidden',
+        },
+      },
+    },
+    animation: {
+      'reset-overflow': 'reset-overflow 180ms backwards',
+    },
+  },
+};

package/src/units.js

@@ -0,0 +1,212 @@
+module.exports = {
+  spacing: {
+    0: 'var(--sk-spacing-0)',
+    2: 'var(--sk-spacing-2)',
+    4: 'var(--sk-spacing-4)',
+    6: 'var(--sk-spacing-6)',
+    8: 'var(--sk-spacing-8)',
+    10: 'var(--sk-spacing-10)',
+    12: 'var(--sk-spacing-12)',
+    14: 'var(--sk-spacing-14)',
+    16: 'var(--sk-spacing-16)',
+    18: 'var(--sk-spacing-18)',
+    20: 'var(--sk-spacing-20)',
+    24: 'var(--sk-spacing-24)',
+    32: 'var(--sk-spacing-32)',
+    40: 'var(--sk-spacing-40)',
+    48: 'var(--sk-spacing-48)',
+    56: 'var(--sk-spacing-56)',
+    64: 'var(--sk-spacing-64)',
+    72: 'var(--sk-spacing-72)',
+    80: 'var(--sk-spacing-80)',
+  },
+
+  fontSizes: {
+    'display-1': [
+      'var(--sk-fontSize-display-1-DEFAULT)',
+      { lineHeight: 'var(--sk-lineHeight-display-1-DEFAULT)', fontWeight: 700 },
+    ],
+    'display-1-lg': [
+      'var(--sk-fontSize-display-1-lg)',
+      { lineHeight: 'var(--sk-lineHeight-display-1-lg)', fontWeight: 700 },
+    ],
+    'display-1-md': [
+      'var(--sk-fontSize-display-1-md)',
+      { lineHeight: 'var(--sk-lineHeight-display-1-md)', fontWeight: 700 },
+    ],
+    'display-1-sm': [
+      'var(--sk-fontSize-display-1-sm)',
+      { lineHeight: 'var(--sk-lineHeight-display-1-sm)', fontWeight: 700 },
+    ],
+    'display-2': [
+      'var(--sk-fontSize-display-2-DEFAULT)',
+      { lineHeight: 'var(--sk-lineHeight-display-2-DEFAULT)', fontWeight: 700 },
+    ],
+    'display-2-lg': [
+      'var(--sk-fontSize-display-2-lg)',
+      { lineHeight: 'var(--sk-lineHeight-display-2-lg)', fontWeight: 700 },
+    ],
+    'display-2-md': [
+      'var(--sk-fontSize-display-2-md)',
+      { lineHeight: 'var(--sk-lineHeight-display-2-md)', fontWeight: 700 },
+    ],
+    'display-2-sm': [
+      'var(--sk-fontSize-display-2-sm)',
+      { lineHeight: 'var(--sk-lineHeight-display-2-sm)', fontWeight: 700 },
+    ],
+    'display-3': [
+      'var(--sk-fontSize-display-3-DEFAULT)',
+      { lineHeight: 'var(--sk-lineHeight-display-3-DEFAULT)', fontWeight: 700 },
+    ],
+    'display-3-lg': [
+      'var(--sk-fontSize-display-3-lg)',
+      { lineHeight: 'var(--sk-lineHeight-display-3-lg)', fontWeight: 700 },
+    ],
+    'display-3-md': [
+      'var(--sk-fontSize-display-3-md)',
+      { lineHeight: 'var(--sk-lineHeight-display-3-md)', fontWeight: 700 },
+    ],
+    'display-3-sm': [
+      'var(--sk-fontSize-display-3-sm)',
+      { lineHeight: 'var(--sk-lineHeight-display-3-sm)', fontWeight: 700 },
+    ],
+
+    h1: ['var(--sk-fontSize-h-1-DEFAULT)', { lineHeight: 'var(--sk-lineHeight-h-1-DEFAULT)', fontWeight: 700 }],
+    'h1-lg': ['var(--sk-fontSize-h-1-lg)', { lineHeight: 'var(--sk-lineHeight-h-1-lg)', fontWeight: 700 }],
+    'h1-md': ['var(--sk-fontSize-h-1-md)', { lineHeight: 'var(--sk-lineHeight-h-1-md)', fontWeight: 700 }],
+    'h1-sm': ['var(--sk-fontSize-h-1-sm)', { lineHeight: 'var(--sk-lineHeight-h-1-sm)', fontWeight: 700 }],
+    h2: ['var(--sk-fontSize-h-2-DEFAULT)', { lineHeight: 'var(--sk-lineHeight-h-2-DEFAULT)', fontWeight: 700 }],
+    'h2-lg': ['var(--sk-fontSize-h-2-lg)', { lineHeight: 'var(--sk-lineHeight-h-2-lg)', fontWeight: 700 }],
+    'h2-md': ['var(--sk-fontSize-h-2-md)', { lineHeight: 'var(--sk-lineHeight-h-2-md)', fontWeight: 700 }],
+    'h2-sm': ['var(--sk-fontSize-h-2-sm)', { lineHeight: 'var(--sk-lineHeight-h-2-sm)', fontWeight: 700 }],
+    h3: ['var(--sk-fontSize-h-3-DEFAULT)', { lineHeight: 'var(--sk-lineHeight-h-3-DEFAULT)', fontWeight: 700 }],
+    'h3-lg': ['var(--sk-fontSize-h-3-lg)', { lineHeight: 'var(--sk-lineHeight-h-3-lg)', fontWeight: 700 }],
+    'h3-md': ['var(--sk-fontSize-h-3-md)', { lineHeight: 'var(--sk-lineHeight-h-3-md)', fontWeight: 700 }],
+    'h3-sm': ['var(--sk-fontSize-h-3-sm)', { lineHeight: 'var(--sk-lineHeight-h-3-sm)', fontWeight: 700 }],
+    h4: ['var(--sk-fontSize-h-4-DEFAULT)', { lineHeight: 'var(--sk-lineHeight-h-4-DEFAULT)', fontWeight: 700 }],
+    'h4-lg': ['var(--sk-fontSize-h-4-lg)', { lineHeight: 'var(--sk-lineHeight-h-4-lg)', fontWeight: 700 }],
+    'h4-md': ['var(--sk-fontSize-h-4-md)', { lineHeight: 'var(--sk-lineHeight-h-4-md)', fontWeight: 700 }],
+    'h4-sm': ['var(--sk-fontSize-h-4-sm)', { lineHeight: 'var(--sk-lineHeight-h-4-sm)', fontWeight: 700 }],
+
+    'label-large': [
+      'var(--sk-fontSize-label-large)',
+      { lineHeight: 'var(--sk-lineHeight-label-large)', fontWeight: 700 },
+    ],
+    'label-medium': [
+      'var(--sk-fontSize-label-medium)',
+      { lineHeight: 'var(--sk-lineHeight-label-medium)', fontWeight: 700 },
+    ],
+    'label-small': [
+      'var(--sk-fontSize-label-small)',
+      { lineHeight: 'var(--sk-lineHeight-label-small)', fontWeight: 700 },
+    ],
+
+    'input-large': [
+      'var(--sk-fontSize-input-large)',
+      { lineHeight: 'var(--sk-lineHeight-input-large)', fontWeight: 400 },
+    ],
+    'input-medium': [
+      'var(--sk-fontSize-input-medium)',
+      { lineHeight: 'var(--sk-lineHeight-input-medium)', fontWeight: 400 },
+    ],
+    'input-small': [
+      'var(--sk-fontSize-input-small)',
+      { lineHeight: 'var(--sk-lineHeight-input-small)', fontWeight: 400 },
+    ],
+
+    lead: ['var(--sk-fontSize-lead)', 'var(--sk-lineHeight-lead)'],
+    base: ['var(--sk-fontSize-base)', 'var(--sk-lineHeight-base)'],
+    large: ['var(--sk-fontSize-large)', 'var(--sk-lineHeight-large)'],
+    small: ['var(--sk-fontSize-small)', 'var(--sk-lineHeight-small)'],
+  },
+  lineHeights: {
+    'display-1': 'var(--sk-lineHeight-display-1-DEFAULT)',
+    'display-1-lg': 'var(--sk-lineHeight-display-1-lg)',
+    'display-1-md': 'var(--sk-lineHeight-display-1-md)',
+    'display-1-sm': 'var(--sk-lineHeight-display-1-sm)',
+    'display-2': 'var(--sk-lineHeight-display-2-DEFAULT)',
+    'display-2-lg': 'var(--sk-lineHeight-display-2-lg)',
+    'display-2-md': 'var(--sk-lineHeight-display-2-md)',
+    'display-2-sm': 'var(--sk-lineHeight-display-2-sm)',
+    'display-3': 'var(--sk-lineHeight-display-3-DEFAULT)',
+    'display-3-lg': 'var(--sk-lineHeight-display-3-lg)',
+    'display-3-md': 'var(--sk-lineHeight-display-3-md)',
+    'display-3-sm': 'var(--sk-lineHeight-display-3-sm)',
+
+    h1: 'var(--sk-lineHeight-h-1-DEFAULT)',
+    'h1-lg': 'var(--sk-lineHeight-h-1-lg)',
+    'h1-md': 'var(--sk-lineHeight-h-1-md)',
+    'h1-sm': 'var(--sk-lineHeight-h-1-sm)',
+    h2: 'var(--sk-lineHeight-h-2-DEFAULT)',
+    'h2-lg': 'var(--sk-lineHeight-h-2-lg)',
+    'h2-md': 'var(--sk-lineHeight-h-2-md)',
+    'h2-sm': 'var(--sk-lineHeight-h-2-sm)',
+    h3: 'var(--sk-lineHeight-h-3-DEFAULT)',
+    'h3-lg': 'var(--sk-lineHeight-h-3-lg)',
+    'h3-md': 'var(--sk-lineHeight-h-3-md)',
+    'h3-sm': 'var(--sk-lineHeight-h-3-sm)',
+    h4: 'var(--sk-lineHeight-h-4-DEFAULT)',
+    'h4-lg': 'var(--sk-lineHeight-h-4-lg)',
+    'h4-md': 'var(--sk-lineHeight-h-4-md)',
+    'h4-sm': 'var(--sk-lineHeight-h-4-sm)',
+
+    'label-large': 'var(--sk-lineHeight-label-large)',
+    'label-medium': 'var(--sk-lineHeight-label-medium)',
+    'label-small': 'var(--sk-lineHeight-label-small)',
+
+    'input-large': 'var(--sk-lineHeight-input-large)',
+    'input-medium': 'var(--sk-lineHeight-input-medium)',
+    'input-small': 'var(--sk-lineHeight-input-small)',
+
+    lead: 'var(--sk-lineHeight-lead)',
+    base: 'var(--sk-lineHeight-base)',
+    large: 'var(--sk-lineHeight-large)',
+    small: 'var(--sk-lineHeight-small)',
+  },
+  radius: {
+    DEFAULT: 'var(--sk-radius-utility-DEFAULT)',
+    full: 'var(--sk-radius-circular-DEFAULT)',
+    none: 'var(--sk-spacing-0)',
+    circular: 'var(--sk-radius-circular-DEFAULT)',
+    'circular-lg': 'var(--sk-radius-circular-lg)',
+    'circular-md': 'var(--sk-radius-circular-md)',
+    'circular-sm': 'var(--sk-radius-circular-sm)',
+
+    button: 'var(--sk-radius-button-DEFAULT)',
+    'button-lg': 'var(--sk-radius-button-lg)',
+    'button-md': 'var(--sk-radius-button-md)',
+    'button-sm': 'var(--sk-radius-button-sm)',
+    cards: 'var(--sk-radius-cards-DEFAULT)',
+    'cards-lg': 'var(--sk-radius-cards-lg)',
+    'cards-md': 'var(--sk-radius-cards-md)',
+    'cards-sm': 'var(--sk-radius-cards-sm)',
+    utility: 'var(--sk-radius-utility-DEFAULT)',
+    'utility-lg': 'var(--sk-radius-utility-lg)',
+    'utility-md': 'var(--sk-radius-utility-md)',
+    'utility-sm': 'var(--sk-radius-utility-sm)',
+    groups: 'var(--sk-radius-groups-DEFAULT)',
+    'groups-lg': 'var(--sk-radius-groups-lg)',
+    'groups-md': 'var(--sk-radius-groups-md)',
+    'groups-sm': 'var(--sk-radius-groups-sm)',
+
+    0: 'var(--sk-spacing-0)',
+    2: 'var(--sk-spacing-2)',
+    4: 'var(--sk-spacing-4)',
+    6: 'var(--sk-spacing-6)',
+    8: 'var(--sk-spacing-8)',
+    10: 'var(--sk-spacing-10)',
+    12: 'var(--sk-spacing-12)',
+    14: 'var(--sk-spacing-14)',
+    16: 'var(--sk-spacing-16)',
+    18: 'var(--sk-spacing-18)',
+    20: 'var(--sk-spacing-20)',
+    24: 'var(--sk-spacing-24)',
+    32: 'var(--sk-spacing-32)',
+    40: 'var(--sk-spacing-40)',
+    48: 'var(--sk-spacing-48)',
+    56: 'var(--sk-spacing-56)',
+    64: 'var(--sk-spacing-64)',
+    72: 'var(--sk-spacing-72)',
+    80: 'var(--sk-spacing-80)',
+  },
+};

package/src/components/calendar.js

@@ -1,78 +0,0 @@
-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':
-      {},
-  },
-  // 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 my-auto top-0 bottom-0 left-md mr-md text-xl fill-body': {},
-    },
-  },
-});

package/src/components/message.js

@@ -1,60 +0,0 @@
-module.exports = Message = () => ({
-  '.message': {
-    '@apply max-w-2xl flex items-center font-bold text-sm sm:text-base px-6 py-6 m-2 shadow-lg w-max break-words': {},
-    '@apply text-body bg-white border-l-4': {},
-    // dark
-    '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {},
-
-    '&-text': {
-      '@apply text-left flex-grow': {},
-    },
-
-    '&-info': {
-      '@apply border-info': {},
-
-      '.message-icon': {
-        '@apply text-info': {},
-      },
-    },
-    '&-success': {
-      '@apply border-success': {},
-
-      '.message-icon': {
-        '@apply text-success': {},
-      },
-    },
-    '&-error': {
-      '@apply border-error': {},
-
-      '.message-icon': {
-        '@apply text-error': {},
-      },
-    },
-    '&-warning': {
-      '@apply border-warning': {},
-
-      '.message-icon': {
-        '@apply text-warning': {},
-      },
-    },
-  },
-
-  '.message-icon': {
-    '@apply mr-4 flex-shrink-0 w-10 h-10': {},
-  },
-
-  '.message-close-button': {
-    '@apply text-body border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base':
-      {},
-    marginLeft: '0.25em',
-    marginRight: '-0.55em',
-
-    '&-icon': {
-      '@apply !text-xl': {},
-    },
-
-    '&-disabled': {
-      '@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none': {},
-    },
-  },
-});

package/src/components/profile-picture.js

@@ -1,14 +0,0 @@
-module.exports = ProfilePicture = () => ({
-  '.profile-picture': {
-    '@apply relative overflow-hidden flex-shrink-0 text-xs leading-none flex items-center justify-center text-center w-[48px] h-[48px] mr-sm rounded-full border-2 border-primary':
-      {},
-
-    '.profile-picture-img': {
-      '@apply bg-cover absolute inset-0 bg-center text-xs leading-none': {},
-    },
-    '.icon': {
-      width: '3.8rem!important',
-      height: '3.8rem!important',
-    },
-  },
-});

package/src/components/profile.js

@@ -1,33 +0,0 @@
-module.exports = Profile = () => ({
-  '.profile-container': {
-    '@apply flex items-center': {},
-
-    '.profile-title': {
-      '@apply font-bold text-base m-0': {},
-    },
-    '.profile-subtitle': {
-      '@apply text-sm leading-[20px] m-0': {},
-    },
-
-    '&.minimal': {
-      '.profile-title': {
-        overflow: 'hidden',
-        'text-overflow': 'ellipsis',
-        display: '-webkit-box',
-        '-webkit-line-clamp': '1' /* number of lines to show */,
-        'line-clamp': '1',
-        '-webkit-box-orient': 'vertical',
-      },
-      '.profile-subtitle': {
-        overflow: 'hidden',
-        'text-overflow': 'ellipsis',
-        display: '-webkit-box',
-        '-webkit-line-clamp': '1' /* number of lines to show */,
-        'line-clamp': '1',
-        '-webkit-box-orient': 'vertical',
-      },
-    },
-
-    // '&.truncate': { '@apply truncate pr-md': {} },
-  },
-});

package/src/components/search-bar.js

@@ -1,5 +0,0 @@
-module.exports = SearchBar = () => ({
-  '.search-bar': {
-    '@apply w-full relative': {},
-  },
-});