@graphysdk/react-renderer 2.0.0-beta.1786440210947 → 2.0.0-beta.1787130761469

package/dist/editable.css

@@ -1 +1 @@
-.cml7ha0{display:contents}.efjmb40{z-index:var(--graphy-z-index-editor-popover)}.efjmb41{min-inline-size:180px;padding:var(--graphy-space-xs);background:var(--graphy-overlay-background);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-md);box-shadow:var(--graphy-elevation-md);color:var(--graphy-text-primary);transform-origin:var(--transform-origin);outline:none;flex-direction:column;transition:transform .15s ease-out,opacity .15s ease-out;display:flex}.efjmb41[data-starting-style]{opacity:0;transform:scale(.92)}.efjmb42{align-items:center;gap:var(--graphy-space-sm);padding:var(--graphy-space-sm) var(--graphy-space-md);border-radius:var(--graphy-radii-sm);cursor:pointer;color:var(--graphy-text-primary);font:var(--graphy-font-menu-item-label);-webkit-user-select:none;user-select:none;outline:none;display:flex}.efjmb42[data-highlighted],.efjmb42[data-popup-open]{background:var(--graphy-toolbar-button-background-color-hovered)}.efjmb42[data-disabled]{opacity:.4;cursor:default}.efjmb43{white-space:nowrap;flex:1}.efjmb44{block-size:1px;margin-block:var(--graphy-space-xs);background:var(--graphy-border-10)}.efjmb44:first-child,.efjmb44:last-child{display:none}.efjmb45{opacity:.6;flex-shrink:0;transform:rotate(-90deg)}@media (prefers-reduced-motion:reduce){.efjmb41{transition:none}}._1qe7q450{gap:var(--graphy-space-sm);padding:var(--graphy-space-xs);flex-direction:column;min-inline-size:200px;display:flex}._1qe7q451{padding:var(--graphy-space-sm) var(--graphy-space-md);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-sm);background:var(--graphy-overlay-background);color:var(--graphy-text-primary);font:var(--graphy-font-menu-item-label);outline:none}._1qe7q452{padding:var(--graphy-space-sm) var(--graphy-space-md);-webkit-appearance:none;appearance:none;border-radius:var(--graphy-radii-sm);background:var(--graphy-grey-70);color:var(--graphy-grey-0);font:var(--graphy-font-menu-item-label);cursor:pointer;border:none;align-self:flex-start}._1qe7q452:disabled{opacity:.4;cursor:default}._1aafi1g0{flex-shrink:0;display:inline-flex;position:relative}._1aafi1g1{background:var(--graphy-alert);border-radius:1px;block-size:2px;inline-size:80%;position:absolute;top:50%;transform:translate(-50%,-50%)rotate(45deg)}._1aafi1g1:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:50%}._1aafi1g1:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:50%}._1aafi1g1:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:50%}._1aafi1g1:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:50%}.ceeojg0{gap:var(--graphy-space-xs);padding:var(--graphy-space-xs);grid-template-columns:repeat(5,1fr);display:grid}.ceeojg1{block-size:36px;inline-size:36px;padding:var(--graphy-space-xs);-webkit-appearance:none;appearance:none;border-radius:var(--graphy-radii-sm);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:flex}.ceeojg1:hover,.ceeojg1[data-highlighted]{background:var(--graphy-toolbar-button-background-color-hovered)}.ceeojg2{object-fit:contain;block-size:100%;inline-size:100%}.q7gcrz2{pointer-events:none;position:absolute}.q7gcrz3{box-sizing:border-box;pointer-events:auto;block-size:36px;max-inline-size:100%;transform:translateX(clamp(0px, calc(var(--q7gcrz0) - 50%), calc(var(--q7gcrz1) - 100%)));position:absolute;top:0}.q7gcrz3:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.q7gcrz3:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.q7gcrz3:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.q7gcrz3:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.q7gcrz4{color:var(--graphy-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.q7gcrz5{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}.q7gcrz6{border:1px solid var(--graphy-border-100);box-sizing:border-box;border-radius:50%;block-size:16px;inline-size:16px}.q7gcrz7{z-index:var(--graphy-z-index-editor-popover)}.q7gcrz8{min-inline-size:200px;padding:var(--graphy-space-xs);background:var(--graphy-overlay-background);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-md);box-shadow:var(--graphy-elevation-md);color:var(--graphy-text-primary);outline:none;flex-direction:column;display:flex}.q7gcrz9{align-items:center;gap:var(--graphy-space-sm);padding:var(--graphy-space-sm) var(--graphy-space-md);border-radius:var(--graphy-radii-sm);cursor:pointer;color:var(--graphy-text-primary);font:var(--graphy-font-menu-item-label);-webkit-user-select:none;user-select:none;outline:none;display:flex}.q7gcrz9[data-highlighted]{background:var(--graphy-toolbar-button-background-color-hovered)}.q7gcrz9[data-selected=true]{background:var(--graphy-toolbar-button-background-color-selected)}.q7gcrz9[data-disabled]{cursor:default;opacity:.5}.q7gcrza{color:var(--graphy-text-secondary);font-variant-numeric:tabular-nums;margin-inline-start:auto}.q7gcrzb{color:var(--graphy-alert)}.q7gcrzc{justify-content:center;align-items:center;gap:var(--graphy-space-xs);block-size:28px;padding:0 var(--graphy-space-sm);background:var(--graphy-toolbar-button-background-color);border-radius:var(--graphy-radii-md);cursor:pointer;color:var(--graphy-text-primary);font:var(--graphy-font-button);white-space:nowrap;border:none;display:inline-flex}.q7gcrzc:hover:not(:disabled){background:var(--graphy-toolbar-button-background-color-hovered)}.q7gcrzc[data-popup-open]{background:var(--graphy-toolbar-button-background-color-selected)}.q7gcrzc:disabled{cursor:default;opacity:.5}.q7gcrzd{inline-size:28px;padding:0}.q7gcrze{min-inline-size:0}.uz3g760{align-items:center;gap:var(--graphy-space-xs);inline-size:100%;block-size:var(--graphy-editor-control-height);min-inline-size:0;padding:0 var(--graphy-space-sm);background:var(--graphy-raised-background);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-md);color:var(--graphy-text-primary);font:var(--graphy-font-editor-control-value);text-align:start;transition:border-color .1s cubic-bezier(.55,.085,.68,.53),background .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex}.uz3g760:hover:not(:disabled){border-color:var(--graphy-border-50)}.uz3g760:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}.uz3g760:has(:focus-visible){box-shadow:inset 0 0 0 2px var(--graphy-brand)}.uz3g760[data-popup-open]{border-color:var(--graphy-border-50)}.uz3g760[data-error=true]:not(:disabled){border-color:var(--graphy-alert)}.uz3g760:disabled{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.uz3g760:has(:disabled){color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.uz3g760[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.uz3g761{min-inline-size:0;color:inherit;font:inherit;background:0 0;border:none;outline:none;flex:1;padding:0}.uz3g761::placeholder{color:var(--graphy-text-disabled)}.uz3g761:disabled{cursor:not-allowed}.ydgo3h0{pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;margin-top:-12px;margin-left:-12px;display:flex;position:absolute}.ydgo3h0:active{cursor:grabbing}.ydgo3h0:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand);outline:none}.ydgo3h1{box-sizing:border-box;background:var(--graphy-graph-background);border:2px solid var(--graphy-annotation-frame-border-color);border-radius:50%;width:10px;height:10px}.ydgo3h2{box-sizing:border-box;border:2px solid var(--graphy-annotation-frame-border-color);border-radius:6px;position:absolute}._1tyillx1{background:var(--graphy-overlay-background);width:32px;height:32px;color:var(--graphy-edit-menu-trigger-icon-color);outline:3px solid var(--_1tyillx0);filter:drop-shadow(0 4px 4px #0e0e3414)drop-shadow(0 0 4px #0f0f181f);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;margin-top:-16px;margin-left:-16px;transition:transform .25s linear;display:flex;position:absolute}._1tyillx2{transform:scale(.5)}._1tyillx3{transform:scale(.75)}._1tyillx4{transform:scale(1)}._1tyillx5{transition:transform .25s linear;display:flex}._1tyillx6{transform:rotate(0)}._1tyillx7{transform:rotate(45deg)}@media (prefers-reduced-motion:reduce){._1tyillx1,._1tyillx5{transition:none}}.woi4bh0{flex-shrink:0;display:inline-flex}.woi4bh1{white-space:nowrap;text-overflow:ellipsis;min-inline-size:0;overflow:hidden}.woi4bh2{text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.woi4bh3{justify-content:center;align-items:center;gap:var(--graphy-space-xs);min-inline-size:0;block-size:var(--graphy-editor-control-height);padding:0 var(--graphy-space-sm);border-radius:var(--graphy-radii-md);cursor:pointer;font:var(--graphy-font-editor-control-value);border:1px solid #0000;transition:background .1s cubic-bezier(.55,.085,.68,.53),border-color .1s cubic-bezier(.55,.085,.68,.53),color .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex}.woi4bh3:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}.woi4bh3:active:not(:disabled){background:var(--graphy-sunken-background)}.woi4bh3:disabled{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.woi4bh4{background:var(--graphy-raised-background);border-color:var(--graphy-border-10);inline-size:100%;color:var(--graphy-text-primary)}.woi4bh4:hover:not(:disabled){border-color:var(--graphy-border-50)}.woi4bh5{block-size:auto;min-block-size:68px;inline-size:100%;padding:var(--graphy-space-sm);background:var(--graphy-raised-background);color:var(--graphy-text-secondary);border-color:#0000;flex-direction:column}.woi4bh5:hover:not(:disabled){color:var(--graphy-text-primary)}.eh8dvc0{inline-size:100%;min-inline-size:0;display:flex}.eh8dvc1{cursor:text}.eh8dvc2{text-align:end;font-variant-numeric:tabular-nums}.eh8dvc3{color:var(--graphy-text-secondary);font:var(--graphy-font-editor-caption);-webkit-user-select:none;user-select:none;flex-shrink:0}._1b7s5f0{gap:var(--graphy-space-xs);inline-size:100%;display:grid}._1b7s5f1{grid-template-columns:repeat(1,minmax(0,1fr))}._1b7s5f2{grid-template-columns:repeat(2,minmax(0,1fr))}._1b7s5f3{grid-template-columns:repeat(3,minmax(0,1fr))}._1b7s5f4{grid-template-columns:repeat(4,minmax(0,1fr))}._1b7s5f5{grid-template-columns:repeat(5,minmax(0,1fr))}._1b7s5f6{grid-template-columns:repeat(6,minmax(0,1fr))}._1b7s5f7{justify-content:center;align-items:center;gap:var(--graphy-space-xxs);min-block-size:48px;padding:var(--graphy-space-xs);background:var(--graphy-raised-background);border-radius:var(--graphy-radii-md);cursor:pointer;color:var(--graphy-text-secondary);font-size:var(--graphy-font-size-xxs);border:1px solid #0000;flex-direction:column;transition:color .1s cubic-bezier(.55,.085,.68,.53),border-color .1s cubic-bezier(.55,.085,.68,.53),background .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex}._1b7s5f7:hover:not([data-disabled]){color:var(--graphy-text-primary)}._1b7s5f7:active:not([data-disabled]){background:var(--graphy-sunken-background)}._1b7s5f7[data-checked]{border-color:var(--graphy-brand);color:var(--graphy-text-primary)}._1b7s5f7:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}._1b7s5f7[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}._1b7s5f8{min-block-size:0;padding:var(--graphy-space-xs)}._1b7s5f9{text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}._1g5x15w0{cursor:pointer}._1g5x15w1{white-space:nowrap;text-overflow:ellipsis;flex:1;min-inline-size:0;overflow:hidden}._1g5x15w2{color:var(--graphy-text-disabled)}._1g5x15w3{color:var(--graphy-icon-secondary);flex-shrink:0;align-items:center;display:flex}._1g5x15w4{z-index:var(--graphy-z-index-toolbar-popover)}._1g5x15w5{gap:var(--graphy-space-xxs);max-block-size:min(320px, var(--available-height));padding:var(--graphy-space-xs);background:var(--graphy-overlay-background);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-md);box-shadow:var(--graphy-elevation-md);color:var(--graphy-text-primary);outline:none;flex-direction:column;display:flex;overflow-y:auto}._1g5x15w6{align-items:center;gap:var(--graphy-space-sm);padding:var(--graphy-space-xs) var(--graphy-space-sm);border-radius:var(--graphy-radii-sm);cursor:pointer;color:var(--graphy-text-primary);font:var(--graphy-font-editor-control-value);-webkit-user-select:none;user-select:none;outline:none;transition:background .1s cubic-bezier(.55,.085,.68,.53),color .1s cubic-bezier(.55,.085,.68,.53);display:flex}._1g5x15w6[data-highlighted],._1g5x15w6[data-selected]{background:var(--graphy-raised-background)}._1g5x15w6[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}._1g5x15w7{gap:var(--graphy-space-xxs);flex-direction:column;min-inline-size:0;display:flex}._1g5x15w8{color:var(--graphy-text-secondary);font:var(--graphy-font-select-description)}.vod76w0{align-items:center;gap:var(--graphy-space-sm);inline-size:100%;display:flex}.vod76w1{min-inline-size:0;block-size:var(--graphy-editor-control-height);flex:1;padding-inline-start:11px;padding-inline-end:11px}.vod76w1[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.vod76w2{cursor:pointer;align-items:center;block-size:100%;inline-size:100%;display:flex}.vod76w2[data-disabled]{cursor:not-allowed}.vod76w3{background:var(--graphy-border-10);border-radius:999px;block-size:4px;inline-size:100%}.vod76w4{background:color-mix(in srgb, transparent, var(--graphy-brand) 50%);border-radius:999px;block-size:100%;transition:background .1s cubic-bezier(.55,.085,.68,.53)}.vod76w1:not([data-disabled]):hover .vod76w4{background:var(--graphy-brand)}.vod76w1:has(:focus-visible) .vod76w4{background:var(--graphy-brand)}.vod76w4[data-dragging]{background:var(--graphy-brand)}.vod76w5{background:var(--graphy-grey-100);border:1px solid var(--graphy-border-50);block-size:14px;inline-size:14px;box-shadow:var(--graphy-elevation-xs);cursor:grab;border-radius:50%;transition:border-color .1s cubic-bezier(.55,.085,.68,.53),box-shadow .1s cubic-bezier(.55,.085,.68,.53)}.vod76w1:not([data-disabled]):hover .vod76w5,.vod76w5[data-dragging]{border-color:var(--graphy-border-100);box-shadow:0 0 0 4px color-mix(in srgb, transparent, var(--graphy-brand) 20%), var(--graphy-elevation-xs)}.vod76w5:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand), var(--graphy-elevation-xs)}.vod76w5[data-dragging]{cursor:grabbing;transition:none}.vod76w6{min-inline-size:40px;color:var(--graphy-text-secondary);font:var(--graphy-font-editor-control-value);text-align:end;font-variant-numeric:tabular-nums;flex-shrink:0}._1hyrlw60{pointer-events:auto;background:var(--graphy-border-10);cursor:pointer;border:none;border-radius:999px;flex-shrink:0;block-size:20px;inline-size:36px;padding:0;transition:background .12s;position:relative}._1hyrlw60[data-checked]{background:color-mix(in srgb, transparent, var(--graphy-brand) 50%)}._1hyrlw60:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}._1hyrlw60[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}._1hyrlw61{block-size:16px;inline-size:16px;margin:var(--graphy-space-xxs);background:var(--graphy-grey-100);box-shadow:var(--graphy-elevation-xs);border-radius:50%;transition:translate .12s,background .12s;display:block}._1hyrlw61[data-checked]{background:var(--graphy-brand);translate:16px}.tpcnun0{cursor:text}.cnu9yl0{inline-size:100%;padding:var(--graphy-space-xxs);gap:var(--graphy-space-xxs);background:var(--graphy-sunken-background);border-radius:var(--graphy-radii-md);display:flex}.cnu9yl1{justify-content:center;align-items:center;gap:var(--graphy-space-xs);min-inline-size:0;block-size:calc(var(--graphy-editor-control-height) - var(--graphy-space-xxs) * 2);padding:0 var(--graphy-space-sm);border-radius:var(--graphy-radii-sm);cursor:pointer;color:var(--graphy-text-secondary);font:var(--graphy-font-editor-control-value);white-space:nowrap;background:0 0;border:none;flex:auto;transition:color .1s cubic-bezier(.55,.085,.68,.53),background .1s cubic-bezier(.55,.085,.68,.53),box-shadow .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex}.cnu9yl1:hover:not([data-disabled]):not([data-checked]){color:var(--graphy-text-primary)}.cnu9yl1:active:not([data-disabled]):not([data-checked]){background:var(--graphy-raised-background)}.cnu9yl1[data-checked]{background:var(--graphy-default-background);box-shadow:var(--graphy-elevation-xs);color:var(--graphy-text-primary)}.cnu9yl1:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}.cnu9yl1[data-checked]:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand), var(--graphy-elevation-xs)}.cnu9yl1[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.cnu9yl2{gap:var(--graphy-space-xs);block-size:auto;min-block-size:34px;padding-block:var(--graphy-space-sm);font-size:var(--graphy-font-size-xxs);flex-direction:column;padding-inline-start:0;padding-inline-end:0}.cnu9yl3{white-space:nowrap;text-overflow:ellipsis;min-inline-size:0;max-inline-size:100%;overflow:hidden}._12lhx9e0{align-items:center;gap:var(--graphy-space-sm);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}._139ohwv0{gap:var(--graphy-space-md);flex-direction:column;display:flex}._1jlczkt0{background:var(--graphy-default-background);inline-size:100%;color:var(--graphy-text-primary);font-family:var(--graphy-font-family-default);font-weight:var(--graphy-font-weight-medium);-webkit-user-select:none;user-select:none;font-size:calc(10px * var(--graphy-text-scale));flex-direction:column;display:flex;overflow:hidden auto}.pr583x0{gap:var(--graphy-space-xxs);flex-direction:column;display:flex}.pr583x1{align-items:center;gap:var(--graphy-space-sm);min-block-size:var(--graphy-editor-control-height);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.pr583x2{justify-content:flex-end;inline-size:100%;min-inline-size:0;display:flex}.pr583x3{color:var(--graphy-text-secondary);font:var(--graphy-font-editor-control-label);cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0}.pr583x4{line-height:var(--graphy-editor-control-height)}.pr583x5{align-items:center;gap:var(--graphy-space-xs);min-block-size:var(--graphy-editor-control-height);display:flex}._40zvwv0{padding-block:var(--graphy-space-md);flex-direction:column;display:flex}._40zvwv0+._40zvwv0{border-block-start:1px solid var(--graphy-border-10)}._40zvwv1{align-items:center;gap:var(--graphy-space-xl);min-block-size:36px;inline-size:100%;display:flex;position:relative}._40zvwv2{border-radius:var(--graphy-radii-sm);cursor:pointer;background:0 0;border:none;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}._40zvwv3{pointer-events:none;color:var(--graphy-text-primary);font:var(--graphy-font-editor-section-title);flex-shrink:0;position:relative}._40zvwv4{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none}._40zvwv5{pointer-events:none;white-space:nowrap;text-overflow:ellipsis;text-align:end;min-inline-size:0;color:var(--graphy-text-secondary);font:var(--graphy-font-editor-caption);line-height:var(--graphy-font-line-height-sm);flex:1;position:relative;overflow:hidden}._40zvwv6{flex:1;justify-content:flex-end;min-inline-size:0;display:flex;position:relative}._40zvwv7{color:var(--graphy-icon-primary);flex-shrink:0;align-items:center;margin-inline-start:auto;display:inline-flex;position:relative}._40zvwv8{pointer-events:none;inline-size:var(--graphy-editor-control-height);block-size:var(--graphy-editor-control-height);border-radius:var(--graphy-radii-md);color:var(--graphy-text-disabled);background:0 0;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;transition:background .1s cubic-bezier(.55,.085,.68,.53),rotate .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex;position:relative}._40zvwv7+._40zvwv8{margin-inline-start:0}._40zvwv0[data-open] ._40zvwv8{background:var(--graphy-raised-background);rotate:90deg}._40zvwv2:focus-visible~._40zvwv8{box-shadow:inset 0 0 0 2px var(--graphy-brand)}@media (prefers-reduced-motion:reduce){._40zvwv8{transition:none}}.qdaoth0{fill:var(--graphy-icon-sticker-background)}
+.cml7ha0{display:contents}.efjmb40{z-index:var(--graphy-z-index-editor-popover)}.efjmb41{min-inline-size:180px;padding:var(--graphy-space-xs);background:var(--graphy-overlay-background);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-md);box-shadow:var(--graphy-elevation-md);color:var(--graphy-text-primary);transform-origin:var(--transform-origin);outline:none;flex-direction:column;transition:transform .15s ease-out,opacity .15s ease-out;display:flex}.efjmb41[data-starting-style]{opacity:0;transform:scale(.92)}.efjmb42{align-items:center;gap:var(--graphy-space-sm);padding:var(--graphy-space-sm) var(--graphy-space-md);border-radius:var(--graphy-radii-sm);cursor:pointer;color:var(--graphy-text-primary);font:var(--graphy-font-menu-item-label);-webkit-user-select:none;user-select:none;outline:none;display:flex}.efjmb42[data-highlighted],.efjmb42[data-popup-open]{background:var(--graphy-toolbar-button-background-color-hovered)}.efjmb42[data-disabled]{opacity:.4;cursor:default}.efjmb43{white-space:nowrap;flex:1}.efjmb44{block-size:1px;margin-block:var(--graphy-space-xs);background:var(--graphy-border-10)}.efjmb44:first-child,.efjmb44:last-child{display:none}.efjmb45{opacity:.6;flex-shrink:0;transform:rotate(-90deg)}@media (prefers-reduced-motion:reduce){.efjmb41{transition:none}}._1qe7q450{gap:var(--graphy-space-sm);padding:var(--graphy-space-xs);flex-direction:column;min-inline-size:200px;display:flex}._1qe7q451{padding:var(--graphy-space-sm) var(--graphy-space-md);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-sm);background:var(--graphy-overlay-background);color:var(--graphy-text-primary);font:var(--graphy-font-menu-item-label);outline:none}._1qe7q452{padding:var(--graphy-space-sm) var(--graphy-space-md);-webkit-appearance:none;appearance:none;border-radius:var(--graphy-radii-sm);background:var(--graphy-grey-70);color:var(--graphy-grey-0);font:var(--graphy-font-menu-item-label);cursor:pointer;border:none;align-self:flex-start}._1qe7q452:disabled{opacity:.4;cursor:default}._1aafi1g0{flex-shrink:0;display:inline-flex;position:relative}._1aafi1g1{background:var(--graphy-alert);border-radius:1px;block-size:2px;inline-size:80%;position:absolute;top:50%;transform:translate(-50%,-50%)rotate(45deg)}._1aafi1g1:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:50%}._1aafi1g1:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:50%}._1aafi1g1:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:50%}._1aafi1g1:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:50%}.ceeojg0{gap:var(--graphy-space-xs);padding:var(--graphy-space-xs);grid-template-columns:repeat(5,1fr);display:grid}.ceeojg1{block-size:36px;inline-size:36px;padding:var(--graphy-space-xs);-webkit-appearance:none;appearance:none;border-radius:var(--graphy-radii-sm);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:flex}.ceeojg1:hover,.ceeojg1[data-highlighted]{background:var(--graphy-toolbar-button-background-color-hovered)}.ceeojg2{object-fit:contain;block-size:100%;inline-size:100%}.l8tsqe0{pointer-events:none;position:absolute;overflow:visible}.pvjfpx2{pointer-events:none;position:absolute}.pvjfpx3{box-sizing:border-box;pointer-events:auto;block-size:36px;max-inline-size:100%;transform:translateX(clamp(0px, calc(var(--pvjfpx0) - 50%), calc(var(--pvjfpx1) - 100%)));position:absolute;top:0}.pvjfpx3:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.pvjfpx3:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:0}.pvjfpx3:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.pvjfpx3:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:0}.pvjfpx4{border:1px solid var(--graphy-border-100);box-sizing:border-box;border-radius:50%;block-size:16px;inline-size:16px}.pvjfpx5{justify-content:center;align-items:center;gap:var(--graphy-space-xs);block-size:28px;padding:0 var(--graphy-space-sm);background:var(--graphy-toolbar-button-background-color);border-radius:var(--graphy-radii-md);cursor:pointer;color:var(--graphy-text-primary);font:var(--graphy-font-button);white-space:nowrap;border:none;display:inline-flex}.pvjfpx5:hover:not(:disabled){background:var(--graphy-toolbar-button-background-color-hovered)}.pvjfpx5[data-popup-open]{background:var(--graphy-toolbar-button-background-color-selected)}.pvjfpx5:disabled{cursor:default;opacity:.5}.pvjfpx6{inline-size:28px;padding:0}.pvjfpx7[aria-pressed=true]{background:var(--graphy-toolbar-button-background-color-selected)}.pvjfpx8{min-inline-size:0}._112xh5c0{color:var(--graphy-text-secondary);margin-inline-start:auto;display:inline-flex}.uz3g760{align-items:center;gap:var(--graphy-space-xs);inline-size:100%;block-size:var(--graphy-editor-control-height);min-inline-size:0;padding:0 var(--graphy-space-sm);background:var(--graphy-raised-background);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-md);color:var(--graphy-text-primary);font:var(--graphy-font-editor-control-value);text-align:start;transition:border-color .1s cubic-bezier(.55,.085,.68,.53),background .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex}.uz3g760:hover:not(:disabled){border-color:var(--graphy-border-50)}.uz3g760:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}.uz3g760:has(:focus-visible){box-shadow:inset 0 0 0 2px var(--graphy-brand)}.uz3g760[data-popup-open]{border-color:var(--graphy-border-50)}.uz3g760[data-error=true]:not(:disabled){border-color:var(--graphy-alert)}.uz3g760:disabled{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.uz3g760:has(:disabled){color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.uz3g760[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.uz3g761{min-inline-size:0;color:inherit;font:inherit;background:0 0;border:none;outline:none;flex:1;padding:0}.uz3g761::placeholder{color:var(--graphy-text-disabled)}.uz3g761:disabled{cursor:not-allowed}._1me29t10{pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;width:24px;height:24px;margin-top:-12px;margin-left:-12px;position:absolute}._1me29t10:active{cursor:grabbing}._1me29t10:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand);outline:none}.q7gcrz0{color:var(--graphy-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.q7gcrz1{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}.q7gcrz2{color:var(--graphy-text-secondary);font-variant-numeric:tabular-nums;margin-inline-start:auto}.q7gcrz3{color:var(--graphy-alert)}.ydgo3h0{pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;margin-top:-12px;margin-left:-12px;display:flex;position:absolute}.ydgo3h0:active{cursor:grabbing}.ydgo3h0:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand);outline:none}.ydgo3h1{box-sizing:border-box;background:var(--graphy-graph-background);border:2px solid var(--graphy-annotation-frame-border-color);border-radius:50%;width:10px;height:10px}.ydgo3h2{box-sizing:border-box;border:2px solid var(--graphy-annotation-frame-border-color);border-radius:6px;position:absolute}._1ee8fau0{box-sizing:border-box;border-style:solid;border-width:2px;border-radius:4px;position:absolute}._1ee8fau1{border-color:color-mix(in srgb, var(--graphy-annotation-frame-border-color) 50%, transparent)}._1ee8fau2{border-color:var(--graphy-annotation-frame-border-color)}._1ee8fau3{box-sizing:border-box;background:var(--graphy-graph-background);border-style:solid;border-width:2px;border-radius:50%;width:8px;height:8px;margin-top:-4px;margin-left:-4px;position:absolute}._1ee8fau4{border-color:color-mix(in srgb, var(--graphy-annotation-frame-border-color) 50%, transparent)}._1ee8fau5{border-color:var(--graphy-annotation-frame-border-color)}._1a8z7ku0{box-sizing:border-box;background:var(--graphy-annotation-frame-border-color);border:2px solid var(--graphy-graph-background);border-radius:50%;width:12px;height:12px}._1a8z7ku1{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;margin-top:-12px;margin-left:-12px;display:flex;position:absolute}._1a8z7ku1[data-corner=top-left],._1a8z7ku1[data-corner=bottom-right]{cursor:nwse-resize}._1a8z7ku1[data-corner=top-right],._1a8z7ku1[data-corner=bottom-left]{cursor:nesw-resize}._1a8z7ku1:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand);outline:none}._1tyillx1{background:var(--graphy-overlay-background);width:32px;height:32px;color:var(--graphy-edit-menu-trigger-icon-color);outline:3px solid var(--_1tyillx0);filter:drop-shadow(0 4px 4px #0e0e3414)drop-shadow(0 0 4px #0f0f181f);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;margin-top:-16px;margin-left:-16px;transition:transform .25s linear;display:flex;position:absolute}._1tyillx2{transform:scale(.5)}._1tyillx3{transform:scale(.75)}._1tyillx4{transform:scale(1)}._1tyillx5{transition:transform .25s linear;display:flex}._1tyillx6{transform:rotate(0)}._1tyillx7{transform:rotate(45deg)}@media (prefers-reduced-motion:reduce){._1tyillx1,._1tyillx5{transition:none}}.woi4bh0{flex-shrink:0;display:inline-flex}.woi4bh1{white-space:nowrap;text-overflow:ellipsis;min-inline-size:0;overflow:hidden}.woi4bh2{text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.woi4bh3{justify-content:center;align-items:center;gap:var(--graphy-space-xs);min-inline-size:0;block-size:var(--graphy-editor-control-height);padding:0 var(--graphy-space-sm);border-radius:var(--graphy-radii-md);cursor:pointer;font:var(--graphy-font-editor-control-value);border:1px solid #0000;transition:background .1s cubic-bezier(.55,.085,.68,.53),border-color .1s cubic-bezier(.55,.085,.68,.53),color .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex}.woi4bh3:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}.woi4bh3:active:not(:disabled){background:var(--graphy-sunken-background)}.woi4bh3:disabled{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.woi4bh4{background:var(--graphy-raised-background);border-color:var(--graphy-border-10);inline-size:100%;color:var(--graphy-text-primary)}.woi4bh4:hover:not(:disabled){border-color:var(--graphy-border-50)}.woi4bh5{block-size:auto;min-block-size:68px;inline-size:100%;padding:var(--graphy-space-sm);background:var(--graphy-raised-background);color:var(--graphy-text-secondary);border-color:#0000;flex-direction:column}.woi4bh5:hover:not(:disabled){color:var(--graphy-text-primary)}.eh8dvc0{inline-size:100%;min-inline-size:0;display:flex}.eh8dvc1{cursor:text}.eh8dvc2{text-align:end;font-variant-numeric:tabular-nums}.eh8dvc3{color:var(--graphy-text-secondary);font:var(--graphy-font-editor-caption);-webkit-user-select:none;user-select:none;flex-shrink:0}._1b7s5f0{gap:var(--graphy-space-xs);inline-size:100%;display:grid}._1b7s5f1{grid-template-columns:repeat(1,minmax(0,1fr))}._1b7s5f2{grid-template-columns:repeat(2,minmax(0,1fr))}._1b7s5f3{grid-template-columns:repeat(3,minmax(0,1fr))}._1b7s5f4{grid-template-columns:repeat(4,minmax(0,1fr))}._1b7s5f5{grid-template-columns:repeat(5,minmax(0,1fr))}._1b7s5f6{grid-template-columns:repeat(6,minmax(0,1fr))}._1b7s5f7{justify-content:center;align-items:center;gap:var(--graphy-space-xxs);min-block-size:48px;padding:var(--graphy-space-xs);background:var(--graphy-raised-background);border-radius:var(--graphy-radii-md);cursor:pointer;color:var(--graphy-text-secondary);font-size:var(--graphy-font-size-xxs);border:1px solid #0000;flex-direction:column;transition:color .1s cubic-bezier(.55,.085,.68,.53),border-color .1s cubic-bezier(.55,.085,.68,.53),background .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex}._1b7s5f7:hover:not([data-disabled]){color:var(--graphy-text-primary)}._1b7s5f7:active:not([data-disabled]){background:var(--graphy-sunken-background)}._1b7s5f7[data-checked]{border-color:var(--graphy-brand);color:var(--graphy-text-primary)}._1b7s5f7:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}._1b7s5f7[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}._1b7s5f8{min-block-size:0;padding:var(--graphy-space-xs)}._1b7s5f9{text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}._1g5x15w0{cursor:pointer}._1g5x15w1{white-space:nowrap;text-overflow:ellipsis;flex:1;min-inline-size:0;overflow:hidden}._1g5x15w2{color:var(--graphy-text-disabled)}._1g5x15w3{color:var(--graphy-icon-secondary);flex-shrink:0;align-items:center;display:flex}._1g5x15w4{z-index:var(--graphy-z-index-toolbar-popover)}._1g5x15w5{gap:var(--graphy-space-xxs);max-block-size:min(320px, var(--available-height));padding:var(--graphy-space-xs);background:var(--graphy-overlay-background);border:1px solid var(--graphy-border-10);border-radius:var(--graphy-radii-md);box-shadow:var(--graphy-elevation-md);color:var(--graphy-text-primary);outline:none;flex-direction:column;display:flex;overflow-y:auto}._1g5x15w6{align-items:center;gap:var(--graphy-space-sm);padding:var(--graphy-space-xs) var(--graphy-space-sm);border-radius:var(--graphy-radii-sm);cursor:pointer;color:var(--graphy-text-primary);font:var(--graphy-font-editor-control-value);-webkit-user-select:none;user-select:none;outline:none;transition:background .1s cubic-bezier(.55,.085,.68,.53),color .1s cubic-bezier(.55,.085,.68,.53);display:flex}._1g5x15w6[data-highlighted],._1g5x15w6[data-selected]{background:var(--graphy-raised-background)}._1g5x15w6[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}._1g5x15w7{gap:var(--graphy-space-xxs);flex-direction:column;min-inline-size:0;display:flex}._1g5x15w8{color:var(--graphy-text-secondary);font:var(--graphy-font-select-description)}.vod76w0{align-items:center;gap:var(--graphy-space-sm);inline-size:100%;display:flex}.vod76w1{min-inline-size:0;block-size:var(--graphy-editor-control-height);flex:1;padding-inline-start:11px;padding-inline-end:11px}.vod76w1[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.vod76w2{cursor:pointer;align-items:center;block-size:100%;inline-size:100%;display:flex}.vod76w2[data-disabled]{cursor:not-allowed}.vod76w3{background:var(--graphy-border-10);border-radius:999px;block-size:4px;inline-size:100%}.vod76w4{background:color-mix(in srgb, transparent, var(--graphy-brand) 50%);border-radius:999px;block-size:100%;transition:background .1s cubic-bezier(.55,.085,.68,.53)}.vod76w1:not([data-disabled]):hover .vod76w4{background:var(--graphy-brand)}.vod76w1:has(:focus-visible) .vod76w4{background:var(--graphy-brand)}.vod76w4[data-dragging]{background:var(--graphy-brand)}.vod76w5{background:var(--graphy-grey-100);border:1px solid var(--graphy-border-50);block-size:14px;inline-size:14px;box-shadow:var(--graphy-elevation-xs);cursor:grab;border-radius:50%;transition:border-color .1s cubic-bezier(.55,.085,.68,.53),box-shadow .1s cubic-bezier(.55,.085,.68,.53)}.vod76w1:not([data-disabled]):hover .vod76w5,.vod76w5[data-dragging]{border-color:var(--graphy-border-100);box-shadow:0 0 0 4px color-mix(in srgb, transparent, var(--graphy-brand) 20%), var(--graphy-elevation-xs)}.vod76w5:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand), var(--graphy-elevation-xs)}.vod76w5[data-dragging]{cursor:grabbing;transition:none}.vod76w6{min-inline-size:40px;color:var(--graphy-text-secondary);font:var(--graphy-font-editor-control-value);text-align:end;font-variant-numeric:tabular-nums;flex-shrink:0}._1hyrlw60{pointer-events:auto;background:var(--graphy-border-10);cursor:pointer;border:none;border-radius:999px;flex-shrink:0;block-size:20px;inline-size:36px;padding:0;transition:background .12s;position:relative}._1hyrlw60[data-checked]{background:color-mix(in srgb, transparent, var(--graphy-brand) 50%)}._1hyrlw60:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}._1hyrlw60[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}._1hyrlw61{block-size:16px;inline-size:16px;margin:var(--graphy-space-xxs);background:var(--graphy-grey-100);box-shadow:var(--graphy-elevation-xs);border-radius:50%;transition:translate .12s,background .12s;display:block}._1hyrlw61[data-checked]{background:var(--graphy-brand);translate:16px}.tpcnun0{cursor:text}.cnu9yl0{inline-size:100%;padding:var(--graphy-space-xxs);gap:var(--graphy-space-xxs);background:var(--graphy-sunken-background);border-radius:var(--graphy-radii-md);display:flex}.cnu9yl1{justify-content:center;align-items:center;gap:var(--graphy-space-xs);min-inline-size:0;block-size:calc(var(--graphy-editor-control-height) - var(--graphy-space-xxs) * 2);padding:0 var(--graphy-space-sm);border-radius:var(--graphy-radii-sm);cursor:pointer;color:var(--graphy-text-secondary);font:var(--graphy-font-editor-control-value);white-space:nowrap;background:0 0;border:none;flex:auto;transition:color .1s cubic-bezier(.55,.085,.68,.53),background .1s cubic-bezier(.55,.085,.68,.53),box-shadow .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex}.cnu9yl1:hover:not([data-disabled]):not([data-checked]){color:var(--graphy-text-primary)}.cnu9yl1:active:not([data-disabled]):not([data-checked]){background:var(--graphy-raised-background)}.cnu9yl1[data-checked]{background:var(--graphy-default-background);box-shadow:var(--graphy-elevation-xs);color:var(--graphy-text-primary)}.cnu9yl1:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand)}.cnu9yl1[data-checked]:focus-visible{box-shadow:inset 0 0 0 2px var(--graphy-brand), var(--graphy-elevation-xs)}.cnu9yl1[data-disabled]{color:var(--graphy-text-disabled);cursor:not-allowed;opacity:.6}.cnu9yl2{gap:var(--graphy-space-xs);block-size:auto;min-block-size:34px;padding-block:var(--graphy-space-sm);font-size:var(--graphy-font-size-xxs);flex-direction:column;padding-inline-start:0;padding-inline-end:0}.cnu9yl3{white-space:nowrap;text-overflow:ellipsis;min-inline-size:0;max-inline-size:100%;overflow:hidden}._12lhx9e0{align-items:center;gap:var(--graphy-space-sm);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}._139ohwv0{gap:var(--graphy-space-md);flex-direction:column;display:flex}._1jlczkt0{background:var(--graphy-default-background);inline-size:100%;color:var(--graphy-text-primary);font-family:var(--graphy-font-family-default);font-weight:var(--graphy-font-weight-medium);-webkit-user-select:none;user-select:none;font-size:calc(10px * var(--graphy-text-scale));flex-direction:column;display:flex;overflow:hidden auto}.pr583x0{gap:var(--graphy-space-xxs);flex-direction:column;display:flex}.pr583x1{align-items:center;gap:var(--graphy-space-sm);min-block-size:var(--graphy-editor-control-height);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.pr583x2{justify-content:flex-end;inline-size:100%;min-inline-size:0;display:flex}.pr583x3{color:var(--graphy-text-secondary);font:var(--graphy-font-editor-control-label);cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0}.pr583x4{line-height:var(--graphy-editor-control-height)}.pr583x5{align-items:center;gap:var(--graphy-space-xs);min-block-size:var(--graphy-editor-control-height);display:flex}._40zvwv0{padding-block:var(--graphy-space-md);flex-direction:column;display:flex}._40zvwv0+._40zvwv0{border-block-start:1px solid var(--graphy-border-10)}._40zvwv1{align-items:center;gap:var(--graphy-space-xl);min-block-size:36px;inline-size:100%;display:flex;position:relative}._40zvwv2{border-radius:var(--graphy-radii-sm);cursor:pointer;background:0 0;border:none;padding:0;position:absolute;top:0;bottom:0;left:0;right:0}._40zvwv3{pointer-events:none;color:var(--graphy-text-primary);font:var(--graphy-font-editor-section-title);flex-shrink:0;position:relative}._40zvwv4{pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none}._40zvwv5{pointer-events:none;white-space:nowrap;text-overflow:ellipsis;text-align:end;min-inline-size:0;color:var(--graphy-text-secondary);font:var(--graphy-font-editor-caption);line-height:var(--graphy-font-line-height-sm);flex:1;position:relative;overflow:hidden}._40zvwv6{flex:1;justify-content:flex-end;min-inline-size:0;display:flex;position:relative}._40zvwv7{color:var(--graphy-icon-primary);flex-shrink:0;align-items:center;margin-inline-start:auto;display:inline-flex;position:relative}._40zvwv8{pointer-events:none;inline-size:var(--graphy-editor-control-height);block-size:var(--graphy-editor-control-height);border-radius:var(--graphy-radii-md);color:var(--graphy-text-disabled);background:0 0;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;transition:background .1s cubic-bezier(.55,.085,.68,.53),rotate .1s cubic-bezier(.55,.085,.68,.53);display:inline-flex;position:relative}._40zvwv7+._40zvwv8{margin-inline-start:0}._40zvwv0[data-open] ._40zvwv8{background:var(--graphy-raised-background);rotate:90deg}._40zvwv2:focus-visible~._40zvwv8{box-shadow:inset 0 0 0 2px var(--graphy-brand)}@media (prefers-reduced-motion:reduce){._40zvwv8{transition:none}}.qdaoth0{fill:var(--graphy-icon-sticker-background)}

package/dist/editable.d.ts

@@ -1,8 +1,8 @@
 import { Command } from '@graphysdk/viz-engine';
-import { CompiledPanel } from '@graphysdk/viz-engine';
 import { CompiledSpec } from '@graphysdk/viz-engine';
 import { ComponentType } from 'react';
 import { DispatchOptions } from '@graphysdk/viz-engine';
+import { EdgeSizes } from '@graphysdk/viz-engine';
 import { EditorPanel } from './editable/panel/editor-panel';
 import { EditTarget } from '@graphysdk/viz-engine';
 import { FormattedAxis } from '@graphysdk/viz-engine';
@@ -283,6 +283,15 @@ declare const dictionaries: {
                 readonly graphTypeSection: {
                     readonly title: "Graph type";
                 };
+                readonly mappingSection: {
+                    readonly title: "Data";
+                    readonly x: "X-axis";
+                    readonly y: "Value";
+                    readonly color: "Colour";
+                    readonly size: "Size";
+                    readonly label: "Label";
+                    readonly none: "None";
+                };
                 readonly polarSection: {
                     readonly title: "Polar";
                     readonly innerRadius: "Inner radius";
@@ -425,20 +434,6 @@ declare const dictionaries: {
                     readonly linesOnly: "Lines only";
                 };
             };
-            readonly columnMapping: {
-                readonly title: "Data";
-                readonly xAxis: "X-axis";
-                readonly yAxis: "Y-axis";
-                readonly leftYAxis: "Y-axis (left)";
-                readonly rightYAxis: "Y-axis (right)";
-                readonly slices: "Values (slices)";
-                readonly labels: "Labels";
-                readonly size: "Size";
-                readonly shape: "Shape";
-                readonly reset: "Reset to auto";
-                readonly addSeries: "Add series";
-                readonly removeSeries: "Remove series";
-            };
             readonly axesPanel: {
                 readonly toolbarButton: "Axes";
                 readonly mainAxisSection: {
@@ -933,6 +928,51 @@ declare const dictionaries: {
                     readonly swap: "Swap direction";
                     readonly remove: "Remove arrow";
                 };
+                readonly shapeToolbar: {
+                    readonly label: "Shape options";
+                    readonly color: "Shape colour";
+                    readonly border: {
+                        readonly ariaLabel: "Border";
+                        readonly none: "None";
+                        readonly thin: "Thin (2px)";
+                        readonly medium: "Medium (8px)";
+                        readonly thick: "Thick (16px)";
+                    };
+                    readonly remove: "Remove shape";
+                    readonly resize: {
+                        readonly 'top-left': "Resize from the top left";
+                        readonly 'top-right': "Resize from the top right";
+                        readonly 'bottom-right': "Resize from the bottom right";
+                        readonly 'bottom-left': "Resize from the bottom left";
+                    };
+                };
+                readonly arrowToolbar: {
+                    readonly label: "Arrow options";
+                    readonly color: "Arrow colour";
+                    readonly thickness: {
+                        readonly ariaLabel: "Thickness";
+                        readonly thin: "Thin";
+                        readonly medium: "Medium";
+                        readonly thick: "Thick";
+                    };
+                    readonly startArrowhead: "Start of the arrow";
+                    readonly endArrowhead: "End of the arrow";
+                    readonly arrowhead: {
+                        readonly lineArrow: "Line arrow";
+                        readonly none: "None";
+                    };
+                    readonly lineStyle: {
+                        readonly ariaLabel: "Line style";
+                        readonly solid: "Solid";
+                        readonly dashed: "Dotted";
+                    };
+                    readonly sticker: "Sticker effect";
+                    readonly remove: "Remove arrow";
+                    readonly moveEndpoint: {
+                        readonly start: "Move the start of the arrow";
+                        readonly end: "Move the end of the arrow";
+                    };
+                };
                 readonly baseMenu: {
                     readonly pinNumber: "Pin number";
                     readonly unpinNumber: "Unpin number";
@@ -1121,6 +1161,15 @@ declare const dictionaries: {
                 readonly graphTypeSection: {
                     readonly title: "نوع الرسم البياني";
                 };
+                readonly mappingSection: {
+                    readonly title: "البيانات";
+                    readonly x: "المحور السيني";
+                    readonly y: "القيمة";
+                    readonly color: "اللون";
+                    readonly size: "الحجم";
+                    readonly label: "التسمية";
+                    readonly none: "بلا";
+                };
                 readonly polarSection: {
                     readonly title: "قطبي";
                     readonly innerRadius: "نصف القطر الداخلي";
@@ -1263,20 +1312,6 @@ declare const dictionaries: {
                     readonly linesOnly: "خطوط فقط";
                 };
             };
-            readonly columnMapping: {
-                readonly title: "البيانات";
-                readonly xAxis: "المحور السيني";
-                readonly yAxis: "المحور الصادي";
-                readonly leftYAxis: "المحور الصادي (يسار)";
-                readonly rightYAxis: "المحور الصادي (يمين)";
-                readonly slices: "القيم (الشرائح)";
-                readonly labels: "التسميات";
-                readonly size: "الحجم";
-                readonly shape: "الشكل";
-                readonly reset: "إعادة التعيين إلى تلقائي";
-                readonly addSeries: "إضافة سلسلة";
-                readonly removeSeries: "إزالة السلسلة";
-            };
             readonly axesPanel: {
                 readonly toolbarButton: "المحاور";
                 readonly mainAxisSection: {
@@ -1771,6 +1806,51 @@ declare const dictionaries: {
                     readonly swap: "عكس الاتجاه";
                     readonly remove: "إزالة السهم";
                 };
+                readonly shapeToolbar: {
+                    readonly label: "خيارات الشكل";
+                    readonly color: "لون الشكل";
+                    readonly border: {
+                        readonly ariaLabel: "الحد";
+                        readonly none: "بلا";
+                        readonly thin: "رفيع (2 بكسل)";
+                        readonly medium: "متوسط (8 بكسل)";
+                        readonly thick: "سميك (16 بكسل)";
+                    };
+                    readonly remove: "إزالة الشكل";
+                    readonly resize: {
+                        readonly 'top-left': "تغيير الحجم من الزاوية العلوية اليسرى";
+                        readonly 'top-right': "تغيير الحجم من الزاوية العلوية اليمنى";
+                        readonly 'bottom-right': "تغيير الحجم من الزاوية السفلية اليمنى";
+                        readonly 'bottom-left': "تغيير الحجم من الزاوية السفلية اليسرى";
+                    };
+                };
+                readonly arrowToolbar: {
+                    readonly label: "خيارات السهم";
+                    readonly color: "لون السهم";
+                    readonly thickness: {
+                        readonly ariaLabel: "السماكة";
+                        readonly thin: "رفيع";
+                        readonly medium: "متوسط";
+                        readonly thick: "سميك";
+                    };
+                    readonly startArrowhead: "بداية السهم";
+                    readonly endArrowhead: "نهاية السهم";
+                    readonly arrowhead: {
+                        readonly lineArrow: "رأس سهم";
+                        readonly none: "بلا";
+                    };
+                    readonly lineStyle: {
+                        readonly ariaLabel: "نمط الخط";
+                        readonly solid: "متصل";
+                        readonly dashed: "منقّط";
+                    };
+                    readonly sticker: "تأثير الملصق";
+                    readonly remove: "إزالة السهم";
+                    readonly moveEndpoint: {
+                        readonly start: "تحريك بداية السهم";
+                        readonly end: "تحريك نهاية السهم";
+                    };
+                };
                 readonly baseMenu: {
                     readonly pinNumber: "تثبيت الرقم";
                     readonly unpinNumber: "إلغاء تثبيت الرقم";
@@ -1958,6 +2038,15 @@ declare const dictionaries: {
                 readonly graphTypeSection: {
                     readonly title: "Tipo de gráfico";
                 };
+                readonly mappingSection: {
+                    readonly title: "Dados";
+                    readonly x: "Eixo X";
+                    readonly y: "Valor";
+                    readonly color: "Cor";
+                    readonly size: "Tamanho";
+                    readonly label: "Etiqueta";
+                    readonly none: "Nenhum";
+                };
                 readonly polarSection: {
                     readonly title: "Polar";
                     readonly innerRadius: "Raio interno";
@@ -2100,20 +2189,6 @@ declare const dictionaries: {
                     readonly linesOnly: "Apenas linhas";
                 };
             };
-            readonly columnMapping: {
-                readonly title: "Dados";
-                readonly xAxis: "Eixo X";
-                readonly yAxis: "Eixo Y";
-                readonly leftYAxis: "Eixo Y (esquerda)";
-                readonly rightYAxis: "Eixo Y (direita)";
-                readonly slices: "Valores (fatias)";
-                readonly labels: "Etiquetas";
-                readonly size: "Tamanho";
-                readonly shape: "Forma";
-                readonly reset: "Repor para automático";
-                readonly addSeries: "Adicionar série";
-                readonly removeSeries: "Remover série";
-            };
             readonly axesPanel: {
                 readonly toolbarButton: "Eixos";
                 readonly mainAxisSection: {
@@ -2608,6 +2683,51 @@ declare const dictionaries: {
                     readonly swap: "Inverter sentido";
                     readonly remove: "Remover seta";
                 };
+                readonly shapeToolbar: {
+                    readonly label: "Opções da forma";
+                    readonly color: "Cor da forma";
+                    readonly border: {
+                        readonly ariaLabel: "Contorno";
+                        readonly none: "Nenhum";
+                        readonly thin: "Fino (2px)";
+                        readonly medium: "Médio (8px)";
+                        readonly thick: "Espesso (16px)";
+                    };
+                    readonly remove: "Remover forma";
+                    readonly resize: {
+                        readonly 'top-left': "Redimensionar a partir do canto superior esquerdo";
+                        readonly 'top-right': "Redimensionar a partir do canto superior direito";
+                        readonly 'bottom-right': "Redimensionar a partir do canto inferior direito";
+                        readonly 'bottom-left': "Redimensionar a partir do canto inferior esquerdo";
+                    };
+                };
+                readonly arrowToolbar: {
+                    readonly label: "Opções da seta";
+                    readonly color: "Cor da seta";
+                    readonly thickness: {
+                        readonly ariaLabel: "Espessura";
+                        readonly thin: "Fina";
+                        readonly medium: "Média";
+                        readonly thick: "Espessa";
+                    };
+                    readonly startArrowhead: "Início da seta";
+                    readonly endArrowhead: "Fim da seta";
+                    readonly arrowhead: {
+                        readonly lineArrow: "Ponta de seta";
+                        readonly none: "Nenhuma";
+                    };
+                    readonly lineStyle: {
+                        readonly ariaLabel: "Estilo da linha";
+                        readonly solid: "Sólida";
+                        readonly dashed: "Pontilhada";
+                    };
+                    readonly sticker: "Efeito autocolante";
+                    readonly remove: "Remover seta";
+                    readonly moveEndpoint: {
+                        readonly start: "Mover o início da seta";
+                        readonly end: "Mover o fim da seta";
+                    };
+                };
                 readonly baseMenu: {
                     readonly pinNumber: "Fixar número";
                     readonly unpinNumber: "Desafixar número";
@@ -2852,6 +2972,15 @@ declare const EN_GB: {
             readonly graphTypeSection: {
                 readonly title: "Graph type";
             };
+            readonly mappingSection: {
+                readonly title: "Data";
+                readonly x: "X-axis";
+                readonly y: "Value";
+                readonly color: "Colour";
+                readonly size: "Size";
+                readonly label: "Label";
+                readonly none: "None";
+            };
             readonly polarSection: {
                 readonly title: "Polar";
                 readonly innerRadius: "Inner radius";
@@ -2994,20 +3123,6 @@ declare const EN_GB: {
                 readonly linesOnly: "Lines only";
             };
         };
-        readonly columnMapping: {
-            readonly title: "Data";
-            readonly xAxis: "X-axis";
-            readonly yAxis: "Y-axis";
-            readonly leftYAxis: "Y-axis (left)";
-            readonly rightYAxis: "Y-axis (right)";
-            readonly slices: "Values (slices)";
-            readonly labels: "Labels";
-            readonly size: "Size";
-            readonly shape: "Shape";
-            readonly reset: "Reset to auto";
-            readonly addSeries: "Add series";
-            readonly removeSeries: "Remove series";
-        };
         readonly axesPanel: {
             readonly toolbarButton: "Axes";
             readonly mainAxisSection: {
@@ -3502,6 +3617,51 @@ declare const EN_GB: {
                 readonly swap: "Swap direction";
                 readonly remove: "Remove arrow";
             };
+            readonly shapeToolbar: {
+                readonly label: "Shape options";
+                readonly color: "Shape colour";
+                readonly border: {
+                    readonly ariaLabel: "Border";
+                    readonly none: "None";
+                    readonly thin: "Thin (2px)";
+                    readonly medium: "Medium (8px)";
+                    readonly thick: "Thick (16px)";
+                };
+                readonly remove: "Remove shape";
+                readonly resize: {
+                    readonly 'top-left': "Resize from the top left";
+                    readonly 'top-right': "Resize from the top right";
+                    readonly 'bottom-right': "Resize from the bottom right";
+                    readonly 'bottom-left': "Resize from the bottom left";
+                };
+            };
+            readonly arrowToolbar: {
+                readonly label: "Arrow options";
+                readonly color: "Arrow colour";
+                readonly thickness: {
+                    readonly ariaLabel: "Thickness";
+                    readonly thin: "Thin";
+                    readonly medium: "Medium";
+                    readonly thick: "Thick";
+                };
+                readonly startArrowhead: "Start of the arrow";
+                readonly endArrowhead: "End of the arrow";
+                readonly arrowhead: {
+                    readonly lineArrow: "Line arrow";
+                    readonly none: "None";
+                };
+                readonly lineStyle: {
+                    readonly ariaLabel: "Line style";
+                    readonly solid: "Solid";
+                    readonly dashed: "Dotted";
+                };
+                readonly sticker: "Sticker effect";
+                readonly remove: "Remove arrow";
+                readonly moveEndpoint: {
+                    readonly start: "Move the start of the arrow";
+                    readonly end: "Move the end of the arrow";
+                };
+            };
             readonly baseMenu: {
                 readonly pinNumber: "Pin number";
                 readonly unpinNumber: "Unpin number";
@@ -3643,12 +3803,21 @@ export declare const GoalSection: ({ title, preview }: GoalSectionProps) => JSX.
 /** No `layout`: a toggled section is always collapsible. */
 declare type GoalSectionProps = Omit<OverridableSectionProps, 'layout'>;
 
+/**
+ * Animation settings for a graph. `false` disables every animation. A viewer who prefers reduced
+ * motion gets no animation whatever this asks for.
+ */
+declare type GraphAnimation = boolean | GraphAnimationProps;
+
+/** Per-kind animation settings. Each kind is independent: turning one off leaves the other running. */
 declare interface GraphAnimationProps {
     /**
-     * Settings for the intro animation played on first mount. `false` disables it, `true` forces it on,
-     * an object overrides individual intro settings. Defaults on.
+     * Settings for the intro animation played when the chart first mounts or the chart type changes.
+     * `false` disables it, an object overrides individual intro settings. Defaults on.
      */
     intro?: boolean | Partial<IntroAnimationOptions>;
+    /** Whether geoms animate to their new position when the underlying data changes. Defaults on. */
+    transitions?: boolean;
 }
 
 /** Write access to the graph's spec: applying {@link Command}s and closing the runs they form. */
@@ -3721,8 +3890,11 @@ declare interface GraphRendererProps {
     sizing?: GraphSizing;
     /** Callback invoked when the graph's container is resized. Fires in every sizing mode. */
     onResize?: ResizeObserverOnResize;
-    isAnimated?: boolean;
-    animation?: GraphAnimationProps;
+    /**
+     * Animation settings. A boolean disables/enables animations globally, an object tunes the intro
+     * and data transitions separately. A reduced-motion preference disables everything regardless.
+     */
+    animation?: GraphAnimation;
     showTooltips?: boolean;
     mode?: GraphMode;
     /** Per-region component overrides. Unspecified regions render their default. */
@@ -3799,7 +3971,7 @@ export declare const GridSection: ({ title, layout, preview }: OverridableSectio
  */
 declare interface GridSlotProps {
     axes: FormattedAxis[];
-    panel: CompiledPanel;
+    panelBorderSizes: EdgeSizes;
     panelFrameRect: GraphLayout['panelFrame'];
     panelRect: GraphLayout['panel'];
 }
@@ -3901,6 +4073,9 @@ declare type LooseString<T> = T extends string ? string : T;
 
 declare type LooseValue<T> = T extends (...args: infer A) => infer R ? (...args: A) => R : LooseString<T>;
 
+/** Which column of the data feeds each of the chart's aesthetics. */
+export declare const MappingSection: ({ title, layout }: OverridableSectionProps) => JSX.Element | null;
+
 /**
  * A number typed, scrubbed or stepped into a field.
  *
@@ -4070,7 +4245,8 @@ export declare const Select: ({ options, value, onChange, placeholder, isDisable
  * The value is nullable so a section can render "nothing chosen yet"; `onChange` only ever fires
  * with a real option, since clearing a required setting is not a gesture the panel offers.
  */
-export declare interface SelectControlProps extends DiscreteControlProps<string | null> {
+export declare interface SelectControlProps extends Omit<DiscreteControlProps<string | null>, 'onChange'> {
+    onChange: (value: string) => void;
     options: readonly ControlOption[];
     placeholder?: string;
     hasError?: boolean;