@licklist/design 0.78.5-dev.46 → 0.78.5-dev.48

package/dist/v2/pages/Settings/components/SidebarCustomisation.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600;--blue-50:#e7f4fc;--blue-100:#b4dbf6;--blue-200:#90caf2;--blue-300:#5eb2ec;--blue-400:#3ea3e8;--blue-500:#0e8ce2;--blue-600:#0d7fce;--blue-700:#0a63a0;--blue-800:#084d7c;--blue-900:#063b5f;--cyan-50:#eafbff;--cyan-75:#bdf3ff;--cyan-100:#aff1ff;--cyan-200:#9deeff;--cyan-300:#71e6ff;--cyan-400:#55e1ff;--cyan-500:#2bd9ff;--cyan-600:#27c5e8;--cyan-700:#1f9ab5;--cyan-800:#18778c;--cyan-900:#125b6b;--indigo-50:#efeffe;--indigo-100:#cdccfc;--indigo-200:#b4b4fa;--indigo-300:#9291f8;--indigo-400:#7c74ff;--indigo-500:#5d5bf4;--indigo-600:#5553de;--indigo-700:#4241ad;--indigo-800:#333286;--indigo-900:#272666;--green-50:#eef9ea;--green-100:#c9ecbd;--green-200:#afe39d;--green-300:#8bd671;--green-400:#75ce55;--green-500:#52c22b;--green-600:#4bb127;--green-700:#3a8a1f;--green-800:#2d6b18;--green-900:#225112;--red-50:#fceceb;--red-100:#f5c4c2;--red-200:#f1a8a4;--red-300:#ea807b;--red-400:#e66861;--red-500:#e0423a;--red-600:#cc3c35;--red-700:#9f2f29;--red-800:#7b2420;--red-900:#5e1c18;--purple-50:#efe6fd;--purple-100:#ceb0fa;--purple-200:#b78af7;--purple-300:#965ff4;--purple-400:#8133f1;--purple-500:#6200ee;--purple-600:#5900d9;--purple-700:#4600a9;--purple-800:#360083;--purple-900:#290064;--orange-50:#fff2e8;--orange-100:#fed7b6;--orange-200:#fec493;--orange-300:#fea962;--orange-400:#fd9843;--orange-500:#fd7e14;--orange-600:#e67312;--orange-700:#b4590e;--orange-800:#8b450b;--orange-900:#6a3508;--yellow-50:#fcf6e7;--yellow-100:#f6e3b4;--yellow-200:#f2d68f;--yellow-300:#ecc35c;--yellow-400:#fcc741;--yellow-500:#fbb912;--yellow-600:#e4a810;--yellow-700:#a07509;--yellow-800:#7c5b07;--yellow-900:#5f4505;--pink-50:#fdecf4;--pink-100:#f8c3db;--pink-200:#f4a6ca;--pink-300:#f07eb2;--pink-400:#ed65a3;--pink-500:#e83e8c;--pink-600:#d33874;--pink-700:#a52c63;--pink-800:#80224d;--pink-900:#611a3b;--teal-50:#e9faf7;--teal-100:#baf0e7;--teal-200:#99e8db;--teal-300:#6bdecb;--teal-400:#4ed8c1;--teal-500:#22ceb1;--teal-600:#1fbba1;--teal-700:#18927e;--teal-800:#137161;--teal-900:#0e574a;--neutral-white:#fff;--neutral-25:#f8f8fa;--neutral-50:#e8e9ef;--neutral-75:#d2d5e3;--neutral-100:#b6bacc;--neutral-200:#9399b3;--neutral-300:#626a90;--neutral-400:#433d7b;--neutral-500:#14215a;--neutral-600:#121e52;--neutral-700:#0e1740;--neutral-800:#0b1232;--neutral-900:#080e26;--neutral-black:#000;--purple-lightest:var(--purple-50);--purple-lighter:var(--purple-100);--purple-light:var(--purple-300);--purple-regular:var(--purple-500);--purple-dark:var(--purple-600);--purple-darker:var(--purple-800);--purple-darkest:var(--purple-900);--blue-lightest:var(--blue-50);--blue-lighter:var(--blue-100);--blue-light:var(--blue-300);--blue-regular:var(--blue-500);--blue-dark:var(--blue-600);--blue-darker:var(--blue-800);--blue-darkest:var(--blue-900);--indigo-lightest:var(--indigo-50);--indigo-lighter:var(--indigo-100);--indigo-light:var(--indigo-300);--indigo-regular:var(--indigo-500);--indigo-dark:var(--indigo-600);--indigo-darker:var(--indigo-800);--indigo-darkest:var(--indigo-900);--cyan-lightest:var(--cyan-50);--cyan-lighter:var(--cyan-100);--cyan-light:var(--cyan-300);--cyan-regular:var(--cyan-500);--cyan-dark:var(--cyan-700);--cyan-darker:var(--cyan-800);--cyan-darkest:var(--cyan-900);--red-lightest:var(--red-50);--red-lighter:var(--red-100);--red-light:var(--red-400);--red-regular:var(--red-500);--red-dark:var(--red-600);--red-darker:var(--red-800);--red-darkest:var(--red-900);--orange-lightest:var(--orange-50);--orange-lighter:var(--orange-100);--orange-light:var(--orange-300);--orange-regular:var(--orange-500);--orange-dark:var(--orange-600);--orange-darker:var(--orange-700);--orange-darkest:var(--orange-800);--yellow-lightest:var(--yellow-50);--yellow-lighter:var(--yellow-100);--yellow-light:var(--yellow-300);--yellow-regular:var(--yellow-500);--yellow-dark:var(--yellow-600);--yellow-darker:var(--yellow-800);--yellow-darkest:var(--yellow-900);--pink-lightest:var(--pink-50);--pink-lighter:var(--pink-100);--pink-light:var(--pink-300);--pink-regular:var(--pink-500);--pink-dark:var(--pink-600);--pink-darker:var(--pink-700);--pink-darkest:var(--pink-800);--green-lightest:var(--green-50);--green-lighter:var(--green-100);--green-light:var(--green-300);--green-regular:var(--green-500);--green-dark:var(--green-600);--green-darker:var(--green-800);--green-darkest:var(--green-900);--teal-lightest:var(--teal-50);--teal-lighter:var(--teal-100);--teal-light:var(--teal-300);--teal-regular:var(--teal-500);--teal-dark:var(--teal-600);--teal-darker:var(--teal-700);--teal-darkest:var(--teal-800);--tone-lightest:var(--neutral-white);--tone-lighter:var(--neutral-25);--tone-light:var(--neutral-50);--tone-regular:var(--neutral-75);--tone-dark:var(--neutral-100);--tone-darker:var(--neutral-200);--tone-darkest:var(--neutral-300);--shade-lightest:var(--neutral-400);--shade-lighter:var(--neutral-500);--shade-light:var(--neutral-600);--shade-regular:var(--neutral-700);--shade-dark:var(--neutral-800);--shade-darker:var(--neutral-900);--shade-darkest:var(--neutral-black);--highlight-lightest:var(--cyan-lightest);--highlight-lighter:var(--cyan-lighter);--highlight-light:var(--cyan-light);--highlight-regular:var(--blue-regular);--highlight-dark:var(--blue-dark);--highlight-darker:var(--blue-darker);--highlight-darkest:var(--blue-darkest);--success-lightest:var(--green-lightest);--success-lighter:var(--green-lighter);--success-light:var(--green-light);--success-regular:var(--green-regular);--success-dark:var(--green-dark);--success-darker:var(--green-darker);--success-darkest:var(--green-darkest);--errors-lightest:var(--red-lightest);--errors-lighter:var(--red-lighter);--errors-light:var(--red-light);--errors-regular:var(--red-regular);--errors-dark:var(--red-dark);--errors-darker:var(--red-darker);--errors-darkest:var(--red-darkest);--actions-lightest:var(--purple-50);--actions-lighter:var(--purple-lighter);--actions-light:var(--purple-light);--actions-regular:var(--purple-regular);--actions-dark:var(--purple-dark);--actions-darker:var(--purple-darker);--actions-darkest:var(--purple-darkest);--information-lightest:var(--blue-lightest);--information-lighter:var(--blue-lighter);--information-light:var(--blue-light);--information-regular:var(--blue-regular);--information-dark:var(--blue-dark);--information-darker:var(--blue-darker);--information-darkest:var(--blue-darkest);--alert-lightest:var(--yellow-lightest);--alert-lighter:var(--yellow-lighter);--alert-light:var(--orange-light);--alert-regular:var(--orange-regular);--alert-darker:var(--yellow-darker);--alert-darkest:var(--yellow-darkest);--danger-lightest:var(--red-lightest);--danger-lighter:var(--red-lighter);--danger-light:var(--red-light);--danger-regular:var(--red-regular);--danger-dark:var(--red-dark);--danger-darker:var(--red-darker);--danger-darkest:var(--red-darkest);--disabled-lightest:var(--tone-light);--disabled-lighter:var(--tone-regular);--disabled-light:var(--tone-dark);--disabled-regular:var(--tone-darker);--disabled-dark:var(--shade-lighter);--disabled-darker:var(--shade-light);--disabled-darkest:var(--shade-regular);--label-primary:var(--shade-light);--label-secondary:var(--tone-darkest);--label-secondary-hover:var(--shade-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-dark);--label-action:var(--actions-regular);--label-danger:var(--danger-dark);--label-status-error:var(--errors-dark);--label-status-success:var(--success-darker);--label-status-info:var(--information-dark);--label-status-alert:var(--alert-regular);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--tone-lightest);--surface-primary-hover:var(--tone-lighter);--surface-primary-pressed:var(--tone-light);--surface-secondary:var(--neutral-25);--surface-secondary-hover:var(--tone-light);--surface-secondary-pressed:var(--tone-regular);--surface-tertiary:var(--tone-light);--surface-tertiary-hover:var(--tone-lighter);--surface-tertiary-pressed:var(--tone-lightest);--surface-status-success:var(--success-lightest);--surface-status-error:var(--errors-lightest);--surface-status-alert:var(--alert-lightest);--surface-status-info:var(--information-lightest);--surface-status-disabled:var(--disabled-lighter);--surface-action-soft:var(--actions-lightest);--surface-action-soft-hover:var(--actions-lighter);--surface-action-soft-pressed:var(--actions-light);--surface-danger-soft:var(--danger-lightest);--surface-danger-soft-hover:var(--danger-lighter);--surface-danger-soft-pressed:var(--danger-light);--surface-highlight-soft:var(--highlight-lightest);--surface-colour-red-soft:var(--red-lightest);--surface-colour-green-soft:var(--green-lightest);--surface-colour-blue-soft:var(--blue-lightest);--surface-colour-orange-soft:var(--orange-lightest);--surface-colour-yellow-soft:var(--yellow-lightest);--surface-colour-purple-soft:var(--purple-lightest);--surface-colour-indigo-soft:var(--indigo-lightest);--surface-colour-cyan-soft:var(--cyan-lightest);--surface-colour-pink-soft:var(--pink-lightest);--surface-colour-teal-soft:var(--teal-lightest);--border-primary:var(--tone-light);--border-secondary:var(--tone-regular);--border-selected:var(--neutral-600);--border-action:var(--actions-regular);--border-status-error:var(--errors-lighter);--border-status-success:var(--success-lighter);--border-status-alert:var(--alert-lighter);--border-status-info:var(--information-lighter);--border-status-disabled:var(--disabled-lightest);--border-colour-overlay:#121e521a;--fill-primary:var(--shade-lighter);--fill-secondary:var(--tone-darkest);--fill-white:var(--tone-lightest);--fill-action:var(--actions-regular);--fill-highlight:var(--highlight-dark);--fill-danger:var(--danger-dark);--fill-status-success:var(--success-darker);--fill-status-error:var(--errors-dark);--fill-status-alert:var(--alert-regular);--fill-status-info:var(--information-regular);--fill-status-disabled:var(--disabled-light);--gradient-stop1:var(--purple-500);--gradient-stop2:var(--indigo-500);--gradient-stop3:var(--blue-500)}[data-theme=dark]{--label-primary:var(--tone-lighter);--label-secondary:var(--tone-darker);--label-secondary-hover:var(--tone-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-light);--label-action:var(--actions-lighter);--label-danger:var(--danger-light);--label-status-error:var(--errors-light);--label-status-success:var(--success-light);--label-status-info:var(--information-light);--label-status-alert:var(--alert-light);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--shade-darker);--surface-primary-hover:var(--shade-dark);--surface-primary-pressed:var(--shade-regular);--surface-secondary:var(--shade-dark);--surface-secondary-hover:var(--shade-darker);--surface-secondary-pressed:var(--shade-darkest);--surface-tertiary:var(--shade-regular);--surface-tertiary-hover:var(--shade-dark);--surface-tertiary-pressed:var(--shade-darker);--surface-status-success:var(--success-darkest);--surface-status-error:var(--errors-darkest);--surface-status-alert:var(--alert-darkest);--surface-status-info:var(--information-darkest);--surface-status-disabled:var(--disabled-darkest);--surface-action-soft:var(--actions-darkest);--surface-action-soft-hover:var(--actions-darker);--surface-action-soft-pressed:var(--actions-dark);--surface-danger-soft:var(--danger-darkest);--surface-danger-soft-hover:var(--danger-darker);--surface-danger-soft-pressed:var(--danger-dark);--surface-highlight-soft:var(--highlight-darkest);--surface-colour-red-soft:var(--red-darkest);--surface-colour-green-soft:var(--green-darkest);--surface-colour-blue-soft:var(--blue-darkest);--surface-colour-orange-soft:var(--orange-darkest);--surface-colour-yellow-soft:var(--yellow-darkest);--surface-colour-purple-soft:var(--purple-darkest);--surface-colour-indigo-soft:var(--indigo-darkest);--surface-colour-cyan-soft:var(--cyan-darkest);--surface-colour-pink-soft:var(--pink-darkest);--surface-colour-teal-soft:var(--teal-darkest);--border-primary:var(--shade-light);--border-secondary:var(--shade-dark);--border-selected:var(--tone-light);--border-action:var(--actions-light);--border-status-error:var(--errors-darker);--border-status-success:var(--success-darker);--border-status-alert:var(--alert-darker);--border-status-info:var(--information-darker);--border-status-disabled:var(--disabled-dark);--border-colour-overlay:#ffffff1a;--fill-primary:var(--tone-lighter);--fill-secondary:var(--tone-darker);--fill-white:var(--tone-lightest);--fill-action:var(--actions-lighter);--fill-highlight:var(--highlight-light);--fill-danger:var(--danger-light);--fill-status-success:var(--success-light);--fill-status-error:var(--errors-light);--fill-status-alert:var(--alert-light);--fill-status-info:var(--information-light);--fill-status-disabled:var(--disabled-dark);--gradient-stop1:var(--indigo-400);--gradient-stop2:var(--cyan-500);--gradient-stop3:var(--cyan-100)}.text-primary{color:var(--label-primary)}.text-secondary{color:var(--label-secondary)}.text-white{color:var(--label-white)}.text-action{color:var(--label-action)}.text-danger{color:var(--label-danger)}.text-success{color:var(--label-status-success)}.text-error{color:var(--label-status-error)}.text-info{color:var(--label-status-info)}.text-warning{color:var(--label-status-alert)}.text-disabled{color:var(--label-status-disabled)}.bg-primary{background-color:var(--surface-primary)}.bg-secondary{background-color:var(--surface-secondary)}.bg-tertiary{background-color:var(--surface-tertiary)}.bg-success{background-color:var(--surface-status-success)}.bg-error{background-color:var(--surface-status-error)}.bg-warning{background-color:var(--surface-status-alert)}.bg-info{background-color:var(--surface-status-info)}.bg-action-soft{background-color:var(--surface-action-soft)}.bg-danger-soft{background-color:var(--surface-danger-soft)}.border-primary{border-color:var(--border-primary)}.border-secondary{border-color:var(--border-secondary)}.border-selected{border-color:var(--border-selected)}.border-action{border-color:var(--border-action)}.border-success{border-color:var(--border-status-success)}.border-error{border-color:var(--border-status-error)}.border-warning{border-color:var(--border-status-alert)}.border-info{border-color:var(--border-status-info)}.sidebar-customisation{display:flex;flex-direction:column;font-family:var(--font-family-sans);gap:16px;width:100%}.sidebar-customisation__header{align-items:center;display:flex;justify-content:space-between}.sidebar-customisation__title{font-size:var(--text-small-size);font-weight:var(--text-small-bold-weight);line-height:var(--text-small-line);margin:0}.sidebar-customisation__cancel-btn,.sidebar-customisation__title{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans)}.sidebar-customisation__cancel-btn{background:none;border:none;color:var(--label-danger);cursor:pointer;font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);padding:0}.sidebar-customisation__cancel-btn:hover{text-decoration:underline}.sidebar-customisation__edit-btn{align-items:center;background:none;border:none;color:var(--labels-main-label-primary,#121e52);color:var(--label-primary);cursor:pointer;display:flex;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);gap:6px;line-height:var(--text-regular-line);padding:0}.sidebar-customisation__edit-btn svg{color:var(--fill-primary)}.sidebar-customisation__edit-btn:hover{text-decoration:underline}.sidebar-customisation__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);width:100%}.sidebar-customisation__view-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);width:100%}.sidebar-customisation__view-item{align-items:center;background-color:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:8px;display:flex;gap:12px;min-width:0;padding:12px}.sidebar-customisation__view-item--hidden{opacity:.5}.sidebar-customisation__view-icon{align-items:center;color:var(--fill-primary);display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}.sidebar-customisation__view-icon svg{height:24px;width:24px}.sidebar-customisation__view-label{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:var(--text-small-size);font-weight:var(--text-small-emphasis-weight);line-height:var(--text-small-line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-customisation__actions{align-items:center;display:flex;gap:12px;margin-top:8px}.sidebar-customisation__save-btn{background-color:var(--fill-action);border:none;border-radius:8px;color:var(--labels-main-label-primary,#121e52);color:var(--label-white);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);font-weight:600;line-height:var(--text-regular-line);padding:10px 20px;transition:background-color .2s ease}.sidebar-customisation__save-btn:hover{background-color:var(--actions-dark)}.sidebar-customisation__save-btn:focus-visible{outline:2px solid var(--border-action);outline-offset:2px}.sidebar-customisation__reset-btn{background:none;border:none;color:var(--labels-main-label-primary,#121e52);color:var(--label-secondary);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--text-small-size);font-weight:var(--text-small-weight);font-weight:500;line-height:var(--text-small-line);padding:0}.sidebar-customisation__reset-btn:hover{color:var(--label-primary);text-decoration:underline}";
+var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600;--blue-50:#e7f4fc;--blue-100:#b4dbf6;--blue-200:#90caf2;--blue-300:#5eb2ec;--blue-400:#3ea3e8;--blue-500:#0e8ce2;--blue-600:#0d7fce;--blue-700:#0a63a0;--blue-800:#084d7c;--blue-900:#063b5f;--cyan-50:#eafbff;--cyan-75:#bdf3ff;--cyan-100:#aff1ff;--cyan-200:#9deeff;--cyan-300:#71e6ff;--cyan-400:#55e1ff;--cyan-500:#2bd9ff;--cyan-600:#27c5e8;--cyan-700:#1f9ab5;--cyan-800:#18778c;--cyan-900:#125b6b;--indigo-50:#efeffe;--indigo-100:#cdccfc;--indigo-200:#b4b4fa;--indigo-300:#9291f8;--indigo-400:#7c74ff;--indigo-500:#5d5bf4;--indigo-600:#5553de;--indigo-700:#4241ad;--indigo-800:#333286;--indigo-900:#272666;--green-50:#eef9ea;--green-100:#c9ecbd;--green-200:#afe39d;--green-300:#8bd671;--green-400:#75ce55;--green-500:#52c22b;--green-600:#4bb127;--green-700:#3a8a1f;--green-800:#2d6b18;--green-900:#225112;--red-50:#fceceb;--red-100:#f5c4c2;--red-200:#f1a8a4;--red-300:#ea807b;--red-400:#e66861;--red-500:#e0423a;--red-600:#cc3c35;--red-700:#9f2f29;--red-800:#7b2420;--red-900:#5e1c18;--purple-50:#efe6fd;--purple-100:#ceb0fa;--purple-200:#b78af7;--purple-300:#965ff4;--purple-400:#8133f1;--purple-500:#6200ee;--purple-600:#5900d9;--purple-700:#4600a9;--purple-800:#360083;--purple-900:#290064;--orange-50:#fff2e8;--orange-100:#fed7b6;--orange-200:#fec493;--orange-300:#fea962;--orange-400:#fd9843;--orange-500:#fd7e14;--orange-600:#e67312;--orange-700:#b4590e;--orange-800:#8b450b;--orange-900:#6a3508;--yellow-50:#fcf6e7;--yellow-100:#f6e3b4;--yellow-200:#f2d68f;--yellow-300:#ecc35c;--yellow-400:#fcc741;--yellow-500:#fbb912;--yellow-600:#e4a810;--yellow-700:#a07509;--yellow-800:#7c5b07;--yellow-900:#5f4505;--pink-50:#fdecf4;--pink-100:#f8c3db;--pink-200:#f4a6ca;--pink-300:#f07eb2;--pink-400:#ed65a3;--pink-500:#e83e8c;--pink-600:#d33874;--pink-700:#a52c63;--pink-800:#80224d;--pink-900:#611a3b;--teal-50:#e9faf7;--teal-100:#baf0e7;--teal-200:#99e8db;--teal-300:#6bdecb;--teal-400:#4ed8c1;--teal-500:#22ceb1;--teal-600:#1fbba1;--teal-700:#18927e;--teal-800:#137161;--teal-900:#0e574a;--neutral-white:#fff;--neutral-25:#f8f8fa;--neutral-50:#e8e9ef;--neutral-75:#d2d5e3;--neutral-100:#b6bacc;--neutral-200:#9399b3;--neutral-300:#626a90;--neutral-400:#433d7b;--neutral-500:#14215a;--neutral-600:#121e52;--neutral-700:#0e1740;--neutral-800:#0b1232;--neutral-900:#080e26;--neutral-black:#000;--purple-lightest:var(--purple-50);--purple-lighter:var(--purple-100);--purple-light:var(--purple-300);--purple-regular:var(--purple-500);--purple-dark:var(--purple-600);--purple-darker:var(--purple-800);--purple-darkest:var(--purple-900);--blue-lightest:var(--blue-50);--blue-lighter:var(--blue-100);--blue-light:var(--blue-300);--blue-regular:var(--blue-500);--blue-dark:var(--blue-600);--blue-darker:var(--blue-800);--blue-darkest:var(--blue-900);--indigo-lightest:var(--indigo-50);--indigo-lighter:var(--indigo-100);--indigo-light:var(--indigo-300);--indigo-regular:var(--indigo-500);--indigo-dark:var(--indigo-600);--indigo-darker:var(--indigo-800);--indigo-darkest:var(--indigo-900);--cyan-lightest:var(--cyan-50);--cyan-lighter:var(--cyan-100);--cyan-light:var(--cyan-300);--cyan-regular:var(--cyan-500);--cyan-dark:var(--cyan-700);--cyan-darker:var(--cyan-800);--cyan-darkest:var(--cyan-900);--red-lightest:var(--red-50);--red-lighter:var(--red-100);--red-light:var(--red-400);--red-regular:var(--red-500);--red-dark:var(--red-600);--red-darker:var(--red-800);--red-darkest:var(--red-900);--orange-lightest:var(--orange-50);--orange-lighter:var(--orange-100);--orange-light:var(--orange-300);--orange-regular:var(--orange-500);--orange-dark:var(--orange-600);--orange-darker:var(--orange-700);--orange-darkest:var(--orange-800);--yellow-lightest:var(--yellow-50);--yellow-lighter:var(--yellow-100);--yellow-light:var(--yellow-300);--yellow-regular:var(--yellow-500);--yellow-dark:var(--yellow-600);--yellow-darker:var(--yellow-800);--yellow-darkest:var(--yellow-900);--pink-lightest:var(--pink-50);--pink-lighter:var(--pink-100);--pink-light:var(--pink-300);--pink-regular:var(--pink-500);--pink-dark:var(--pink-600);--pink-darker:var(--pink-700);--pink-darkest:var(--pink-800);--green-lightest:var(--green-50);--green-lighter:var(--green-100);--green-light:var(--green-300);--green-regular:var(--green-500);--green-dark:var(--green-600);--green-darker:var(--green-800);--green-darkest:var(--green-900);--teal-lightest:var(--teal-50);--teal-lighter:var(--teal-100);--teal-light:var(--teal-300);--teal-regular:var(--teal-500);--teal-dark:var(--teal-600);--teal-darker:var(--teal-700);--teal-darkest:var(--teal-800);--tone-lightest:var(--neutral-white);--tone-lighter:var(--neutral-25);--tone-light:var(--neutral-50);--tone-regular:var(--neutral-75);--tone-dark:var(--neutral-100);--tone-darker:var(--neutral-200);--tone-darkest:var(--neutral-300);--shade-lightest:var(--neutral-400);--shade-lighter:var(--neutral-500);--shade-light:var(--neutral-600);--shade-regular:var(--neutral-700);--shade-dark:var(--neutral-800);--shade-darker:var(--neutral-900);--shade-darkest:var(--neutral-black);--highlight-lightest:var(--cyan-lightest);--highlight-lighter:var(--cyan-lighter);--highlight-light:var(--cyan-light);--highlight-regular:var(--blue-regular);--highlight-dark:var(--blue-dark);--highlight-darker:var(--blue-darker);--highlight-darkest:var(--blue-darkest);--success-lightest:var(--green-lightest);--success-lighter:var(--green-lighter);--success-light:var(--green-light);--success-regular:var(--green-regular);--success-dark:var(--green-dark);--success-darker:var(--green-darker);--success-darkest:var(--green-darkest);--errors-lightest:var(--red-lightest);--errors-lighter:var(--red-lighter);--errors-light:var(--red-light);--errors-regular:var(--red-regular);--errors-dark:var(--red-dark);--errors-darker:var(--red-darker);--errors-darkest:var(--red-darkest);--actions-lightest:var(--purple-50);--actions-lighter:var(--purple-lighter);--actions-light:var(--purple-light);--actions-regular:var(--purple-regular);--actions-dark:var(--purple-dark);--actions-darker:var(--purple-darker);--actions-darkest:var(--purple-darkest);--information-lightest:var(--blue-lightest);--information-lighter:var(--blue-lighter);--information-light:var(--blue-light);--information-regular:var(--blue-regular);--information-dark:var(--blue-dark);--information-darker:var(--blue-darker);--information-darkest:var(--blue-darkest);--alert-lightest:var(--yellow-lightest);--alert-lighter:var(--yellow-lighter);--alert-light:var(--orange-light);--alert-regular:var(--orange-regular);--alert-darker:var(--yellow-darker);--alert-darkest:var(--yellow-darkest);--danger-lightest:var(--red-lightest);--danger-lighter:var(--red-lighter);--danger-light:var(--red-light);--danger-regular:var(--red-regular);--danger-dark:var(--red-dark);--danger-darker:var(--red-darker);--danger-darkest:var(--red-darkest);--disabled-lightest:var(--tone-light);--disabled-lighter:var(--tone-regular);--disabled-light:var(--tone-dark);--disabled-regular:var(--tone-darker);--disabled-dark:var(--shade-lighter);--disabled-darker:var(--shade-light);--disabled-darkest:var(--shade-regular);--label-primary:var(--shade-light);--label-secondary:var(--tone-darkest);--label-secondary-hover:var(--shade-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-dark);--label-action:var(--actions-regular);--label-danger:var(--danger-dark);--label-status-error:var(--errors-dark);--label-status-success:var(--success-darker);--label-status-info:var(--information-dark);--label-status-alert:var(--alert-regular);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--tone-lightest);--surface-primary-hover:var(--tone-lighter);--surface-primary-pressed:var(--tone-light);--surface-secondary:var(--neutral-25);--surface-secondary-hover:var(--tone-light);--surface-secondary-pressed:var(--tone-regular);--surface-tertiary:var(--tone-light);--surface-tertiary-hover:var(--tone-lighter);--surface-tertiary-pressed:var(--tone-lightest);--surface-status-success:var(--success-lightest);--surface-status-error:var(--errors-lightest);--surface-status-alert:var(--alert-lightest);--surface-status-info:var(--information-lightest);--surface-status-disabled:var(--disabled-lighter);--surface-action-soft:var(--actions-lightest);--surface-action-soft-hover:var(--actions-lighter);--surface-action-soft-pressed:var(--actions-light);--surface-danger-soft:var(--danger-lightest);--surface-danger-soft-hover:var(--danger-lighter);--surface-danger-soft-pressed:var(--danger-light);--surface-highlight-soft:var(--highlight-lightest);--surface-colour-red-soft:var(--red-lightest);--surface-colour-green-soft:var(--green-lightest);--surface-colour-blue-soft:var(--blue-lightest);--surface-colour-orange-soft:var(--orange-lightest);--surface-colour-yellow-soft:var(--yellow-lightest);--surface-colour-purple-soft:var(--purple-lightest);--surface-colour-indigo-soft:var(--indigo-lightest);--surface-colour-cyan-soft:var(--cyan-lightest);--surface-colour-pink-soft:var(--pink-lightest);--surface-colour-teal-soft:var(--teal-lightest);--border-primary:var(--tone-light);--border-secondary:var(--tone-regular);--border-selected:var(--neutral-600);--border-action:var(--actions-regular);--border-status-error:var(--errors-lighter);--border-status-success:var(--success-lighter);--border-status-alert:var(--alert-lighter);--border-status-info:var(--information-lighter);--border-status-disabled:var(--disabled-lightest);--border-colour-overlay:#121e521a;--fill-primary:var(--shade-lighter);--fill-secondary:var(--tone-darkest);--fill-white:var(--tone-lightest);--fill-action:var(--actions-regular);--fill-highlight:var(--highlight-dark);--fill-danger:var(--danger-dark);--fill-status-success:var(--success-darker);--fill-status-error:var(--errors-dark);--fill-status-alert:var(--alert-regular);--fill-status-info:var(--information-regular);--fill-status-disabled:var(--disabled-light);--gradient-stop1:var(--purple-500);--gradient-stop2:var(--indigo-500);--gradient-stop3:var(--blue-500)}[data-theme=dark]{--label-primary:var(--tone-lighter);--label-secondary:var(--tone-darker);--label-secondary-hover:var(--tone-lighter);--label-white:var(--tone-lightest);--label-highlight:var(--highlight-light);--label-action:var(--actions-lighter);--label-danger:var(--danger-light);--label-status-error:var(--errors-light);--label-status-success:var(--success-light);--label-status-info:var(--information-light);--label-status-alert:var(--alert-light);--label-status-disabled:var(--disabled-regular);--surface-primary:var(--shade-darker);--surface-primary-hover:var(--shade-dark);--surface-primary-pressed:var(--shade-regular);--surface-secondary:var(--shade-dark);--surface-secondary-hover:var(--shade-darker);--surface-secondary-pressed:var(--shade-darkest);--surface-tertiary:var(--shade-regular);--surface-tertiary-hover:var(--shade-dark);--surface-tertiary-pressed:var(--shade-darker);--surface-status-success:var(--success-darkest);--surface-status-error:var(--errors-darkest);--surface-status-alert:var(--alert-darkest);--surface-status-info:var(--information-darkest);--surface-status-disabled:var(--disabled-darkest);--surface-action-soft:var(--actions-darkest);--surface-action-soft-hover:var(--actions-darker);--surface-action-soft-pressed:var(--actions-dark);--surface-danger-soft:var(--danger-darkest);--surface-danger-soft-hover:var(--danger-darker);--surface-danger-soft-pressed:var(--danger-dark);--surface-highlight-soft:var(--highlight-darkest);--surface-colour-red-soft:var(--red-darkest);--surface-colour-green-soft:var(--green-darkest);--surface-colour-blue-soft:var(--blue-darkest);--surface-colour-orange-soft:var(--orange-darkest);--surface-colour-yellow-soft:var(--yellow-darkest);--surface-colour-purple-soft:var(--purple-darkest);--surface-colour-indigo-soft:var(--indigo-darkest);--surface-colour-cyan-soft:var(--cyan-darkest);--surface-colour-pink-soft:var(--pink-darkest);--surface-colour-teal-soft:var(--teal-darkest);--border-primary:var(--shade-light);--border-secondary:var(--shade-dark);--border-selected:var(--tone-light);--border-action:var(--actions-light);--border-status-error:var(--errors-darker);--border-status-success:var(--success-darker);--border-status-alert:var(--alert-darker);--border-status-info:var(--information-darker);--border-status-disabled:var(--disabled-dark);--border-colour-overlay:#ffffff1a;--fill-primary:var(--tone-lighter);--fill-secondary:var(--tone-darker);--fill-white:var(--tone-lightest);--fill-action:var(--actions-lighter);--fill-highlight:var(--highlight-light);--fill-danger:var(--danger-light);--fill-status-success:var(--success-light);--fill-status-error:var(--errors-light);--fill-status-alert:var(--alert-light);--fill-status-info:var(--information-light);--fill-status-disabled:var(--disabled-dark);--gradient-stop1:var(--indigo-400);--gradient-stop2:var(--cyan-500);--gradient-stop3:var(--cyan-100)}.text-primary{color:var(--label-primary)}.text-secondary{color:var(--label-secondary)}.text-white{color:var(--label-white)}.text-action{color:var(--label-action)}.text-danger{color:var(--label-danger)}.text-success{color:var(--label-status-success)}.text-error{color:var(--label-status-error)}.text-info{color:var(--label-status-info)}.text-warning{color:var(--label-status-alert)}.text-disabled{color:var(--label-status-disabled)}.bg-primary{background-color:var(--surface-primary)}.bg-secondary{background-color:var(--surface-secondary)}.bg-tertiary{background-color:var(--surface-tertiary)}.bg-success{background-color:var(--surface-status-success)}.bg-error{background-color:var(--surface-status-error)}.bg-warning{background-color:var(--surface-status-alert)}.bg-info{background-color:var(--surface-status-info)}.bg-action-soft{background-color:var(--surface-action-soft)}.bg-danger-soft{background-color:var(--surface-danger-soft)}.border-primary{border-color:var(--border-primary)}.border-secondary{border-color:var(--border-secondary)}.border-selected{border-color:var(--border-selected)}.border-action{border-color:var(--border-action)}.border-success{border-color:var(--border-status-success)}.border-error{border-color:var(--border-status-error)}.border-warning{border-color:var(--border-status-alert)}.border-info{border-color:var(--border-status-info)}.sidebar-customisation{display:flex;flex-direction:column;font-family:var(--font-family-sans);gap:16px;width:100%}.sidebar-customisation__header{align-items:center;display:flex;justify-content:space-between}.sidebar-customisation__title{color:var(--label-primary);font-size:1rem;font-weight:600;line-height:1.2;margin:0}.sidebar-customisation__cancel-btn{align-items:center;background:#0000;border:none;border-radius:6px;color:var(--label-danger);cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;height:36px;justify-content:center;padding:0 12px;transition:background-color .2s ease;white-space:nowrap}.sidebar-customisation__cancel-btn:hover{background-color:var(--surface-danger-soft,#ef44441a)}.sidebar-customisation__cancel-btn:focus-visible{outline:2px solid var(--border-action);outline-offset:2px}.sidebar-customisation__edit-btn{align-items:center;background:#0000;border:none;border-radius:6px;color:var(--label-primary);cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:6px;height:36px;justify-content:center;padding:0 12px 0 4px;transition:background-color .2s ease;white-space:nowrap}.sidebar-customisation__edit-btn svg{fill:var(--fill-primary);flex-shrink:0;height:20px;width:20px}.sidebar-customisation__edit-btn:hover{background-color:var(--surface-tertiary)}.sidebar-customisation__edit-btn:focus-visible{outline:2px solid var(--border-action);outline-offset:2px}.sidebar-customisation__grid{display:grid;gap:16px;grid-template-columns:1fr;width:100%}@media (min-width:768px){.sidebar-customisation__grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.sidebar-customisation__grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1536px){.sidebar-customisation__grid{grid-template-columns:repeat(4,1fr)}}.sidebar-customisation__view-grid{display:grid;gap:12px;grid-template-columns:1fr;width:100%}@media (min-width:768px){.sidebar-customisation__view-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.sidebar-customisation__view-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1536px){.sidebar-customisation__view-grid{grid-template-columns:repeat(4,1fr)}}.sidebar-customisation__view-item{align-items:center;background-color:var(--surface-secondary);border:1px solid var(--border-primary);border-radius:8px;display:flex;gap:12px;min-width:0;padding:12px}.sidebar-customisation__view-item--hidden{opacity:.5}.sidebar-customisation__view-icon{align-items:center;color:var(--fill-primary);display:flex;flex-shrink:0;height:24px;justify-content:center;width:24px}.sidebar-customisation__view-icon svg{height:24px;width:24px}.sidebar-customisation__view-label{color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans);font-size:var(--text-small-size);font-weight:var(--text-small-emphasis-weight);line-height:var(--text-small-line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-customisation__actions{align-items:center;display:flex;gap:24px;margin-top:8px}.sidebar-customisation__save-btn{background-color:var(--fill-action);border:none;border-radius:8px;color:var(--labels-main-label-primary,#121e52);color:var(--label-white);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);font-weight:600;line-height:var(--text-regular-line);padding:10px 20px;transition:background-color .2s ease}.sidebar-customisation__save-btn:hover{background-color:var(--actions-dark)}.sidebar-customisation__save-btn:focus-visible{outline:2px solid var(--border-action);outline-offset:2px}.sidebar-customisation__reset-btn{background:none;border:none;color:var(--labels-main-label-primary,#121e52);color:var(--label-secondary);cursor:pointer;font-family:var(--font-family-sans);font-size:var(--text-small-size);font-weight:var(--text-small-weight);font-weight:500;line-height:var(--text-small-line);padding:0}.sidebar-customisation__reset-btn:hover{color:var(--label-primary);text-decoration:underline}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/styles/form/NewInput.scss

@@ -1,4 +1,5 @@
 /* New Form Input Styles based on Figma design tokens */
+@import '../../styles/tokens/typography';
 
 .new-form-input {
   display: flex;
@@ -36,9 +37,7 @@
     }
 
   &__input {
-    font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
-    line-height: var(--text-regular-line, 20px);
+    @include typography('text.regular');
     flex: 1 0 0;
     background-color: var(--surfaces-main-background-secondary);
     border: 2px solid var(--border-primary);

package/dist/v2/styles/form/NewInput.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px}.new-form-input__label-optional{color:var(--labels-main-label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-xs-size,11px);font-weight:400;line-height:var(--text-xs-line,14px);text-align:right}.new-form-input__label-row{align-items:center;display:flex;gap:var(--spacing-reg,16px);justify-content:space-between;width:100%}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);flex:1 0 0;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:40px;padding:5px}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon .icon{flex-shrink:0;height:22px;width:22px}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}.new-form-input__error-text,.new-form-input__helper-text{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-style:normal;font-weight:400;margin-top:2px}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-size:11px;line-height:14px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}";
+var css_248z = ":root{--font-family-sans:\"Geist\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;--font-family-mono:\"Geist Mono\",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--heading-xxl-size:44px;--heading-xxl-line:48px;--heading-xxl-weight:600;--heading-xl-size:32px;--heading-xl-line:36px;--heading-xl-weight:700;--heading-h1-size:24px;--heading-h1-line:28px;--heading-h1-weight:600;--heading-h2-size:20px;--heading-h2-line:24px;--heading-h2-weight:600;--heading-h3-size:17px;--heading-h3-line:20px;--heading-h3-weight:600;--heading-h4-size:15px;--heading-h4-line:18px;--heading-h4-weight:600;--heading-h5-size:13px;--heading-h5-line:16px;--heading-h5-weight:500;--heading-h6-size:11px;--heading-h6-line:14px;--heading-h6-weight:500;--heading-xxl-mobile-size:32px;--heading-xxl-mobile-line:36px;--heading-xxl-mobile-weight:600;--heading-xl-mobile-size:26px;--heading-xl-mobile-line:30px;--heading-xl-mobile-weight:700;--heading-h1-mobile-size:20px;--heading-h1-mobile-line:23px;--heading-h1-mobile-weight:600;--heading-h2-mobile-size:18px;--heading-h2-mobile-line:22px;--heading-h2-mobile-weight:600;--heading-h3-mobile-size:16px;--heading-h3-mobile-line:18px;--heading-h3-mobile-weight:600;--heading-h4-mobile-size:14px;--heading-h4-mobile-line:16px;--heading-h4-mobile-weight:600;--heading-h5-mobile-size:13px;--heading-h5-mobile-line:16px;--heading-h5-mobile-weight:500;--heading-h6-mobile-size:11px;--heading-h6-mobile-line:14px;--heading-h6-mobile-weight:500;--text-xl-size:20px;--text-xl-line:26px;--text-xl-weight:400;--text-large-size:18px;--text-large-line:24px;--text-large-weight:400;--text-regular-size:15px;--text-regular-line:20px;--text-regular-weight:400;--text-small-size:13px;--text-small-line:16px;--text-small-weight:400;--text-small-emphasis-weight:500;--text-small-bold-weight:600;--text-xs-size:10px;--text-xs-line:13px;--text-xs-weight:500;--text-xs-bold-weight:600}.new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px}.new-form-input__label-optional{color:var(--labels-main-label-secondary,#626a90);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-xs-size,11px);font-weight:400;line-height:var(--text-xs-line,14px);text-align:right}.new-form-input__label-row{align-items:center;display:flex;gap:var(--spacing-reg,16px);justify-content:space-between;width:100%}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);color:var(--labels-main-label-primary,#121e52);flex:1 0 0;font-family:var(--font-family-sans);font-size:var(--text-regular-size);font-weight:var(--text-regular-weight);line-height:var(--text-regular-line);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:40px;padding:5px}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon .icon{flex-shrink:0;height:22px;width:22px}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}.new-form-input__error-text,.new-form-input__helper-text{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-style:normal;font-weight:400;margin-top:2px}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-size:11px;line-height:14px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.46",
+  "version": "0.78.5-dev.48",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.1-dev.12",
+    "@licklist/core": "0.36.1-dev.13",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.13",
     "clsx": "2.1.1",
@@ -64,7 +64,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.36.1-dev.12",
+    "@licklist/core": "0.36.1-dev.13",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.13",
     "@mantine/core": "6.0.22",

package/src/v2/components/WYSIWYGEditor/Icons.tsx

@@ -67,10 +67,16 @@ export const DividerIcon = () => (
   </svg>
 );
 
-export const UndoIcon = () => (
+export const HardBreakIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
     <path d="M14.25 16.5H15.375C16.4105 16.5 17.25 15.6605 17.25 14.625C17.25 13.5895 16.4105 12.75 15.375 12.75H5.25V11.25H15.375C17.239 11.25 18.75 12.761 18.75 14.625C18.75 16.489 17.239 18 15.375 18H14.25V19.5L11.25 17.25L14.25 15V16.5ZM5.25 6H18.75V7.5H5.25V6ZM9.75 16.5V18H5.25V16.5H9.75Z" fill="#626A90"/>
   </svg>
+)
+
+export const UndoIcon = () => (
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M6.06131 6.69136C5.88684 6.85818 5.71976 7.03357 5.56136 7.21755C5.32407 7.49319 5.10569 7.78768 4.90881 8.09936C4.77746 8.30727 4.65565 8.52287 4.54421 8.7457C4.48837 8.85736 4.43524 8.9709 4.38469 9.08613C4.2839 9.31587 4.19401 9.5527 4.11539 9.796C4.07598 9.91797 4.03914 10.0416 4.00559 10.1668C3.93079 10.446 3.87328 10.7259 3.83158 11.0051C3.82934 11.0201 3.82751 11.0351 3.82536 11.05C3.81494 11.1228 3.80597 11.1955 3.79774 11.2682C3.79428 11.2986 3.79116 11.329 3.78807 11.3594C3.78326 11.4071 3.77883 11.4547 3.77495 11.5023C3.75889 11.6978 3.75077 11.8926 3.75009 12.0865C3.75003 12.1086 3.74996 12.1307 3.75009 12.1528C3.75089 12.3012 3.75571 12.449 3.76528 12.5961C3.7665 12.6146 3.76808 12.633 3.76943 12.6514C3.82014 13.3498 3.96775 14.0309 4.20377 14.6767L7.62813 11.1377L5.45502 10.5556C5.48179 10.4557 5.51129 10.3567 5.54272 10.2594C5.66865 9.8695 5.83151 9.50078 6.02609 9.15588C6.07459 9.06992 6.12494 8.9854 6.17732 8.90245C6.91264 7.73794 8.02285 6.87449 9.29715 6.43448C9.38818 6.40305 9.48005 6.37386 9.57268 6.34679C10.1284 6.18439 10.7114 6.10131 11.3052 6.10717C11.4042 6.10814 11.5034 6.11157 11.6028 6.11753C12.0008 6.14137 12.4022 6.2058 12.8023 6.31295C13.2945 6.44483 13.7566 6.63317 14.182 6.8709C14.2125 6.88794 14.2416 6.90723 14.2718 6.92476C14.7547 7.20595 15.1899 7.54933 15.5686 7.94261C15.6449 8.02185 15.7186 8.10326 15.7902 8.18637C15.9047 8.31912 16.0139 8.45605 16.1162 8.59793C16.1915 8.70249 16.2625 8.80995 16.3309 8.91903C17.1864 10.2824 17.4949 11.9837 17.0456 13.6609C16.327 16.3424 13.9009 18.1093 11.2507 18.108V19.6078C14.5636 19.6095 17.5967 17.4016 18.4951 14.0497C19.0819 11.8595 18.6347 9.6365 17.4544 7.89634L17.4558 7.89496C17.4301 7.85706 17.4028 7.81984 17.3764 7.78241C17.3604 7.75975 17.3443 7.73721 17.3281 7.71473C17.2772 7.64435 17.2253 7.57483 17.172 7.50619C17.1543 7.48339 17.1368 7.46044 17.1188 7.43783C17.0658 7.37103 17.0112 7.30536 16.9559 7.24034C16.9336 7.21424 16.9115 7.18811 16.8889 7.16231C16.8382 7.10446 16.7867 7.04739 16.7342 6.99105C16.7045 6.95913 16.6747 6.92719 16.6444 6.89576C16.4036 6.64603 16.1448 6.41195 15.869 6.19625C15.8379 6.17193 15.8052 6.14967 15.7737 6.12582C15.715 6.08143 15.657 6.03598 15.5969 5.99323C15.5586 5.96599 15.5191 5.94038 15.4802 5.91382C15.4213 5.87363 15.3622 5.83365 15.302 5.79505C15.2644 5.7709 15.2263 5.74744 15.1881 5.72393C15.1285 5.6872 15.0687 5.65066 15.0079 5.61551C14.959 5.58729 14.9097 5.55983 14.8601 5.53265C14.8028 5.50128 14.745 5.47076 14.6868 5.44081C14.6463 5.41998 14.6055 5.39949 14.5645 5.37935C14.4883 5.3419 14.4111 5.30595 14.3332 5.27093C14.3021 5.25697 14.2713 5.24238 14.24 5.22881C14.1572 5.19297 14.0732 5.15965 13.9886 5.12661C13.953 5.11267 13.9176 5.09792 13.8816 5.08449C13.8148 5.05956 13.7471 5.03652 13.6793 5.01337C13.6344 4.99807 13.5899 4.98161 13.5446 4.9671C13.4284 4.92988 13.3102 4.89544 13.1911 4.86352C12.691 4.72957 12.1893 4.6496 11.6919 4.61976C11.4431 4.60484 11.1954 4.60237 10.9496 4.61217C10.8266 4.61706 10.7042 4.62473 10.5822 4.63564C10.3388 4.65745 10.0974 4.69064 9.85925 4.73577C8.42886 5.00676 7.10753 5.69099 6.06131 6.69136Z" fill="#626A90"/>
+</svg>
 );
 
 export const RedoIcon = () => (
@@ -79,3 +85,9 @@ export const RedoIcon = () => (
   </svg>
 );
 
+export const ClearIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M12.4884 13.549L11.7035 18H10.1804L11.1935 12.2542L5.63599 6.69664L6.69664 5.63599L18.3639 17.3033L17.3032 18.3639L12.4884 13.549ZM11.8295 8.64752L12.0319 7.49995H10.6819L9.18193 5.99995H17.9999V7.49995H13.555L13.1243 9.94234L11.8295 8.64752Z" fill="#626A90"/>
+  </svg>
+);
+

package/src/v2/components/WYSIWYGEditor/WYSIWYGEditor.scss

@@ -9,13 +9,9 @@
   width: 100%;
 
   &__label {
-    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    @include typography('text.small.bold');
     color: var(--label-primary);
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 20px;
-    margin: 0;
+    margin-bottom: var(--spacing-xs);
   }
 
   &__required {
@@ -99,17 +95,13 @@
     min-height: 200px;
     padding: 12px;
     outline: none;
-    font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
-    line-height: var(--text-regular-line, 20px);
-    color: var(--label-primary, #121e52);
+    @include typography('text.regular');
     background-color: var(--surface-secondary, #f8f8fa);
     overflow-y: auto;
     text-align: left;
-
-    @media (max-width: 768px) {
-      font-size: 16px;
-    }
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
 
     &--disabled {
       background-color: var(--surface-status-disabled, #f8f8fa);
@@ -124,17 +116,11 @@
     }
 
     // Styles for content elements
-    h1, h2, p, ul, ol, blockquote, hr {
-      font-family: var(--font-family-sans, 'Geist', sans-serif);
-      font-size: var(--text-regular-size, 15px);
-      line-height: var(--text-regular-line, 20px);
-      color: var(--label-primary, #121e52);
-      overflow-y: auto;
+    h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, hr, .wysiwyg-editor__hard-break {
+      @include typography('text.regular');
       text-align: left;
-
-      @media (max-width: 768px) {
-        font-size: 16px;
-      }
+      word-break: break-word;
+      overflow-wrap: break-word;
 
       &:first-child {
         margin-top: 0;
@@ -142,35 +128,38 @@
     }
 
     h1 {
-      font-size: 22px;
+      @include responsive-heading('heading.h1', 'heading.h1.mobile');
+      margin: 16px 0 12px;
     }
 
     h2 {
-      font-size: 20px;
+      @include responsive-heading('heading.h2', 'heading.h2.mobile');
+      margin: 14px 0 10px;
     }
 
     h3 {
-      font-size: 18px;
+      @include responsive-heading('heading.h3', 'heading.h3.mobile');
+      margin: 12px 0 8px;
     }
 
     h4 {
-      font-size: 16px;
+      @include responsive-heading('heading.h4', 'heading.h4.mobile');
+      margin: 10px 0 6px;
     }
 
     h5 {
-      font-size: 14px;
+      @include responsive-heading('heading.h5', 'heading.h5.mobile');
+      margin: 8px 0 4px;
     }
 
     h6 {
-      font-size: 13px;
+      @include responsive-heading('heading.h6', 'heading.h6.mobile');
+      margin: 6px 0 2px;
     }
 
     p {
+      @include typography('text.regular');
       margin: 8px 0;
-      font-family: var(--font-family-sans, 'Geist', sans-serif);
-      font-size: var(--text-regular-size, 15px);
-      line-height: var(--text-regular-line, 20px);
-      color: var(--label-primary, #121e52);
 
       &:first-child {
         margin-top: 0;
@@ -182,12 +171,9 @@
     }
 
     ul, ol {
+      @include typography('text.regular');
       margin: 8px 0;
       padding-left: 24px;
-      font-family: var(--font-family-sans, 'Geist', sans-serif);
-      font-size: var(--text-regular-size, 15px);
-      line-height: var(--text-regular-line, 20px);
-      color: var(--label-primary, #121e52);
 
       &:first-child {
         margin-top: 0;
@@ -199,23 +185,18 @@
     }
 
     li {
+      @include typography('text.regular');
       margin: 4px 0;
-      font-family: var(--font-family-sans, 'Geist', sans-serif);
-      font-size: var(--text-regular-size, 15px);
-      line-height: var(--text-regular-line, 20px);
-      color: var(--label-primary, #121e52);
     }
 
     blockquote {
+      @include typography('text.regular');
       margin: 12px 0;
       padding: 8px 16px;
       border-left: 4px solid var(--border-selected, #121e52);
       background-color: var(--surface-tertiary, #efefef);
-      font-family: var(--font-family-sans, 'Geist', sans-serif);
-      font-size: var(--text-regular-size, 15px);
-      line-height: var(--text-regular-line, 20px);
-      color: var(--label-secondary, #626a90);
       font-style: italic;
+      color: var(--label-secondary, #626a90);
 
       &:first-child {
         margin-top: 0;
@@ -228,7 +209,7 @@
 
     hr {
       display: block;
-      margin: 16px 0;
+      margin: 20px 0;
       border: none;
       border-top: 2px solid var(--border-primary, #e8e9ef);
       height: 0;
@@ -236,12 +217,8 @@
       opacity: 1;
       visibility: visible;
 
-      &:first-child {
-        margin-top: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
+      &:first-of-type {
+        margin-top: 20px;
       }
     }
 
@@ -300,11 +277,7 @@
   }
 
   &__help-text {
-    font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-regular-size, 15px);
-    font-style: normal;
-    font-weight: 400;
-    line-height: var(--text-regular-line, 20px);
+    @include typography('text.regular');
     margin-top: -5px;
     color: var(--label-secondary);
   }
@@ -315,4 +288,13 @@
     margin-top: 2px;
   }
 
+  &__hard-break {
+    height: 16px;
+    width: 100%;
+    pointer-events: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
 }

package/src/v2/components/WYSIWYGEditor/WYSIWYGEditor.tsx

@@ -13,6 +13,8 @@ import {
   ParagraphIcon,
   QuoteAltIcon,
   DividerIcon,
+  ClearIcon,
+  HardBreakIcon,
 } from './Icons'
 import './WYSIWYGEditor.scss'
 
@@ -22,6 +24,7 @@ export interface WYSIWYGEditorProps {
   helpText?: string
   value?: string
   onChange?: (value: string) => void
+  onClear?: () => void
   placeholder?: string
   disabled?: boolean
 }
@@ -61,16 +64,112 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
   }
 
   const execCommand = (command: string, value?: string) => {
+    // Ensure the command is only executed if the editor is focused or if we can force focus to it
+    const selection = window.getSelection()
+    if (!selection) return
+
+    let isWithinEditor = false
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0)
+      isWithinEditor = contentRef.current?.contains(range.commonAncestorContainer) || false
+    }
+
+    // If not within editor, we focus the editor first to ensure the command applies to it
+    if (!isWithinEditor && contentRef.current) {
+      contentRef.current.focus()
+
+      // We need to re-get the selection after focusing as it might have changed
+      const currentSelection = window.getSelection()
+      if (currentSelection) {
+        // If the editor is empty or we want to ensure cursor is inside, we set it
+        if (contentRef.current.innerHTML === '' || contentRef.current.innerHTML === '<p><br></p>') {
+          const newRange = document.createRange()
+          newRange.selectNodeContents(contentRef.current)
+          newRange.collapse(false)
+          currentSelection.removeAllRanges()
+          currentSelection.addRange(newRange)
+        }
+      }
+    }
+
+    if (command === 'clearFormatting') {
+      if (selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+
+        // Check if selection is inside a list
+        let container = range.commonAncestorContainer as Node | null
+        if (container.nodeType === Node.TEXT_NODE) {
+          container = container.parentNode
+        }
+
+        let isInsideList = false
+        let tempNode = container
+        while (tempNode && tempNode !== contentRef.current) {
+          if (tempNode.nodeName === 'UL' || tempNode.nodeName === 'OL') {
+            isInsideList = true
+            break
+          }
+          tempNode = tempNode.parentNode
+        }
+
+        if (isInsideList) {
+          // If inside a list, we need to toggle off the list first
+          // We check which type of list it is and call the corresponding command
+          let listType = '';
+          let listNode = container;
+          while (listNode && listNode !== contentRef.current) {
+            if (listNode.nodeName === 'UL') {
+              listType = 'insertUnorderedList';
+              break;
+            } else if (listNode.nodeName === 'OL') {
+              listType = 'insertOrderedList';
+              break;
+            }
+            listNode = listNode.parentNode;
+          }
+
+          if (listType) {
+            document.execCommand(listType, false);
+          }
+        }
+
+        // If the selection is collapsed, just apply to current block
+        if (range.collapsed) {
+          document.execCommand('formatBlock', false, '<p>')
+          document.execCommand('removeFormat', false)
+        } else {
+          // If there's a selection, we check if it contains HR
+          const fragment = range.cloneContents()
+          const hasHR = fragment.querySelector('hr')
+
+          if (hasHR) {
+            // If it contains HR, we apply removeFormat but avoid formatBlock P
+            // which would replace the whole selection including HR with a single P
+            document.execCommand('removeFormat', false)
+          } else {
+            document.execCommand('formatBlock', false, '<p>')
+            document.execCommand('removeFormat', false)
+          }
+        }
+        handleInput()
+      }
+      return
+    }
+
     if (command === 'insertHorizontalRule') {
-      const selection = window.getSelection()
-      if (selection && selection.rangeCount > 0) {
+      if (selection.rangeCount > 0) {
         const range = selection.getRangeAt(0)
-        range.deleteContents()
+        // range.deleteContents() // Removed to avoid clearing highlighted text
 
         const hr = document.createElement('hr')
         const p = document.createElement('p')
         p.innerHTML = '<br>' // Ensure the paragraph is "typeable"
 
+        // If something is selected, we collapse to end to insert HR AFTER selection
+        if (!range.collapsed) {
+          range.collapse(false)
+        }
+
         // Insert HR and then the paragraph after it
         range.insertNode(p)
         range.insertNode(hr)
@@ -87,6 +186,42 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
         return
       }
     }
+
+    if (command === 'hardBreak') {
+      if (selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        // range.deleteContents() // Removed to avoid clearing highlighted text
+
+        const spacer = document.createElement('div')
+        spacer.className = 'wysiwyg-editor__hard-break'
+        spacer.innerHTML = '<br>'
+
+        // If something is selected, we collapse to end to insert break AFTER selection
+        // or we can just insert it at current position.
+        // User says "it should just break to new line", usually that implies keeping the text.
+        if (!range.collapsed) {
+          range.collapse(false)
+        }
+
+        range.insertNode(spacer)
+
+        // Create a new paragraph after the spacer to continue typing
+        const p = document.createElement('p')
+        p.innerHTML = '<br>'
+        spacer.after(p)
+
+        // Move cursor to the new paragraph
+        const newRange = document.createRange()
+        newRange.setStart(p, 0)
+        newRange.setEnd(p, 0)
+        newRange.collapse(true)
+        selection.removeAllRanges()
+        selection.addRange(newRange)
+
+        handleInput()
+        return
+      }
+    }
     document.execCommand(command, false, value)
     handleInput()
   }
@@ -136,7 +271,7 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
             type="button"
             className="wysiwyg-editor__toolbar-btn"
             title="Heading 1"
-            onClick={() => execCommand('formatBlock', 'H1')}
+            onClick={() => execCommand('formatBlock', '<h1>')}
           >
             <Heading1Icon />
           </button>
@@ -144,7 +279,7 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
             type="button"
             className="wysiwyg-editor__toolbar-btn"
             title="Heading 2"
-            onClick={() => execCommand('formatBlock', 'H2')}
+            onClick={() => execCommand('formatBlock', '<h2>')}
           >
             <Heading2Icon />
           </button>
@@ -152,10 +287,7 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
             type="button"
             className="wysiwyg-editor__toolbar-btn"
             title="Paragraph"
-            onClick={() => {
-              execCommand('formatBlock', 'P')
-              execCommand('removeFormat')
-            }}
+            onClick={() => execCommand('clearFormatting')}
           >
             <ParagraphIcon />
           </button>
@@ -163,7 +295,7 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
             type="button"
             className="wysiwyg-editor__toolbar-btn"
             title="Quote"
-            onClick={() => execCommand('formatBlock', 'BLOCKQUOTE')}
+            onClick={() => execCommand('formatBlock', '<blockquote>')}
           >
             <QuoteAltIcon />
           </button>
@@ -191,11 +323,23 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
           >
             <DividerIcon />
           </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Hard Break"
+            onClick={() => execCommand('hardBreak')}
+          >
+            <HardBreakIcon />
+          </button>
           <button
             type="button"
             className="wysiwyg-editor__toolbar-btn"
             title="Undo"
             onClick={() => {
+              const selection = window.getSelection()
+              if (selection && contentRef.current && !contentRef.current.contains(selection.anchorNode)) {
+                contentRef.current.focus()
+              }
               if (document.queryCommandEnabled('undo')) {
                 document.execCommand('undo', false)
                 handleInput()
@@ -209,6 +353,10 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
             className="wysiwyg-editor__toolbar-btn"
             title="Redo"
             onClick={() => {
+              const selection = window.getSelection()
+              if (selection && contentRef.current && !contentRef.current.contains(selection.anchorNode)) {
+                contentRef.current.focus()
+              }
               if (document.queryCommandEnabled('redo')) {
                 document.execCommand('redo', false)
                 handleInput()
@@ -217,6 +365,14 @@ export const WYSIWYGEditor: React.FC<WYSIWYGEditorProps> = ({
           >
             <RedoIcon />
           </button>
+          <button
+            type="button"
+            className="wysiwyg-editor__toolbar-btn"
+            title="Clear Formatting"
+            onClick={() => execCommand('clearFormatting')}
+          >
+            <ClearIcon />
+          </button>
         </div>
         <div
           ref={contentRef}