import React, { CSSProperties } from 'react';

export const SilkeIconDefinitions = {
  // BASIC ICONS
  add: 'fal fa-plus',
  broom: 'fal fa-broom-wide',
  check: 'fa fa-check',
  'check.circle': 'fas fa-check-circle',
  'circle.duotone': 'fa-duotone fa-circle',
  'circle.regular': 'fa-light fa-circle',
  close: 'fal fa-times',
  delete: 'fal fa-trash',
  edit: 'fal fa-edit',
  'edit.line': 'fal fa-pencil-line',
  'edit.pen': 'fal fa-pen',
  'pen.swirl': 'fal fa-pen-swirl',
  error: 'fas fa-exclamation',
  help: 'fal fa-question-circle',
  community: 'fal fa-user-group-simple',
  'check.circle.outline': 'fal fa-check-circle',
  play: 'fal fa-play',
  pause: 'fal fa-pause',
  emoji: 'fal fa-smile',
  'emoji.add': AddEmoji,
  mention: 'fal fa-at',
  share: 'fal fa-share-from-square',
  'cloud.check': 'fal fa-cloud-check',
  'cloud.slash': 'fal fa-cloud-slash',
  ai: 'fa-light fa-sparkles',
  'ai.sparkle': 'fa-solid fa-sparkle',
  'ai.page': AiGradientPage,
  'ai.sparkels': 'fal fa-sparkles',
  'ai.gradient': AiGradientIcon,
  'ai.image': 'fa-kit fa-light-image-sparkle-tr',
  'ai.component': AiGradientComponent,
  'ai.component.flat': 'fa-kit fa-light-cube-sparkle-tr',
  'ai.text': 'fa-kit fa-light-text-sparkle-tr',
  'ai.file': 'fa-kit fa-light-file-lines-sparkle',
  'ai.clone.edit': AiGradientCloneEdit,
  sparkles: 'fa-solid fa-sparkles',
  compare: 'fal fa-shuffle',
  menuMore: 'fal fa-ellipsis-v',
  menuMoreHorizontal: 'fal fa-ellipsis',
  menu: 'fal fa-bars',
  drag: 'fal fa-grip-lines',
  'drag.dots': 'fa-solid fa-grip-dots-vertical',
  remove: 'fal fa-minus',
  'error.circle': 'fal fa-exclamation-circle',
  'warning.triangle': 'fal fa-triangle-exclamation',
  waveform: 'fal fa-waveform-lines',
  tooltip: 'fal fa-info-circle',
  email: 'fal fa-envelope',
  password: 'fal fa-key',
  undo: 'fal fa-undo',
  revert: 'fal fa-arrow-u-turn-up-left',
  redo: 'fal fa-redo',
  history: 'fal fa-stopwatch',
  rollback: 'fal fa-history',
  settings: 'fal fa-cog',
  search: 'fal fa-search',
  library: 'fal fa-book-open',
  'library.unlinked': 'fa-kit fa-light-book-open-slash',
  'search.file': 'fal fa-file-magnifying-glass',
  filter: 'fal fa-sliders-simple',
  copy: 'fal fa-copy',
  paste: 'fal fa-paste',
  'paste.add': 'fa-kit fa-paste-add',
  random: 'fal fa-random',
  question: 'fal fa-question-circle',
  send: 'fal fa-paper-plane',
  link: 'fal fa-link-simple',
  unlink: 'fal fa-link-simple-slash',
  'link.external': 'fal fa-arrow-up-right',
  'link.external.square': 'fal fa-arrow-up-right-from-square',
  flag: 'fal fa-flag',
  sum: 'fal fa-sigma',
  lock: 'fal fa-lock',
  unlock: 'fal fa-lock-open',
  compress: 'fal fa-compress-arrows-alt',
  upload: 'fal fa-arrow-up-from-line',
  crop: 'fal fa-crop-alt',
  repeat: 'fal fa-repeat',
  rotate: 'fal fa-angle-90',
  square: 'fal fa-square',
  shapes: 'fal fa-shapes',
  sharedStyle: 'fal fa-pencil-paintbrush',
  paintbrush: 'fal fa-paintbrush',
  firefox: 'fab fa-firefox',
  safari: 'fa-brands fa-safari',
  'square.dashed': 'fal fa-square-dashed',
  'square.small': 'fas fa-square-small',
  hashtag: 'fal fa-hashtag',
  eye: 'fal fa-eye',
  'eye.off': 'fal fa-eye-slash',
  'mouse.pointer': 'fal fa-mouse-pointer',
  'hand.pointer': 'fal fa-hand-pointer',
  'mouse.drag': 'fal fa-hand',
  dot: 'fas fa-circle-small',
  'dots.vertical': 'fal fa-ellipsis-stroke-vertical',
  'dots.horizontal': 'fal fa-ellipsis-stroke-vertical fa-rotate-90',
  star: 'fal fa-star',
  'star.filled': 'fa-solid fa-star',
  eyeDropper: 'fal fa-eye-dropper',
  log: 'fal fa-binary',
  dashboard: 'fal fa-grid-2',
  test: 'fal fa-flask-vial',
  guest: 'fal fa-user-astronaut',
  cartoon: 'fal fa-face-awesome',
  'network.on': 'fal fa-wifi',
  'network.off': 'fal fa-wifi-slash',
  grid: 'fal fa-grid',
  'memo.circle.check': 'fal fa-memo-circle-check',
  'bring.forward': 'fal fa-bring-forward',
  'bring.backward': 'fal fa-send-backward',

  moon: 'fal fa-moon',
  sun: 'fal fa-sun-bright',

  notification: 'fal fa-bell',
  'notification.new': 'fal fa-bell-on',

  tracking: 'fa-light fa-chart-line',
  trackingEvent: 'fa-light fa-share-nodes',

  package: 'fal fa-cube',
  'package.open': 'fal fa-box-open',
  'select.all': 'fal fa-check-double',
  'select.some.square': 'fal fa-square-minus',
  'select.all.square': 'fas fa-square-check',

  ban: 'fas fa-ban',
  'ban.light': 'fa-light fa-ban',
  'error.triangle': 'fal fa-exclamation-triangle',

  folder: 'fal fa-folder',
  'folder.download': 'fal fa-folder-arrow-down',
  'folder.open': 'fal fa-folder-open',
  'folder.plus': 'fal fa-folder-plus',
  folders: 'fal fa-folders',
  file: 'fal fa-file',
  'file.check': 'fa-light fa-file-check',
  'file.arrow.up': 'fa-light fa-file-arrow-up',
  'file.download': 'far fa-download',

  code: 'fal fa-code',
  'code.version': 'fal fa-code-branch',
  'code.fork': 'fal fa-code-fork',
  'code.compare': 'fal fa-code-compare',
  'code.history': 'fal fa-clock-rotate-left',
  'code.rectangle': 'fal fa-rectangle-code',
  messages: 'fal fa-comments-alt',

  // KEYBOARD SYMBOLS
  'keyboard.command': 'fa-light fa-command',
  'keyboard.option': 'fa fa-option',
  'keyboard.shift': 'fa fa-up',
  'keyboard.backspace': 'fa fa-delete-left',
  'keyboard.enter': 'fal fa-arrow-turn-down-left',
  'keyboard.escape': 'fa fa-escape',

  // ARROWS
  arrows: 'fal fa-arrows',
  'arrow.down': 'fal fa-arrow-down',
  'arrow.left': 'fal fa-arrow-left',
  'arrow.right': 'fal fa-arrow-right',
  'arrow.up': 'fal fa-arrow-up',
  'arrow.up.circle': 'fal fa-circle-arrow-up',
  'chevron.down': 'fal fa-chevron-down',
  'chevron.up': 'fal fa-chevron-up',
  'chevron.right': 'fal fa-chevron-right',
  'arrow.turn.down.left': 'fal fa-arrow-turn-down-left',
  'arrow.turn.up.left': 'fal fa-arrow-turn-down-left fa-flip-vertical',
  'arrow.up.right': 'fal fa-arrow-up-right',
  'arrow.up.left': 'fal fa-arrow-up-left',
  'arrow.down.left': 'fal fa-arrow-down-left',
  'arrow.down.right': 'fal fa-arrow-down-right',
  'caret.down': 'fas fa-caret-down',
  'caret.up': 'fas fa-caret-up',
  'caret.right': 'fas fa-caret-right',
  'caret.left': 'fas fa-caret-left',

  'arrows.vertical.line': 'fal fa-arrows-to-line',
  'arrows.horizontal.line': 'fal fa-arrows-to-line fa-rotate-90',
  'arrow.left.arrow.right': 'fal fa-arrow-right-arrow-left',
  'arrows.horizontal': 'fal fa-arrows-h',
  'arrows-up-down': 'fal fa-arrows-up-down',
  'arrows-left-right': 'fal fa-arrows-left-right',
  'arrows-from-line-vertical': 'fal fa-arrows-from-line',
  'arrows-from-line-horizontal': 'fal fa-arrows-from-line fa-rotate-90',
  'arrow.up.line': 'fal fa-arrow-up-to-line',
  'arrow.down.line': 'fal fa-arrow-down-to-line',
  'arrow.left.line': 'fal fa-arrow-left-to-line',
  'arrow.right.line': 'fal fa-arrow-right-to-line',
  'arrow.from.right': 'fal fa-arrow-from-right',
  'arrow.from.left': 'fal fa-arrow-from-left',
  'arrow.down.left.and.up.right': 'fal fa-arrow-down-left-and-arrow-up-right-to-center',
  'arrow.up.right.and.down.left': 'fal fa-arrow-up-right-and-arrow-down-left-from-center',
  'arrows.left.right': 'fa-light fa-arrows-left-right-to-line',
  'arrows.up.down': 'fa-light fa-arrows-left-right-to-line fa-rotate-90',
  'arrows.from.dotted.line': 'fal fa-arrows-from-dotted-line',
  'arrows.to.dotted.line': 'fal fa-arrows-to-dotted-line',

  'padding.all': 'fa-kit fa-padding-all',
  'padding.top.bottom': 'fa-kit fa-padding-horizontal fa-rotate-90',
  'padding.left.right': 'fa-kit fa-padding-horizontal',
  'padding.top': 'fa-light fa-arrow-up-to-line',
  'padding.bottom': 'fa-light fa-arrow-down-to-line',
  'padding.left': 'fa-light fa-arrow-left-to-line',
  'padding.right': 'fa-light fa-arrow-right-to-line',
  'height.min': 'fa-kit fa-min-size fa-rotate-90',
  'height.max': 'fa-kit fa-max-size fa-rotate-90',
  'width.min': 'fa-kit fa-min-size',
  'width.max': 'fa-kit fa-max-size',
  'gap.horizontal': 'fa-kit fa-gap',
  'gap.vertical': 'fa-kit fa-gap fa-rotate-90',

  'columns.3': 'fa-light fa-columns-3',

  minimize: 'fal fa-minimize',
  'fixed-width': FixedWidth,
  'fixed-height': FixedHeight,

  down: 'fal fa-chevron-down',
  left: 'fal fa-chevron-left',
  right: 'fal fa-chevron-right',
  up: 'fal fa-chevron-up',
  sync: 'fas fa-sync',
  exchange: 'fal fa-exchange',

  comment: 'fal fa-comment-alt',
  'comment.new': CommentNew,
  commentMarker: 'fal fa-map-marker',

  // PLATFORM ICONS
  template: 'fal fa-copy',
  templates: 'fal fa-copy',
  templatesLegacy: 'fal fa-table-layout',
  page: 'fal fa-page',
  project: 'fal fa-browser',
  projects: 'fal fa-browsers',
  draft: 'fal fa-file',
  drafts: 'fal fa-note-sticky',
  account: 'fal fa-building',
  user: 'fal fa-user',
  'user.add': 'fal fa-user-plus',
  'user.secret': 'fal fa-user-secret',
  'user.history': 'fal fa-user-clock',
  'user.lock': 'fal fa-user-lock',
  'user.gear': 'fal fa-user-gear',
  integrations: IntegrationsIcon,
  users: 'fal fa-user-friends',
  'users-class': 'fal fa-users-class',
  team: 'fal fa-users',
  workspace: 'fal fa-folder',
  admin: 'fal fa-alicorn',
  hosting: 'fal fa-server',
  publish: 'fal fa-cloud-upload',
  support: 'fal fa-comment-lines',
  security: 'fal fa-shield-check',
  'security.user': 'fal fa-user-shield',
  'plan.free': 'fal fa-vial',
  'plan.creative': 'fal fa-palette',
  'plan.teams': 'fal fa-users',
  'plan.enterprise': 'fal fa-starship',
  'support.standard': 'fal fa-ticket',
  'support.premium': 'fal fa-headset',
  address: 'fal fa-id-card',
  'credit-card': 'fal fa-credit-card',
  money: 'fal fa-money-bill',
  dynamic: 'fa-light fa-bolt-lightning',
  slash: 'fal fa-slash-forward',
  'geo.fence.disabled': 'fa-light fa-globe',
  'geo.fence.enabled': 'fa-light fa-location-pin',
  // EDITOR ICONS
  'editor.design': 'fal fa-vector-square',
  'editor.content': 'fal fa-i-cursor',
  'editor.code': 'fal fa-code',
  'editor.preview': 'fal fa-eye',
  gradient: GradientIcon,
  image: 'fal fa-image',
  images: 'fal fa-images',
  camera: 'fal fa-camera',
  video: 'fal fa-video',
  audio: 'fal fa-music',
  fill: 'fal fa-fill-drip',
  opacity: 'fal fa-droplet-percent',
  'object.group': 'fal fa-object-group',
  'object.ungroup': 'fal fa-object-ungroup',
  pin: 'fal fa-map-pin',
  'component.add': 'fal fa-grid-round-2-plus',
  'main-component': 'fa-kit fa-fa-main-component',
  'instance-component': 'fa-light fa-diamond',
  'goto.main-component': GotoMainComponent,
  'push-to-component': PushToComponent,
  variant: Variant,
  section: Section,
  frame: 'fal fa-frame',
  'frame.row': 'fal fa-diagram-cells fa-rotate-90',
  'frame.column': 'fal fa-diagram-cells',
  'flex.row.add': 'fa-kit fa-flex-add',
  'flex.column.add': 'fa-kit fa-flex-column-add',
  'flex.column': 'fa-kit fa-flex',
  'flex.row': 'fa-kit fa-flex fa-rotate-90',
  layers: 'fal fa-layer-group',
  addon: 'fal fa-puzzle-piece',
  widget: 'fal fa-cube',
  form: 'fal fa-input-text',
  'curly-brackets': 'far fa-brackets-curly',
  expand: 'fal fa-expand',
  'request.feature': 'fal fa-messages-question',
  'custom-component': CustomComponentIcon,
  'folder-tree': 'fal fa-folder-tree',

  'project-plan': 'fal fa-gem',
  diamond: 'fa-light fa-gem',
  crosshair: 'fa-light fa-crosshairs',
  clone: 'fa-light fa-clone',
  'clone-plus': 'fa-light fa-clone-plus',
  'globe-pointer': 'fa-light fa-globe-pointer',
  globe: 'fa-light fa-globe',

  // ALignment icons
  'align.text.right': 'fal fa-align-right',
  'align.text.left': 'fal fa-align-left',
  'align.text.center': 'fal fa-align-center',
  'align.text.justify': 'fal fa-align-justify',
  'align.objects.top': 'fal fa-objects-align-top',
  'align.objects.bottom': 'fal fa-objects-align-bottom',
  'align.objects.left': 'fal fa-objects-align-left',
  'align.objects.right': 'fal fa-objects-align-right',
  'align.objects.center.horizontal': 'fal fa-objects-align-center-horizontal',
  'align.objects.center.vertical': 'fal fa-objects-align-center-vertical',
  'align.objects.distribute.horizontal': 'fal fa-distribute-spacing-horizontal',
  'align.objects.distribute.vertical': 'fal fa-distribute-spacing-vertical',

  'placement.center': PlacementCenter,
  'placement.top': PlacementTop,
  'placement.bottom': PlacementBottom,

  'rotate.left': 'fal fa-rotate-left',
  'rotate.right': 'fal fa-rotate-right',

  'flip.horizontal': FlipIconHorizontal,
  'flip.vertical': FlipIconVertical,

  'border.top': 'fal fa-border-top',
  'border.top.left': 'fal fa-border-top-left',
  'border.top.right': 'fal fa-border-top-left fa-rotate-90',
  'border.bottom': 'fal fa-border-bottom',
  'border.bottom.left': 'fal fa-border-bottom-right fa-rotate-90',
  'border.bottom.right': 'fal fa-border-bottom-right',
  'border.left': 'fal fa-border-left',
  'border.right': 'fal fa-border-right',
  'border.inner': 'fal fa-border-inner',
  'border.outer': 'fal fa-border-outer',
  'border.none': 'fal fa-border-none',
  'border.all': 'fal fa-border-all',
  'border.center.v': 'fal fa-border-center-v',
  'border.center.h': 'fal fa-border-center-h',
  plug: 'fa fa-plug',
  'plug.light': 'fa-light fa-plug',
  refresh: 'fa-light fa-arrows-rotate',
  signout: 'fal fa-sign-out',
  tag: 'fal fa-tag',
  'file.export': 'fal fa-file-export',
  home: 'fal fa-house',
  qr: 'fal fa-qrcode',
  'pin.on': 'fa-light fa-thumbtack-angle',
  'pin.off': 'fa-light fa-thumbtack-angle-slash',
  eraser: 'fal fa-eraser',

  list: 'fal fa-list',
  'list.ol': 'fal fa-list-ol',
  'list.check': 'fal fa-list-check',
  table: 'fal fa-table',
  'table.layout': 'fa fa-table-layout',
  text: 'fal fa-text',
  'text.subscript': 'fal fa-subscript',
  'text.superscript': 'fal fa-superscript',
  'text.strikethrough': 'fal fa-strikethrough',
  'text.underline': 'fal fa-underline',
  'text.dropcap': DropcapIcon,
  'text.italic': 'fal fa-italic',
  'text.bold': 'fal fa-bold',
  'text.h1': 'fal fa-h1',
  'text.h2': 'fal fa-h2',
  'text.h3': 'fal fa-h3',
  'text.h4': 'fal fa-h4',
  'text.h5': 'fal fa-h5',
  'text.h6': 'fal fa-h6',
  'text.p': 'fal fa-paragraph',
  'text.font': 'fal fa-font',
  'text.blockquote': 'fal fa-quote-right',
  'text.table.header': 'fal fa-heading',
  'text.column.add': TableColumnAdd,
  'text.column.remove': TableColumnRemove,
  'text.row.add': TableRowAdd,
  'text.row.remove': TableRowRemove,

  // Brands
  adobe: 'fab fa-adobe',
  facebook: 'fab fa-facebook-square',
  'x.twitter': 'fab fa-square-x-twitter',
  instagram: 'fab fa-instagram',
  youtube: 'fab fa-youtube',
  microsoft: 'fab fa-microsoft',
  google: 'fab fa-google',
  discord: 'fab fa-discord',
  wordpress: 'fab fa-wordpress',
  magento: 'fab fa-magento',
  joomla: 'fab fa-joomla',
  shopify: 'fab fa-shopify',
  figma: 'fab fa-figma',
  ceros: Ceros,
  import: 'fal fa-file-import',
  stripe: 'fab fa-stripe',
  okta: 'fa-solid fa-circle-dot',
  linkedin: 'fab fa-linkedin',
  twitter: 'fab fa-twitter',
  react: 'fab fa-react',
  sass: 'fab fa-sass',
  typescript: TypescriptIcon,
  html5: 'fab fa-html5',
  translate: 'fal fa-language',
  spell: 'fal fa-spell-check',
  'tone.of.voice': 'fal fa-head-side-speak',

  // Card icons
  'American Express': 'fab fa-cc-amex',
  Amex: 'fab fa-cc-amex',
  'Diners Club': 'fab fa-cc-diners-club',
  Discover: 'fab fa-cc-discover',
  JCB: 'fab fa-cc-jcb',
  MasterCard: 'fab fa-cc-mastercard',
  Mastercard: 'fab fa-cc-mastercard',
  Visa: 'fab fa-cc-visa',
  UnionPay: 'fal fa-credit-card-front',
  Unknown: 'fal fa-credit-card-front',

  // Device
  'desktop.large': 'fal fa-tv',
  desktop: 'fal fa-desktop',
  laptop: 'fal fa-laptop',
  mobile: 'fal fa-mobile-alt',
  tablet: 'fal fa-tablet-alt',
  devices: 'fal fa-laptop-mobile',
  'device.custom': 'fal fa-rectangle-landscape',

  // Graphs
  bar: 'fa-solid fa-chart-column',
  line: 'fa-solid fa-chart-line',
  radar: 'fa-solid fa-chart-network',
  doughnut: 'fa-solid fa-circle-dot',
  pie: 'fa-solid fa-circle',
  polarArea: 'fa-solid fa-chart-radar',
  bubble: 'fa-solid fa-chart-scatter-bubble',
  scatter: 'fa-solid fa-chart-scatter',

  // Content children
  contentChild: 'fa-light fa-square-caret-right',
  contentChildParent: ContentChildParent,

  // Interactions
  'interaction.icon': 'fa-light fa-bolt',
  'interaction.active': 'fa-solid fa-bolt',
  'interaction.inactive': 'fa-light fa-bolt',
  'interaction.click': 'fa-light fa-hand-pointer',
  'interaction.double-click': 'fa-light fa-bullseye-pointer',
  'interaction.arrow': 'fa-light fa-arrow-down',
  'interaction.mouse': 'fa-light fa-computer-mouse-scrollwheel',
  'interaction.mouse-enter': 'fal fa-up-right',
  'interaction.mouse-leave': 'fal fa-down-left',
  'interaction.timer': 'fal fa-timer',
  'interaction.disabled': 'fa-light fa-bolt-slash',
  'interaction.scroll-parallax': 'fal fa-down-from-dotted-line',
  'interaction.slider': 'fal fa-slider',
  'interaction.movement': 'fa-light fa-computer-mouse-scrollwheel',
  'interaction.translate': 'fal fa-up-down-left-right',

  // Variables
  'variable.icon': 'fa-light fa-sliders',
  'variable.color': 'fa-light fa-palette',
  'variable.text': 'fak fa-text-variable',
  'variable.image': 'fak fa-image-variable',

  marketing: 'fa-light fa-megaphone',
  'state.focus': 'fa-light fa-circle-dot',

  // Conditions
  'condition.equals': 'fa-light fa-equals',
  'condition.notEqual': 'fa-light fa-not-equal',
  'condition.greaterThan': 'fa-light fa-greater-than',
  'condition.lessThan': 'fa-light fa-less-than',
  'condition.greaterThanEqual': 'fa-light fa-greater-than-equal',
  'condition.lessThanEqueal': 'fa-light fa-less-than-equal',
  'condition.and': 'fa-light fa-ampersand',
  'condition.or': 'fa-light fa-pipe',
  'condition.true': 'fa-light fa-check',
  'condition.false': 'fa-light fa-xmark',

  animate: 'fa-kit fa-animate',
  'animate.in': 'fa-kit fa-animate-in',
  'animate.out': 'fa-kit fa-animate-in fa-flip-vertical',
  'animate.bold': 'fa-kit fa-animation-bold',
  'animate.fill-backwards': AnimationFillBackwards,
  'animate.fill-forwards': AnimationFillForwards,
  'animate.fill-both': AnimationFillBoth,

  // Themes
  'theme.color': 'fal fa-droplet',
  'theme.font': 'fal fa-font-case',

};

export const StateIcons = {
  default: 'flag',
  hover: 'interaction.mouse-enter',
  active: 'interaction.click',
  focus: 'state.focus',
  'focus-visible': 'state.focus',
};

function PushToComponent() {
  return <GotoMainComponent rotate="270deg" />;
}

function GotoMainComponent({ rotate }: { rotate?: string }) {
  return (
    <svg
      style={{ transform: `rotate(${rotate || 'none'})` }}
      width="13"
      height="13"
      viewBox="0 1 13 13"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0.647241 4.94279C-0.215746 5.80578 -0.215747 7.20496 0.64724 8.06795L4.31926 11.74C5.18225 12.603 6.58143 12.603 7.44441 11.74L7.90388 11.2805C8.06715 11.1172 8.06715 10.8525 7.90388 10.6893C7.74061 10.526 7.4759 10.526 7.31263 10.6893L6.85317 11.1487C6.31672 11.6852 5.44696 11.6852 4.9105 11.1487L1.23849 7.4767C0.702034 6.94025 0.702035 6.07049 1.23849 5.53404L4.91051 1.86202C5.44696 1.32557 6.31672 1.32557 6.85317 1.86202L7.31263 2.32149C7.4759 2.48476 7.74061 2.48476 7.90388 2.32149C8.06715 2.15822 8.06715 1.89351 7.90388 1.73024L7.44441 1.27078C6.58143 0.407789 5.18225 0.407788 4.31926 1.27078L0.647241 4.94279ZM10.1722 3.50473L12.8688 6.20127C12.9496 6.2775 13 6.38558 13 6.50544C13 6.62473 12.9501 6.73236 12.8699 6.80853L10.1722 9.5062C10.009 9.66947 9.74426 9.66947 9.581 9.5062C9.41773 9.34293 9.41773 9.07822 9.581 8.91496L11.5724 6.92351H5.41498C5.18408 6.92351 4.9969 6.73633 4.9969 6.50544C4.9969 6.27454 5.18408 6.08736 5.41498 6.08736H11.5724L9.581 4.09597C9.41773 3.93271 9.41773 3.668 9.581 3.50473C9.74426 3.34146 10.009 3.34146 10.1722 3.50473Z"
        fill="white"
      />
    </svg>
  );
}

function CustomComponentIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      width="40"
      height=""
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M3.16277 15.5383L6.0783 18.2352C6.00542 18.8183 6.00542 19.4743 6.00542 20.0574C6.00542 20.7134 6.00542 21.3694 6.0783 21.9525L3.16277 24.6493C2.361 25.3782 2.14233 26.5444 2.72544 27.492L4.91209 31.3551C5.42231 32.3026 6.58852 32.7399 7.60896 32.3755L11.3992 31.2093C12.4196 31.9382 13.5129 32.5213 14.6062 33.0315L15.4809 36.8946C15.6996 37.9879 16.6471 38.7168 17.7404 38.7168H22.1866C23.28 38.7168 24.2275 37.9879 24.4462 36.8946L25.3208 33.0315C26.4142 32.5213 27.5075 31.9382 28.5279 31.2093L32.3181 32.3755C33.3386 32.7399 34.5048 32.3026 35.015 31.3551L37.2016 27.492C37.7847 26.5444 37.5661 25.3782 36.7643 24.6493L33.8488 21.9525C33.9217 21.3694 33.9946 20.7134 33.9946 20.0574C33.9946 19.4743 33.9217 18.8183 33.8488 18.2352L36.7643 15.5383C37.5661 14.8094 37.7847 13.6432 37.2016 12.6956L35.015 8.83256C34.5048 7.88501 33.3386 7.44768 32.3181 7.81213L28.5279 8.97834C27.5075 8.24946 26.4142 7.59346 25.3208 7.15613L24.4462 3.29305C24.2275 2.19972 23.28 1.39795 22.1866 1.39795H17.7404C16.6471 1.39795 15.6996 2.19972 15.4809 3.29305L14.6062 7.15613C13.5129 7.59346 12.4196 8.24946 11.3992 8.97834L7.60896 7.81213C6.58852 7.44768 5.42231 7.88501 4.91209 8.83256L2.72544 12.6956C2.14233 13.6432 2.361 14.8094 3.16277 15.5383ZM11.9094 11.6023L12.8569 10.8734C13.6587 10.2174 14.5334 9.70722 15.5538 9.26989L16.6471 8.83256L17.7404 3.73038H22.1866L23.28 8.83256L24.3733 9.26989C25.3937 9.70722 26.2684 10.2174 27.0702 10.8734L28.0177 11.6023L32.9741 9.99878L35.2337 13.8619L31.3706 17.3605L31.5163 18.5267L31.5164 18.5268C31.5892 19.037 31.6621 19.5472 31.6621 20.0574C31.6621 20.6405 31.5892 21.1507 31.5164 21.6609L31.5163 21.6609L31.3706 22.8271L35.2337 26.3258L32.9741 30.1889L28.0177 28.5853L27.0702 29.3142C26.2684 29.9702 25.3937 30.4804 24.3733 30.8448L23.28 31.3551L22.1866 36.3844H17.7404L16.6471 31.3551L15.5538 30.8448C14.5334 30.4804 13.6587 29.9702 12.8569 29.3142L11.9094 28.5853L6.95296 30.1889L4.69342 26.3258L8.55651 22.8271L8.41073 21.6609C8.33784 21.1507 8.33784 20.6405 8.33784 20.0574C8.33784 19.5472 8.33784 19.0369 8.41073 18.5267L8.55651 17.3605L4.69342 13.8619L6.95296 9.99878L11.9094 11.6023ZM18.2556 23.1221L14.9276 19.7698L18.2554 16.442C18.6527 16.0724 18.6535 15.4321 18.2578 15.0614C17.8871 14.6657 17.2468 14.6665 16.8773 15.0638L12.8505 19.0906C12.4524 19.4609 12.4524 20.103 12.8505 20.4733L16.8773 24.5001C17.2468 24.8974 17.8871 24.8982 18.2578 24.5025C18.6534 24.1319 18.6527 23.4918 18.2556 23.1221ZM18.1356 24.3802C18.4631 24.0779 18.4631 23.5487 18.1356 23.2464L14.6837 19.7694L18.1356 16.3175C18.4631 16.0151 18.4631 15.486 18.1356 15.1837C17.992 15.0282 17.7974 14.9465 17.6002 14.9387C17.7974 14.9466 17.9919 15.0282 18.1354 15.1837C18.4629 15.486 18.4629 16.0151 18.1354 16.3175L14.6835 19.7693L18.1354 23.2464C18.4629 23.5487 18.4629 24.0779 18.1354 24.3802C17.9917 24.5359 17.7967 24.6176 17.5992 24.6253C17.7967 24.6177 17.9918 24.536 18.1356 24.3802ZM21.7171 15.0614C21.3214 15.4321 21.3222 16.0724 21.7195 16.442L25.0473 19.7698L21.7193 23.1221C21.3222 23.4918 21.3215 24.1319 21.7171 24.5025C22.0878 24.8982 22.7281 24.8974 23.0977 24.5001L27.1244 20.4733C27.5225 20.103 27.5225 19.4609 27.1244 19.0906L23.0977 15.0638C22.7281 14.6665 22.0878 14.6657 21.7171 15.0614ZM22.9732 15.1837C22.8386 15.0379 22.6592 14.957 22.4748 14.941C22.6591 14.9571 22.8385 15.038 22.973 15.1837L27.0044 19.215C27.3319 19.5174 27.3319 20.0465 27.0044 20.3489L22.973 24.3802C22.8293 24.5359 22.6343 24.6176 22.4368 24.6253C22.6344 24.6177 22.8294 24.536 22.9732 24.3802L27.0045 20.3489C27.3321 20.0465 27.3321 19.5174 27.0045 19.215L22.9732 15.1837Z"
        fill="#FCFCFC"
      />
    </svg>
  );
}

function DropcapIcon() {
  return (
    <svg width={16} height={13} viewBox="0 0 16 13">
      <path
        d="M5.30957 5.17308H2.66995L2 7H1L3.5 0H4.5L7 7H6L5.30957 5.17308ZM2.9223 4.41346H5.09327L3.99766 1.13942L2.9223 4.41346Z"
        fill="white"
      />
      <path
        d="M9 3.5H16M9 0.5H16M9 6.5H16M0 9.5H16M4.37112e-08 12.5L16 12.5"
        stroke="currentcolor"
      />
    </svg>
  );
}

function TableColumnAdd() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path d="M13,2A2,2 0 0,0 11,4V20A2,2 0 0,0 13,22H22V2H13M20,10V14H13V10H20M20,16V20H13V16H20M20,4V8H13V4H20M9,11H6V8H4V11H1V13H4V16H6V13H9V11Z" />
    </svg>
  );
}

function TableColumnRemove() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path d="M4,2H11A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M17.59,12L15,9.41L16.41,8L19,10.59L21.59,8L23,9.41L20.41,12L23,14.59L21.59,16L19,13.41L16.41,16L15,14.59L17.59,12Z" />
    </svg>
  );
}

function TableRowAdd() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path d="M22,10A2,2 0 0,1 20,12H4A2,2 0 0,1 2,10V3H4V5H8V3H10V5H14V3H16V5H20V3H22V10M4,10H8V7H4V10M10,10H14V7H10V10M20,10V7H16V10H20M11,14H13V17H16V19H13V22H11V19H8V17H11V14Z" />
    </svg>
  );
}

function TableRowRemove() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path d="M9.41,13L12,15.59L14.59,13L16,14.41L13.41,17L16,19.59L14.59,21L12,18.41L9.41,21L8,19.59L10.59,17L8,14.41L9.41,13M22,9A2,2 0 0,1 20,11H4A2,2 0 0,1 2,9V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V9M4,9H8V6H4V9M10,9H14V6H10V9M16,9H20V6H16V9Z" />
    </svg>
  );
}

function GradientIcon() {
  return (
    <svg width={24} height={24} viewBox="0 0 24 24">
      <defs>
        <linearGradient id="grad" x1="50%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style={{ stopColor: 'rgb(255,255,255)', stopOpacity: 0.8 }} />
          <stop offset="80%" style={{ stopColor: 'rgb(255,255,255)', stopOpacity: 0 }} />
        </linearGradient>
      </defs>
      <rect
        stroke="white"
        rx={2}
        ry={2}
        width={22}
        height={19}
        x={24 / 2 - 22 / 2}
        y={24 / 2 - 19 / 2}
        fill="url(#grad)"
      />
    </svg>
  );
}

function FixedHeight() {
  return (
    <svg viewBox="0 0 24 24">
      <path fill="currentColor" d="M8,2h8v2h-3v16h3v2h-8v-2h3v-16h-3z" />
    </svg>
  );
}

function FixedWidth() {
  return (
    <svg viewBox="0 0 24 24">
      <path fill="currentColor" d="M2,8v8h2v-3h16v3h2v-8h-2v3h-16v-3z" />
    </svg>
  );
}

export function Section() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path
        fill="currentColor"
        fillRule="evenodd"
        clipRule="evenodd"
        d="M1 1.7c0-.4.3-.7.7-.7h20.6c.4 0 .7.3.7.7 0 .4-.3.7-.7.7H1.7a.7.7 0 0 1-.7-.7Zm19.9 4.9H3.1c-.3 0-.6.3-.6.6v9.6c0 .3.3.6.6.6h17.8c.3 0 .6-.3.6-.6V7.2c0-.3-.3-.6-.6-.6ZM3.1 5.2a2 2 0 0 0-2.1 2v9.6c0 1.1 1 2 2.1 2h17.8a2 2 0 0 0 2.1-2V7.2c0-1.1-1-2-2.1-2H3.1ZM1.7 21.6c-.4 0-.7.3-.7.7 0 .4.3.7.7.7h20.6c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7H1.7Z"
      />
    </svg>
  );
}

export function IntegrationsIcon() {
  return (
    <svg width="27" height="27" viewBox="0 0 27 27">
      <path d="M9.5 4h-4A2.5 2.5 0 0 0 3 6.5v4A2.5 2.5 0 0 0 5.5 13h4a2.5 2.5 0 0 0 2.5-2.5v-4A2.5 2.5 0 0 0 9.5 4Zm1.4 6.5A1.3 1.3 0 0 1 9.5 12h-4a1.3 1.3 0 0 1-1.3-1.4v-4a1.3 1.3 0 0 1 1.3-1.3h4A1.3 1.3 0 0 1 11 6.5v4ZM20.5 4h-4A2.5 2.5 0 0 0 14 6.5v4a2.5 2.5 0 0 0 2.5 2.5h4a2.5 2.5 0 0 0 2.5-2.5v-4A2.5 2.5 0 0 0 20.5 4Zm1.3 6.5a1.3 1.3 0 0 1-1.3 1.4h-4a1.3 1.3 0 0 1-1.4-1.4v-4a1.3 1.3 0 0 1 1.4-1.3h4a1.3 1.3 0 0 1 1.3 1.3v4ZM9.5 14.8h-4A2.5 2.5 0 0 0 3 17.3v4a2.5 2.5 0 0 0 2.5 2.5h4a2.5 2.5 0 0 0 2.5-2.5v-4a2.5 2.5 0 0 0-2.5-2.5Zm1.4 6.5a1.3 1.3 0 0 1-1.4 1.4h-4a1.3 1.3 0 0 1-1.3-1.4v-4A1.3 1.3 0 0 1 5.5 16h4a1.3 1.3 0 0 1 1.4 1.3v4Zm12.1-2a.6.6 0 0 1-.6.6h-3.3v3.4a.6.6 0 1 1-1.2 0v-3.4h-3.4a.6.6 0 1 1 0-1.2H18v-3.3a.6.6 0 0 1 .6-.6.6.6 0 0 1 .6.6v3.3h3.3a.6.6 0 0 1 .6.6Z" />
    </svg>
  );
}

export function AddEmoji() {
  return (
    <svg width="16" height="17" viewBox="0 0 16 17">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M14.3583 8.73377C14.0623 12.4116 10.9839 15.3039 7.2298 15.3039C3.27994 15.3039 0.0779419 12.102 0.0779419 8.15204C0.0779419 4.20218 3.27994 1.00018 7.2298 1.00018C8.6058 1.00018 9.89103 1.38877 10.9817 2.06218C10.9661 2.16516 10.958 2.26972 10.958 2.37502V2.65756H10.6755C10.473 2.65756 10.2756 2.68668 10.088 2.74133C9.23494 2.28975 8.26224 2.03402 7.2298 2.03402C3.85091 2.03402 1.11178 4.77316 1.11178 8.15204C1.11178 11.531 3.85091 14.2701 7.2298 14.2701C10.2564 14.2701 12.7696 12.0724 13.2608 9.18581C13.6614 9.14359 14.0442 8.98374 14.3583 8.73377ZM3.72274 8.67459C3.99781 8.59818 4.28274 8.75922 4.35915 9.0343C4.78944 10.5833 6.52846 11.5523 8.09272 11.1297C9.06819 10.7684 9.84415 9.97253 10.0994 9.03664C10.1745 8.76121 10.4587 8.59882 10.7341 8.67394C11.0095 8.74906 11.1719 9.03323 11.0968 9.30866C10.7413 10.6124 9.68828 11.6496 8.42701 12.1083C8.4144 12.1129 8.40163 12.1169 8.3887 12.1205C6.2832 12.7054 3.95173 11.4303 3.36303 9.311C3.28662 9.03593 3.44766 8.75099 3.72274 8.67459ZM16 4.73409C16 5.04527 15.7433 5.30857 15.4379 5.30857H13.8208V6.92569C13.8208 7.23452 13.5539 7.4754 13.2587 7.4754C12.9476 7.4754 12.6966 7.23121 12.6966 6.92569V5.30857H11.0795C10.7584 5.30857 10.5174 5.04185 10.5174 4.73409C10.5174 4.42857 10.7684 4.18438 11.0795 4.18438H12.6966V2.56726C12.6966 2.2595 12.9376 1.99278 13.2587 1.99278C13.5641 1.99278 13.8208 2.25608 13.8208 2.56726V4.18438H15.4335C15.7428 4.16939 16 4.43593 16 4.73409ZM15.4379 4.35025H13.6557V4.35065H15.439C15.4857 4.34791 15.5311 4.3549 15.5736 4.36973C15.5308 4.35462 15.485 4.34748 15.4379 4.35025ZM12.8625 2.56726C12.8625 2.34862 13.0293 2.16573 13.246 2.15885C13.0296 2.1661 12.8631 2.34887 12.8631 2.56731V4.35065H11.0797C10.8568 4.35065 10.6834 4.52403 10.6834 4.73456C10.6834 4.79146 10.6947 4.84593 10.7153 4.89551C10.6946 4.8458 10.6832 4.79117 10.6832 4.73409C10.6832 4.5236 10.8566 4.35025 11.0795 4.35025H12.8625V2.56726ZM12.8625 5.14325V6.92569C12.8625 7.004 12.8864 7.07717 12.9281 7.13819C12.8868 7.07735 12.8631 7.00451 12.8631 6.92658V5.14325H12.8625ZM5.75674 6.29688C5.75674 6.73206 5.40396 7.08484 4.96878 7.08484C4.5336 7.08484 4.18081 6.73206 4.18081 6.29688C4.18081 5.8617 4.5336 5.50892 4.96878 5.50892C5.40396 5.50892 5.75674 5.8617 5.75674 6.29688ZM9.49148 7.08484C9.92666 7.08484 10.2794 6.73206 10.2794 6.29688C10.2794 5.8617 9.92666 5.50892 9.49148 5.50892C9.0563 5.50892 8.70352 5.8617 8.70352 6.29688C8.70352 6.73206 9.0563 7.08484 9.49148 7.08484Z"
      />
    </svg>
  );
}

function CommentNew() {
  return (
    <div className="silke-comment-new">
      <style>{`
      .silke-comment-new{position:relative;}
      .silke-comment-new::before{
        content: "";
        display:block;
        position: absolute;
        top:-3px;
        right:-3px;
        width:6px;
        height:6px;
        border-radius:50%;
        background-color: #f8e796;

      }`}</style>
      <svg viewBox="0 0 512 512">
        <path d="M 300 0 H 63.1 C 27.85 0 -0.9 28.75 -0.9 63.1 V 350.2 C -0.9 385.45 27.85 413.3 63.1 413.3 H 159.1 V 497.28 C 159.1 507.117 170.12 512.83 178.22 506.98 L 303.12 413.3 H 447.12 C 482.37 413.3 511.12 384.55 511.12 350.2 V 200 L 480 200 V 352 C 480 369.6 465.6 384 448 384 H 303.9 C 296.972 384 290.23 386.248 284.69 390.406 L 192 460 V 400 C 192 391.162 184.836 384 176 384 H 64 C 46.4 384 32 369.6 32 352 V 64 C 32 46.4 46.4 32 64 32 H 300 z" />
      </svg>
    </div>
  );
}

function Ceros() {
  return (
    <svg width="16" height="8">
      <path d="m7.26 1.48-.7 1.06c-.22-.2-.42-.39-.63-.56a2.87 2.87 0 0 0-4.1.32 2.74 2.74 0 0 0 .3 3.7c1.08.98 2.64.98 3.65-.09.53-.56.96-1.23 1.4-1.87.48-.69.91-1.4 1.39-2.09.9-1.29 2.1-2.03 3.71-1.94a3.97 3.97 0 0 1 .3 7.91 4.27 4.27 0 0 1-3.84-1.4l.7-1.07c.26.23.5.46.76.66 1.51 1.14 3.68.6 4.35-1.08a2.74 2.74 0 0 0-1.07-3.33 2.56 2.56 0 0 0-3.43.53c-.59.71-1.06 1.53-1.6 2.3-.5.7-.96 1.46-1.53 2.12A3.97 3.97 0 1 1 2.96.17a4.25 4.25 0 0 1 4.3 1.31Z" />
    </svg>
  );
}

function PlacementCenter() {
  return (
    <svg viewBox="0 0 24 24">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M20 2H4C3.44771 2 3 2.44772 3 3V21C3 21.5523 3.44772 22 4 22H20C20.5523 22 21 21.5523 21 21V3C21 2.44772 20.5523 2 20 2ZM4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H4Z"
      />
      <rect x="5" y="8" width="14" height="8" rx="1" style={{ fill: 'currentColor' }} />
    </svg>
  );
}

function PlacementTop() {
  return (
    <svg viewBox="0 0 24 24">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M20 2H4C3.44771 2 3 2.44772 3 3V21C3 21.5523 3.44772 22 4 22H20C20.5523 22 21 21.5523 21 21V3C21 2.44772 20.5523 2 20 2ZM4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H4Z"
      />
      <rect x="5" y="4" width="14" height="5" rx="1" style={{ fill: 'currentColor' }} />
    </svg>
  );
}

function PlacementBottom() {
  return (
    <svg viewBox="0 0 24 24">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M20 2H4C3.44771 2 3 2.44772 3 3V21C3 21.5523 3.44772 22 4 22H20C20.5523 22 21 21.5523 21 21V3C21 2.44772 20.5523 2 20 2ZM4 1C2.89543 1 2 1.89543 2 3V21C2 22.1046 2.89543 23 4 23H20C21.1046 23 22 22.1046 22 21V3C22 1.89543 21.1046 1 20 1H4Z"
      />
      <rect x="5" y="15" width="14" height="5" rx="1" style={{ fill: 'currentColor' }} />
    </svg>
  );
}

function MainComponent() {
  return (
    <i
      className="fal fa-border-all fa-sm fa-rotate-by"
      style={{ '--fa-rotate-angle': '45deg' } as CSSProperties}
    />
  );
}

function Variant() {
  return (
    <i
      className="fa-light fa-clone fa-sm fa-rotate-by"
      style={{ '--fa-rotate-angle': '225deg' } as CSSProperties}
    />
  );
}

function TypescriptIcon() {
  return (
    <svg height="512" width="512">
      <rect fill="#3178c6" height="512" rx="50" width="512" />
      <rect fill="#3178c6" height="512" rx="50" width="512" />
      <path
        clipRule="evenodd"
        d="M317 407.4v50c8 4.3 17.7 7.4 28.8 9.5a189 189 0 0 0 69.3-.3c10.8-2.3 20.3-6.1 28.5-11.4 8-5.2 14.5-12.1 19.3-20.6s7.1-19 7.1-31.6c0-9-1.4-17-4-23.8s-6.7-13-11.8-18.2c-5.1-5.4-11.2-10.1-18.4-14.4s-15.2-8.2-24.2-12c-6.5-2.6-12.4-5.3-17.7-7.8a89.8 89.8 0 0 1-13.3-7.8 34.1 34.1 0 0 1-8.4-8.5c-2-3-3-6.3-3-10 0-3.5.9-6.6 2.7-9.4s4.2-5.1 7.5-7.1c3.2-2 7.2-3.5 11.9-4.6a69 69 0 0 1 15.6-1.7 99.3 99.3 0 0 1 53.2 15.7v-46.8c-7.6-3-15.9-5-25-6.5s-19.3-2.1-31-2.1c-11.9 0-23.2 1.3-33.8 3.8s-20 6.6-28 12a59.8 59.8 0 0 0-19.3 20.7c-4.7 8.4-7 18.5-7 30.1 0 15 4.3 27.7 13 38.2a98.2 98.2 0 0 0 39.1 26.8c6.9 2.8 13.3 5.5 19.3 8.3s11 5.5 15.4 8.4c4.3 3 7.7 6.1 10.2 9.5a19.4 19.4 0 0 1 1.4 20.8c-1.5 2.7-3.9 5.1-7 7.2s-7.2 3.6-12 4.7a71.5 71.5 0 0 1-16.6 1.8 95.1 95.1 0 0 1-61.9-22.9zm-84.2-123.3H297V243H118v41h64v183h50.8z"
        fill="#fff"
        fillRule="evenodd"
      />
    </svg>
  );
}

function FlipIconVertical() {
  return (
    <svg width="16" height="15" fill="none">
      <path
        fill="currentColor"
        fillRule="evenodd"
        d="M8.6208 4.4973a.9088.9088 0 0 1-1.2417 0l-2.617-2.4478c-.6022-.5632-.2037-1.5726.6208-1.5726h5.2342c.8244 0 1.2229 1.0094.6208 1.5726L8.6208 4.4973ZM5.2136 13.0581l2.6171-2.4478a.248.248 0 0 1 .3386 0l2.6171 2.4478c.1642.1535.0556.4289-.1693.4289H5.3829c-.2248 0-.3335-.2754-.1693-.4289Zm2.1656-2.9306a.909.909 0 0 1 1.2417 0l2.617 2.4478c.6022.5632.2036 1.5726-.6208 1.5726H5.3829c-.8244 0-1.2229-1.0094-.6208-1.5726l2.6171-2.4478ZM15.1288 7.4648a.4544.4544 0 0 1-.4544.4544h-.445a.4544.4544 0 0 1 0-.9089h.445c.251 0 .4544.2035.4544.4545Zm-2.2248 0a.4544.4544 0 0 1-.4544.4544h-.8899a.4545.4545 0 1 1 0-.9089h.8899c.251 0 .4544.2035.4544.4545Zm-2.6697 0a.4545.4545 0 0 1-.4545.4544H8.89a.4544.4544 0 1 1 0-.9089h.89c.2509 0 .4544.2035.4544.4545Zm-2.6698 0a.4544.4544 0 0 1-.4544.4544h-.89a.4544.4544 0 1 1 0-.9089h.89c.251 0 .4544.2035.4544.4545Zm-2.6698 0a.4544.4544 0 0 1-.4544.4544h-.89a.4544.4544 0 1 1 0-.9089h.89c.251 0 .4544.2035.4544.4545Zm-2.6697 0a.4544.4544 0 0 1-.4545.4544h-.445a.4544.4544 0 0 1 0-.9089h.445c.251 0 .4545.2035.4545.4545Z"
        clipRule="evenodd"
      />
    </svg>
  );
}

function FlipIconHorizontal() {
  return (
    <svg width="16" height="17" fill="none">
      <g fill="currentColor" fillRule="evenodd" clipRule="evenodd">
        <path d="M4.9972 7.8792a.9088.9088 0 0 1 0 1.2417l-2.4478 2.617c-.5631.6022-1.5726.2037-1.5726-.6208V5.8829c0-.8244 1.0095-1.223 1.5726-.6208l2.4478 2.6171ZM13.5581 11.2864l-2.4478-2.6171a.248.248 0 0 1 0-.3386l2.4478-2.6171c.1535-.1642.4289-.0556.4289.1693v5.2342c0 .2248-.2754.3335-.4289.1693Zm-2.9306-2.1656a.909.909 0 0 1 0-1.2417l2.4478-2.617c.5632-.6022 1.5726-.2036 1.5726.6208v5.2342c0 .8244-1.0094 1.2229-1.5726.6208l-2.4478-2.6171ZM7.9648 1.3712c.251 0 .4544.2034.4544.4544v.445a.4544.4544 0 0 1-.9088 0v-.445c0-.251.2034-.4544.4544-.4544Zm0 2.2248c.251 0 .4544.2034.4544.4544v.89a.4545.4545 0 1 1-.9088 0v-.89c0-.251.2034-.4544.4544-.4544Zm0 2.6697c.251 0 .4544.2035.4544.4545V7.61a.4544.4544 0 1 1-.9088 0v-.89c0-.2509.2034-.4544.4544-.4544Zm0 2.6698c.251 0 .4544.2035.4544.4544v.89a.4544.4544 0 0 1-.9088 0v-.89c0-.251.2034-.4544.4544-.4544Zm0 2.6698c.251 0 .4544.2034.4544.4544v.8899a.4544.4544 0 1 1-.9088 0v-.8899c0-.251.2034-.4544.4544-.4544Zm0 2.6697c.251 0 .4544.2035.4544.4545v.4449a.4544.4544 0 1 1-.9088 0v-.4449c0-.251.2034-.4545.4544-.4545Z" />
      </g>
    </svg>
  );
}

function ContentChildParent() {
  return (
    <svg width="17" height="16" viewBox="0 0 17 16" fill="none">
      <path
        d="M7.02297 6.52667L9.40281 8.90652C9.72509 9.204 9.72509 9.72459 9.40281 10.0221L7.02297 12.4019C6.52717 12.8977 5.68431 12.5507 5.68431 11.8317V7.07205C5.68431 6.37793 6.52717 6.03087 7.02297 6.52667ZM6.47759 11.8317L8.85743 9.4519L6.47759 7.07205V11.8317ZM11.2373 3.89893C12.1049 3.89893 12.8238 4.61784 12.8238 5.48549V13.4183C12.8238 14.3108 12.1049 15.0049 11.2373 15.0049H3.30446C2.41202 15.0049 1.7179 14.3108 1.7179 13.4183V5.48549C1.7179 4.61784 2.41202 3.89893 3.30446 3.89893H11.2373ZM12.0306 13.4183V5.48549C12.0306 5.06406 11.6587 4.69221 11.2373 4.69221H3.30446C2.85824 4.69221 2.51118 5.06406 2.51118 5.48549V13.4183C2.51118 13.8645 2.85824 14.2116 3.30446 14.2116H11.2373C11.6587 14.2116 12.0306 13.8645 12.0306 13.4183Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M15.6817 2.59047C15.6817 1.72282 14.9628 1.00391 14.0952 1.00391H6.16235C5.30149 1.00391 4.62517 1.67283 4.57837 2.49892H5.37454C5.42036 2.11663 5.74876 1.79719 6.16235 1.79719H14.0952C14.5166 1.79719 14.8884 2.16904 14.8884 2.59047V10.5233C14.8884 10.9252 14.5868 11.2466 14.219 11.3065V12.1051C15.0302 12.0428 15.6817 11.3729 15.6817 10.5233V2.59047Z"
        fill="currentColor"
      />
    </svg>
  );
}

function AnimationFillBackwards() {
  return (
    <svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M20.6448 15.5158C20.4099 15.7101 20.378 16.061 20.5752 16.2988C20.7724 16.5366 21.1205 16.5656 21.3583 16.3684C21.4598 16.2843 21.5555 16.1944 21.6512 16.0987C21.7469 16.003 21.8339 15.9044 21.9209 15.8058C22.1152 15.5709 22.0862 15.2171 21.8513 15.0228C21.6164 14.8285 21.2626 14.8575 21.0683 15.0924C20.9407 15.2432 20.7956 15.3882 20.6477 15.5129L20.6448 15.5158ZM22.3153 12.0937C22.0108 12.1198 21.7846 12.3924 21.8107 12.6969C21.8281 12.8941 21.831 13.0942 21.8107 13.2943C21.7846 13.5988 22.0079 13.8685 22.3153 13.8975C22.6198 13.9236 22.8895 13.7003 22.9185 13.3929C22.9446 13.129 22.9446 12.8622 22.9185 12.5983C22.8924 12.2938 22.6198 12.0675 22.3153 12.0937ZM18.2464 16.2611C17.9419 16.235 17.6722 16.4583 17.6432 16.7658C17.6171 17.0703 17.8404 17.34 18.1478 17.369C18.4117 17.3951 18.6786 17.3951 18.9425 17.369C19.247 17.3429 19.4732 17.0703 19.4471 16.7658C19.421 16.4612 19.1484 16.235 18.8439 16.2611C18.6466 16.2785 18.4436 16.2785 18.2464 16.2611ZM20.5781 9.68945C20.3809 9.92726 20.4128 10.2782 20.6477 10.4725C20.7231 10.5363 20.7956 10.603 20.8652 10.6726C20.9348 10.7422 21.0045 10.8176 21.0683 10.893C21.2655 11.1308 21.6135 11.1598 21.8513 10.9626C22.0891 10.7654 22.1181 10.4174 21.9209 10.1796C21.8368 10.0781 21.7469 9.98236 21.6512 9.88665C21.5555 9.79095 21.4569 9.70395 21.3583 9.61694C21.1234 9.42263 20.7695 9.45163 20.5752 9.68654L20.5781 9.68945ZM11.202 8.6773C11.4746 8.94991 11.7182 9.24573 11.93 9.55024C13.0552 9.31823 14.2733 9.63724 15.1462 10.5102C16.5267 11.8906 16.5238 14.1266 15.1462 15.5042C14.2878 16.3626 13.1016 16.6846 11.9938 16.4757C11.7791 16.7948 11.5326 17.0993 11.2513 17.3806C11.2368 17.3951 11.2223 17.4038 11.2078 17.4183C12.8174 17.9432 14.6561 17.5662 15.935 16.2872C17.7476 14.4747 17.7505 11.531 15.935 9.71555C14.6387 8.41919 12.7652 8.04797 11.1382 8.6077C11.1585 8.628 11.1817 8.6512 11.202 8.6715L11.202 8.6773ZM18.1507 8.6193C17.8462 8.6454 17.62 8.91801 17.6461 9.22252C17.6722 9.52704 17.9448 9.75325 18.2493 9.72715C18.4465 9.70975 18.6466 9.70685 18.8439 9.72425C19.1484 9.75035 19.4181 9.52704 19.4471 9.21962C19.4761 8.91221 19.2499 8.6454 18.9425 8.6164C18.6785 8.5903 18.4117 8.5903 18.1478 8.6164L18.1507 8.6193ZM10.187 16.322C12.017 14.4921 12.017 11.5223 10.187 9.69235C8.357 7.86237 5.38727 7.86237 3.55729 9.69235C1.72731 11.5223 1.72731 14.4921 3.55729 16.322C5.38727 18.152 8.357 18.152 10.187 16.322ZM4.34322 10.4783C5.74108 9.08042 8.00318 9.08042 9.40104 10.4783C10.7989 11.8761 10.7989 14.1382 9.40104 15.5361C8.00318 16.934 5.74108 16.934 4.34322 15.5361C2.94536 14.1382 2.94536 11.8761 4.34322 10.4783Z"
        fill="#A9A9A9"
      />
      <circle cx="4.5" cy="4.5" r="4.5" transform="matrix(-1 0 0 1 11.2427 8.5)" fill="#A9A9A9" />
    </svg>
  );
}

function AnimationFillForwards() {
  return (
    <svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M4.35516 15.5158C4.59007 15.7101 4.62197 16.061 4.42477 16.2988C4.22756 16.5366 3.87954 16.5656 3.64173 16.3684C3.54023 16.2843 3.44452 16.1944 3.34882 16.0987C3.25312 16.003 3.16611 15.9044 3.07911 15.8058C2.8848 15.5709 2.9138 15.2171 3.14871 15.0228C3.38362 14.8285 3.73744 14.8575 3.93175 15.0924C4.05935 15.2432 4.20436 15.3882 4.35226 15.5129L4.35516 15.5158ZM2.68469 12.0937C2.9892 12.1198 3.21541 12.3924 3.18931 12.6969C3.17191 12.8941 3.16901 13.0942 3.18931 13.2943C3.21541 13.5988 2.9921 13.8685 2.68469 13.8975C2.38018 13.9236 2.11046 13.7003 2.08146 13.3929C2.05536 13.129 2.05536 12.8622 2.08146 12.5983C2.10757 12.2938 2.38018 12.0675 2.68469 12.0937ZM6.75357 16.2611C7.05808 16.235 7.32779 16.4583 7.3568 16.7658C7.3829 17.0703 7.15959 17.34 6.85217 17.369C6.58826 17.3951 6.32145 17.3951 6.05754 17.369C5.75302 17.3429 5.52682 17.0703 5.55292 16.7658C5.57902 16.4612 5.85163 16.235 6.15614 16.2611C6.35335 16.2785 6.55636 16.2785 6.75357 16.2611ZM4.42187 9.68945C4.61908 9.92726 4.58717 10.2782 4.35226 10.4725C4.27686 10.5363 4.20436 10.603 4.13475 10.6726C4.06515 10.7422 3.99555 10.8176 3.93174 10.893C3.73454 11.1308 3.38652 11.1598 3.14871 10.9626C2.9109 10.7654 2.8819 10.4174 3.07911 10.1796C3.16321 10.0781 3.25312 9.98236 3.34882 9.88665C3.44452 9.79095 3.54313 9.70395 3.64173 9.61694C3.87664 9.42263 4.23046 9.45163 4.42477 9.68654L4.42187 9.68945ZM13.798 8.6773C13.5254 8.94991 13.2818 9.24573 13.07 9.55024C11.9448 9.31823 10.7267 9.63724 9.8538 10.5102C8.47334 11.8906 8.47624 14.1266 9.8538 15.5042C10.7122 16.3626 11.8984 16.6846 13.0062 16.4757C13.2209 16.7948 13.4674 17.0993 13.7487 17.3806C13.7632 17.3951 13.7777 17.4038 13.7922 17.4183C12.1826 17.9432 10.3439 17.5662 9.06497 16.2872C7.25239 14.4747 7.24949 11.531 9.06497 9.71555C10.3613 8.41919 12.2348 8.04797 13.8618 8.6077C13.8415 8.628 13.8183 8.6512 13.798 8.6715L13.798 8.6773ZM6.84927 8.6193C7.15379 8.6454 7.38 8.91801 7.3539 9.22252C7.32779 9.52704 7.05518 9.75325 6.75067 9.72715C6.55346 9.70975 6.35335 9.70685 6.15614 9.72425C5.85163 9.75035 5.58192 9.52704 5.55292 9.21962C5.52391 8.91221 5.75013 8.6454 6.05754 8.6164C6.32145 8.5903 6.58826 8.5903 6.85217 8.6164L6.84927 8.6193ZM14.813 16.322C12.983 14.4921 12.983 11.5223 14.813 9.69235C16.643 7.86237 19.6127 7.86237 21.4427 9.69235C23.2727 11.5223 23.2727 14.4921 21.4427 16.322C19.6127 18.152 16.643 18.152 14.813 16.322ZM20.6568 10.4783C19.2589 9.08042 16.9968 9.08042 15.599 10.4783C14.2011 11.8761 14.2011 14.1382 15.599 15.5361C16.9968 16.934 19.2589 16.934 20.6568 15.5361C22.0546 14.1382 22.0546 11.8761 20.6568 10.4783Z"
        fill="#A9A9A9"
      />
      <circle cx="18.2573" cy="13" r="4.5" fill="#A9A9A9" />
    </svg>
  );
}

function AnimationFillBoth() {
  return (
    <svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M4.35516 15.5158C4.59007 15.7101 4.62197 16.061 4.42477 16.2988C4.22756 16.5366 3.87954 16.5656 3.64173 16.3684C3.54023 16.2843 3.44452 16.1944 3.34882 16.0987C3.25312 16.003 3.16611 15.9044 3.07911 15.8058C2.8848 15.5709 2.9138 15.2171 3.14871 15.0228C3.38362 14.8285 3.73744 14.8575 3.93175 15.0924C4.05935 15.2432 4.20436 15.3882 4.35226 15.5129L4.35516 15.5158ZM2.68469 12.0937C2.9892 12.1198 3.21541 12.3924 3.18931 12.6969C3.17191 12.8941 3.16901 13.0942 3.18931 13.2943C3.21541 13.5988 2.9921 13.8685 2.68469 13.8975C2.38018 13.9236 2.11046 13.7003 2.08146 13.3929C2.05536 13.129 2.05536 12.8622 2.08146 12.5983C2.10757 12.2938 2.38018 12.0675 2.68469 12.0937ZM6.75357 16.2611C7.05808 16.235 7.32779 16.4583 7.3568 16.7658C7.3829 17.0703 7.15959 17.34 6.85217 17.369C6.58826 17.3951 6.32145 17.3951 6.05754 17.369C5.75302 17.3429 5.52682 17.0703 5.55292 16.7658C5.57902 16.4612 5.85163 16.235 6.15614 16.2611C6.35335 16.2785 6.55636 16.2785 6.75357 16.2611ZM4.42187 9.68945C4.61908 9.92726 4.58717 10.2782 4.35226 10.4725C4.27686 10.5363 4.20436 10.603 4.13475 10.6726C4.06515 10.7422 3.99555 10.8176 3.93174 10.893C3.73454 11.1308 3.38652 11.1598 3.14871 10.9626C2.9109 10.7654 2.8819 10.4174 3.07911 10.1796C3.16321 10.0781 3.25312 9.98236 3.34882 9.88665C3.44452 9.79095 3.54313 9.70395 3.64173 9.61694C3.87664 9.42263 4.23046 9.45163 4.42477 9.68654L4.42187 9.68945ZM13.798 8.6773C13.5254 8.94991 13.2818 9.24573 13.07 9.55024C11.9448 9.31823 10.7267 9.63724 9.8538 10.5102C8.47334 11.8906 8.47624 14.1266 9.8538 15.5042C10.7122 16.3626 11.8984 16.6846 13.0062 16.4757C13.2209 16.7948 13.4674 17.0993 13.7487 17.3806C13.7632 17.3951 13.7777 17.4038 13.7922 17.4183C12.1826 17.9432 10.3439 17.5662 9.06497 16.2872C7.25239 14.4747 7.24949 11.531 9.06497 9.71555C10.3613 8.41919 12.2348 8.04797 13.8618 8.6077C13.8415 8.628 13.8183 8.6512 13.798 8.6715L13.798 8.6773ZM6.84927 8.6193C7.15379 8.6454 7.38 8.91801 7.3539 9.22252C7.32779 9.52704 7.05518 9.75325 6.75067 9.72715C6.55346 9.70975 6.35335 9.70685 6.15614 9.72425C5.85163 9.75035 5.58192 9.52704 5.55292 9.21962C5.52391 8.91221 5.75013 8.6454 6.05754 8.6164C6.32145 8.5903 6.58826 8.5903 6.85217 8.6164L6.84927 8.6193ZM14.813 16.322C12.983 14.4921 12.983 11.5223 14.813 9.69235C16.643 7.86237 19.6127 7.86237 21.4427 9.69235C23.2727 11.5223 23.2727 14.4921 21.4427 16.322C19.6127 18.152 16.643 18.152 14.813 16.322ZM20.6568 10.4783C19.2589 9.08042 16.9968 9.08042 15.599 10.4783C14.2011 11.8761 14.2011 14.1382 15.599 15.5361C16.9968 16.934 19.2589 16.934 20.6568 15.5361C22.0546 14.1382 22.0546 11.8761 20.6568 10.4783Z"
        fill="#A9A9A9"
      />
      <circle cx="18.2573" cy="13" r="4.5" fill="#A9A9A9" />
      <path
        d="M6.5 8.5C6.99702 8.5 7.47485 8.58167 7.92188 8.73047C6.84886 9.83373 6.1875 11.3394 6.1875 13C6.1875 14.6603 6.84915 16.1653 7.92188 17.2686C7.47476 17.4174 6.99712 17.5 6.5 17.5C4.01472 17.5 2 15.4853 2 13C2 10.5147 4.01472 8.5 6.5 8.5Z"
        fill="#A9A9A9"
      />
    </svg>
  );
}

function AiGradientIcon() {
  return (
    <i
      className="fa-solid fa-sparkle"
      style={{
        background: 'linear-gradient(208deg, #B38FFF 31.76%, #2AEEE1 123.33%)',
        backgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      }}
    />
  );
}

function AiGradientPage() {
  return (
    <i
      className="fa-kit fa-light-file-lines-sparkle"
      style={{
        background: 'linear-gradient(208deg, #B38FFF 31.76%, #2AEEE1 123.33%)',
        backgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        lineHeight: 'inherit',
      }}
    />
  );
}

function AiGradientCloneEdit() {
  return (
    <i
      className="fa-light fa-clone-plus"
      style={{
        background: 'linear-gradient(208deg, #B38FFF 31.76%, #2AEEE1 123.33%)',
        backgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        lineHeight: 'inherit',
      }}
    />
  );
}

function AiGradientComponent() {
  return (
    <i
      className="fa-kit fa-light-cube-sparkle-tr"
      style={{
        background: 'linear-gradient(208deg, #B38FFF 31.76%, #2AEEE1 123.33%)',
        backgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        lineHeight: 'inherit',
      }}
    />
  );
}