@arkyn/components 1.3.109 → 1.3.111

Sign up to get free protection for your applications and to get access to all the features.
Files changed (76) hide show
  1. package/dist/bundle.js +12344 -4299
  2. package/dist/bundle.umd.cjs +43 -23
  3. package/dist/components/RichText/components/BlockButton/intex.d.ts +10 -0
  4. package/dist/components/RichText/components/BlockButton/intex.d.ts.map +1 -0
  5. package/dist/components/RichText/components/BlockButton/intex.js +18 -0
  6. package/dist/components/RichText/components/Element/index.d.ts +5 -0
  7. package/dist/components/RichText/components/Element/index.d.ts.map +1 -0
  8. package/dist/components/RichText/components/Element/index.js +22 -0
  9. package/dist/components/RichText/components/Leaf/index.d.ts +3 -0
  10. package/dist/components/RichText/components/Leaf/index.d.ts.map +1 -0
  11. package/dist/components/RichText/components/Leaf/index.js +14 -0
  12. package/dist/components/RichText/components/MarkButton/index.d.ts +10 -0
  13. package/dist/components/RichText/components/MarkButton/index.d.ts.map +1 -0
  14. package/dist/components/RichText/components/MarkButton/index.js +16 -0
  15. package/dist/components/RichText/components/Toolbar/index.d.ts +8 -0
  16. package/dist/components/RichText/components/Toolbar/index.d.ts.map +1 -0
  17. package/dist/components/RichText/components/Toolbar/index.js +6 -0
  18. package/dist/components/RichText/functions/serialize.d.ts +3 -0
  19. package/dist/components/RichText/functions/serialize.d.ts.map +1 -0
  20. package/dist/components/RichText/functions/serialize.js +48 -0
  21. package/dist/components/RichText/functions/toggleBlock.d.ts +5 -0
  22. package/dist/components/RichText/functions/toggleBlock.d.ts.map +1 -0
  23. package/dist/components/RichText/functions/toggleBlock.js +33 -0
  24. package/dist/components/RichText/functions/toggleMark.d.ts +5 -0
  25. package/dist/components/RichText/functions/toggleMark.d.ts.map +1 -0
  26. package/dist/components/RichText/functions/toggleMark.js +10 -0
  27. package/dist/components/RichText/helpers/isBlockActive.d.ts +5 -0
  28. package/dist/components/RichText/helpers/isBlockActive.d.ts.map +1 -0
  29. package/dist/components/RichText/helpers/isBlockActive.js +15 -0
  30. package/dist/components/RichText/helpers/isMarkActive.d.ts +5 -0
  31. package/dist/components/RichText/helpers/isMarkActive.d.ts.map +1 -0
  32. package/dist/components/RichText/helpers/isMarkActive.js +6 -0
  33. package/dist/components/RichText/index.d.ts +12 -0
  34. package/dist/components/RichText/index.d.ts.map +1 -0
  35. package/dist/components/RichText/index.js +46 -0
  36. package/dist/components/RichText/template/HOTKEYS.d.ts +7 -0
  37. package/dist/components/RichText/template/HOTKEYS.d.ts.map +1 -0
  38. package/dist/components/RichText/template/HOTKEYS.js +7 -0
  39. package/dist/components/RichText/template/INITIAL_VALUE.d.ts +4 -0
  40. package/dist/components/RichText/template/INITIAL_VALUE.d.ts.map +1 -0
  41. package/dist/components/RichText/template/INITIAL_VALUE.js +7 -0
  42. package/dist/components/RichText/template/LIST_TYPES.d.ts +3 -0
  43. package/dist/components/RichText/template/LIST_TYPES.d.ts.map +1 -0
  44. package/dist/components/RichText/template/LIST_TYPES.js +2 -0
  45. package/dist/components/RichText/template/TEXT_ALIGN_TYPES.d.ts +3 -0
  46. package/dist/components/RichText/template/TEXT_ALIGN_TYPES.d.ts.map +1 -0
  47. package/dist/components/RichText/template/TEXT_ALIGN_TYPES.js +2 -0
  48. package/dist/index.d.ts +3 -2
  49. package/dist/index.d.ts.map +1 -1
  50. package/dist/index.js +3 -2
  51. package/dist/style.css +1 -1
  52. package/package.json +5 -1
  53. package/src/components/Checkbox/styles.css +18 -6
  54. package/src/components/RichText/components/BlockButton/intex.tsx +41 -0
  55. package/src/components/RichText/components/BlockButton/styles.css +29 -0
  56. package/src/components/RichText/components/Element/index.tsx +57 -0
  57. package/src/components/RichText/components/Element/styles.css +23 -0
  58. package/src/components/RichText/components/Leaf/index.tsx +12 -0
  59. package/src/components/RichText/components/MarkButton/index.tsx +38 -0
  60. package/src/components/RichText/components/MarkButton/styles.css +41 -0
  61. package/src/components/RichText/components/Toolbar/index.tsx +12 -0
  62. package/src/components/RichText/components/Toolbar/styles.css +14 -0
  63. package/src/components/RichText/defineType.d.ts +38 -0
  64. package/src/components/RichText/functions/serialize.ts +54 -0
  65. package/src/components/RichText/functions/toggleBlock.ts +46 -0
  66. package/src/components/RichText/functions/toggleMark.ts +13 -0
  67. package/src/components/RichText/helpers/isBlockActive.ts +27 -0
  68. package/src/components/RichText/helpers/isMarkActive.ts +9 -0
  69. package/src/components/RichText/index.tsx +130 -0
  70. package/src/components/RichText/styles.css +25 -0
  71. package/src/components/RichText/template/HOTKEYS.ts +14 -0
  72. package/src/components/RichText/template/INITIAL_VALUE.ts +10 -0
  73. package/src/components/RichText/template/LIST_TYPES.ts +3 -0
  74. package/src/components/RichText/template/TEXT_ALIGN_TYPES.ts +3 -0
  75. package/src/index.ts +3 -2
  76. package/tsconfig.json +8 -0
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .arkynAlertContainer{display:flex;align-items:start;gap:16px;padding:16px;border:1px solid transparent;border-radius:var(--rounded-cards)}.arkynAlertContainer.nonExistsAlertTitle{align-items:center}.arkynAlertContainer.danger{background:rgba(var(--spotlight-danger),.1);border-color:rgba(var(--spotlight-danger),.4)}.arkynAlertContainer.success{background:rgba(var(--spotlight-success),.1);border-color:rgba(var(--spotlight-success),.4)}.arkynAlertContainer.info{background:rgba(var(--spotlight-info),.1);border-color:rgba(var(--spotlight-info),.4)}.arkynAlertContainer.warning{background:rgba(var(--spotlight-warning),.1);border-color:rgba(var(--spotlight-warning),.4)}.arkynAlertTitle{font-size:16px;font-weight:600;line-height:17px;text-align:left;color:var(--text-heading)}.arkynAlertContent{display:flex;flex-direction:column;gap:8px}.arkynAlertDescription{font-size:14px;font-weight:400;line-height:15px;text-align:left;color:var(--text-body)}.arkynAlertIcon{min-width:28px;min-height:28px;max-width:28px;max-height:28px}.arkynAlertIcon.danger{color:rgba(var(--spotlight-danger),1)}.arkynAlertIcon.success{color:rgba(var(--spotlight-success),1)}.arkynAlertIcon.info{color:rgba(var(--spotlight-info),1)}.arkynAlertIcon.warning{color:rgba(var(--spotlight-warning),1)}.arkynBadge{display:flex;align-items:center;justify-content:center;gap:4px;width:min-content;white-space:nowrap;border:1px solid transparent}.arkynBadge.solid{color:#fff}.arkynBadge.solid.primary{background-color:rgba(var(--spotlight-primary),1)}.arkynBadge.solid.danger{background-color:rgba(var(--spotlight-danger),1)}.arkynBadge.solid.success{background-color:rgba(var(--spotlight-success),1)}.arkynBadge.solid.warning{background-color:rgba(var(--spotlight-warning),1)}.arkynBadge.solid.info{background-color:rgba(var(--spotlight-info),1)}.arkynBadge.outline.primary{color:rgba(var(--spotlight-primary),1);border-color:rgba(var(--spotlight-primary),1)}.arkynBadge.outline.danger{color:rgba(var(--spotlight-danger),1);border-color:rgba(var(--spotlight-danger),1)}.arkynBadge.outline.success{color:rgba(var(--spotlight-success),1);border-color:rgba(var(--spotlight-success),1)}.arkynBadge.outline.warning{color:rgba(var(--spotlight-warning),1);border-color:rgba(var(--spotlight-warning),1)}.arkynBadge.outline.info{color:rgba(var(--spotlight-info),1);border-color:rgba(var(--spotlight-info),1)}.arkynBadge.ghost.primary{color:rgba(var(--spotlight-primary),1);background-color:rgba(var(--spotlight-primary),.2)}.arkynBadge.ghost.danger{color:rgba(var(--spotlight-danger),1);background-color:rgba(var(--spotlight-danger),.2)}.arkynBadge.ghost.success{color:rgba(var(--spotlight-success),1);background-color:rgba(var(--spotlight-success),.2)}.arkynBadge.ghost.warning{color:rgba(var(--spotlight-warning),1);background-color:rgba(var(--spotlight-warning),.2)}.arkynBadge.ghost.info{color:rgba(var(--spotlight-info),1);background-color:rgba(var(--spotlight-info),.2)}.arkynBadge.lg{font-weight:400;font-size:12px;line-height:12px;border-radius:calc(var(--rounded-inputs) * .6667);padding:0 16px;height:24px}.arkynBadge.md{font-weight:400;font-size:10px;line-height:10px;border-radius:calc(var(--rounded-inputs) * .6667);padding:0 12px;height:20px}.arkynCard{display:flex;padding:20px;width:100%;height:max-content;border-radius:var(--rounded-cards);background-color:var(--card)}.arkynDivider{display:block;flex:1;background-color:var(--border)}.arkynDivider.horizontal{width:100%;min-height:1px;max-height:1px}.arkynDivider.vertical{height:100%;min-width:1px;max-width:1px}.arkynGoogleMapPinnedEmpty{display:flex;align-items:center;justify-content:center;border:2px dashed var(--border);border-radius:var(--rounded-cards);background-color:rgba(var(--input-background),1)}.arkynGoogleMapPinnedEmpty>svg{height:64px;width:64px;color:var(--text-muted);stroke-width:1px}.arkynGoogleMapPinned{border-radius:var(--rounded-cards)}.arkynSkeleton{width:100%;height:100%;border-radius:6px;background:linear-gradient(to right,var(--skeleton) 4%,var(--skeleton-foreground) 25%,var(--skeleton) 36%);background-size:40rem 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-40rem 0}to{background-position:40rem 0}}.arkynTableBody>tr:nth-child(odd)>td{background-color:var(--card-foreground-primary)}.arkynTableBody>tr>td{padding-left:16px;height:64px;font-weight:400;font-size:14px;color:var(--text-body)}.arkynTableBody>tr>td:first-child{border-top-left-radius:var(--rounded-cards);border-bottom-left-radius:var(--rounded-cards)}.arkynTableBody>tr>td:last-child{border-top-right-radius:var(--rounded-cards);border-bottom-right-radius:var(--rounded-cards);padding-right:16px}.arkynTableBody>tr:nth-child(odd):hover>td{filter:brightness(.98)}.arkynTableBody>tr:nth-child(2n):hover>td{background-color:var(--card-foreground-primary);filter:brightness(.98)}html.dark .arkynTableBody>tr:nth-child(odd):hover>td{filter:brightness(1.2)}html.dark .arkynTableBody>tr:nth-child(2n):hover>td{background-color:var(--card-foreground-primary);filter:brightness(1.2)}.arkynTableBodyEmptyLine>td{background-color:var(--card-foreground-primary);height:64px}.arkynTableBodyEmptyLine>td>div{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font-weight:400;font-size:14px;color:var(--text-body)}.arkynTableCaption{margin-bottom:24px}.arkynTableCaptionContent{display:flex;align-items:center}.arkynTableCaptionContent>.rightSection{display:flex;align-items:center;justify-content:end;gap:16px;flex:2;padding-left:auto}.arkynTableContainer{display:flex;flex-direction:column;width:100%;height:max-content;overflow-y:hidden;overflow-x:auto}.arkynTableContainer table{border-collapse:separate;border-spacing:0}.arkynTableFooterContent{display:flex;align-items:center;justify-content:space-between;height:48px;padding-top:16px;border-top:1px solid var(--border)}.arkynTableFooter .spacingRow{height:24px}.arkynTableHeader th{text-align:left;background-color:var(--card-foreground-secondary);padding-left:16px;height:44px;color:var(--text-heading);font-weight:600;font-size:14px;white-space:nowrap}.arkynTableHeader th:first-child{border-top-left-radius:var(--rounded-cards);border-bottom-left-radius:var(--rounded-cards)}.arkynTableHeader th:last-child{border-top-right-radius:var(--rounded-cards);border-bottom-right-radius:var(--rounded-cards);padding-right:16px}.arkynTableHeader .spacingRow{height:12px}.arkynButton{background:transparent;border:1px solid transparent;outline:1px solid transparent;position:relative;transition:.15s all ease-out}.arkynButton:hover{cursor:pointer;filter:brightness(.95)}html.dark .arkynButton:hover{cursor:pointer;filter:brightness(1.2)}.arkynButton:disabled{cursor:not-allowed;opacity:.5}.arkynButton .arkynButtonContent{display:flex;align-items:center;justify-content:center;white-space:nowrap}.arkynButton.solid{color:#fff}.arkynButton.solid.primary{background-color:rgba(var(--spotlight-primary),1)}.arkynButton.solid.danger{background-color:rgba(var(--spotlight-danger),1)}.arkynButton.solid.success{background-color:rgba(var(--spotlight-success),1)}.arkynButton.solid.warning{background-color:rgba(var(--spotlight-warning),1)}.arkynButton.solid.info{background-color:rgba(var(--spotlight-info),1)}.arkynButton.outline{background-color:rgba(var(--input-background),1);border-color:var(--border)}.arkynButton.outline.primary{color:rgba(var(--spotlight-primary),1)}.arkynButton.outline.danger{color:rgba(var(--spotlight-danger),1)}.arkynButton.outline.success{color:rgba(var(--spotlight-success),1)}.arkynButton.outline.warning{color:rgba(var(--spotlight-warning),1)}.arkynButton.outline.info{color:rgba(var(--spotlight-info),1)}.arkynButton.ghost.primary{color:rgba(var(--spotlight-primary),1);background-color:rgba(var(--spotlight-primary),.2)}.arkynButton.ghost.danger{color:rgba(var(--spotlight-danger),1);background-color:rgba(var(--spotlight-danger),.2)}.arkynButton.ghost.success{color:rgba(var(--spotlight-success),1);background-color:rgba(var(--spotlight-success),.2)}.arkynButton.ghost.warning{color:rgba(var(--spotlight-warning),1);background-color:rgba(var(--spotlight-warning),.2)}.arkynButton.ghost.info{color:rgba(var(--spotlight-info),1);background-color:rgba(var(--spotlight-info),.2)}.arkynButton.invisible.primary{color:rgba(var(--spotlight-primary),1)}.arkynButton.invisible.danger{color:rgba(var(--spotlight-danger),1)}.arkynButton.invisible.success{color:rgba(var(--spotlight-success),1)}.arkynButton.invisible.warning{color:rgba(var(--spotlight-warning),1)}.arkynButton.invisible.info{color:rgba(var(--spotlight-info),1)}.arkynButton.lg{font-weight:600;font-size:14px;line-height:14px;border-radius:var(--rounded-inputs);padding:0 20px;height:44px}.arkynButton.lg .arkynButtonContent,.arkynButton.lg .arkynButtonSpinner{gap:16px}.arkynButton.md{font-weight:600;font-size:14px;line-height:14px;border-radius:var(--rounded-inputs);gap:16px;padding:0 16px;height:40px}.arkynButton.md .arkynButtonContent,.arkynButton.md .arkynButtonSpinner{gap:14px}.arkynButton.sm{font-weight:600;font-size:12px;line-height:12px;border-radius:var(--rounded-inputs);padding:0 16px;height:32px}.arkynButton.sm .arkynButtonContent,.arkynButton.sm .arkynButtonSpinner{gap:12px}.arkynButton.xs{font-weight:600;font-size:10px;line-height:10px;border-radius:calc(var(--rounded-inputs) * .6667);padding:0 16px;height:24px}.arkynButton.xs .arkynButtonContent,.arkynButton.xs .arkynButtonSpinner{gap:8px}.arkynButton .arkynButtonSpinner{display:flex;align-items:center;justify-content:center;white-space:nowrap;opacity:0}.arkynButton .arkynButtonSpinner>svg{animation:spin 2s linear infinite}.arkynButton.loadingTextFalse .arkynButtonSpinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.arkynButton.loadingTextTrue .arkynButtonSpinner{max-height:0px}.arkynButton.loadingTrue .arkynButtonContent{opacity:0;max-height:0px}.arkynButton.loadingTrue .arkynButtonSpinner{opacity:1;max-height:unset}.arkynFormController{display:flex;flex-direction:column;gap:6px}.arkynCheckbox{display:flex;align-items:center;justify-content:center;border:2px solid var(--border);background-color:rgba(var(--input-background),1)}.arkynCheckbox:hover{cursor:pointer}.arkynCheckbox>svg{display:none;stroke-width:3px}.arkynCheckbox.sm{height:16px;width:16px;border-radius:calc(var(--rounded-inputs) * .3333)}.arkynCheckbox.sm>svg{min-height:12px;min-width:12px}.arkynCheckbox.md{height:20px;width:20px;border-radius:calc(var(--rounded-inputs) * .6667)}.arkynCheckbox.md>svg{min-height:14px;min-width:14px}.arkynCheckbox.lg{height:24px;width:24px;border-radius:var(--rounded-inputs)}.arkynCheckbox.lg>svg{min-height:14px;min-width:14px}.arkynCheckbox.checkedTrue{background-color:rgb(var(--spotlight-primary),1);border-color:rgb(var(--spotlight-primary),1)}.arkynCheckbox.checkedTrue>svg{display:unset;color:#fff}.arkynCheckbox.errorTrue{border-color:rgb(var(--spotlight-danger),1)}.arkynFormError{font-size:12px;line-height:12px;font-weight:600;color:rgb(var(--spotlight-danger),1)}.arkynFormLabel{color:var(--text-body);font-size:14px;font-weight:600;line-height:19.07px}.arkynFormLabel.asteriskTrue:before{content:"* ";font-size:12px;font-weight:600;line-height:16.34px;text-align:left;color:rgb(var(--spotlight-danger),1)}.arkynIconButton{background:transparent;border:1px solid transparent;outline:1px solid transparent;position:relative;transition:.15s all ease-out}.arkynIconButton:hover{cursor:pointer;filter:brightness(.95)}html.dark .arkynIconButton:hover{cursor:pointer;filter:brightness(1.2)}.arkynIconButton:disabled{cursor:not-allowed;opacity:.5}.arkynIconButtonContent{display:flex;align-items:center;justify-content:center}.arkynIconButton.solid{color:#fff}.arkynIconButton.solid.primary{background-color:rgba(var(--spotlight-primary),1)}.arkynIconButton.solid.danger{background-color:rgba(var(--spotlight-danger),1)}.arkynIconButton.solid.success{background-color:rgba(var(--spotlight-success),1)}.arkynIconButton.solid.warning{background-color:rgba(var(--spotlight-warning),1)}.arkynIconButton.solid.info{background-color:rgba(var(--spotlight-info),1)}.arkynIconButton.outline{background-color:rgba(var(--input-background),1);border-color:var(--border)}.arkynIconButton.outline.primary{color:rgba(var(--spotlight-primary),1)}.arkynIconButton.outline.danger{color:rgba(var(--spotlight-danger),1)}.arkynIconButton.outline.success{color:rgba(var(--spotlight-success),1)}.arkynIconButton.outline.warning{color:rgba(var(--spotlight-warning),1)}.arkynIconButton.outline.info{color:rgba(var(--spotlight-info),1)}.arkynIconButton.ghost.primary{color:rgba(var(--spotlight-primary),1);background-color:rgba(var(--spotlight-primary),.2)}.arkynIconButton.ghost.danger{color:rgba(var(--spotlight-danger),1);background-color:rgba(var(--spotlight-danger),.2)}.arkynIconButton.ghost.success{color:rgba(var(--spotlight-success),1);background-color:rgba(var(--spotlight-success),.2)}.arkynIconButton.ghost.warning{color:rgba(var(--spotlight-warning),1);background-color:rgba(var(--spotlight-warning),.2)}.arkynIconButton.ghost.info{color:rgba(var(--spotlight-info),1);background-color:rgba(var(--spotlight-info),.2)}.arkynIconButton.invisible.primary{color:rgba(var(--spotlight-primary),1)}.arkynIconButton.invisible.danger{color:rgba(var(--spotlight-danger),1)}.arkynIconButton.invisible.success{color:rgba(var(--spotlight-success),1)}.arkynIconButton.invisible.warning{color:rgba(var(--spotlight-warning),1)}.arkynIconButton.invisible.info{color:rgba(var(--spotlight-info),1)}.arkynIconButton.lg{border-radius:var(--rounded-inputs);height:44px;width:44px}.arkynIconButton.md{border-radius:var(--rounded-inputs);height:40px;width:40px}.arkynIconButton.sm{border-radius:var(--rounded-inputs);height:32px;width:32px}.arkynIconButton.xs{border-radius:calc(var(--rounded-inputs) * .6667);height:24px;width:24px}.arkynIconButtonSpinner{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}.arkynIconButtonSpinner>svg{animation:spin 2s linear infinite}.arkynIconButton.loadingTrue .arkynIconButtonSpinner{opacity:1}.arkynIconButton.loadingTrue .arkynIconButtonContent{opacity:0}.arkyn_input{flex:1;position:relative;display:flex;align-items:center;padding:0 16px;gap:8px;border-radius:var(--rounded-inputs);border:1px solid transparent;outline:1px solid transparent}.arkyn_input:hover{cursor:text}.arkyn_input input{border:none;outline:none;background:transparent;width:100%}.arkyn_input input{color:var(--text-heading)}.arkyn_input .prefix,.arkyn_input .sufix{color:var(--text-body);background:var(--border);font-weight:400;display:flex;align-items:center;justify-content:center;position:absolute}.arkyn_input .prefix{left:0;top:0;bottom:0;border-radius:calc(var(--rounded-inputs) - 1px) 0 0 calc(var(--rounded-inputs) - 1px);border-right:1px solid var(--border)}.arkyn_input .sufix{right:0;top:0;bottom:0;border-radius:0 calc(var(--rounded-inputs) - 1px) calc(var(--rounded-inputs) - 1px) 0;border-left:1px solid var(--border)}.arkyn_input input::placeholder{color:var(--text-muted)}.arkyn_input svg{color:var(--text-muted)}.arkyn_input.errored svg{color:rgba(var(--spotlight-danger),1)}.arkyn_input:not(.opacity).focused svg{color:rgba(var(--spotlight-primary),1)}.arkyn_input.opacity{opacity:.5}.arkyn_input.solid{border-color:var(--border);background-color:rgba(var(--input-background),1)}.arkyn_input.solid.errored{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkyn_input:not(.opacity).solid.focused{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkyn_input.outline{border-color:var(--border)}.arkyn_input.outline.errored{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkyn_input:not(.opacity).outline.focused{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkyn_input.underline{border-radius:0;border-top:none;border-left:none;border-right:none;outline:none;border-color:var(--border)}.arkyn_input.underline .sufix,.arkyn_input.underline .prefix{display:none}.arkyn_input.underline:before{content:" ";position:absolute;height:1px;left:0;right:0;bottom:-2px;background:transparent}.arkyn_input.underline.errored{border-color:rgba(var(--spotlight-danger),1)}.arkyn_input.underline.errored:before{background:rgba(var(--spotlight-danger),1)}.arkyn_input:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary),1)}.arkyn_input:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary),1)}.arkyn_input.md input{min-height:40px;max-height:40px;font-size:14px;line-height:14px;font-weight:400}.arkyn_input.md input::placeholder{font-weight:400;font-size:14px;line-height:14px}.arkyn_input.md.hasPrefix{padding-left:60px}.arkyn_input.md.hasSufix{padding-right:60px}.arkyn_input.md .prefix,.arkyn_input.md .sufix{height:40px;width:44px;font-size:14px}.arkyn_input.lg input{min-height:44px;max-height:44px;line-height:16px;font-size:16px;font-weight:400}.arkyn_input.lg input::placeholder{font-weight:400;font-size:16px;line-height:16px}.arkyn_input.lg .prefix,.arkyn_input.lg .sufix{height:44px;width:48px;font-size:16px}.arkyn_input.lg.hasPrefix{padding-left:64px}.arkyn_input.lg.hasSufix{padding-right:64px}.arkyn_input .spinner{animation:spin 2s linear infinite}.arkynRadioGroup{display:flex;align-items:center;gap:32px}.arkynRadioBox{display:flex;align-items:center;gap:8px;color:var(--text-body);font-size:14px;line-height:19.07px}.arkynRadioBox>button{position:relative;background-color:rgba(var(--input-background),1);border:2px solid var(--border);border-radius:99999px}.arkynRadioBox>button:not(:disabled):hover{cursor:pointer}.arkynRadioBox.checkedTrue>button{border-color:rgba(var(--spotlight-primary),1)}.arkynRadioBox.errorTrue>button{border-color:rgba(var(--spotlight-danger),1)}.arkynRadioBox.checkedTrue>button:before{content:" ";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:99999px;background-color:rgba(var(--spotlight-primary),1)}.arkynRadioBox.sm>button{min-height:20px;min-width:20px;max-height:20px;max-width:20px}.arkynRadioBox.md>button{min-height:24px;min-width:24px;max-height:24px;max-width:24px}.arkynRadioBox.lg>button{min-height:24px;min-width:24px;max-height:24px;max-width:24px}.arkynRadioBox.checkedTrue.sm>button:before{min-height:10px;min-width:10px;max-height:10px;max-width:10px}.arkynRadioBox.checkedTrue.md>button:before{min-height:12px;min-width:12px;max-height:12px;max-width:12px}.arkynRadioBox.checkedTrue.lg>button:before{min-height:12px;min-width:12px;max-height:12px;max-width:12px}.arkynRadioBox.disabledTrue{opacity:.5}.arkynRadioBox.disabledTrue>button{cursor:not-allowed}.arkyn_select{flex:1;position:relative;display:flex;align-items:center;padding:0 16px;gap:8px;border-radius:6px;border:1px solid transparent;outline:1px solid transparent}.arkyn_select:hover{cursor:pointer}.arkyn_select input{border:none;outline:none;background:transparent;width:100%}.arkyn_select input{color:var(--text-heading)}.arkyn_select .prefix{color:var(--text-body);background:var(--border);font-weight:400;display:flex;align-items:center;justify-content:center;position:absolute}.arkyn_select .prefix{left:0;top:0;bottom:0;border-radius:5px 0 0 5px;border-right:1px solid var(--border)}.arkyn_select.placeholder_dark_true input::placeholder{color:var(--text-heading)}.arkyn_select.placeholder_dark_false input::placeholder{color:var(--text-muted)}.arkyn_select svg{color:var(--text-muted)}.arkyn_select.errored svg{color:rgba(var(--spotlight-danger),1)}.arkyn_select:not(.opacity).focused svg{color:rgba(var(--spotlight-primary),1)}.arkyn_select.opacity{opacity:.5}.arkyn_select .arkyn_select_arrow{transition:.15s all ease-in-out;color:var(--text-muted)}.arkyn_select:not(.opacity).focused .arkyn_select_arrow{transform:rotate(180deg)}.arkyn_select.solid{border-color:var(--border);background-color:rgba(var(--input-background),1)}.arkyn_select.solid.errored{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkyn_select:not(.opacity).solid.focused{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkyn_select.outline{border-color:var(--border)}.arkyn_select.outline.errored{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkyn_select:not(.opacity).outline.focused{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkyn_select.underline{border-radius:0;border-top:none;border-left:none;border-right:none;outline:none;border-color:var(--border)}.arkyn_select.underline .prefix{display:none}.arkyn_select.underline:before{content:" ";position:absolute;height:1px;left:0;right:0;bottom:-2px;background:transparent}.arkyn_select.underline.errored{border-color:rgba(var(--spotlight-danger),1)}.arkyn_select.underline.errored:before{background:rgba(var(--spotlight-danger),1)}.arkyn_select:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary),1)}.arkyn_select:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary),1)}.arkyn_select.md input{min-height:40px;max-height:40px;font-size:14px;line-height:14px;font-weight:400}.arkyn_select.md input::placeholder{font-weight:400;font-size:14px;line-height:14px}.arkyn_select.md.hasPrefix{padding-left:60px}.arkyn_select.md .prefix{height:40px;width:44px;font-size:14px}.arkyn_select.lg input{min-height:44px;max-height:44px;line-height:16px;font-size:16px;font-weight:400}.arkyn_select.lg input::placeholder{font-weight:400;font-size:16px;line-height:16px}.arkyn_select.lg .prefix{height:44px;width:48px;font-size:16px}.arkyn_select.lg.hasPrefix{padding-left:64px}.arkyn_select_content{position:absolute;z-index:6;top:calc(100% + 5px);left:-2px;right:-2px;border-radius:6px;list-style:none;display:flex;flex-direction:column;flex:1;overflow:hidden;height:max-content;border:1px solid var(--border);background-color:var(--card);max-height:300px;box-shadow:0 4px 8px #0000001a}.arkyn_select_content .arkyn_select_option{display:flex;align-items:center;justify-content:space-between;font-weight:400;line-height:21.79px;color:var(--text-body)}.arkyn_select.md .arkyn_select_content .arkyn_select_option{font-size:14px;padding:8px 16px}.arkyn_select.lg .arkyn_select_content .arkyn_select_option{font-size:16px;padding:8px 16px}.arkyn_select_content>p{font-weight:400;font-size:14px;padding:16px;text-align:center;line-height:21.79px;color:var(--text-body)}.arkyn_select_content .arkyn_select_option svg{height:20px;width:20px;color:rgba(var(--spotlight-primary),1);display:none}.arkyn_select_content .arkyn_select_option:hover{cursor:pointer;background-color:var(--card-foreground-primary)}.arkyn_select_content .arkyn_select_option.active{font-weight:600;color:var(--text-heading);background-color:var(--card-foreground-primary)}.arkyn_select_content .arkyn_select_option.active svg{display:unset}.arkyn_select .spinner{animation:spin 2s linear infinite}.arkyn_select_overlay{position:fixed;top:0;bottom:0;left:0;right:0;z-index:5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.arkynSwitch{position:relative;border:1px solid transparent;border-radius:999999px;transition:all .3s ease-in-out}.arkynSwitch:disabled{cursor:not-allowed;opacity:.5}.arkynSwitch:before{content:"";position:absolute;top:2px;bottom:2px;border-radius:50%;background-color:#fff;transition:all .2s;transform:translate(-2px)}.arkynSwitch.checkedTrue{background-color:rgba(var(--spotlight-primary),1)}.arkynSwitch.checkedFalse{background-color:var(--border)}.arkynSwitch.checkedTrue:before{transform:translate(3px)}.arkynSwitch.sm{min-width:32px;max-width:32px;min-height:16px;max-height:16px}.arkynSwitch.sm:before{min-height:10px;max-height:10px;min-width:10px;max-width:10px}.arkynSwitch.sm.checkedFalse:before{transform:translate(-13px)}.arkynSwitch.md{min-width:40px;max-width:40px;min-height:20px;max-height:20px}.arkynSwitch.md:before{min-height:14px;max-height:14px;min-width:14px;max-width:14px}.arkynSwitch.md.checkedFalse:before{transform:translate(-17px)}.arkynSwitch.lg{min-width:48px;max-width:48px;min-height:24px;max-height:24px}.arkynSwitch.lg:before{min-height:18px;max-height:18px;min-width:18px;max-width:18px}.arkynSwitch.lg.checkedFalse:before{transform:translate(-21px)}.arkynTextarea{flex:1;position:relative;display:flex;align-items:center;padding:16px;gap:8px;border-radius:var(--rounded-inputs);border:1px solid transparent;outline:1px solid transparent}.arkynTextarea:hover{cursor:text}.arkynTextarea textarea{border:none;outline:none;background:transparent;width:100%;resize:none}.arkynTextarea textarea{color:var(--text-heading)}.arkynTextarea textarea::placeholder{color:var(--text-muted)}.arkynTextarea.opacityTrue{opacity:.5}.arkynTextarea.solid{border-color:var(--border);background-color:rgba(var(--input-background),1)}.arkynTextarea.solid.errorTrue{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkynTextarea:not(.opacityTrue).solid.focusedTrue{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkynTextarea.outline{border-color:var(--border)}.arkynTextarea.outline.errorTrue{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkynTextarea:not(.opacityTrue).outline.focusedTrue{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkynTextarea.md textarea{font-size:14px;line-height:14px;font-weight:400}.arkynTextarea.md textarea::placeholder{font-weight:400;font-size:14px;line-height:14px}.arkynTextarea.lg textarea{line-height:16px;font-size:16px;font-weight:400}.arkynTextarea.lg textarea::placeholder{font-weight:400;font-size:16px;line-height:16px}.arkynBreadcrumbContainer{display:flex;align-items:center;justify-content:start;flex-wrap:wrap;gap:4px}.arkynBreadcrumbLink{-webkit-user-select:none;user-select:none;text-decoration:none;font-size:14px;color:var(--text-body)}.arkynBreadcrumbLink.active{color:var(--text-muted)}.arkynBreadcrumbLink.inactive:hover{cursor:pointer;color:var(--text-muted)}.arkynBreadcrumbLink:first-child>svg{display:none}.arkynBreadcrumbLink:not(:first-child){display:flex;align-items:center;gap:4px}.arkynBreadcrumbLink:not(:first-child)>svg{display:unset;color:var(--text-body)}.arkynPagination{display:flex;justify-content:center;align-items:center;gap:8px}.arkynPagination .arkynPaginationIconButton,.arkynPagination .arkynPaginationPageButton{background-color:var(--background-foreground);border:none;max-height:28px;max-width:28px;min-height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--rounded-inputs)}.arkynPagination .arkynPaginationIconButton:hover,.arkynPagination .arkynPaginationPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynPagination .arkynPaginationIconButton:hover,html.dark .arkynPagination .arkynPaginationPageButton:hover{filter:brightness(1.2)}.arkynPagination .arkynPaginationIconButton>svg{color:var(--text-muted);height:20px;width:20px}.arkynPagination .arkynPaginationPageButton{color:var(--text-body);font-size:14px;font-weight:600}.arkynPagination .arkynPaginationIconButton:disabled{filter:brightness(1);cursor:not-allowed;opacity:.5}.arkynPagination .arkynPaginationCurrent{background-color:rgba(var(--spotlight-primary),1);color:#fff;border:none;max-height:28px;max-width:28px;min-height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--rounded-inputs)}.arkynPagination .arkynPaginationSpread{background-color:transparent;color:var(--text-muted);border:none;max-height:28px;max-width:28px;min-height:28px;min-width:28px;display:flex;align-items:center;justify-content:center}.arkynPagination .arkynPaginationSpread>svg{color:var(--text-muted);height:16px;width:16px}.arkynTabContainer{position:relative;display:flex;align-items:center;justify-content:start;gap:4px;border-bottom:1px solid var(--border)}.arkynTabContainer .activeLine{position:absolute;height:1px;transition:all .3s ease-in-out;bottom:-1px;background-color:rgba(var(--spotlight-primary),1)}.arkynTabButton{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 16px;background-color:transparent;border:none;font-size:14px;font-weight:600;text-align:center;color:var(--text-muted);transition:all .3s ease-in-out}.arkynTabButton.showBorderBottom:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background-color:rgba(var(--spotlight-primary),1)}.arkynTabButton:hover{cursor:pointer}.arkynTabButton.activeTrue{color:rgba(var(--spotlight-primary),1)}.arkynDrawerContainer{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:9999}.arkynDrawerContainerOverlay{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;background:#00000080}.arkynDrawerContainerOverlay:hover{cursor:pointer}.arkynDrawerContainerContent{z-index:9999;position:fixed;top:0;bottom:0;width:max-content;background:var(--card)}.arkynDrawerContainer.left>.arkynDrawerContainerContent{left:0}.arkynDrawerContainer.right>.arkynDrawerContainerContent{right:0}.arkynDrawerHeader{display:flex;align-items:center;height:56px;padding:16px;font-size:16px;font-weight:600;line-height:20px;color:var(--text-heading);border-bottom:1px solid var(--border)}.arkynDrawerHeaderCloseButton{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;border-radius:4px;border:none;background:none;color:var(--text-body);background-color:var(--card);transition:all .15s ease-out}.arkynDrawerHeaderCloseButton:hover{cursor:pointer;filter:brightness(.9)}.arkynModalContainer{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:start;justify-content:center;padding:10vh 0;padding-bottom:2rem;overflow:auto;z-index:9999}.arkynModalContainerOverlay{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;background:#00000080}.arkynModalContainerOverlay:hover{cursor:pointer}.arkynModalContainerContent{z-index:9999;border-radius:var(--rounded-cards);background:var(--card)}.arkynModalFooter{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--border)}.arkynModalFooter.left{justify-content:flex-start}.arkynModalFooter.right{justify-content:flex-end}.arkynModalFooter.center{justify-content:center}.arkynModalFooter.between{justify-content:space-between}.arkynModalFooter.around{justify-content:space-around}.arkynModalHeader{display:flex;align-items:center;height:56px;padding:16px;font-size:16px;font-weight:600;line-height:20px;color:var(--text-heading);border-bottom:1px solid var(--border)}.arkynModalHeaderCloseButton{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;border-radius:4px;border:none;background:none;color:var(--text-body);background-color:var(--card);transition:all .15s ease-out}.arkynModalHeaderCloseButton:hover{cursor:pointer;filter:brightness(.9)}.arkynPopover{position:relative}.arkynPopover .arkynPopoverContent{display:none}.arkynPopover.visibleTrue .arkynPopoverContent{display:unset}.arkynPopoverContent{position:absolute;z-index:3;background-color:var(--card);border-radius:var(--rounded-cards);box-shadow:3px 3px 8px #0003}.arkynPopover.bottomLeft .arkynPopoverContent{bottom:-5px;right:0;transform:translateY(100%)}.arkynPopover.bottomRight .arkynPopoverContent{bottom:-5px;left:0;transform:translateY(100%)}.arkynPopover.topLeft .arkynPopoverContent{top:-5px;right:0;transform:translateY(-100%)}.arkynPopover.topRight .arkynPopoverContent{top:-5px;left:0;transform:translateY(-100%)}.arkynPopover.bottom .arkynPopoverContent{top:calc(100% + 5px);left:50%;transform:translate(-50%)}.arkynPopover.top .arkynPopoverContent{bottom:calc(100% + 5px);left:50%;transform:translate(-50%)}.arkynPopover.left .arkynPopoverContent{bottom:50%;right:calc(100% + 5px);transform:translateY(50%)}.arkynPopover.right .arkynPopoverContent{bottom:50%;left:calc(100% + 5px);transform:translateY(50%)}.arkynPopoverOverlay{position:fixed;z-index:1;top:0;left:0;bottom:0;right:0}.arkynToast{display:flex;align-items:start;width:300px;padding:16px;gap:12px;flex:1;border-radius:var(--rounded-cards)}.arkynToast>div{display:flex;align-items:center;justify-content:center;position:relative;border-radius:90px;overflow:hidden}.arkynToast>div>.bg{content:" ";left:0;right:0;top:0;bottom:0;position:absolute;z-index:1}.arkynToast>div>svg{z-index:2}.arkynToast>div circle{display:none}.arkynToast>p{display:flex;flex-direction:column;gap:8px;width:100%;overflow:hidden}.arkynToast>p>strong{width:100%;overflow:hidden;text-overflow:ellipsis}.arkynToast.info{background-color:rgba(var(--toast-info),1);color:#fff}.arkynToast.info>div>.bg{background-color:rgba(var(--toast-info),1);filter:brightness(.8)}.arkynToast.warning{background-color:rgba(var(--toast-warning),1);color:#fff}.arkynToast.warning>div>.bg{background-color:rgba(var(--toast-warning),1);filter:brightness(.8)}.arkynToast.danger{background-color:rgba(var(--toast-danger),1);color:#fff}.arkynToast.danger>div>.bg{background-color:rgba(var(--toast-danger),1);filter:brightness(.8)}.arkynToast.success{background-color:rgba(var(--toast-success),1);color:#fff}.arkynToast.success>div>.bg{background-color:rgba(var(--toast-success),1);filter:brightness(.8)}.arkynToast.md{min-width:260px}.arkynToast.md>div{min-height:20px;max-height:20px;min-width:20px;max-width:20px}.arkynToast.md>div>svg{min-height:26px;min-width:26px}.arkynToast.md>p>strong{font-weight:600;font-size:14px;line-height:16px}.arkynToast.md>p>span{font-weight:400;font-size:12px;line-height:14px}.arkynToast.lg{min-width:260px}.arkynToast.lg>div{min-height:24px;max-height:24px;min-width:24px;max-width:24px}.arkynToast.lg>div>svg{min-height:30px;min-width:30px}.arkynToast.lg>p>strong{font-weight:600;font-size:15px;line-height:17px}.arkynToast.lg>p>span{font-weight:400;font-size:14px;line-height:16px}.arkynTooltip{position:relative;display:block}.arkynTooltipText{visibility:hidden;opacity:0;position:absolute;transform:translate(-50%,-50%);white-space:nowrap;transition:.15s all ease-out;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:400;color:var(--tooltip-text);background-color:var(--tooltip-background);z-index:9999}.arkynTooltip.lg .arkynTooltipText{font-size:14px;line-height:14px;padding:8px 12px}.arkynTooltip.md .arkynTooltipText{font-size:12px;line-height:12px;padding:8px 12px}.arkynTooltip:hover .arkynTooltipText{opacity:1;visibility:visible}.arkynTooltip.top .arkynTooltipText{bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.arkynTooltip.top .arkynTooltipText:before{content:"";top:100%;border-style:solid;border-color:var(--tooltip-background) transparent;border-width:6px 6px 0 6px;bottom:20px;position:absolute;left:50%;transform:translate(-50%)}.arkynTooltip.left .arkynTooltipText{top:50%;right:calc(100% + 10px);transform:translateY(-50%)}.arkynTooltip.left .arkynTooltipText:before{content:"";top:50%;border-style:solid;border-color:transparent var(--tooltip-background);border-width:6px 0 6px 6px;left:100%;position:absolute;transform:translateY(-50%)}.arkynTooltip.right .arkynTooltipText{top:50%;left:calc(100% + 10px);transform:translateY(-50%)}.arkynTooltip.right .arkynTooltipText:before{content:"";border-style:solid;border-color:transparent var(--tooltip-background);border-width:6px 6px 6px 0;top:50%;left:0;transform:translate(-100%,-50%);position:absolute}.arkynTooltip.bottom .arkynTooltipText{top:calc(100% + 10px);left:50%;transform:translate(-50%)}.arkynTooltip.bottom .arkynTooltipText:before{content:"";border-style:solid;border-color:var(--tooltip-background) transparent;border-width:0 6px 6px 6px;top:0;left:50%;transform:translate(-50%,-100%);position:absolute}
1
+ .arkynAlertContainer{display:flex;align-items:start;gap:16px;padding:16px;border:1px solid transparent;border-radius:var(--rounded-cards)}.arkynAlertContainer.nonExistsAlertTitle{align-items:center}.arkynAlertContainer.danger{background:rgba(var(--spotlight-danger),.1);border-color:rgba(var(--spotlight-danger),.4)}.arkynAlertContainer.success{background:rgba(var(--spotlight-success),.1);border-color:rgba(var(--spotlight-success),.4)}.arkynAlertContainer.info{background:rgba(var(--spotlight-info),.1);border-color:rgba(var(--spotlight-info),.4)}.arkynAlertContainer.warning{background:rgba(var(--spotlight-warning),.1);border-color:rgba(var(--spotlight-warning),.4)}.arkynAlertTitle{font-size:16px;font-weight:600;line-height:17px;text-align:left;color:var(--text-heading)}.arkynAlertContent{display:flex;flex-direction:column;gap:8px}.arkynAlertDescription{font-size:14px;font-weight:400;line-height:15px;text-align:left;color:var(--text-body)}.arkynAlertIcon{min-width:28px;min-height:28px;max-width:28px;max-height:28px}.arkynAlertIcon.danger{color:rgba(var(--spotlight-danger),1)}.arkynAlertIcon.success{color:rgba(var(--spotlight-success),1)}.arkynAlertIcon.info{color:rgba(var(--spotlight-info),1)}.arkynAlertIcon.warning{color:rgba(var(--spotlight-warning),1)}.arkynBadge{display:flex;align-items:center;justify-content:center;gap:4px;width:min-content;white-space:nowrap;border:1px solid transparent}.arkynBadge.solid{color:#fff}.arkynBadge.solid.primary{background-color:rgba(var(--spotlight-primary),1)}.arkynBadge.solid.danger{background-color:rgba(var(--spotlight-danger),1)}.arkynBadge.solid.success{background-color:rgba(var(--spotlight-success),1)}.arkynBadge.solid.warning{background-color:rgba(var(--spotlight-warning),1)}.arkynBadge.solid.info{background-color:rgba(var(--spotlight-info),1)}.arkynBadge.outline.primary{color:rgba(var(--spotlight-primary),1);border-color:rgba(var(--spotlight-primary),1)}.arkynBadge.outline.danger{color:rgba(var(--spotlight-danger),1);border-color:rgba(var(--spotlight-danger),1)}.arkynBadge.outline.success{color:rgba(var(--spotlight-success),1);border-color:rgba(var(--spotlight-success),1)}.arkynBadge.outline.warning{color:rgba(var(--spotlight-warning),1);border-color:rgba(var(--spotlight-warning),1)}.arkynBadge.outline.info{color:rgba(var(--spotlight-info),1);border-color:rgba(var(--spotlight-info),1)}.arkynBadge.ghost.primary{color:rgba(var(--spotlight-primary),1);background-color:rgba(var(--spotlight-primary),.2)}.arkynBadge.ghost.danger{color:rgba(var(--spotlight-danger),1);background-color:rgba(var(--spotlight-danger),.2)}.arkynBadge.ghost.success{color:rgba(var(--spotlight-success),1);background-color:rgba(var(--spotlight-success),.2)}.arkynBadge.ghost.warning{color:rgba(var(--spotlight-warning),1);background-color:rgba(var(--spotlight-warning),.2)}.arkynBadge.ghost.info{color:rgba(var(--spotlight-info),1);background-color:rgba(var(--spotlight-info),.2)}.arkynBadge.lg{font-weight:400;font-size:12px;line-height:12px;border-radius:calc(var(--rounded-inputs) * .6667);padding:0 16px;height:24px}.arkynBadge.md{font-weight:400;font-size:10px;line-height:10px;border-radius:calc(var(--rounded-inputs) * .6667);padding:0 12px;height:20px}.arkynCard{display:flex;padding:20px;width:100%;height:max-content;border-radius:var(--rounded-cards);background-color:var(--card)}.arkynDivider{display:block;flex:1;background-color:var(--border)}.arkynDivider.horizontal{width:100%;min-height:1px;max-height:1px}.arkynDivider.vertical{height:100%;min-width:1px;max-width:1px}.arkynGoogleMapPinnedEmpty{display:flex;align-items:center;justify-content:center;border:2px dashed var(--border);border-radius:var(--rounded-cards);background-color:rgba(var(--input-background),1)}.arkynGoogleMapPinnedEmpty>svg{height:64px;width:64px;color:var(--text-muted);stroke-width:1px}.arkynGoogleMapPinned{border-radius:var(--rounded-cards)}.arkynSkeleton{width:100%;height:100%;border-radius:6px;background:linear-gradient(to right,var(--skeleton) 4%,var(--skeleton-foreground) 25%,var(--skeleton) 36%);background-size:40rem 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-40rem 0}to{background-position:40rem 0}}.arkynTableBody>tr:nth-child(odd)>td{background-color:var(--card-foreground-primary)}.arkynTableBody>tr>td{padding-left:16px;height:64px;font-weight:400;font-size:14px;color:var(--text-body)}.arkynTableBody>tr>td:first-child{border-top-left-radius:var(--rounded-cards);border-bottom-left-radius:var(--rounded-cards)}.arkynTableBody>tr>td:last-child{border-top-right-radius:var(--rounded-cards);border-bottom-right-radius:var(--rounded-cards);padding-right:16px}.arkynTableBody>tr:nth-child(odd):hover>td{filter:brightness(.98)}.arkynTableBody>tr:nth-child(2n):hover>td{background-color:var(--card-foreground-primary);filter:brightness(.98)}html.dark .arkynTableBody>tr:nth-child(odd):hover>td{filter:brightness(1.2)}html.dark .arkynTableBody>tr:nth-child(2n):hover>td{background-color:var(--card-foreground-primary);filter:brightness(1.2)}.arkynTableBodyEmptyLine>td{background-color:var(--card-foreground-primary);height:64px}.arkynTableBodyEmptyLine>td>div{display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font-weight:400;font-size:14px;color:var(--text-body)}.arkynTableCaption{margin-bottom:24px}.arkynTableCaptionContent{display:flex;align-items:center}.arkynTableCaptionContent>.rightSection{display:flex;align-items:center;justify-content:end;gap:16px;flex:2;padding-left:auto}.arkynTableContainer{display:flex;flex-direction:column;width:100%;height:max-content;overflow-y:hidden;overflow-x:auto}.arkynTableContainer table{border-collapse:separate;border-spacing:0}.arkynTableFooterContent{display:flex;align-items:center;justify-content:space-between;height:48px;padding-top:16px;border-top:1px solid var(--border)}.arkynTableFooter .spacingRow{height:24px}.arkynTableHeader th{text-align:left;background-color:var(--card-foreground-secondary);padding-left:16px;height:44px;color:var(--text-heading);font-weight:600;font-size:14px;white-space:nowrap}.arkynTableHeader th:first-child{border-top-left-radius:var(--rounded-cards);border-bottom-left-radius:var(--rounded-cards)}.arkynTableHeader th:last-child{border-top-right-radius:var(--rounded-cards);border-bottom-right-radius:var(--rounded-cards);padding-right:16px}.arkynTableHeader .spacingRow{height:12px}.arkynButton{background:transparent;border:1px solid transparent;outline:1px solid transparent;position:relative;transition:.15s all ease-out}.arkynButton:hover{cursor:pointer;filter:brightness(.95)}html.dark .arkynButton:hover{cursor:pointer;filter:brightness(1.2)}.arkynButton:disabled{cursor:not-allowed;opacity:.5}.arkynButton .arkynButtonContent{display:flex;align-items:center;justify-content:center;white-space:nowrap}.arkynButton.solid{color:#fff}.arkynButton.solid.primary{background-color:rgba(var(--spotlight-primary),1)}.arkynButton.solid.danger{background-color:rgba(var(--spotlight-danger),1)}.arkynButton.solid.success{background-color:rgba(var(--spotlight-success),1)}.arkynButton.solid.warning{background-color:rgba(var(--spotlight-warning),1)}.arkynButton.solid.info{background-color:rgba(var(--spotlight-info),1)}.arkynButton.outline{background-color:rgba(var(--input-background),1);border-color:var(--border)}.arkynButton.outline.primary{color:rgba(var(--spotlight-primary),1)}.arkynButton.outline.danger{color:rgba(var(--spotlight-danger),1)}.arkynButton.outline.success{color:rgba(var(--spotlight-success),1)}.arkynButton.outline.warning{color:rgba(var(--spotlight-warning),1)}.arkynButton.outline.info{color:rgba(var(--spotlight-info),1)}.arkynButton.ghost.primary{color:rgba(var(--spotlight-primary),1);background-color:rgba(var(--spotlight-primary),.2)}.arkynButton.ghost.danger{color:rgba(var(--spotlight-danger),1);background-color:rgba(var(--spotlight-danger),.2)}.arkynButton.ghost.success{color:rgba(var(--spotlight-success),1);background-color:rgba(var(--spotlight-success),.2)}.arkynButton.ghost.warning{color:rgba(var(--spotlight-warning),1);background-color:rgba(var(--spotlight-warning),.2)}.arkynButton.ghost.info{color:rgba(var(--spotlight-info),1);background-color:rgba(var(--spotlight-info),.2)}.arkynButton.invisible.primary{color:rgba(var(--spotlight-primary),1)}.arkynButton.invisible.danger{color:rgba(var(--spotlight-danger),1)}.arkynButton.invisible.success{color:rgba(var(--spotlight-success),1)}.arkynButton.invisible.warning{color:rgba(var(--spotlight-warning),1)}.arkynButton.invisible.info{color:rgba(var(--spotlight-info),1)}.arkynButton.lg{font-weight:600;font-size:14px;line-height:14px;border-radius:var(--rounded-inputs);padding:0 20px;height:44px}.arkynButton.lg .arkynButtonContent,.arkynButton.lg .arkynButtonSpinner{gap:16px}.arkynButton.md{font-weight:600;font-size:14px;line-height:14px;border-radius:var(--rounded-inputs);gap:16px;padding:0 16px;height:40px}.arkynButton.md .arkynButtonContent,.arkynButton.md .arkynButtonSpinner{gap:14px}.arkynButton.sm{font-weight:600;font-size:12px;line-height:12px;border-radius:var(--rounded-inputs);padding:0 16px;height:32px}.arkynButton.sm .arkynButtonContent,.arkynButton.sm .arkynButtonSpinner{gap:12px}.arkynButton.xs{font-weight:600;font-size:10px;line-height:10px;border-radius:calc(var(--rounded-inputs) * .6667);padding:0 16px;height:24px}.arkynButton.xs .arkynButtonContent,.arkynButton.xs .arkynButtonSpinner{gap:8px}.arkynButton .arkynButtonSpinner{display:flex;align-items:center;justify-content:center;white-space:nowrap;opacity:0}.arkynButton .arkynButtonSpinner>svg{animation:spin 2s linear infinite}.arkynButton.loadingTextFalse .arkynButtonSpinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.arkynButton.loadingTextTrue .arkynButtonSpinner{max-height:0px}.arkynButton.loadingTrue .arkynButtonContent{opacity:0;max-height:0px}.arkynButton.loadingTrue .arkynButtonSpinner{opacity:1;max-height:unset}.arkynFormController{display:flex;flex-direction:column;gap:6px}.arkynCheckbox{display:flex;align-items:center;justify-content:center;border:2px solid var(--border);background-color:rgba(var(--input-background),1)}.arkynCheckbox:hover{cursor:pointer}.arkynCheckbox>svg{display:none;stroke-width:3px}.arkynCheckbox.sm{min-height:16px;min-width:16px;max-height:16px;max-width:16px;border-radius:calc(var(--rounded-inputs) * .3333)}.arkynCheckbox.sm>svg{min-height:12px;min-width:12px;max-height:12px;max-width:12px}.arkynCheckbox.md{min-height:20px;min-width:20px;max-height:20px;max-width:20px;border-radius:calc(var(--rounded-inputs) * .6667)}.arkynCheckbox.md>svg{min-height:14px;min-width:14px;max-height:14px;max-width:14px}.arkynCheckbox.lg{min-height:24px;min-width:24px;max-height:24px;max-width:24px;border-radius:var(--rounded-inputs)}.arkynCheckbox.lg>svg{min-height:14px;min-width:14px;max-height:14px;max-width:14px}.arkynCheckbox.checkedTrue{background-color:rgb(var(--spotlight-primary),1);border-color:rgb(var(--spotlight-primary),1)}.arkynCheckbox.checkedTrue>svg{display:unset;color:#fff}.arkynCheckbox.errorTrue{border-color:rgb(var(--spotlight-danger),1)}.arkynFormError{font-size:12px;line-height:12px;font-weight:600;color:rgb(var(--spotlight-danger),1)}.arkynFormLabel{color:var(--text-body);font-size:14px;font-weight:600;line-height:19.07px}.arkynFormLabel.asteriskTrue:before{content:"* ";font-size:12px;font-weight:600;line-height:16.34px;text-align:left;color:rgb(var(--spotlight-danger),1)}.arkyn_input{flex:1;position:relative;display:flex;align-items:center;padding:0 16px;gap:8px;border-radius:var(--rounded-inputs);border:1px solid transparent;outline:1px solid transparent}.arkyn_input:hover{cursor:text}.arkyn_input input{border:none;outline:none;background:transparent;width:100%}.arkyn_input input{color:var(--text-heading)}.arkyn_input .prefix,.arkyn_input .sufix{color:var(--text-body);background:var(--border);font-weight:400;display:flex;align-items:center;justify-content:center;position:absolute}.arkyn_input .prefix{left:0;top:0;bottom:0;border-radius:calc(var(--rounded-inputs) - 1px) 0 0 calc(var(--rounded-inputs) - 1px);border-right:1px solid var(--border)}.arkyn_input .sufix{right:0;top:0;bottom:0;border-radius:0 calc(var(--rounded-inputs) - 1px) calc(var(--rounded-inputs) - 1px) 0;border-left:1px solid var(--border)}.arkyn_input input::placeholder{color:var(--text-muted)}.arkyn_input svg{color:var(--text-muted)}.arkyn_input.errored svg{color:rgba(var(--spotlight-danger),1)}.arkyn_input:not(.opacity).focused svg{color:rgba(var(--spotlight-primary),1)}.arkyn_input.opacity{opacity:.5}.arkyn_input.solid{border-color:var(--border);background-color:rgba(var(--input-background),1)}.arkyn_input.solid.errored{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkyn_input:not(.opacity).solid.focused{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkyn_input.outline{border-color:var(--border)}.arkyn_input.outline.errored{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkyn_input:not(.opacity).outline.focused{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkyn_input.underline{border-radius:0;border-top:none;border-left:none;border-right:none;outline:none;border-color:var(--border)}.arkyn_input.underline .sufix,.arkyn_input.underline .prefix{display:none}.arkyn_input.underline:before{content:" ";position:absolute;height:1px;left:0;right:0;bottom:-2px;background:transparent}.arkyn_input.underline.errored{border-color:rgba(var(--spotlight-danger),1)}.arkyn_input.underline.errored:before{background:rgba(var(--spotlight-danger),1)}.arkyn_input:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary),1)}.arkyn_input:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary),1)}.arkyn_input.md input{min-height:40px;max-height:40px;font-size:14px;line-height:14px;font-weight:400}.arkyn_input.md input::placeholder{font-weight:400;font-size:14px;line-height:14px}.arkyn_input.md.hasPrefix{padding-left:60px}.arkyn_input.md.hasSufix{padding-right:60px}.arkyn_input.md .prefix,.arkyn_input.md .sufix{height:40px;width:44px;font-size:14px}.arkyn_input.lg input{min-height:44px;max-height:44px;line-height:16px;font-size:16px;font-weight:400}.arkyn_input.lg input::placeholder{font-weight:400;font-size:16px;line-height:16px}.arkyn_input.lg .prefix,.arkyn_input.lg .sufix{height:44px;width:48px;font-size:16px}.arkyn_input.lg.hasPrefix{padding-left:64px}.arkyn_input.lg.hasSufix{padding-right:64px}.arkyn_input .spinner{animation:spin 2s linear infinite}.arkynIconButton{background:transparent;border:1px solid transparent;outline:1px solid transparent;position:relative;transition:.15s all ease-out}.arkynIconButton:hover{cursor:pointer;filter:brightness(.95)}html.dark .arkynIconButton:hover{cursor:pointer;filter:brightness(1.2)}.arkynIconButton:disabled{cursor:not-allowed;opacity:.5}.arkynIconButtonContent{display:flex;align-items:center;justify-content:center}.arkynIconButton.solid{color:#fff}.arkynIconButton.solid.primary{background-color:rgba(var(--spotlight-primary),1)}.arkynIconButton.solid.danger{background-color:rgba(var(--spotlight-danger),1)}.arkynIconButton.solid.success{background-color:rgba(var(--spotlight-success),1)}.arkynIconButton.solid.warning{background-color:rgba(var(--spotlight-warning),1)}.arkynIconButton.solid.info{background-color:rgba(var(--spotlight-info),1)}.arkynIconButton.outline{background-color:rgba(var(--input-background),1);border-color:var(--border)}.arkynIconButton.outline.primary{color:rgba(var(--spotlight-primary),1)}.arkynIconButton.outline.danger{color:rgba(var(--spotlight-danger),1)}.arkynIconButton.outline.success{color:rgba(var(--spotlight-success),1)}.arkynIconButton.outline.warning{color:rgba(var(--spotlight-warning),1)}.arkynIconButton.outline.info{color:rgba(var(--spotlight-info),1)}.arkynIconButton.ghost.primary{color:rgba(var(--spotlight-primary),1);background-color:rgba(var(--spotlight-primary),.2)}.arkynIconButton.ghost.danger{color:rgba(var(--spotlight-danger),1);background-color:rgba(var(--spotlight-danger),.2)}.arkynIconButton.ghost.success{color:rgba(var(--spotlight-success),1);background-color:rgba(var(--spotlight-success),.2)}.arkynIconButton.ghost.warning{color:rgba(var(--spotlight-warning),1);background-color:rgba(var(--spotlight-warning),.2)}.arkynIconButton.ghost.info{color:rgba(var(--spotlight-info),1);background-color:rgba(var(--spotlight-info),.2)}.arkynIconButton.invisible.primary{color:rgba(var(--spotlight-primary),1)}.arkynIconButton.invisible.danger{color:rgba(var(--spotlight-danger),1)}.arkynIconButton.invisible.success{color:rgba(var(--spotlight-success),1)}.arkynIconButton.invisible.warning{color:rgba(var(--spotlight-warning),1)}.arkynIconButton.invisible.info{color:rgba(var(--spotlight-info),1)}.arkynIconButton.lg{border-radius:var(--rounded-inputs);height:44px;width:44px}.arkynIconButton.md{border-radius:var(--rounded-inputs);height:40px;width:40px}.arkynIconButton.sm{border-radius:var(--rounded-inputs);height:32px;width:32px}.arkynIconButton.xs{border-radius:calc(var(--rounded-inputs) * .6667);height:24px;width:24px}.arkynIconButtonSpinner{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}.arkynIconButtonSpinner>svg{animation:spin 2s linear infinite}.arkynIconButton.loadingTrue .arkynIconButtonSpinner{opacity:1}.arkynIconButton.loadingTrue .arkynIconButtonContent{opacity:0}.arkynRadioGroup{display:flex;align-items:center;gap:32px}.arkynRadioBox{display:flex;align-items:center;gap:8px;color:var(--text-body);font-size:14px;line-height:19.07px}.arkynRadioBox>button{position:relative;background-color:rgba(var(--input-background),1);border:2px solid var(--border);border-radius:99999px}.arkynRadioBox>button:not(:disabled):hover{cursor:pointer}.arkynRadioBox.checkedTrue>button{border-color:rgba(var(--spotlight-primary),1)}.arkynRadioBox.errorTrue>button{border-color:rgba(var(--spotlight-danger),1)}.arkynRadioBox.checkedTrue>button:before{content:" ";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:99999px;background-color:rgba(var(--spotlight-primary),1)}.arkynRadioBox.sm>button{min-height:20px;min-width:20px;max-height:20px;max-width:20px}.arkynRadioBox.md>button{min-height:24px;min-width:24px;max-height:24px;max-width:24px}.arkynRadioBox.lg>button{min-height:24px;min-width:24px;max-height:24px;max-width:24px}.arkynRadioBox.checkedTrue.sm>button:before{min-height:10px;min-width:10px;max-height:10px;max-width:10px}.arkynRadioBox.checkedTrue.md>button:before{min-height:12px;min-width:12px;max-height:12px;max-width:12px}.arkynRadioBox.checkedTrue.lg>button:before{min-height:12px;min-width:12px;max-height:12px;max-width:12px}.arkynRadioBox.disabledTrue{opacity:.5}.arkynRadioBox.disabledTrue>button{cursor:not-allowed}.arkynRichTextBlockButton{display:flex;align-items:center;justify-content:center;height:36px;width:36px;background-color:var(--card-foreground-secondary);border:none;border-radius:4px}.arkynRichTextBlockButton svg{height:20px;width:20px;color:var(--text-heading)}.arkynRichTextBlockButton:hover{cursor:pointer;filter:brightness(.98)}html.dark .arkynRichTextBlockButton:hover{cursor:pointer;filter:brightness(.9)}.arkynElementBlockquote,.arkynElementBulletList,.arkynElementListItem,.arkynElementNumberedList,.arkynElementParagraph{color:var(--text-body);font-size:14px;font-weight:400}.arkynElementHeadingOne,.arkynElementHeadingTwo{color:var(--text-heading);font-weight:600}.arkynElementHeadingOne{font-size:18px}.arkynElementHeadingTwo{font-size:16px}.arkynRichTextMarkButton{display:flex;align-items:center;justify-content:center;height:36px;width:36px;background-color:var(--card-foreground-secondary);border:none;border-radius:4px}.arkynRichTextMarkButton svg{height:20px;width:20px;color:var(--text-heading)}.arkynRichTextMarkButton:hover{cursor:pointer;filter:brightness(.97)}html.dark .arkynRichTextMarkButton:hover{cursor:pointer;filter:brightness(.9)}.arkynRichTextMarkButton.activeTrue{filter:brightness(.97)}html.dark .arkynRichTextMarkButton.activeTrue{filter:brightness(.9)}.arkynRichTextMarkButton.activeTrue svg{color:rgba(var(--spotlight-primary),1)}.arkynRichTextToolbar{display:flex;align-items:center;flex-wrap:wrap;border-radius:var(--rounded-inputs) var(--rounded-inputs) 0 0;padding:12px 16px;column-gap:24px;row-gap:12px;background-color:var(--card-foreground-secondary);border-bottom:1px solid var(--border)}.arkynRichText{display:flex;flex-direction:column;background-color:rgba(var(--input-background),1);border:1px solid var(--border);border-radius:var(--rounded-inputs);outline:1px solid transparent}.arkynRichText.errorTrue{outline-color:rgba(var(--spotlight-danger),1);border-color:rgba(var(--spotlight-danger),1)}.arkynRichText.focusTrue{outline-color:rgba(var(--spotlight-primary),1);border-color:rgba(var(--spotlight-primary),1)}.arkynRichText .editorContainer{padding:16px;outline:none;min-height:300px}.arkyn_select{flex:1;position:relative;display:flex;align-items:center;padding:0 16px;gap:8px;border-radius:6px;border:1px solid transparent;outline:1px solid transparent}.arkyn_select:hover{cursor:pointer}.arkyn_select input{border:none;outline:none;background:transparent;width:100%}.arkyn_select input{color:var(--text-heading)}.arkyn_select .prefix{color:var(--text-body);background:var(--border);font-weight:400;display:flex;align-items:center;justify-content:center;position:absolute}.arkyn_select .prefix{left:0;top:0;bottom:0;border-radius:5px 0 0 5px;border-right:1px solid var(--border)}.arkyn_select.placeholder_dark_true input::placeholder{color:var(--text-heading)}.arkyn_select.placeholder_dark_false input::placeholder{color:var(--text-muted)}.arkyn_select svg{color:var(--text-muted)}.arkyn_select.errored svg{color:rgba(var(--spotlight-danger),1)}.arkyn_select:not(.opacity).focused svg{color:rgba(var(--spotlight-primary),1)}.arkyn_select.opacity{opacity:.5}.arkyn_select .arkyn_select_arrow{transition:.15s all ease-in-out;color:var(--text-muted)}.arkyn_select:not(.opacity).focused .arkyn_select_arrow{transform:rotate(180deg)}.arkyn_select.solid{border-color:var(--border);background-color:rgba(var(--input-background),1)}.arkyn_select.solid.errored{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkyn_select:not(.opacity).solid.focused{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkyn_select.outline{border-color:var(--border)}.arkyn_select.outline.errored{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkyn_select:not(.opacity).outline.focused{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkyn_select.underline{border-radius:0;border-top:none;border-left:none;border-right:none;outline:none;border-color:var(--border)}.arkyn_select.underline .prefix{display:none}.arkyn_select.underline:before{content:" ";position:absolute;height:1px;left:0;right:0;bottom:-2px;background:transparent}.arkyn_select.underline.errored{border-color:rgba(var(--spotlight-danger),1)}.arkyn_select.underline.errored:before{background:rgba(var(--spotlight-danger),1)}.arkyn_select:not(.opacity).underline.focused{border-color:rgba(var(--spotlight-primary),1)}.arkyn_select:not(.opacity).underline.focused:before{background:rgba(var(--spotlight-primary),1)}.arkyn_select.md input{min-height:40px;max-height:40px;font-size:14px;line-height:14px;font-weight:400}.arkyn_select.md input::placeholder{font-weight:400;font-size:14px;line-height:14px}.arkyn_select.md.hasPrefix{padding-left:60px}.arkyn_select.md .prefix{height:40px;width:44px;font-size:14px}.arkyn_select.lg input{min-height:44px;max-height:44px;line-height:16px;font-size:16px;font-weight:400}.arkyn_select.lg input::placeholder{font-weight:400;font-size:16px;line-height:16px}.arkyn_select.lg .prefix{height:44px;width:48px;font-size:16px}.arkyn_select.lg.hasPrefix{padding-left:64px}.arkyn_select_content{position:absolute;z-index:6;top:calc(100% + 5px);left:-2px;right:-2px;border-radius:6px;list-style:none;display:flex;flex-direction:column;flex:1;overflow:hidden;height:max-content;border:1px solid var(--border);background-color:var(--card);max-height:300px;box-shadow:0 4px 8px #0000001a}.arkyn_select_content .arkyn_select_option{display:flex;align-items:center;justify-content:space-between;font-weight:400;line-height:21.79px;color:var(--text-body)}.arkyn_select.md .arkyn_select_content .arkyn_select_option{font-size:14px;padding:8px 16px}.arkyn_select.lg .arkyn_select_content .arkyn_select_option{font-size:16px;padding:8px 16px}.arkyn_select_content>p{font-weight:400;font-size:14px;padding:16px;text-align:center;line-height:21.79px;color:var(--text-body)}.arkyn_select_content .arkyn_select_option svg{height:20px;width:20px;color:rgba(var(--spotlight-primary),1);display:none}.arkyn_select_content .arkyn_select_option:hover{cursor:pointer;background-color:var(--card-foreground-primary)}.arkyn_select_content .arkyn_select_option.active{font-weight:600;color:var(--text-heading);background-color:var(--card-foreground-primary)}.arkyn_select_content .arkyn_select_option.active svg{display:unset}.arkyn_select .spinner{animation:spin 2s linear infinite}.arkyn_select_overlay{position:fixed;top:0;bottom:0;left:0;right:0;z-index:5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.arkynSwitch{position:relative;border:1px solid transparent;border-radius:999999px;transition:all .3s ease-in-out}.arkynSwitch:disabled{cursor:not-allowed;opacity:.5}.arkynSwitch:before{content:"";position:absolute;top:2px;bottom:2px;border-radius:50%;background-color:#fff;transition:all .2s;transform:translate(-2px)}.arkynSwitch.checkedTrue{background-color:rgba(var(--spotlight-primary),1)}.arkynSwitch.checkedFalse{background-color:var(--border)}.arkynSwitch.checkedTrue:before{transform:translate(3px)}.arkynSwitch.sm{min-width:32px;max-width:32px;min-height:16px;max-height:16px}.arkynSwitch.sm:before{min-height:10px;max-height:10px;min-width:10px;max-width:10px}.arkynSwitch.sm.checkedFalse:before{transform:translate(-13px)}.arkynSwitch.md{min-width:40px;max-width:40px;min-height:20px;max-height:20px}.arkynSwitch.md:before{min-height:14px;max-height:14px;min-width:14px;max-width:14px}.arkynSwitch.md.checkedFalse:before{transform:translate(-17px)}.arkynSwitch.lg{min-width:48px;max-width:48px;min-height:24px;max-height:24px}.arkynSwitch.lg:before{min-height:18px;max-height:18px;min-width:18px;max-width:18px}.arkynSwitch.lg.checkedFalse:before{transform:translate(-21px)}.arkynTextarea{flex:1;position:relative;display:flex;align-items:center;padding:16px;gap:8px;border-radius:var(--rounded-inputs);border:1px solid transparent;outline:1px solid transparent}.arkynTextarea:hover{cursor:text}.arkynTextarea textarea{border:none;outline:none;background:transparent;width:100%;resize:none}.arkynTextarea textarea{color:var(--text-heading)}.arkynTextarea textarea::placeholder{color:var(--text-muted)}.arkynTextarea.opacityTrue{opacity:.5}.arkynTextarea.solid{border-color:var(--border);background-color:rgba(var(--input-background),1)}.arkynTextarea.solid.errorTrue{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkynTextarea:not(.opacityTrue).solid.focusedTrue{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkynTextarea.outline{border-color:var(--border)}.arkynTextarea.outline.errorTrue{border-color:rgba(var(--spotlight-danger),1);outline-color:rgba(var(--spotlight-danger),1)}.arkynTextarea:not(.opacityTrue).outline.focusedTrue{border-color:rgba(var(--spotlight-primary),1);outline-color:rgba(var(--spotlight-primary),1)}.arkynTextarea.md textarea{font-size:14px;line-height:14px;font-weight:400}.arkynTextarea.md textarea::placeholder{font-weight:400;font-size:14px;line-height:14px}.arkynTextarea.lg textarea{line-height:16px;font-size:16px;font-weight:400}.arkynTextarea.lg textarea::placeholder{font-weight:400;font-size:16px;line-height:16px}.arkynBreadcrumbContainer{display:flex;align-items:center;justify-content:start;flex-wrap:wrap;gap:4px}.arkynBreadcrumbLink{-webkit-user-select:none;user-select:none;text-decoration:none;font-size:14px;color:var(--text-body)}.arkynBreadcrumbLink.active{color:var(--text-muted)}.arkynBreadcrumbLink.inactive:hover{cursor:pointer;color:var(--text-muted)}.arkynBreadcrumbLink:first-child>svg{display:none}.arkynBreadcrumbLink:not(:first-child){display:flex;align-items:center;gap:4px}.arkynBreadcrumbLink:not(:first-child)>svg{display:unset;color:var(--text-body)}.arkynPagination{display:flex;justify-content:center;align-items:center;gap:8px}.arkynPagination .arkynPaginationIconButton,.arkynPagination .arkynPaginationPageButton{background-color:var(--background-foreground);border:none;max-height:28px;max-width:28px;min-height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--rounded-inputs)}.arkynPagination .arkynPaginationIconButton:hover,.arkynPagination .arkynPaginationPageButton:hover{filter:brightness(.98);cursor:pointer}html.dark .arkynPagination .arkynPaginationIconButton:hover,html.dark .arkynPagination .arkynPaginationPageButton:hover{filter:brightness(1.2)}.arkynPagination .arkynPaginationIconButton>svg{color:var(--text-muted);height:20px;width:20px}.arkynPagination .arkynPaginationPageButton{color:var(--text-body);font-size:14px;font-weight:600}.arkynPagination .arkynPaginationIconButton:disabled{filter:brightness(1);cursor:not-allowed;opacity:.5}.arkynPagination .arkynPaginationCurrent{background-color:rgba(var(--spotlight-primary),1);color:#fff;border:none;max-height:28px;max-width:28px;min-height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--rounded-inputs)}.arkynPagination .arkynPaginationSpread{background-color:transparent;color:var(--text-muted);border:none;max-height:28px;max-width:28px;min-height:28px;min-width:28px;display:flex;align-items:center;justify-content:center}.arkynPagination .arkynPaginationSpread>svg{color:var(--text-muted);height:16px;width:16px}.arkynTabContainer{position:relative;display:flex;align-items:center;justify-content:start;gap:4px;border-bottom:1px solid var(--border)}.arkynTabContainer .activeLine{position:absolute;height:1px;transition:all .3s ease-in-out;bottom:-1px;background-color:rgba(var(--spotlight-primary),1)}.arkynTabButton{position:relative;display:flex;align-items:center;justify-content:center;padding:8px 16px;background-color:transparent;border:none;font-size:14px;font-weight:600;text-align:center;color:var(--text-muted);transition:all .3s ease-in-out}.arkynTabButton.showBorderBottom:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background-color:rgba(var(--spotlight-primary),1)}.arkynTabButton:hover{cursor:pointer}.arkynTabButton.activeTrue{color:rgba(var(--spotlight-primary),1)}.arkynDrawerContainer{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:9999}.arkynDrawerContainerOverlay{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;background:#00000080}.arkynDrawerContainerOverlay:hover{cursor:pointer}.arkynDrawerContainerContent{z-index:9999;position:fixed;top:0;bottom:0;width:max-content;background:var(--card)}.arkynDrawerContainer.left>.arkynDrawerContainerContent{left:0}.arkynDrawerContainer.right>.arkynDrawerContainerContent{right:0}.arkynDrawerHeader{display:flex;align-items:center;height:56px;padding:16px;font-size:16px;font-weight:600;line-height:20px;color:var(--text-heading);border-bottom:1px solid var(--border)}.arkynDrawerHeaderCloseButton{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;border-radius:4px;border:none;background:none;color:var(--text-body);background-color:var(--card);transition:all .15s ease-out}.arkynDrawerHeaderCloseButton:hover{cursor:pointer;filter:brightness(.9)}.arkynModalContainer{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:start;justify-content:center;padding:10vh 0;padding-bottom:2rem;overflow:auto;z-index:9999}.arkynModalContainerOverlay{position:fixed;z-index:9997;top:0;left:0;right:0;bottom:0;background:#00000080}.arkynModalContainerOverlay:hover{cursor:pointer}.arkynModalContainerContent{z-index:9999;border-radius:var(--rounded-cards);background:var(--card)}.arkynModalFooter{display:flex;align-items:center;gap:16px;padding:16px;border-top:1px solid var(--border)}.arkynModalFooter.left{justify-content:flex-start}.arkynModalFooter.right{justify-content:flex-end}.arkynModalFooter.center{justify-content:center}.arkynModalFooter.between{justify-content:space-between}.arkynModalFooter.around{justify-content:space-around}.arkynModalHeader{display:flex;align-items:center;height:56px;padding:16px;font-size:16px;font-weight:600;line-height:20px;color:var(--text-heading);border-bottom:1px solid var(--border)}.arkynModalHeaderCloseButton{display:flex;align-items:center;justify-content:center;margin-left:auto;padding:2px;border-radius:4px;border:none;background:none;color:var(--text-body);background-color:var(--card);transition:all .15s ease-out}.arkynModalHeaderCloseButton:hover{cursor:pointer;filter:brightness(.9)}.arkynPopover{position:relative}.arkynPopover .arkynPopoverContent{display:none}.arkynPopover.visibleTrue .arkynPopoverContent{display:unset}.arkynPopoverContent{position:absolute;z-index:3;background-color:var(--card);border-radius:var(--rounded-cards);box-shadow:3px 3px 8px #0003}.arkynPopover.bottomLeft .arkynPopoverContent{bottom:-5px;right:0;transform:translateY(100%)}.arkynPopover.bottomRight .arkynPopoverContent{bottom:-5px;left:0;transform:translateY(100%)}.arkynPopover.topLeft .arkynPopoverContent{top:-5px;right:0;transform:translateY(-100%)}.arkynPopover.topRight .arkynPopoverContent{top:-5px;left:0;transform:translateY(-100%)}.arkynPopover.bottom .arkynPopoverContent{top:calc(100% + 5px);left:50%;transform:translate(-50%)}.arkynPopover.top .arkynPopoverContent{bottom:calc(100% + 5px);left:50%;transform:translate(-50%)}.arkynPopover.left .arkynPopoverContent{bottom:50%;right:calc(100% + 5px);transform:translateY(50%)}.arkynPopover.right .arkynPopoverContent{bottom:50%;left:calc(100% + 5px);transform:translateY(50%)}.arkynPopoverOverlay{position:fixed;z-index:1;top:0;left:0;bottom:0;right:0}.arkynToast{display:flex;align-items:start;width:300px;padding:16px;gap:12px;flex:1;border-radius:var(--rounded-cards)}.arkynToast>div{display:flex;align-items:center;justify-content:center;position:relative;border-radius:90px;overflow:hidden}.arkynToast>div>.bg{content:" ";left:0;right:0;top:0;bottom:0;position:absolute;z-index:1}.arkynToast>div>svg{z-index:2}.arkynToast>div circle{display:none}.arkynToast>p{display:flex;flex-direction:column;gap:8px;width:100%;overflow:hidden}.arkynToast>p>strong{width:100%;overflow:hidden;text-overflow:ellipsis}.arkynToast.info{background-color:rgba(var(--toast-info),1);color:#fff}.arkynToast.info>div>.bg{background-color:rgba(var(--toast-info),1);filter:brightness(.8)}.arkynToast.warning{background-color:rgba(var(--toast-warning),1);color:#fff}.arkynToast.warning>div>.bg{background-color:rgba(var(--toast-warning),1);filter:brightness(.8)}.arkynToast.danger{background-color:rgba(var(--toast-danger),1);color:#fff}.arkynToast.danger>div>.bg{background-color:rgba(var(--toast-danger),1);filter:brightness(.8)}.arkynToast.success{background-color:rgba(var(--toast-success),1);color:#fff}.arkynToast.success>div>.bg{background-color:rgba(var(--toast-success),1);filter:brightness(.8)}.arkynToast.md{min-width:260px}.arkynToast.md>div{min-height:20px;max-height:20px;min-width:20px;max-width:20px}.arkynToast.md>div>svg{min-height:26px;min-width:26px}.arkynToast.md>p>strong{font-weight:600;font-size:14px;line-height:16px}.arkynToast.md>p>span{font-weight:400;font-size:12px;line-height:14px}.arkynToast.lg{min-width:260px}.arkynToast.lg>div{min-height:24px;max-height:24px;min-width:24px;max-width:24px}.arkynToast.lg>div>svg{min-height:30px;min-width:30px}.arkynToast.lg>p>strong{font-weight:600;font-size:15px;line-height:17px}.arkynToast.lg>p>span{font-weight:400;font-size:14px;line-height:16px}.arkynTooltip{position:relative;display:block}.arkynTooltipText{visibility:hidden;opacity:0;position:absolute;transform:translate(-50%,-50%);white-space:nowrap;transition:.15s all ease-out;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:400;color:var(--tooltip-text);background-color:var(--tooltip-background);z-index:9999}.arkynTooltip.lg .arkynTooltipText{font-size:14px;line-height:14px;padding:8px 12px}.arkynTooltip.md .arkynTooltipText{font-size:12px;line-height:12px;padding:8px 12px}.arkynTooltip:hover .arkynTooltipText{opacity:1;visibility:visible}.arkynTooltip.top .arkynTooltipText{bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.arkynTooltip.top .arkynTooltipText:before{content:"";top:100%;border-style:solid;border-color:var(--tooltip-background) transparent;border-width:6px 6px 0 6px;bottom:20px;position:absolute;left:50%;transform:translate(-50%)}.arkynTooltip.left .arkynTooltipText{top:50%;right:calc(100% + 10px);transform:translateY(-50%)}.arkynTooltip.left .arkynTooltipText:before{content:"";top:50%;border-style:solid;border-color:transparent var(--tooltip-background);border-width:6px 0 6px 6px;left:100%;position:absolute;transform:translateY(-50%)}.arkynTooltip.right .arkynTooltipText{top:50%;left:calc(100% + 10px);transform:translateY(-50%)}.arkynTooltip.right .arkynTooltipText:before{content:"";border-style:solid;border-color:transparent var(--tooltip-background);border-width:6px 6px 6px 0;top:50%;left:0;transform:translate(-100%,-50%);position:absolute}.arkynTooltip.bottom .arkynTooltipText{top:calc(100% + 10px);left:50%;transform:translate(-50%)}.arkynTooltip.bottom .arkynTooltipText:before{content:"";border-style:solid;border-color:var(--tooltip-background) transparent;border-width:0 6px 6px 6px;top:0;left:50%;transform:translate(-50%,-100%);position:absolute}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arkyn/components",
3
- "version": "1.3.109",
3
+ "version": "1.3.111",
4
4
  "main": "./dist/bundle.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "author": "Lucas Gonçalves",
@@ -14,8 +14,12 @@
14
14
  "@react-google-maps/api": "^2.19.3",
15
15
  "@react-input/mask": "^1.2.5",
16
16
  "framer-motion": "^11.3.21",
17
+ "is-hotkey": "^0.2.0",
17
18
  "lucide-react": "^0.424.0",
18
19
  "react-scroll": "^1.9.0",
20
+ "slate": "^0.103.0",
21
+ "slate-history": "^0.109.0",
22
+ "slate-react": "^0.110.1",
19
23
  "sonner": "^1.5.0"
20
24
  },
21
25
  "peerDependencies": {
@@ -18,36 +18,48 @@
18
18
 
19
19
  /* SIZE */
20
20
  .arkynCheckbox.sm {
21
- height: 16px;
22
- width: 16px;
21
+ min-height: 16px;
22
+ min-width: 16px;
23
+ max-height: 16px;
24
+ max-width: 16px;
23
25
  border-radius: calc(var(--rounded-inputs) * 0.3333);
24
26
  }
25
27
 
26
28
  .arkynCheckbox.sm > svg {
27
29
  min-height: 12px;
28
30
  min-width: 12px;
31
+ max-height: 12px;
32
+ max-width: 12px;
29
33
  }
30
34
 
31
35
  .arkynCheckbox.md {
32
- height: 20px;
33
- width: 20px;
36
+ min-height: 20px;
37
+ min-width: 20px;
38
+ max-height: 20px;
39
+ max-width: 20px;
34
40
  border-radius: calc(var(--rounded-inputs) * 0.6667);
35
41
  }
36
42
 
37
43
  .arkynCheckbox.md > svg {
38
44
  min-height: 14px;
39
45
  min-width: 14px;
46
+ max-height: 14px;
47
+ max-width: 14px;
40
48
  }
41
49
 
42
50
  .arkynCheckbox.lg {
43
- height: 24px;
44
- width: 24px;
51
+ min-height: 24px;
52
+ min-width: 24px;
53
+ max-height: 24px;
54
+ max-width: 24px;
45
55
  border-radius: var(--rounded-inputs);
46
56
  }
47
57
 
48
58
  .arkynCheckbox.lg > svg {
49
59
  min-height: 14px;
50
60
  min-width: 14px;
61
+ max-height: 14px;
62
+ max-width: 14px;
51
63
  }
52
64
 
53
65
  /* CHECKED */
@@ -0,0 +1,41 @@
1
+ import { LucideIcon } from "lucide-react";
2
+ import { MouseEvent } from "react";
3
+ import { useSlate } from "slate-react";
4
+
5
+ import { AlignFormatType, ElementFormatType } from "../../defineType";
6
+ import { toggleBlock } from "../../functions/toggleBlock";
7
+ import { isBlockActive } from "../../helpers/isBlockActive";
8
+ import { TEXT_ALIGN_TYPES } from "../../template/TEXT_ALIGN_TYPES";
9
+
10
+ import "./styles.css";
11
+
12
+ type BlockButtonProps = {
13
+ format: ElementFormatType | AlignFormatType;
14
+ icon: LucideIcon;
15
+ };
16
+
17
+ function BlockButton({ format, icon: Icon }: BlockButtonProps) {
18
+ const editor = useSlate();
19
+
20
+ const blockType = TEXT_ALIGN_TYPES.includes(format) ? "align" : "type";
21
+ const isActive = isBlockActive(editor, format, blockType);
22
+
23
+ const activeClass = isActive ? "activeTrue" : "activeFalse";
24
+
25
+ function handleMouseDown(event: MouseEvent<HTMLButtonElement>) {
26
+ event.preventDefault();
27
+ toggleBlock(editor, format);
28
+ }
29
+
30
+ return (
31
+ <button
32
+ type="button"
33
+ className={"arkynRichTextBlockButton " + activeClass}
34
+ onMouseDown={handleMouseDown}
35
+ >
36
+ <Icon />
37
+ </button>
38
+ );
39
+ }
40
+
41
+ export { BlockButton };
@@ -0,0 +1,29 @@
1
+ .arkynRichTextBlockButton {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+
6
+ height: 36px;
7
+ width: 36px;
8
+
9
+ background-color: var(--card-foreground-secondary);
10
+ border: none;
11
+ border-radius: 4px;
12
+ }
13
+
14
+ .arkynRichTextBlockButton svg {
15
+ height: 20px;
16
+ width: 20px;
17
+
18
+ color: var(--text-heading);
19
+ }
20
+
21
+ .arkynRichTextBlockButton:hover {
22
+ cursor: pointer;
23
+ filter: brightness(0.98);
24
+ }
25
+
26
+ html.dark .arkynRichTextBlockButton:hover {
27
+ cursor: pointer;
28
+ filter: brightness(0.9);
29
+ }
@@ -0,0 +1,57 @@
1
+ import { RenderElementProps } from "slate-react";
2
+ import "./styles.css";
3
+
4
+ function Element({ attributes, children, element }: RenderElementProps) {
5
+ const style = { textAlign: element.align };
6
+
7
+ switch (element.type) {
8
+ case "blockQuote":
9
+ return (
10
+ <blockquote
11
+ className="arkynElementBlockquote"
12
+ style={style}
13
+ {...attributes}
14
+ >
15
+ {children}
16
+ </blockquote>
17
+ );
18
+ case "bulletedList":
19
+ return (
20
+ <ul className="arkynElementBulletList" style={style} {...attributes}>
21
+ {children}
22
+ </ul>
23
+ );
24
+ case "headingOne":
25
+ return (
26
+ <h1 className="arkynElementHeadingOne" style={style} {...attributes}>
27
+ {children}
28
+ </h1>
29
+ );
30
+ case "headingTwo":
31
+ return (
32
+ <h2 className="arkynElementHeadingTwo" style={style} {...attributes}>
33
+ {children}
34
+ </h2>
35
+ );
36
+ case "listItem":
37
+ return (
38
+ <li className="arkynElementListItem" style={style} {...attributes}>
39
+ {children}
40
+ </li>
41
+ );
42
+ case "numberedList":
43
+ return (
44
+ <ol className="arkynElementNumberedList" style={style} {...attributes}>
45
+ {children}
46
+ </ol>
47
+ );
48
+ default:
49
+ return (
50
+ <p className="arkynElementParagraph" style={style} {...attributes}>
51
+ {children}
52
+ </p>
53
+ );
54
+ }
55
+ }
56
+
57
+ export { Element };
@@ -0,0 +1,23 @@
1
+ .arkynElementBlockquote,
2
+ .arkynElementBulletList,
3
+ .arkynElementListItem,
4
+ .arkynElementNumberedList,
5
+ .arkynElementParagraph {
6
+ color: var(--text-body);
7
+ font-size: 14px;
8
+ font-weight: 400;
9
+ }
10
+
11
+ .arkynElementHeadingOne,
12
+ .arkynElementHeadingTwo {
13
+ color: var(--text-heading);
14
+ font-weight: 600;
15
+ }
16
+
17
+ .arkynElementHeadingOne {
18
+ font-size: 18px;
19
+ }
20
+
21
+ .arkynElementHeadingTwo {
22
+ font-size: 16px;
23
+ }
@@ -0,0 +1,12 @@
1
+ // import { RenderLeafProps } from "slate-react";
2
+
3
+ function Leaf({ attributes, children, leaf }: any) {
4
+ if (leaf.bold) children = <strong>{children}</strong>;
5
+ if (leaf.code) children = <code>{children}</code>;
6
+ if (leaf.italic) children = <em>{children}</em>;
7
+ if (leaf.underline) children = <u>{children}</u>;
8
+
9
+ return <span {...attributes}>{children}</span>;
10
+ }
11
+
12
+ export { Leaf };
@@ -0,0 +1,38 @@
1
+ import { LucideIcon } from "lucide-react";
2
+ import { MouseEvent } from "react";
3
+ import { useSlate } from "slate-react";
4
+
5
+ import { MarkFormatType } from "../../defineType";
6
+ import { toggleMark } from "../../functions/toggleMark";
7
+ import { isMarkActive } from "../../helpers/isMarkActive";
8
+
9
+ import "./styles.css";
10
+
11
+ type MarkButtonProps = {
12
+ format: MarkFormatType;
13
+ icon: LucideIcon;
14
+ };
15
+
16
+ function MarkButton({ format, icon: Icon }: MarkButtonProps) {
17
+ const editor = useSlate();
18
+
19
+ const isActive = isMarkActive(editor, format);
20
+ const activeClass = isActive ? "activeTrue" : "activeFalse";
21
+
22
+ function handleMouseDown(event: MouseEvent<HTMLButtonElement>) {
23
+ event.preventDefault();
24
+ toggleMark(editor, format);
25
+ }
26
+
27
+ return (
28
+ <button
29
+ type="button"
30
+ className={"arkynRichTextMarkButton " + activeClass}
31
+ onMouseDown={handleMouseDown}
32
+ >
33
+ <Icon />
34
+ </button>
35
+ );
36
+ }
37
+
38
+ export { MarkButton };
@@ -0,0 +1,41 @@
1
+ .arkynRichTextMarkButton {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+
6
+ height: 36px;
7
+ width: 36px;
8
+
9
+ background-color: var(--card-foreground-secondary);
10
+ border: none;
11
+ border-radius: 4px;
12
+ }
13
+
14
+ .arkynRichTextMarkButton svg {
15
+ height: 20px;
16
+ width: 20px;
17
+
18
+ color: var(--text-heading);
19
+ }
20
+
21
+ .arkynRichTextMarkButton:hover {
22
+ cursor: pointer;
23
+ filter: brightness(0.97);
24
+ }
25
+
26
+ html.dark .arkynRichTextMarkButton:hover {
27
+ cursor: pointer;
28
+ filter: brightness(0.9);
29
+ }
30
+
31
+ .arkynRichTextMarkButton.activeTrue {
32
+ filter: brightness(0.97);
33
+ }
34
+
35
+ html.dark .arkynRichTextMarkButton.activeTrue {
36
+ filter: brightness(0.9);
37
+ }
38
+
39
+ .arkynRichTextMarkButton.activeTrue svg {
40
+ color: rgba(var(--spotlight-primary), 1);
41
+ }
@@ -0,0 +1,12 @@
1
+ import { ReactNode } from "react";
2
+ import "./styles.css";
3
+
4
+ type ToolbarProps = {
5
+ children: ReactNode;
6
+ };
7
+
8
+ function Toolbar({ children }: ToolbarProps) {
9
+ return <div className="arkynRichTextToolbar">{children}</div>;
10
+ }
11
+
12
+ export { Toolbar };
@@ -0,0 +1,14 @@
1
+ .arkynRichTextToolbar {
2
+ display: flex;
3
+ align-items: center;
4
+ flex-wrap: wrap;
5
+
6
+ border-radius: var(--rounded-inputs) var(--rounded-inputs) 0 0;
7
+
8
+ padding: 12px 16px;
9
+ column-gap: 24px;
10
+ row-gap: 12px;
11
+
12
+ background-color: var(--card-foreground-secondary);
13
+ border-bottom: 1px solid var(--border);
14
+ }
@@ -0,0 +1,38 @@
1
+ import { HtmlHTMLAttributes } from "react";
2
+ import { BaseEditor } from "slate";
3
+ import { HistoryEditor } from "slate-history";
4
+ import { ReactEditor } from "slate-react";
5
+
6
+ type ElementFormatType =
7
+ | "blockQuote"
8
+ | "bulletedList"
9
+ | "headingOne"
10
+ | "headingTwo"
11
+ | "listItem"
12
+ | "numberedList"
13
+ | "paragraph";
14
+
15
+ type AlignFormatType = "center" | "left" | "right" | "justify";
16
+
17
+ type MarkFormatType = "bold" | "italic" | "underline" | "code";
18
+
19
+ type CustomElement = {
20
+ type: ElementFormatType;
21
+ align?: AlignFormatType;
22
+ children?: any;
23
+ };
24
+
25
+ type CustomText = {
26
+ bold?: boolean;
27
+ italic?: boolean;
28
+ code?: boolean;
29
+ underline?: boolean;
30
+ };
31
+
32
+ declare module "slate" {
33
+ interface CustomTypes {
34
+ Editor: BaseEditor & ReactEditor & HistoryEditor;
35
+ Element: CustomElement;
36
+ Text: CustomText;
37
+ }
38
+ }
@@ -0,0 +1,54 @@
1
+ // import { Node, Element as SlateElement } from "slate";
2
+ import { Element as SlateElement } from "slate";
3
+
4
+ const serialize = (node: any): string => {
5
+ // function exportHtml() {
6
+ // const content = editor.children;
7
+ // const html = content.map((node) => serialize(node)).join("");
8
+ // setHtml(html);
9
+ // }
10
+
11
+ if (SlateElement.isElement(node)) {
12
+ const children = node.children.map((n: any) => serialize(n)).join("");
13
+
14
+ switch (node.type) {
15
+ case "paragraph":
16
+ return `<p>${children}</p>`;
17
+ case "blockQuote":
18
+ return `<blockquote>${children}</blockquote>`;
19
+ case "bulletedList":
20
+ return `<ul>${children}</ul>`;
21
+ case "headingOne":
22
+ return `<h1>${children}</h1>`;
23
+ case "headingTwo":
24
+ return `<h2>${children}</h2>`;
25
+ case "listItem":
26
+ return `<li>${children}</li>`;
27
+ case "numberedList":
28
+ return `<ol>${children}</ol>`;
29
+ default:
30
+ return children;
31
+ }
32
+ }
33
+
34
+ if (node.text) {
35
+ let text = node.text;
36
+ if (node.bold) {
37
+ text = `<strong>${text}</strong>`;
38
+ }
39
+ if (node.code) {
40
+ text = `<code>${text}</code>`;
41
+ }
42
+ if (node.italic) {
43
+ text = `<em>${text}</em>`;
44
+ }
45
+ if (node.underline) {
46
+ text = `<u>${text}</u>`;
47
+ }
48
+ return text;
49
+ }
50
+
51
+ return "";
52
+ };
53
+
54
+ export { serialize };