@ornikar/kitt-universal 34.0.0 → 35.0.0

package/dist/linaria-themes-node-22.22.es.mjs

@@ -1,2750 +0,0 @@
-const hex2rgba = (hex, alpha = 1) => {
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-
-const createColorScale = colorScale => colorScale;
-
-// WARNING
-// If you update this palette, don't forget to update the palette in @ornikar/bumper as well.
-const colorScales = {
-  deepPurple: createColorScale({
-    5: '#936C93',
-    6: '#7A587A',
-    7: '#6E4D6E',
-    8: '#563B56',
-    9: '#452F45'
-  }),
-  beige: createColorScale({
-    1: '#F7F4EE',
-    2: '#F1ECE4',
-    3: '#EAE3D6',
-    4: '#E5DCCA',
-    5: '#DDD0B8',
-    6: '#C1B59F'
-  }),
-  lightning: createColorScale({
-    4: '#FFF966',
-    5: '#FFF500',
-    8: '#594D0D',
-    9: '#43390A'
-  }),
-  rainbow: createColorScale({
-    pink: '#E4A4F9',
-    brick: '#951D12',
-    orange: '#DB6E2E',
-    gold: '#9A7600',
-    sun: '#EFD346',
-    'green-pine': '#1C5D47',
-    'green-grass': '#4DA00A',
-    'green-apple': '#DEF985',
-    'blue-electric': '#2850C4',
-    'blue-sky': '#B2F0FD'
-  }),
-  grey: createColorScale({
-    0: '#ffffff',
-    1: '#ECECEC',
-    2: '#CDCED0',
-    3: '#A8A8A8',
-    5: '#838383',
-    7: '#505050',
-    9: '#101010'
-  }),
-  blue: createColorScale({
-    1: '#E9F4FC',
-    2: '#BCDFF6',
-    6: '#1772AB',
-    7: '#125A87'
-  }),
-  green: createColorScale({
-    1: '#ECFEDD',
-    2: '#DBFAC1',
-    6: '#438D06',
-    7: '#357105'
-  }),
-  yellow: createColorScale({
-    1: '#FDF8E7',
-    2: '#FAEBB8',
-    6: '#EFC11F',
-    7: '#BA930B'
-  }),
-  red: createColorScale({
-    1: '#FDE4E3',
-    2: '#FAB8B8',
-    6: '#E2483D',
-    7: '#BD100F'
-  }),
-  mauve: createColorScale({
-    1: '#F8E7FF',
-    2: '#F1D0FB',
-    3: '#E4A4F9',
-    4: '#D283EC'
-  }),
-  'beige-alpha': createColorScale({
-    '25': '#C1B59F40',
-    '40': '#C1B59F66',
-    '50': '#C1B59F80'
-  }),
-  'grey-alpha': createColorScale({
-    '25': '#10101040',
-    '35': '#10101059',
-    '50': '#10101080'
-  }),
-  'white-alpha': createColorScale({
-    '10': '#FFFFFF1A',
-    '20': '#FFFFFF33',
-    '60': '#FFFFFF99',
-    '80': '#FFFFFFCC',
-    '90': '#FFFFFFE5'
-  })
-};
-const transformColorScalesToTokens = () => {
-  return Object.fromEntries(Object.entries(colorScales).flatMap(([colorName, colorScale]) => {
-    return Object.entries(colorScale).map(([scaleNumber, colorValue]) => {
-      return [`${colorName}.${scaleNumber}`, colorValue];
-    });
-  }));
-};
-const deepPurpleColorPalette = {
-  ...transformColorScalesToTokens(),
-  white: '#FFFFFF',
-  black: '#000000',
-  transparent: 'transparent'
-};
-
-const colors = {
-  primary: deepPurpleColorPalette['deepPurple.8'],
-  primaryLight: deepPurpleColorPalette['deepPurple.8'],
-  accent: deepPurpleColorPalette['beige.1'],
-  accentLight: deepPurpleColorPalette['beige.1'],
-  success: deepPurpleColorPalette['green.6'],
-  correct: deepPurpleColorPalette['green.6'],
-  danger: deepPurpleColorPalette['red.6'],
-  info: deepPurpleColorPalette['blue.6'],
-  warning: deepPurpleColorPalette['yellow.6'],
-  separator: deepPurpleColorPalette['beige.3'],
-  white: deepPurpleColorPalette['grey.0'],
-  black: deepPurpleColorPalette['grey.9'],
-  blackLight: deepPurpleColorPalette['grey.5'],
-  blackAnthracite: deepPurpleColorPalette['grey.7'],
-  uiBackground: deepPurpleColorPalette['beige.1'],
-  uiBackgroundLight: deepPurpleColorPalette['grey.0'],
-  transparent: deepPurpleColorPalette.transparent,
-  disabled: deepPurpleColorPalette['grey.1'],
-  overlay: {
-    dark: deepPurpleColorPalette['grey-alpha.50'],
-    light: deepPurpleColorPalette['white-alpha.80']
-  },
-  // Bumper semantic tokens
-  // Should be kept in sync with the light theme in bumper
-  // https://github.com/ornikar/kitt/blob/79e367e962c957c016c4df67dbcf515c8f45ff0e/@ornikar/bumper/src/themes/light.ts#L6
-  bumper: {
-    content: {
-      base: {
-        hi: deepPurpleColorPalette['grey.9'],
-        mid: deepPurpleColorPalette['grey.7'],
-        low: deepPurpleColorPalette['grey.5'],
-        onContrasted: {
-          hi: deepPurpleColorPalette['grey.0'],
-          mid: deepPurpleColorPalette['white-alpha.80'],
-          low: deepPurpleColorPalette['white-alpha.60']
-        }
-      },
-      accent: deepPurpleColorPalette['deepPurple.8'],
-      promo: deepPurpleColorPalette['lightning.9'],
-      info: deepPurpleColorPalette['blue.7'],
-      success: deepPurpleColorPalette['green.7'],
-      warning: deepPurpleColorPalette['yellow.7'],
-      danger: deepPurpleColorPalette['red.7'],
-      muted: deepPurpleColorPalette['beige.6'],
-      disabled: deepPurpleColorPalette['grey.3']
-    },
-    bg: {
-      base: {
-        hi: {
-          default: deepPurpleColorPalette['beige.2'],
-          pressed: deepPurpleColorPalette['beige.3']
-        },
-        mid: {
-          default: deepPurpleColorPalette['beige.1'],
-          pressed: deepPurpleColorPalette['beige.2']
-        },
-        low: {
-          default: deepPurpleColorPalette['grey.0'],
-          pressed: deepPurpleColorPalette['beige.1']
-        }
-      },
-      accent: {
-        default: deepPurpleColorPalette['deepPurple.8'],
-        pressed: deepPurpleColorPalette['deepPurple.7']
-      },
-      promo: {
-        hi: {
-          default: deepPurpleColorPalette['lightning.9'],
-          pressed: deepPurpleColorPalette['lightning.8']
-        },
-        mid: {
-          default: deepPurpleColorPalette['lightning.5'],
-          pressed: deepPurpleColorPalette['lightning.4']
-        }
-      },
-      highlight: {
-        mid: {
-          default: deepPurpleColorPalette['mauve.1'],
-          pressed: deepPurpleColorPalette['mauve.2']
-        },
-        hi: {
-          default: deepPurpleColorPalette['mauve.3'],
-          pressed: deepPurpleColorPalette['mauve.4']
-        }
-      },
-      info: {
-        hi: deepPurpleColorPalette['blue.6'],
-        mid: deepPurpleColorPalette['blue.1']
-      },
-      success: {
-        hi: deepPurpleColorPalette['green.6'],
-        mid: deepPurpleColorPalette['green.1']
-      },
-      warning: {
-        hi: deepPurpleColorPalette['yellow.6'],
-        mid: deepPurpleColorPalette['yellow.1']
-      },
-      danger: {
-        hi: deepPurpleColorPalette['red.6'],
-        mid: deepPurpleColorPalette['red.1']
-      },
-      disabled: {
-        hi: deepPurpleColorPalette['grey.3'],
-        mid: deepPurpleColorPalette['grey.1']
-      },
-      overlay: deepPurpleColorPalette['grey-alpha.50']
-    },
-    border: {
-      base: {
-        hi: deepPurpleColorPalette['grey.9'],
-        mid: deepPurpleColorPalette['beige.3'],
-        low: deepPurpleColorPalette['beige.2'],
-        onContrasted: {
-          hi: deepPurpleColorPalette['grey.0'],
-          mid: deepPurpleColorPalette['white-alpha.20']
-        },
-        accent: deepPurpleColorPalette['deepPurple.8']
-      },
-      info: deepPurpleColorPalette['blue.6'],
-      success: deepPurpleColorPalette['green.6'],
-      warning: deepPurpleColorPalette['yellow.6'],
-      danger: deepPurpleColorPalette['red.6'],
-      disabled: deepPurpleColorPalette['grey.2'],
-      highlight: deepPurpleColorPalette['mauve.3']
-    }
-  }
-};
-
-const actionCard = {
-  borderRadius: 8,
-  primary: {
-    default: {
-      backgroundColor: colors.uiBackgroundLight,
-      borderColor: deepPurpleColorPalette['beige.2'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    hovered: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['beige.2'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    disabled: {
-      backgroundColor: deepPurpleColorPalette['grey.1'],
-      borderColor: deepPurpleColorPalette['grey.1'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    focused: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['beige.2'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    pressed: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['beige.2'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    }
-  },
-  'primary-border-soft': {
-    default: {
-      backgroundColor: colors.uiBackgroundLight,
-      borderColor: deepPurpleColorPalette['beige.3'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['beige.3'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    hovered: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['beige.3'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['beige.3'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    disabled: {
-      backgroundColor: deepPurpleColorPalette['grey.1'],
-      borderColor: deepPurpleColorPalette['grey.1'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    focused: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['beige.3'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['beige.3'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    pressed: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['beige.3'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 3
-    }
-  },
-  'primary-border-hard': {
-    default: {
-      backgroundColor: colors.uiBackgroundLight,
-      borderColor: deepPurpleColorPalette['deepPurple.8'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['deepPurple.8'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    hovered: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['deepPurple.8'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['deepPurple.8'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    disabled: {
-      backgroundColor: deepPurpleColorPalette['grey.1'],
-      borderColor: deepPurpleColorPalette['grey.1'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    focused: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['deepPurple.8'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['deepPurple.8'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    pressed: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['deepPurple.8'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 3
-    }
-  },
-  secondary: {
-    default: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette.transparent,
-      borderWidth: 0,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    disabled: {
-      backgroundColor: deepPurpleColorPalette['grey.1'],
-      borderColor: deepPurpleColorPalette['grey.1'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    hovered: {
-      backgroundColor: deepPurpleColorPalette['beige.2'],
-      borderColor: deepPurpleColorPalette.transparent,
-      borderWidth: 0,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    focused: {
-      backgroundColor: deepPurpleColorPalette['beige.2'],
-      borderColor: deepPurpleColorPalette.transparent,
-      borderWidth: 0,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    pressed: {
-      backgroundColor: deepPurpleColorPalette['beige.2'],
-      borderColor: deepPurpleColorPalette.transparent,
-      borderWidth: 0,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    }
-  },
-  highlight: {
-    default: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderColor: deepPurpleColorPalette['beige.3'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['beige.3'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    disabled: {
-      backgroundColor: deepPurpleColorPalette['grey.1'],
-      borderColor: deepPurpleColorPalette['grey.1'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 0
-    },
-    hovered: {
-      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
-      borderColor: deepPurpleColorPalette['beige.3'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['beige.3'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    focused: {
-      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
-      borderColor: deepPurpleColorPalette['beige.3'],
-      borderWidth: 1,
-      shadow: {
-        color: deepPurpleColorPalette['beige.3'],
-        offsetX: 0,
-        offsetY: 4,
-        opacity: 1,
-        radius: 0
-      },
-      translateY: 0
-    },
-    pressed: {
-      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
-      borderColor: deepPurpleColorPalette['beige.3'],
-      borderWidth: 1,
-      shadow: {
-        color: '',
-        offsetX: 0,
-        offsetY: 0,
-        opacity: 0,
-        radius: 0
-      },
-      translateY: 3
-    }
-  }
-};
-
-const defaultAvatarSize = 40;
-const defaultAvatarIconSize = 20;
-const largeAvatarSize = 120;
-const largeAvatarIconSize = 30;
-const avatar = {
-  borderRadius: 4,
-  size: defaultAvatarSize,
-  iconSize: defaultAvatarIconSize,
-  default: {
-    color: deepPurpleColorPalette['white-alpha.80'],
-    backgroundColor: deepPurpleColorPalette['deepPurple.8']
-  },
-  light: {
-    color: deepPurpleColorPalette['beige.6'],
-    backgroundColor: deepPurpleColorPalette['beige.1']
-  },
-  dark: {
-    color: deepPurpleColorPalette['white-alpha.80'],
-    backgroundColor: deepPurpleColorPalette['grey.9']
-  },
-  disabled: {
-    color: deepPurpleColorPalette['grey.3'],
-    backgroundColor: deepPurpleColorPalette['grey.1']
-  },
-  large: {
-    borderRadius: 8,
-    size: largeAvatarSize,
-    iconSize: largeAvatarIconSize
-  }
-};
-
-const spacing = 4;
-
-const bottomSheet = {
-  container: {
-    padding: spacing * 4
-  },
-  handle: {
-    backgroundColor: deepPurpleColorPalette['beige.3']
-  }
-};
-
-// Strongly typed theme so every new type/variant/size can't be added
-// without defined color & backgroundColor or icon size
-
-const button = {
-  borderRadius: 4,
-  borderWidth: {
-    focus: 3
-  },
-  minWidth: 40,
-  maxWidth: 335,
-  height: {
-    default: 40,
-    medium: 48
-  },
-  minHeight: {
-    default: 40,
-    medium: 48
-  },
-  maxHeight: 48,
-  icon: {
-    medium: {
-      size: 24
-    },
-    default: {
-      size: 20
-    }
-  },
-  padding: {
-    default: {
-      horizontal: 16,
-      vertical: 8
-    },
-    medium: {
-      horizontal: 24,
-      vertical: 12
-    }
-  },
-  transition: {
-    duration: '200ms',
-    timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
-  },
-  focusBorderColor: deepPurpleColorPalette['blue.2'],
-  primary: {
-    default: {
-      backgroundColor: {
-        default: colors.primary,
-        hover: deepPurpleColorPalette['deepPurple.7'],
-        pressed: deepPurpleColorPalette['deepPurple.7'],
-        disabled: deepPurpleColorPalette['grey.3'],
-        focus: colors.primary
-      },
-      color: {
-        default: colors.white,
-        hover: colors.white,
-        pressed: colors.white,
-        disabled: colors.disabled,
-        focus: colors.white
-      }
-    },
-    revert: {
-      backgroundColor: {
-        default: colors.white,
-        hover: deepPurpleColorPalette['white-alpha.80'],
-        pressed: deepPurpleColorPalette['white-alpha.80'],
-        disabled: deepPurpleColorPalette['grey.3'],
-        focus: colors.white
-      },
-      color: {
-        default: colors.black,
-        hover: colors.black,
-        pressed: colors.black,
-        disabled: colors.disabled,
-        focus: colors.black
-      }
-    }
-  },
-  secondary: {
-    default: {
-      backgroundColor: {
-        default: deepPurpleColorPalette['beige-alpha.25'],
-        hover: deepPurpleColorPalette['beige-alpha.40'],
-        pressed: deepPurpleColorPalette['beige-alpha.40'],
-        disabled: colors.disabled,
-        focus: deepPurpleColorPalette['beige-alpha.25']
-      },
-      color: {
-        default: colors.black,
-        hover: colors.black,
-        pressed: colors.black,
-        disabled: deepPurpleColorPalette['grey.3'],
-        focus: colors.black
-      }
-    },
-    revert: {
-      backgroundColor: {
-        default: deepPurpleColorPalette['white-alpha.10'],
-        hover: deepPurpleColorPalette['white-alpha.20'],
-        pressed: deepPurpleColorPalette['white-alpha.20'],
-        disabled: colors.disabled,
-        focus: deepPurpleColorPalette['white-alpha.10']
-      },
-      color: {
-        default: colors.white,
-        hover: deepPurpleColorPalette['white-alpha.80'],
-        pressed: deepPurpleColorPalette['white-alpha.80'],
-        disabled: deepPurpleColorPalette['grey.3'],
-        focus: colors.white
-      }
-    }
-  },
-  tertiary: {
-    default: {
-      backgroundColor: {
-        default: 'transparent',
-        hover: 'transparent',
-        pressed: 'transparent',
-        disabled: 'transparent',
-        focus: 'transparent'
-      },
-      color: {
-        default: colors.black,
-        hover: colors.blackAnthracite,
-        pressed: colors.blackAnthracite,
-        disabled: deepPurpleColorPalette['grey.3'],
-        focus: colors.black
-      }
-    },
-    revert: {
-      backgroundColor: {
-        default: 'transparent',
-        hover: 'transparent',
-        pressed: 'transparent',
-        disabled: 'transparent',
-        focus: 'transparent'
-      },
-      color: {
-        default: colors.white,
-        hover: deepPurpleColorPalette['white-alpha.80'],
-        pressed: deepPurpleColorPalette['white-alpha.80'],
-        disabled: deepPurpleColorPalette['white-alpha.20'],
-        focus: colors.white
-      }
-    }
-  },
-  'tertiary-danger': {
-    default: {
-      backgroundColor: {
-        default: 'transparent',
-        hover: 'transparent',
-        pressed: 'transparent',
-        disabled: 'transparent',
-        focus: 'transparent'
-      },
-      color: {
-        default: colors.danger,
-        hover: deepPurpleColorPalette['red.2'],
-        pressed: deepPurpleColorPalette['red.2'],
-        disabled: deepPurpleColorPalette['grey.3'],
-        focus: colors.danger
-      }
-    }
-  }
-};
-
-const buttonBadge = {
-  backgroundColor: {
-    default: colors.danger,
-    disabled: colors.blackLight
-  },
-  dimensions: {
-    withBadge: {
-      width: 8,
-      height: 8
-    },
-    badgeCount: {
-      width: 20,
-      height: 20
-    }
-  },
-  borderRadius: {
-    withBadge: 5,
-    badgeCount: 10
-  }
-};
-
-const card = {
-  borderRadius: 20,
-  borderWidth: 2,
-  primary: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.primary
-  },
-  secondary: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator
-  },
-  subtle: {
-    backgroundColor: deepPurpleColorPalette['beige.1'],
-    borderColor: colors.separator
-  }
-};
-
-const webAnimationContentDuration$1 = 400;
-const webAnimationContentEasing$1 = {
-  x1: 0.77,
-  y1: 0,
-  x2: 0.175,
-  y2: 1
-};
-const webAnimationOverlayDuration$1 = 250;
-const webAnimationOverlayEasing$1 = {
-  x1: 0.42,
-  y1: 0,
-  x2: 1,
-  y2: 1
-};
-const maxWidth = 540;
-const overlayHorizontalPadding = 24;
-const cardModal = {
-  borderRadius: spacing * 2,
-  maxWidth,
-  maxWidthWithPadding: maxWidth + overlayHorizontalPadding * 2,
-  minHeight: 280,
-  shadow: {
-    color: colors.black,
-    offsetX: 0,
-    offsetY: 10,
-    opacity: 0.15,
-    radius: 20
-  },
-  header: {
-    height: 56,
-    borderWidth: 1,
-    borderColor: colors.separator
-  },
-  footer: {
-    borderWidth: 1,
-    borderColor: colors.separator
-  },
-  overlayPadding: {
-    horizontal: 24,
-    vertical: 80,
-    landscape: {
-      vertical: 8
-    }
-  },
-  animation: {
-    overlay: {
-      duration: webAnimationOverlayDuration$1,
-      easing: webAnimationOverlayEasing$1
-    },
-    content: {
-      duration: webAnimationContentDuration$1,
-      easing: webAnimationContentEasing$1
-    }
-  }
-};
-
-const choices = {
-  spacing: {
-    row: 12,
-    column: 12
-  },
-  item: {
-    borderRadius: 4,
-    padding: {
-      base: 16,
-      small: 24
-    },
-    backgroundColor: {
-      default: deepPurpleColorPalette['beige.1'],
-      disabled: deepPurpleColorPalette['grey.1'],
-      selected: deepPurpleColorPalette['beige.3'],
-      pressed: deepPurpleColorPalette['beige.2'],
-      hover: deepPurpleColorPalette['beige.2'],
-      hoverWhenSelected: deepPurpleColorPalette['beige.3']
-    },
-    color: {
-      default: deepPurpleColorPalette['grey.9'],
-      disabled: deepPurpleColorPalette['grey.3']
-    },
-    border: {
-      default: {
-        width: 1,
-        color: deepPurpleColorPalette['deepPurple.7']
-      },
-      disabled: {
-        width: 1,
-        color: deepPurpleColorPalette['grey.2']
-      },
-      error: {
-        width: 1,
-        color: deepPurpleColorPalette['red.6']
-      }
-    },
-    transition: {
-      property: 'all',
-      duration: 300,
-      timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
-    }
-  },
-  description: {
-    color: {
-      default: deepPurpleColorPalette['grey.7'],
-      error: deepPurpleColorPalette['red.6']
-    }
-  }
-};
-
-const webAnimationContentDuration = 400;
-const webAnimationContentEasing = {
-  x1: 0.77,
-  y1: 0,
-  x2: 0.175,
-  y2: 1
-};
-const webAnimationOverlayDuration = 250;
-const webAnimationOverlayEasing = {
-  x1: 0.42,
-  y1: 0,
-  x2: 1,
-  y2: 1
-};
-const dialogModal = {
-  borderRadius: spacing * 2,
-  maxWidth: 540,
-  overlayPadding: {
-    horizontal: 24,
-    vertical: 32
-  },
-  shadow: {
-    color: colors.black,
-    offsetX: 0,
-    offsetY: 10,
-    opacity: 0.15,
-    radius: 20
-  },
-  animation: {
-    overlay: {
-      duration: webAnimationOverlayDuration,
-      easing: webAnimationOverlayEasing
-    },
-    content: {
-      duration: webAnimationContentDuration,
-      easing: webAnimationContentEasing
-    }
-  }
-};
-
-const feedbackMessage = {
-  minHeight: 60,
-  danger: {
-    backgroundColor: colors.danger
-  },
-  success: {
-    backgroundColor: colors.success
-  },
-  info: {
-    backgroundColor: colors.info
-  },
-  warning: {
-    backgroundColor: colors.warning
-  }
-};
-
-const autocomplete = {
-  option: {
-    verticalPadding: 2,
-    minHeight: 40,
-    default: {
-      backgroundColor: colors.white
-    },
-    hovered: {
-      backgroundColor: deepPurpleColorPalette['beige.1']
-    },
-    focused: {
-      backgroundColor: deepPurpleColorPalette['beige.1']
-    },
-    selected: {
-      backgroundColor: deepPurpleColorPalette['beige.1']
-    },
-    highlighted: {
-      backgroundColor: deepPurpleColorPalette['beige.1']
-    },
-    pressed: {
-      backgroundColor: deepPurpleColorPalette['beige.1']
-    }
-  },
-  optionsContainer: {
-    borderRadius: 10,
-    backgroundColor: colors.white,
-    shadow: {
-      color: colors.black,
-      offsetX: 0,
-      offsetY: 10,
-      opacity: 0.15,
-      radius: 20
-    }
-  }
-};
-
-const checkbox = {
-  borderWidth: 1,
-  borderRadius: 4,
-  height: 24,
-  width: 24,
-  iconSize: 14,
-  markColor: colors.uiBackgroundLight,
-  textSpacing: 10,
-  default: {
-    borderColor: colors.separator,
-    backgroundColor: colors.uiBackgroundLight
-  },
-  checked: {
-    borderColor: colors.primary,
-    backgroundColor: colors.primary
-  },
-  focus: {
-    borderColor: colors.primary,
-    backgroundColor: colors.uiBackgroundLight
-  },
-  hover: {
-    borderColor: colors.primary,
-    backgroundColor: colors.uiBackgroundLight
-  },
-  pressed: {
-    borderColor: colors.primary,
-    backgroundColor: colors.uiBackgroundLight
-  },
-  disabled: {
-    borderColor: colors.separator,
-    backgroundColor: colors.disabled
-  },
-  transition: {
-    duration: '200ms',
-    timingFunction: 'ease-out'
-  }
-};
-
-const datePicker = {
-  day: {
-    minWidth: 64
-  },
-  month: {
-    minWidth: 64
-  },
-  year: {
-    minWidth: 82
-  }
-};
-
-const inputStatesStyle = {
-  default: {
-    backgroundColor: deepPurpleColorPalette.white,
-    borderColor: deepPurpleColorPalette['beige.3'],
-    color: deepPurpleColorPalette.black
-  },
-  pending: {
-    backgroundColor: deepPurpleColorPalette.white,
-    borderColor: deepPurpleColorPalette['beige.2'],
-    color: deepPurpleColorPalette.black
-  },
-  valid: {
-    backgroundColor: deepPurpleColorPalette.white,
-    borderColor: deepPurpleColorPalette['beige.3'],
-    color: deepPurpleColorPalette.black
-  },
-  hover: {
-    backgroundColor: deepPurpleColorPalette['beige.1'],
-    borderColor: deepPurpleColorPalette['beige.4'],
-    color: deepPurpleColorPalette.black
-  },
-  focus: {
-    borderColor: deepPurpleColorPalette['deepPurple.8'],
-    color: deepPurpleColorPalette.black
-  },
-  disabled: {
-    backgroundColor: deepPurpleColorPalette['grey.1'],
-    borderColor: deepPurpleColorPalette['grey.1'],
-    color: deepPurpleColorPalette['grey.3']
-  },
-  invalid: {
-    borderColor: deepPurpleColorPalette['beige.2'],
-    color: deepPurpleColorPalette.black
-  }
-};
-const webAnimationDuration = '200ms';
-const webAnimationTimingFunction = 'ease-in-out';
-const webAnimationProperties = ['border-color', 'background-color'];
-const input = {
-  minHeight: 40,
-  color: {
-    selection: deepPurpleColorPalette['deepPurple.8'],
-    placeholder: deepPurpleColorPalette['beige.6']
-  },
-  borderWidth: 1,
-  borderRadius: 4,
-  icon: {
-    size: 20
-  },
-  rightContainer: {
-    padding: 16
-  },
-  padding: {
-    horizontal: 16,
-    vertical: 6
-  },
-  transition: {
-    properties: webAnimationProperties,
-    duration: webAnimationDuration,
-    timingFunction: webAnimationTimingFunction
-  },
-  states: inputStatesStyle
-};
-
-const inputField = {
-  containerPaddingTop: 5,
-  containerPaddingBottom: 10,
-  feedbackPaddingTop: 4,
-  labelContainerPaddingBottom: 4,
-  labelFeedbackMarginLeft: 6
-};
-
-const inputTag = {
-  success: {
-    backgroundColor: colors.success,
-    labelColor: colors.uiBackgroundLight
-  },
-  danger: {
-    backgroundColor: colors.danger,
-    labelColor: colors.uiBackgroundLight
-  },
-  default: {
-    backgroundColor: deepPurpleColorPalette['beige.1'],
-    labelColor: colors.black
-  },
-  borderRadius: 10,
-  iconSize: 13.5
-};
-
-const radio = {
-  size: 24,
-  unchecked: {
-    borderWidth: 1,
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: deepPurpleColorPalette['beige.3']
-  },
-  checked: {
-    backgroundColor: colors.primary,
-    borderColor: colors.transparent,
-    innerSize: 8,
-    innerBackgroundColor: colors.uiBackgroundLight
-  },
-  hover: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.primary
-  },
-  pressed: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.primary
-  },
-  disabled: {
-    backgroundColor: deepPurpleColorPalette['grey.3'],
-    borderColor: colors.transparent,
-    innerBackgroundColor: deepPurpleColorPalette['grey.1']
-  },
-  transition: {
-    duration: '200ms',
-    timingFunction: 'ease-out'
-  }
-};
-
-const radioButtonGroup = {
-  item: {
-    minHeight: 40,
-    borderWidth: 1,
-    borderRadius: 4,
-    font: {
-      color: {
-        disabled: deepPurpleColorPalette['grey.3']
-      }
-    },
-    borderColor: {
-      default: colors.separator,
-      hover: colors.primary,
-      pressed: colors.primary,
-      active: colors.primary,
-      disabled: colors.disabled
-    },
-    backgroundColor: {
-      default: colors.uiBackgroundLight,
-      hover: colors.white,
-      pressed: colors.primary,
-      active: colors.primary,
-      disabled: colors.disabled
-    },
-    padding: {
-      horizontal: 18,
-      vertical: 6
-    },
-    transition: {
-      property: 'all',
-      duration: '200ms',
-      timingFunction: 'ease-in-out'
-    }
-  }
-};
-
-const textArea = {
-  minHeight: 120
-};
-
-const timePicker = {
-  minWidth: 100
-};
-
-const toggle = {
-  primary: {
-    enabled: {
-      default: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette.black,
-        backgroundColor: {
-          checked: deepPurpleColorPalette['deepPurple.8'],
-          unchecked: deepPurpleColorPalette['beige.3']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette.white,
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: 'transparent',
-          width: 1
-        }
-      },
-      hovered: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette.black,
-        backgroundColor: {
-          checked: deepPurpleColorPalette['deepPurple.7'],
-          unchecked: deepPurpleColorPalette['beige.4']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette.white,
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: 'transparent',
-          width: 1
-        }
-      },
-      focused: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette.black,
-        backgroundColor: {
-          checked: deepPurpleColorPalette['deepPurple.8'],
-          unchecked: deepPurpleColorPalette['beige.3']
-        },
-        border: {
-          color: deepPurpleColorPalette.white,
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette.white,
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: deepPurpleColorPalette.black,
-          width: 1
-        }
-      },
-      pressed: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette.black,
-        backgroundColor: {
-          checked: deepPurpleColorPalette['deepPurple.8'],
-          unchecked: deepPurpleColorPalette['beige.3']
-        },
-        border: {
-          color: deepPurpleColorPalette.white,
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette.white,
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: deepPurpleColorPalette.black,
-          width: 1
-        }
-      }
-    },
-    disabled: {
-      default: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette['beige.2'],
-        backgroundColor: {
-          checked: deepPurpleColorPalette['grey.1'],
-          unchecked: deepPurpleColorPalette['grey.1']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette['grey.3'],
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: 'transparent',
-          width: 1
-        }
-      },
-      hovered: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette['beige.2'],
-        backgroundColor: {
-          checked: deepPurpleColorPalette['grey.1'],
-          unchecked: deepPurpleColorPalette['grey.1']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette['grey.3'],
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: 'transparent',
-          width: 1
-        }
-      },
-      focused: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette['beige.2'],
-        backgroundColor: {
-          checked: deepPurpleColorPalette['grey.1'],
-          unchecked: deepPurpleColorPalette['grey.1']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette['grey.3'],
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: deepPurpleColorPalette.black,
-          width: 1
-        }
-      },
-      pressed: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette['beige.2'],
-        backgroundColor: {
-          checked: deepPurpleColorPalette['grey.1'],
-          unchecked: deepPurpleColorPalette['grey.1']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette['grey.3'],
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: deepPurpleColorPalette.black,
-          width: 1
-        }
-      }
-    }
-  },
-  accent: {
-    enabled: {
-      default: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette.white,
-        backgroundColor: {
-          checked: deepPurpleColorPalette['deepPurple.9'],
-          unchecked: deepPurpleColorPalette['beige.3']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette.white,
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: 'transparent',
-          width: 1
-        }
-      },
-      hovered: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette.white,
-        backgroundColor: {
-          checked: deepPurpleColorPalette['deepPurple.9'],
-          unchecked: deepPurpleColorPalette['beige.3']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette.white,
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: 'transparent',
-          width: 1
-        }
-      },
-      focused: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette.white,
-        backgroundColor: {
-          checked: deepPurpleColorPalette['deepPurple.9'],
-          unchecked: deepPurpleColorPalette['beige.3']
-        },
-        border: {
-          color: deepPurpleColorPalette['deepPurple.7'],
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette.white,
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: deepPurpleColorPalette.white,
-          width: 1
-        }
-      },
-      pressed: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette.white,
-        backgroundColor: {
-          checked: deepPurpleColorPalette['deepPurple.9'],
-          unchecked: deepPurpleColorPalette['beige.3']
-        },
-        border: {
-          color: deepPurpleColorPalette['deepPurple.7'],
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette.white,
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: deepPurpleColorPalette.white,
-          width: 1
-        }
-      }
-    },
-    disabled: {
-      default: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette['beige.5'],
-        backgroundColor: {
-          checked: deepPurpleColorPalette['beige.5'],
-          unchecked: deepPurpleColorPalette['beige.5']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: 'transparent',
-          width: 1
-        }
-      },
-      hovered: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette['beige.5'],
-        backgroundColor: {
-          checked: deepPurpleColorPalette['beige.5'],
-          unchecked: deepPurpleColorPalette['beige.5']
-        },
-        border: {
-          color: 'transparent',
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: 'transparent',
-          width: 1
-        }
-      },
-      focused: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette['beige.5'],
-        backgroundColor: {
-          checked: deepPurpleColorPalette['beige.5'],
-          unchecked: deepPurpleColorPalette['beige.5']
-        },
-        border: {
-          color: deepPurpleColorPalette['deepPurple.7'],
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: deepPurpleColorPalette.white,
-          width: 1
-        }
-      },
-      pressed: {
-        height: {
-          medium: 26,
-          large: 34
-        },
-        width: {
-          medium: 50,
-          large: 66
-        },
-        labelColor: deepPurpleColorPalette['beige.5'],
-        backgroundColor: {
-          checked: deepPurpleColorPalette['beige.5'],
-          unchecked: deepPurpleColorPalette['beige.5']
-        },
-        border: {
-          color: deepPurpleColorPalette['deepPurple.7'],
-          width: 1
-        },
-        circle: {
-          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
-          width: {
-            medium: 18,
-            large: 24
-          },
-          height: {
-            medium: 18,
-            large: 24
-          },
-          marginLeft: {
-            medium: 24,
-            large: 32
-          }
-        },
-        wrapperBorder: {
-          color: deepPurpleColorPalette.white,
-          width: 1
-        }
-      }
-    }
-  }
-};
-
-const forms = {
-  toggle,
-  autocomplete,
-  datePicker,
-  input,
-  radio,
-  inputField,
-  textArea,
-  checkbox,
-  inputTag,
-  radioButtonGroup,
-  timePicker
-};
-
-const fullscreenModal = {
-  header: {
-    height: 56
-  },
-  horizontalPadding: 16,
-  footer: {
-    verticalPadding: 12
-  },
-  body: {
-    verticalPadding: 16
-  },
-  animation: {
-    overlay: {
-      duration: 250,
-      easing: {
-        x1: 0.42,
-        y1: 0,
-        x2: 1,
-        y2: 1
-      }
-    },
-    content: {
-      duration: 600,
-      easing: {
-        x1: 0.77,
-        y1: 0,
-        x2: 0.175,
-        y2: 1
-      }
-    }
-  }
-};
-
-const highlight = {
-  borderRadius: spacing * 2,
-  /** @deprecated use primary instead */
-  regular: {
-    default: {
-      backgroundColor: colors.accentLight
-    },
-    hover: {
-      backgroundColor: colors.accentLight
-    }
-  },
-  primary: {
-    default: {
-      backgroundColor: deepPurpleColorPalette['blue.1']
-    },
-    hover: {
-      backgroundColor: deepPurpleColorPalette['blue.2']
-    }
-  },
-  secondary: {
-    default: {
-      backgroundColor: deepPurpleColorPalette['beige.1']
-    },
-    hover: {
-      backgroundColor: deepPurpleColorPalette['beige.3']
-    }
-  },
-  ghost: {
-    default: {
-      backgroundColor: deepPurpleColorPalette.white
-    },
-    hover: {
-      backgroundColor: deepPurpleColorPalette['beige.1']
-    }
-  },
-  dark: {
-    default: {
-      backgroundColor: deepPurpleColorPalette['grey.0'],
-      borderWidth: 1,
-      borderColor: deepPurpleColorPalette['beige.3']
-    },
-    hover: {
-      backgroundColor: deepPurpleColorPalette['beige.1'],
-      borderWidth: 1,
-      borderColor: deepPurpleColorPalette['beige.3']
-    }
-  },
-  success: {
-    default: {
-      backgroundColor: deepPurpleColorPalette['green.1']
-    },
-    hover: {
-      backgroundColor: deepPurpleColorPalette['green.2']
-    }
-  },
-  warning: {
-    default: {
-      backgroundColor: deepPurpleColorPalette['yellow.1']
-    },
-    hover: {
-      backgroundColor: deepPurpleColorPalette['yellow.2']
-    }
-  },
-  padding: {
-    small: spacing * 2,
-    medium: spacing * 4,
-    large: spacing * 6
-  }
-};
-
-const icon = {
-  defaultSize: 20
-};
-
-const iconButton = {
-  width: button.height.default,
-  height: button.height.default
-};
-
-const listItem = {
-  padding: '12px 16px',
-  verticalPadding: 12,
-  horizontalPadding: 16,
-  borderColor: colors.separator,
-  borderWidth: 1,
-  innerMargin: 8
-};
-
-const mapMarker = {
-  home: {
-    default: deepPurpleColorPalette['grey.9'],
-    selected: deepPurpleColorPalette['grey.7'],
-    svg: {
-      height: 36
-    },
-    container: {
-      width: 34,
-      height: 38
-    }
-  },
-  meetingPoint: {
-    default: deepPurpleColorPalette['deepPurple.8'],
-    selected: deepPurpleColorPalette['deepPurple.6'],
-    svg: {
-      width: 40,
-      height: 43
-    },
-    container: {
-      width: 40,
-      height: 45
-    }
-  },
-  shadow: {
-    width: 12,
-    height: 4
-  }
-};
-
-const pageLoaderSize = 60;
-const pageLoaderStrokeWidth = 3;
-const webAnimationDelay = 500;
-const webAnimationCircleBackgroundFillDuration = 1000;
-const webAnimationFilledCircleFillDuration = 1800;
-const webAnimationFilledCircleRotationDuration = 2160;
-const fillEasingFunction = [0.39, 0.575, 0.565, 1];
-const pageLoader = {
-  size: pageLoaderSize,
-  strokeWidth: pageLoaderStrokeWidth,
-  colors: {
-    base: colors.separator,
-    fill: colors.primary
-  },
-  animation: {
-    delay: webAnimationDelay,
-    circleBackgroundFillDuration: webAnimationCircleBackgroundFillDuration,
-    filledCircleFillDuration: webAnimationFilledCircleFillDuration,
-    groupFilledCircleRotationDuration: 1800,
-    filledCircleRotationDuration: webAnimationFilledCircleRotationDuration,
-    fillEasingFunction
-  }
-};
-
-const typography = {
-  colors: {
-    black: colors.black,
-    'black-anthracite': colors.blackAnthracite,
-    'black-disabled': deepPurpleColorPalette['grey.3'],
-    'black-light': deepPurpleColorPalette['grey.5'],
-    white: colors.white,
-    'white-light': colors.white,
-    primary: colors.primary,
-    'primary-light': colors.primaryLight,
-    accent: colors.accent,
-    success: colors.success,
-    danger: deepPurpleColorPalette['red.6'],
-    warning: colors.warning
-  },
-  types: {
-    headings: {
-      fontFamily: {
-        native: {
-          regular: 'GTStandardRegular',
-          semibold: 'GTStandardSemibold',
-          bold: 'GTStandardBold'
-        },
-        web: {
-          regular: 'GTStandard',
-          semibold: 'GTStandard',
-          bold: 'GTStandard'
-        }
-      },
-      fontWeight: {
-        regular: 500,
-        semibold: 600,
-        bold: 700
-      },
-      fontStyle: 'normal',
-      configs: {
-        'heading-xxl': {
-          fontSize: 56,
-          lineHeight: 64,
-          allowedFontWeights: ['semibold']
-        },
-        'heading-xl': {
-          fontSize: 48,
-          lineHeight: 56,
-          allowedFontWeights: ['semibold']
-        },
-        'heading-l': {
-          fontSize: 38,
-          lineHeight: 44,
-          allowedFontWeights: ['semibold']
-        },
-        'heading-m': {
-          fontSize: 28,
-          lineHeight: 32,
-          allowedFontWeights: ['semibold']
-        },
-        'heading-s': {
-          fontSize: 24,
-          lineHeight: 28,
-          allowedFontWeights: ['semibold']
-        },
-        'heading-xs': {
-          fontSize: 20,
-          lineHeight: 24,
-          allowedFontWeights: ['semibold']
-        },
-        'heading-xxs': {
-          fontSize: 16,
-          lineHeight: 20,
-          allowedFontWeights: ['semibold']
-        }
-      }
-    },
-    bodies: {
-      fontFamily: {
-        native: {
-          regular: 'GTStandardRegular',
-          bold: 'GTStandardBold'
-        },
-        web: {
-          regular: 'GTStandard',
-          bold: 'GTStandard'
-        }
-      },
-      fontWeight: {
-        regular: 500,
-        bold: 700
-      },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
-      configs: {
-        'body-xl': {
-          fontSize: 24,
-          lineHeight: 32,
-          allowedFontWeights: ['regular', 'bold']
-        },
-        'body-l': {
-          fontSize: 18,
-          lineHeight: 26,
-          allowedFontWeights: ['regular', 'bold']
-        },
-        'body-m': {
-          fontSize: 16,
-          lineHeight: 24,
-          allowedFontWeights: ['regular', 'bold']
-        },
-        'body-s': {
-          fontSize: 14,
-          lineHeight: 20,
-          allowedFontWeights: ['regular', 'bold']
-        },
-        'body-xs': {
-          fontSize: 12,
-          lineHeight: 16,
-          allowedFontWeights: ['regular', 'bold']
-        }
-      }
-    },
-    labels: {
-      fontFamily: {
-        native: {
-          semibold: 'GTStandardSemibold'
-        },
-        web: {
-          semibold: 'GTStandard'
-        }
-      },
-      fontWeight: {
-        semibold: 600
-      },
-      fontStyle: 'normal',
-      configs: {
-        'label-large': {
-          fontSize: 16,
-          lineHeight: 20,
-          allowedFontWeights: ['semibold']
-        },
-        'label-medium': {
-          fontSize: 14,
-          lineHeight: 18,
-          allowedFontWeights: ['semibold']
-        },
-        'label-small': {
-          fontSize: 12,
-          lineHeight: 14,
-          allowedFontWeights: ['semibold']
-        }
-      }
-    },
-    contentCaps: {
-      fontFamily: {
-        native: {
-          bold: 'GTStandardNarrowBold'
-        },
-        web: {
-          bold: 'GTStandardNarrow'
-        }
-      },
-      fontWeight: {
-        bold: 700
-      },
-      fontStyle: 'normal',
-      configs: {
-        'content-caps-xxxl': {
-          fontSize: 40,
-          lineHeight: 40,
-          allowedFontWeights: ['bold']
-        },
-        'content-caps-xxl': {
-          fontSize: 32,
-          lineHeight: 40,
-          allowedFontWeights: ['bold']
-        },
-        'content-caps-xl': {
-          fontSize: 24,
-          lineHeight: 28,
-          allowedFontWeights: ['bold']
-        },
-        'content-caps-l': {
-          fontSize: 18,
-          lineHeight: 20,
-          allowedFontWeights: ['bold']
-        },
-        'content-caps-m': {
-          fontSize: 16,
-          lineHeight: 18,
-          allowedFontWeights: ['bold']
-        },
-        'content-caps-s': {
-          fontSize: 14,
-          lineHeight: 16,
-          allowedFontWeights: ['bold']
-        },
-        'content-caps-xs': {
-          fontSize: 12,
-          lineHeight: 14,
-          allowedFontWeights: ['bold']
-        }
-      }
-    }
-  }
-};
-
-const picker = {
-  maxWidthFixed: 320,
-  ios: {
-    default: {
-      fontFamily: typography.types.bodies.fontFamily.native.regular,
-      ...typography.types.bodies.configs['body-m'],
-      fontSize: 16,
-      color: typography.colors['black-light'],
-      // Default height is hard coded in module because of iOS constraint (https://github.com/react-native-picker/picker/blob/abd5f9076baa3ef2277ea7e711fa5823683c110e/js/PickerIOS.ios.js#L156)
-      height: 216
-    },
-    landscape: {
-      height: 108
-    },
-    selected: {
-      color: typography.colors.primary
-    }
-  },
-  web: {
-    optionsContainer: {
-      borderRadius: 10,
-      backgroundColor: colors.white,
-      shadow: {
-        color: colors.black,
-        offsetX: 0,
-        offsetY: 10,
-        opacity: 0.15,
-        radius: 20
-      }
-    },
-    option: {
-      minHeight: 32,
-      horizontalPadding: 16,
-      verticalPadding: 4,
-      default: {
-        backgroundColor: colors.transparent
-      },
-      hovered: {
-        backgroundColor: deepPurpleColorPalette['beige.1']
-      },
-      focused: {
-        backgroundColor: deepPurpleColorPalette['beige.1']
-      },
-      selected: {
-        backgroundColor: deepPurpleColorPalette['beige.1']
-      },
-      highlighted: {
-        backgroundColor: deepPurpleColorPalette['beige.1']
-      },
-      pressed: {
-        backgroundColor: deepPurpleColorPalette['beige.2']
-      }
-    }
-  },
-  android: {
-    option: {
-      verticalPadding: 12,
-      horizontalPadding: 24,
-      default: {
-        backgroundColor: colors.transparent
-      },
-      selected: {
-        backgroundColor: colors.primary,
-        color: typography.colors.white
-      }
-    }
-  }
-};
-
-const shadows = {
-  /** @deprecated: use cards.medium instead - shorthand shadow doesnt work with Native Base */
-  medium: '0px 10px 20px rgba(41, 48, 51, 0.25)',
-  cards: {
-    low: {
-      color: colors.black,
-      offsetX: 0,
-      offsetY: 5,
-      opacity: 0.1,
-      radius: 20
-    },
-    medium: {
-      color: colors.black,
-      offsetX: 0,
-      offsetY: 10,
-      opacity: 0.15,
-      radius: 20
-    },
-    highBase: {
-      color: colors.black,
-      offsetX: 0,
-      offsetY: 10,
-      opacity: 0.15,
-      radius: 20
-    },
-    highMedium: {
-      color: colors.black,
-      offsetX: 0,
-      offsetY: 60,
-      opacity: 0.08,
-      radius: 40
-    },
-    highLarge: {
-      color: colors.black,
-      offsetX: 0,
-      offsetY: 80,
-      opacity: 0.08,
-      radius: 60
-    }
-  },
-  navigation: {
-    left: {
-      color: colors.black,
-      offsetX: 10,
-      offsetY: 0,
-      opacity: 0.15,
-      radius: 30
-    },
-    right: {
-      color: colors.black,
-      offsetX: -10,
-      offsetY: 0,
-      opacity: 0.15,
-      radius: 30
-    }
-  },
-  panel: {
-    color: colors.black,
-    offsetX: 0,
-    offsetY: 20,
-    opacity: 1,
-    radius: 40
-  }
-};
-
-const skeletonBackgroundColor = deepPurpleColorPalette['beige.2'];
-const skeletonFlareColor = deepPurpleColorPalette['beige.3'];
-const skeleton = {
-  backgroundColor: skeletonBackgroundColor,
-  flareColor: skeletonFlareColor,
-  animationDuration: 1000,
-  shape: {
-    bar: {
-      size: 8,
-      borderRadius: 4
-    },
-    circle: {
-      size: 48,
-      borderRadius: 24
-    },
-    square: {
-      size: 48,
-      borderRadius: 6
-    }
-  }
-};
-
-const sticker = {
-  borderRadius: 2,
-  padding: 4
-};
-
-const tabBar = {
-  underline: {
-    default: {
-      active: {
-        color: {
-          default: deepPurpleColorPalette['deepPurple.8'],
-          focused: deepPurpleColorPalette['deepPurple.8'],
-          hovered: deepPurpleColorPalette['deepPurple.8'],
-          pressed: deepPurpleColorPalette['deepPurple.8']
-        },
-        indicator: {
-          backgroundColor: deepPurpleColorPalette['deepPurple.8']
-        }
-      },
-      inactive: {
-        color: {
-          default: deepPurpleColorPalette['grey.5'],
-          focused: deepPurpleColorPalette['grey.5'],
-          hovered: deepPurpleColorPalette['deepPurple.8'],
-          pressed: deepPurpleColorPalette['deepPurple.8']
-        },
-        indicator: {
-          backgroundColor: undefined
-        }
-      },
-      disabled: {
-        color: {
-          default: deepPurpleColorPalette['grey.3'],
-          focused: deepPurpleColorPalette['grey.3'],
-          hovered: deepPurpleColorPalette['grey.3'],
-          pressed: deepPurpleColorPalette['grey.3']
-        },
-        indicator: {
-          backgroundColor: undefined
-        }
-      },
-      borderBottomColor: deepPurpleColorPalette['beige.3']
-    },
-    revert: {
-      active: {
-        color: {
-          default: deepPurpleColorPalette['grey.0'],
-          focused: deepPurpleColorPalette['grey.0'],
-          hovered: deepPurpleColorPalette['grey.0'],
-          pressed: deepPurpleColorPalette['grey.0']
-        },
-        indicator: {
-          backgroundColor: deepPurpleColorPalette['grey.0']
-        }
-      },
-      inactive: {
-        color: {
-          default: deepPurpleColorPalette['white-alpha.80'],
-          focused: deepPurpleColorPalette['white-alpha.80'],
-          hovered: deepPurpleColorPalette['grey.0'],
-          pressed: deepPurpleColorPalette['grey.0']
-        },
-        indicator: {
-          backgroundColor: undefined
-        }
-      },
-      disabled: {
-        color: {
-          default: deepPurpleColorPalette['white-alpha.20'],
-          focused: deepPurpleColorPalette['white-alpha.20'],
-          hovered: deepPurpleColorPalette['white-alpha.20'],
-          pressed: deepPurpleColorPalette['white-alpha.20']
-        },
-        indicator: {
-          backgroundColor: undefined
-        }
-      },
-      borderBottomColor: deepPurpleColorPalette['white-alpha.20']
-    }
-  },
-  solid: {
-    default: {
-      active: {
-        color: {
-          default: deepPurpleColorPalette['grey.0'],
-          focused: deepPurpleColorPalette['grey.0'],
-          hovered: deepPurpleColorPalette['grey.0'],
-          pressed: deepPurpleColorPalette['grey.0']
-        },
-        backgroundColor: {
-          default: deepPurpleColorPalette['deepPurple.8'],
-          focused: deepPurpleColorPalette['deepPurple.8'],
-          hovered: deepPurpleColorPalette['deepPurple.8'],
-          pressed: deepPurpleColorPalette['deepPurple.8']
-        },
-        borderRadius: 4,
-        indicator: {
-          backgroundColor: undefined
-        }
-      },
-      inactive: {
-        color: {
-          default: deepPurpleColorPalette['grey.5'],
-          focused: deepPurpleColorPalette['grey.5'],
-          hovered: deepPurpleColorPalette['grey.5'],
-          pressed: deepPurpleColorPalette['grey.5']
-        },
-        backgroundColor: {
-          default: undefined,
-          focused: undefined,
-          hovered: deepPurpleColorPalette['beige.1'],
-          pressed: deepPurpleColorPalette['beige.1']
-        },
-        borderRadius: 4,
-        indicator: {
-          backgroundColor: undefined
-        }
-      },
-      disabled: {
-        color: {
-          default: deepPurpleColorPalette['grey.3'],
-          focused: deepPurpleColorPalette['grey.3'],
-          hovered: deepPurpleColorPalette['grey.3'],
-          pressed: deepPurpleColorPalette['grey.3']
-        },
-        indicator: {
-          backgroundColor: undefined
-        }
-      }
-    },
-    revert: {
-      active: {
-        color: {
-          default: deepPurpleColorPalette['deepPurple.8'],
-          focused: deepPurpleColorPalette['deepPurple.8'],
-          hovered: deepPurpleColorPalette['deepPurple.8'],
-          pressed: deepPurpleColorPalette['deepPurple.8']
-        },
-        backgroundColor: {
-          default: deepPurpleColorPalette['grey.0'],
-          focused: deepPurpleColorPalette['grey.0'],
-          hovered: deepPurpleColorPalette['grey.0'],
-          pressed: deepPurpleColorPalette['grey.0']
-        },
-        borderRadius: 4,
-        indicator: {
-          backgroundColor: undefined
-        }
-      },
-      inactive: {
-        color: {
-          default: deepPurpleColorPalette['white-alpha.80'],
-          focused: deepPurpleColorPalette['white-alpha.80'],
-          hovered: deepPurpleColorPalette['white-alpha.80'],
-          pressed: deepPurpleColorPalette['white-alpha.80']
-        },
-        backgroundColor: {
-          default: undefined,
-          focused: undefined,
-          hovered: deepPurpleColorPalette['white-alpha.10'],
-          pressed: deepPurpleColorPalette['white-alpha.10']
-        },
-        borderRadius: 4,
-        indicator: {
-          backgroundColor: undefined
-        }
-      },
-      disabled: {
-        color: {
-          default: deepPurpleColorPalette['white-alpha.20'],
-          focused: deepPurpleColorPalette['white-alpha.20'],
-          hovered: deepPurpleColorPalette['white-alpha.20'],
-          pressed: deepPurpleColorPalette['white-alpha.20']
-        },
-        indicator: {
-          backgroundColor: undefined
-        }
-      }
-    }
-  }
-};
-
-const tag = {
-  borderRadius: 16,
-  icon: {
-    small: 16,
-    medium: 16,
-    large: 20
-  },
-  height: {
-    small: 20,
-    medium: 24,
-    large: 32
-  },
-  withIcon: {
-    small: {
-      paddingLeft: 2,
-      paddingRight: 8
-    },
-    medium: {
-      paddingLeft: 4,
-      paddingRight: 8
-    },
-    large: {
-      paddingLeft: 6,
-      paddingRight: 8
-    }
-  },
-  withoutIcon: {
-    small: {
-      paddingLeft: 8,
-      paddingRight: 8
-    },
-    medium: {
-      paddingLeft: 8,
-      paddingRight: 8
-    },
-    large: {
-      paddingLeft: 8,
-      paddingRight: 8
-    }
-  }
-};
-
-const tooltip = {
-  backgroundColor: hex2rgba(colors.black, 0.95),
-  borderRadius: 10,
-  opacity: 0.95,
-  horizontalPadding: 16,
-  verticalPadding: 8,
-  floatingPadding: 8,
-  maxWidth: 328,
-  transition: {
-    in: {
-      duration: '150ms',
-      timingFunction: 'ease-out',
-      property: 'opacity'
-    },
-    out: {
-      duration: '75ms',
-      timingFunction: 'ease-out',
-      property: 'opacity'
-    }
-  },
-  arrow: {
-    width: 39,
-    height: 9
-  }
-};
-
-const verticalSteps = {
-  active: {
-    icon: {
-      backgroundColor: colors.primary,
-      textColor: colors.white
-    }
-  },
-  done: {
-    icon: {
-      backgroundColor: colors.primary,
-      textColor: colors.white
-    }
-  },
-  default: {
-    icon: {
-      backgroundColor: colors.disabled,
-      textColor: deepPurpleColorPalette['grey.3']
-    }
-  }
-};
-
-const breakpoints = {
-  values: {
-    base: 0,
-    small: 480,
-    medium: 768,
-    large: 1024,
-    wide: 1280
-  },
-  min: {
-    smallBreakpoint: 'min-width: 480px',
-    mediumBreakpoint: 'min-width: 768px',
-    largeBreakpoint: 'min-width: 1024px',
-    wideBreakpoint: 'min-width: 1280px'
-  },
-  max: {
-    smallBreakpoint: 'max-width: 479px',
-    mediumBreakpoint: 'max-width: 767px',
-    largeBreakpoint: 'max-width: 1023px',
-    wideBreakpoint: 'max-width: 1279px'
-  }
-};
-
-// eslint-disable-next-line unicorn/expiring-todo-comments
-// TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
-const theme = {
-  spacing,
-  getSpacing: multiplier => spacing * multiplier,
-  colors,
-  palettes: {
-    deepPurple: deepPurpleColorPalette
-  },
-  avatar,
-  breakpoints,
-  button,
-  bottomSheet,
-  card,
-  cardModal,
-  choices,
-  dialogModal,
-  feedbackMessage,
-  forms,
-  highlight,
-  icon,
-  iconButton,
-  buttonBadge,
-  listItem,
-  pageLoader,
-  picker,
-  shadows,
-  skeleton,
-  tabBar,
-  tag,
-  sticker,
-  tooltip,
-  typography,
-  fullscreenModal,
-  actionCard,
-  verticalSteps,
-  mapMarker,
-  toggle
-};
-
-export { theme as defaultThemeLinaria };
-//# sourceMappingURL=linaria-themes-node-22.22.es.mjs.map