@hanzo/ui 4.6.0 → 4.7.0

package/tailwind/tailwind.config.hanzo-preset.js

@@ -1,915 +0,0 @@
-import animatePlugin from 'tailwindcss-animate'
-import containerQueriesPlugin from '@tailwindcss/container-queries'
-import tailwindInteractionMediaPlugin from 'tailwindcss-interaction-media'
-
-import colors from './colors.tailwind'
-import safelist from './safelist.tailwind'
-import screens from './screens.tailwind'
-import spacing from './spacing.tailwind'
-import fontSize from './fontSize.tailwind'
-import fontFamily from './fontFamily.tailwind'
-import zIndex from './z-index.tailwind'
-import typographyPlugin from './typo-plugin'
-
-export default {
-  darkMode: ["class"],
-  content: [],
-  safelist,
-  plugins: [
-    animatePlugin,
-    typographyPlugin({ className: 'typography', base: 16 }),
-    containerQueriesPlugin,
-    tailwindInteractionMediaPlugin,
-  ],
-  theme: {
-
-    accentColor: ({ theme }) => ({
-      ...theme('colors'),
-      auto: 'auto',
-    }),
-    animation: {
-      none: 'none',
-      spin: 'spin 1s linear infinite',
-      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-      pulse: 'pulse 2s linear(0, 1) infinite', // cubic-bezier(0.4, 0, 0.6, 1)
-      pulsereverse: 'pulse 2s linear(1, 0) infinite',
-      bounce: 'bounce 1s infinite',
-      "accordion-down": "accordion-down 0.2s ease-out",
-      "accordion-up": "accordion-up 0.2s ease-out",
-      "mobile-menu-open": "opacity-in 300ms ease-in",
-    },
-    aria: {
-      checked: 'checked="true"',
-      disabled: 'disabled="true"',
-      expanded: 'expanded="true"',
-      hidden: 'hidden="true"',
-      pressed: 'pressed="true"',
-      readonly: 'readonly="true"',
-      required: 'required="true"',
-      selected: 'selected="true"',
-    },
-    aspectRatio: {
-      auto: 'auto',
-      square: '1 / 1',
-      video: '16 / 9',
-    },
-    backdropBlur: ({ theme }) => theme('blur'),
-    backdropBrightness: ({ theme }) => theme('brightness'),
-    backdropContrast: ({ theme }) => theme('contrast'),
-    backdropGrayscale: ({ theme }) => theme('grayscale'),
-    backdropHueRotate: ({ theme }) => theme('hueRotate'),
-    backdropInvert: ({ theme }) => theme('invert'),
-    backdropOpacity: ({ theme }) => theme('opacity'),
-    backdropSaturate: ({ theme }) => theme('saturate'),
-    backdropSepia: ({ theme }) => theme('sepia'),
-    backgroundColor: ({ theme }) => theme('colors'),
-    backgroundImage: {
-      none: 'none',
-      'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
-      'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
-      'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
-      'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
-      'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
-      'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
-      'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
-      'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
-    },
-    backgroundOpacity: ({ theme }) => theme('opacity'),
-    backgroundPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    backgroundSize: {
-      auto: 'auto',
-      cover: 'cover',
-      contain: 'contain',
-    },
-    blur: {
-      0: '0',
-      none: '0',
-      sm: '4px',
-      DEFAULT: '8px',
-      md: '12px',
-      lg: '16px',
-      xl: '24px',
-      '2xl': '40px',
-      '3xl': '64px',
-    },
-    borderColor: ({ theme }) => ({
-      ...theme('colors'),
-      DEFAULT: theme('colors.muted.3'),
-    }),
-    borderOpacity: ({ theme }) => theme('opacity'),
-    borderRadius: {
-      none: '0px',
-      sm: '0.25rem',
-      DEFAULT: '0.5rem',
-      md: '0.5rem',
-      lg: '0.75rem',
-      xl: '1rem',
-      '2xl': '1.5rem',
-      '3xl': '2rem',
-      full: '9999px',
-    },
-    borderSpacing: spacing,
-    borderWidth: {
-      DEFAULT: '1px',
-      0: '0px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    boxShadow: {
-      sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-      DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-      md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-      '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-      inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-      none: 'none',
-    },
-    boxShadowColor: ({ theme }) => theme('colors'),
-    brightness: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      90: '.9',
-      95: '.95',
-      100: '1',
-      105: '1.05',
-      110: '1.1',
-      125: '1.25',
-      150: '1.5',
-      200: '2',
-    },
-    caretColor: ({ theme }) => theme('colors'),
-    colors,
-    columns: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      '3xs': '16rem',
-      '2xs': '18rem',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      '7xl': '80rem',
-    },
-    container: {
-      center: true,
-      padding: "2rem",
-    },
-    content: {
-      none: 'none',
-    },
-    contrast: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      100: '1',
-      125: '1.25',
-      150: '1.5',
-      200: '2',
-    },
-    cursor: {
-      auto: 'auto',
-      default: 'default',
-      pointer: 'pointer',
-      wait: 'wait',
-      text: 'text',
-      move: 'move',
-      help: 'help',
-      'not-allowed': 'not-allowed',
-      none: 'none',
-      'context-menu': 'context-menu',
-      progress: 'progress',
-      cell: 'cell',
-      crosshair: 'crosshair',
-      'vertical-text': 'vertical-text',
-      alias: 'alias',
-      copy: 'copy',
-      'no-drop': 'no-drop',
-      grab: 'grab',
-      grabbing: 'grabbing',
-      'all-scroll': 'all-scroll',
-      'col-resize': 'col-resize',
-      'row-resize': 'row-resize',
-      'n-resize': 'n-resize',
-      'e-resize': 'e-resize',
-      's-resize': 's-resize',
-      'w-resize': 'w-resize',
-      'ne-resize': 'ne-resize',
-      'nw-resize': 'nw-resize',
-      'se-resize': 'se-resize',
-      'sw-resize': 'sw-resize',
-      'ew-resize': 'ew-resize',
-      'ns-resize': 'ns-resize',
-      'nesw-resize': 'nesw-resize',
-      'nwse-resize': 'nwse-resize',
-      'zoom-in': 'zoom-in',
-      'zoom-out': 'zoom-out',
-    },
-    divideColor: ({ theme }) => theme('borderColor'),
-    divideOpacity: ({ theme }) => theme('borderOpacity'),
-    divideWidth: ({ theme }) => theme('borderWidth'),
-    dropShadow: {
-      sm: '0 1px 1px rgb(0 0 0 / 0.05)',
-      DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
-      md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
-      lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
-      xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
-      '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
-      none: '0 0 #0000',
-    },
-    fill: ({ theme }) => ({
-      none: 'none',
-      ...theme('colors'),
-    }),
-    flex: {
-      1: '1 1 0%',
-      auto: '1 1 auto',
-      initial: '0 1 auto',
-      none: 'none',
-    },
-    flexBasis: {
-      auto: 'auto',
-      ...spacing,
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      '1/12': '8.333333%',
-      '2/12': '16.666667%',
-      '3/12': '25%',
-      '4/12': '33.333333%',
-      '5/12': '41.666667%',
-      '6/12': '50%',
-      '7/12': '58.333333%',
-      '8/12': '66.666667%',
-      '9/12': '75%',
-      '10/12': '83.333333%',
-      '11/12': '91.666667%',
-      full: '100%',
-    },
-    flexGrow: {
-      0: '0',
-      DEFAULT: '1',
-    },
-    flexShrink: {
-      0: '0',
-      DEFAULT: '1',
-    },
-    fontFamily, 
-    fontSize,
-    fontWeight: {
-      thin: '100',
-      extralight: '200',
-      light: '300',
-      normal: '400',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
-      extrabold: '800',
-      black: '900',
-    },
-    gap: spacing,
-    gradientColorStops: ({ theme }) => theme('colors'),
-    gradientColorStopPositions: {
-      '0%': '0%',
-      '5%': '5%',
-      '10%': '10%',
-      '15%': '15%',
-      '20%': '20%',
-      '25%': '25%',
-      '30%': '30%',
-      '35%': '35%',
-      '40%': '40%',
-      '45%': '45%',
-      '50%': '50%',
-      '55%': '55%',
-      '60%': '60%',
-      '65%': '65%',
-      '70%': '70%',
-      '75%': '75%',
-      '80%': '80%',
-      '85%': '85%',
-      '90%': '90%',
-      '95%': '95%',
-      '100%': '100%',
-    },
-    grayscale: {
-      0: '0',
-      DEFAULT: '100%',
-    },
-    gridAutoColumns: {
-      auto: 'auto',
-      min: 'min-content',
-      max: 'max-content',
-      fr: 'minmax(0, 1fr)',
-    },
-    gridAutoRows: {
-      auto: 'auto',
-      min: 'min-content',
-      max: 'max-content',
-      fr: 'minmax(0, 1fr)',
-    },
-    gridColumn: {
-      auto: 'auto',
-      'span-1': 'span 1 / span 1',
-      'span-2': 'span 2 / span 2',
-      'span-3': 'span 3 / span 3',
-      'span-4': 'span 4 / span 4',
-      'span-5': 'span 5 / span 5',
-      'span-6': 'span 6 / span 6',
-      'span-7': 'span 7 / span 7',
-      'span-8': 'span 8 / span 8',
-      'span-9': 'span 9 / span 9',
-      'span-10': 'span 10 / span 10',
-      'span-11': 'span 11 / span 11',
-      'span-12': 'span 12 / span 12',
-      'span-full': '1 / -1',
-    },
-    gridColumnEnd: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-    },
-    gridColumnStart: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-    },
-    gridRow: {
-      auto: 'auto',
-      'span-1': 'span 1 / span 1',
-      'span-2': 'span 2 / span 2',
-      'span-3': 'span 3 / span 3',
-      'span-4': 'span 4 / span 4',
-      'span-5': 'span 5 / span 5',
-      'span-6': 'span 6 / span 6',
-      'span-full': '1 / -1',
-    },
-    gridRowEnd: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-    },
-    gridRowStart: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-    },
-    gridTemplateColumns: {
-      none: 'none',
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-      7: 'repeat(7, minmax(0, 1fr))',
-      8: 'repeat(8, minmax(0, 1fr))',
-      9: 'repeat(9, minmax(0, 1fr))',
-      10: 'repeat(10, minmax(0, 1fr))',
-      11: 'repeat(11, minmax(0, 1fr))',
-      12: 'repeat(12, minmax(0, 1fr))',
-    },
-    gridTemplateRows: {
-      none: 'none',
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-    },
-    height: {
-      auto: 'auto',
-      ...spacing,
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      full: '100%',
-      screen: '100vh',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-    },
-    hueRotate: {
-      0: '0deg',
-      15: '15deg',
-      30: '30deg',
-      60: '60deg',
-      90: '90deg',
-      180: '180deg',
-    },
-    inset: {
-      auto: 'auto',
-      ...spacing,
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      full: '100%',
-    },
-    invert: {
-      0: '0',
-      DEFAULT: '100%',
-    },
-    keyframes: {
-      spin: {
-        to: {
-          transform: 'rotate(360deg)',
-        },
-      },
-      ping: {
-        '75%, 100%': {
-          transform: 'scale(2)',
-          opacity: '0',
-        },
-      },
-      pulse: {
-        '50%': {
-          opacity: '.5',
-        },
-      },
-      bounce: {
-        '0%, 100%': {
-          transform: 'translateY(-25%)',
-          animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
-        },
-        '50%': {
-          transform: 'none',
-          animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
-        },
-      },
-      "accordion-down": {
-        from: { height: 0 },
-        to: { height: "var(--radix-accordion-content-height)" },
-      },
-      "accordion-up": {
-        from: { height: "var(--radix-accordion-content-height)" },
-        to: { height: 0 },
-      },
-      "opacity-in": {
-        from: { opacity: '0' },
-        to: { opacity: '1' }
-      },
-    },
-    letterSpacing: {
-      tighter: '-0.05em',
-      tight: '-0.025em',
-      normal: '0em',
-      wide: '0.025em',
-      wider: '0.05em',
-      widest: '0.1em',
-    },
-    lineHeight: {
-      none: '1',
-      tight: '1.25',
-      snug: '1.375',
-      normal: '1.5',
-      relaxed: '1.625',
-      loose: '2',
-      3: '.75rem',
-      4: '1rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      7: '1.75rem',
-      8: '2rem',
-      9: '2.25rem',
-      10: '2.5rem',
-    },
-    listStyleType: {
-      none: 'none',
-      disc: 'disc',
-      decimal: 'decimal',
-    },
-    listStyleImage: {
-      none: 'none',
-    },
-    margin: {
-      auto: 'auto',
-      ...spacing,
-    },
-    lineClamp: {
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-    },
-    maxHeight: {
-      ...spacing,
-      none: 'none',
-      full: '100%',
-      screen: '100vh',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-    },
-    maxWidth: ({ theme, breakpoints }) => ({
-      ...spacing,
-      none: 'none',
-      0: '0rem',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      '7xl': '80rem',
-      full: '100%',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-      prose: '65ch',
-      ...breakpoints(theme('screens')),
-    }),
-    minHeight: {
-      ...spacing,
-      0: '0px',
-      full: '100%',
-      screen: '100vh',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-    },
-    minWidth: ({ theme, breakpoints }) => ({
-      ...spacing,
-      0: '0px',
-      full: '100%',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-      ...breakpoints(theme('screens')),
-    }),
-    objectPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    opacity: {
-      0: '0',
-      5: '0.05',
-      10: '0.1',
-      20: '0.2',
-      25: '0.25',
-      30: '0.3',
-      35: '0.35',
-      40: '0.4',
-      45: '0.45',
-      50: '0.5',
-      55: '0.55',
-      60: '0.6',
-      65: '0.65',
-      70: '0.7',
-      75: '0.75',
-      80: '0.8',
-      85: '0.85',
-      90: '0.9',
-      95: '0.95',
-      100: '1',
-    },
-    order: {
-      first: '-9999',
-      last: '9999',
-      none: '0',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-    },
-    outlineColor: ({ theme }) => theme('colors'),
-    outlineOffset: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    outlineWidth: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    padding: spacing,
-    placeholderColor: ({ theme }) => theme('colors'),
-    placeholderOpacity: ({ theme }) => theme('opacity'),
-    ringColor: ({ theme }) => ({
-      DEFAULT: theme('colors.blue.500', '#3b82f6'),
-      ...theme('colors'),
-    }),
-    ringOffsetColor: ({ theme }) => theme('colors'),
-    ringOffsetWidth: {
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    ringOpacity: ({ theme }) => ({
-      DEFAULT: '0.5',
-      ...theme('opacity'),
-    }),
-    ringWidth: {
-      DEFAULT: '3px',
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    rotate: {
-      0: '0deg',
-      1: '1deg',
-      2: '2deg',
-      3: '3deg',
-      6: '6deg',
-      12: '12deg',
-      45: '45deg',
-      90: '90deg',
-      180: '180deg',
-    },
-    saturate: {
-      0: '0',
-      50: '.5',
-      100: '1',
-      150: '1.5',
-      200: '2',
-    },
-    scale: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      90: '.9',
-      95: '.95',
-      100: '1',
-      105: '1.05',
-      110: '1.1',
-      125: '1.25',
-      150: '1.5',
-    },
-    screens,
-    scrollMargin: spacing,
-    scrollPadding: spacing,
-    sepia: {
-      0: '0',
-      DEFAULT: '100%',
-    },
-    skew: {
-      0: '0deg',
-      1: '1deg',
-      2: '2deg',
-      3: '3deg',
-      6: '6deg',
-      12: '12deg',
-    },
-    space: spacing,
-    spacing,
-    stroke: ({ theme }) => ({
-      none: 'none',
-      ...theme('colors'),
-    }),
-    strokeWidth: {
-      0: '0',
-      1: '1',
-      2: '2',
-    },
-    supports: {},
-    data: {
-      on: 'state~="on"',
-      off: 'state~="off"',
-    },
-    textColor: ({ theme }) => theme('colors'),
-    textDecorationColor: ({ theme }) => theme('colors'),
-    textDecorationThickness: {
-      auto: 'auto',
-      'from-font': 'from-font',
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    textIndent: spacing,
-    textOpacity: ({ theme }) => theme('opacity'),
-    textUnderlineOffset: {
-      auto: 'auto',
-      0: '0px',
-      1: '1px',
-      2: '2px',
-      4: '4px',
-      8: '8px',
-    },
-    transformOrigin: {
-      center: 'center',
-      top: 'top',
-      'top-right': 'top right',
-      right: 'right',
-      'bottom-right': 'bottom right',
-      bottom: 'bottom',
-      'bottom-left': 'bottom left',
-      left: 'left',
-      'top-left': 'top left',
-    },
-    transitionDelay: {
-      0: '0s',
-      75: '75ms',
-      100: '100ms',
-      150: '150ms',
-      200: '200ms',
-      300: '300ms',
-      500: '500ms',
-      700: '700ms',
-      1000: '1000ms',
-    },
-    transitionDuration: {
-      DEFAULT: '150ms',
-      0: '0s',
-      75: '75ms',
-      100: '100ms',
-      150: '150ms',
-      200: '200ms',
-      300: '300ms',
-      500: '500ms',
-      700: '700ms',
-      1000: '1000ms',
-    },
-    transitionProperty: {
-      none: 'none',
-      all: 'all',
-      DEFAULT:
-        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
-      opacity: 'opacity',
-      shadow: 'box-shadow',
-      transform: 'transform',
-      height: 'height',
-      spacing: 'margin, padding',
-    },
-    transitionTimingFunction: {
-      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
-      linear: 'linear',
-      in: 'cubic-bezier(0.4, 0, 1, 1)',
-      out: 'cubic-bezier(0, 0, 0.2, 1)',
-      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-    translate: {
-      ...spacing,
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      full: '100%',
-    },
-    width: ({ theme, breakpoints }) => ({
-      auto: 'auto',
-      ...spacing,
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      '1/12': '8.333333%',
-      '2/12': '16.666667%',
-      '3/12': '25%',
-      '4/12': '33.333333%',
-      '5/12': '41.666667%',
-      '6/12': '50%',
-      '7/12': '58.333333%',
-      '8/12': '66.666667%',
-      '9/12': '75%',
-      '10/12': '83.333333%',
-      '11/12': '91.666667%',
-      full: '100%',
-      screen: '100vw',
-      min: 'min-content',
-      max: 'max-content',
-      fit: 'fit-content',
-      ...breakpoints(theme('screens')),
-    }),
-    willChange: {
-      auto: 'auto',
-      scroll: 'scroll-position',
-      contents: 'contents',
-      transform: 'transform',
-    },
-    zIndex,
-  },
-}