@rogieking/figui3 6.29.0 → 6.29.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +5 -4
  2. package/dist/fig-editor.css +1 -1
  3. package/dist/fig-lab.css +1 -1
  4. package/dist/fig-lab.js +1 -1
  5. package/fig-lab.css +34 -15
  6. package/fig-lab.js +0 -3
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -305,7 +305,8 @@ For `type="range"`, omitting `value` follows native range behavior and starts at
305
305
 
306
306
  Composes a `<fig-field>` and `<fig-input-number>` into a full-surface property control. Number attributes are forwarded to the inner input.
307
307
 
308
- PropsKit controls that support `size` default to the large layout when the attribute is omitted.
308
+ PropsKit controls use the compact default layout when `size` is omitted. Set
309
+ `size="large"` for the 40px row layout.
309
310
 
310
311
  All PropsKit inputs expose `defaultValue`, `isDefault`, and `resetToDefault()`. A
311
312
  `propskit-group` uses this shared contract to track its `dirty` state and reset
@@ -315,7 +316,7 @@ each nested input to its own current `default`.
315
316
  |---|---|---|---|
316
317
  | `label` | string | `"Label"` | Field label text; use an empty value to hide it |
317
318
  | `direction` | string | `"horizontal"` | Field layout direction |
318
- | `size` | string | `"large"` | Control layout size |
319
+ | `size` | string | default | Set to `"large"` for the expanded layout |
319
320
  | `default` | number/string | initial `value` | Right-click reset target |
320
321
  | *number attrs* | — | — | All `<fig-input-number>` attributes are forwarded |
321
322
 
@@ -361,7 +362,7 @@ Composes a `<fig-field>` and `<fig-input-gradient>` into a full-surface property
361
362
  | `edit` | boolean/string | `true` | `true`, `false`, or `"picker"` |
362
363
  | `mode` | string | `"handle"` | `"handle"` or `"tip"` stop presentation |
363
364
  | `disabled` | boolean | `false` | Disabled state |
364
- | `size` | string | `"large"` | Control layout size |
365
+ | `size` | string | default | Set to `"large"` for the expanded layout |
365
366
 
366
367
  **Events:** `input`, `change` — bubbling, composed events with `{ type: "gradient", gradient }` in `event.detail`.
367
368
 
@@ -443,7 +444,7 @@ Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slid
443
444
  |---|---|---|---|
444
445
  | `label` | string | — | Field label text |
445
446
  | `direction` | string | `"column"` | Layout direction |
446
- | `size` | string | `"large"` | Control layout size |
447
+ | `size` | string | default | Set to `"large"` for the expanded layout |
447
448
  | `default` | number/string | initial `value` | Double-click and right-click reset target |
448
449
  | *slider attrs* | — | — | All `<fig-slider>` attributes except host-only PropsKit attributes are forwarded |
449
450
 
package/dist/fig-editor.css CHANGED
@@ -1 +1 @@
1
- fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.fig-layer-row{align-items:center;gap:var(--spacer-1);padding:var(--spacer-1) var(--spacer-2);height:var(--spacer-4);border-radius:var(--radius-medium);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-chevron);visibility:hidden;background:var(--figma-color-text-tertiary);width:var(--spacer-3);height:var(--spacer-3);left:calc(var(--spacer-3) * -1);top:var(--spacer-1);flex-shrink:0;transition:transform .15s;display:flex;position:absolute;rotate:-90deg;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .fig-layer-icon{width:var(--spacer-3);height:var(--spacer-3);color:var(--figma-color-icon-tertiary);margin-left:calc(var(--spacer-1) * -1);flex-shrink:0}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}fig-ai-prompt{--fig-ai-prompt-margin-inline:var(--spacer-3);box-sizing:border-box;width:calc(100% - var(--fig-ai-prompt-margin-inline) - var(--fig-ai-prompt-margin-inline));min-height:8rem;margin-inline:var(--fig-ai-prompt-margin-inline);border:1px solid var(--figma-color-border);border-radius:var(--radius-large);background:var(--figma-color-bg);color:var(--figma-color-text);flex-direction:column;display:flex;&:has(>fig-input-text:focus-within){outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&>fig-input-text{width:100%;min-width:0;box-shadow:none;font-size:var(--body-large-fontSize);background:0 0;border-radius:0;flex:auto;&:hover,&:has(textarea:focus){box-shadow:none;outline:0}&[disabled]:not([disabled=false]){box-shadow:none;background:0 0}&>textarea{box-sizing:border-box;width:100%;height:auto;min-height:var(--spacer-6);padding:var(--spacer-3);resize:none;font-size:inherit;align-self:stretch;padding-bottom:0}}&>fig-footer{box-shadow:none;border:none;justify-content:space-between}}fig-chat-message{box-sizing:border-box;width:100%;max-width:100%;color:var(--figma-color-text);font-size:var(--body-large-fontSize);line-height:calc(var(--line-height) + var(--spacer-1));overflow-wrap:anywhere;white-space:pre-wrap;display:block;&[from=user]{width:auto;padding:var(--spacer-2) var(--spacer-2-5);border-radius:var(--radius-large);background:var(--figma-color-bg-secondary);margin-inline-start:var(--spacer-4)}&[from=user]:has(>fig-avatar){margin-inline-end:calc(var(--spacer-4) + var(--spacer-2));position:relative;&>fig-avatar{right:calc(-1 * (var(--spacer-4) + var(--spacer-2)));position:absolute;bottom:0}}&+fig-chat-message{margin-top:var(--spacer-3)}}propskit-group{width:100%;margin-bottom:var(--spacer-2-5);display:block;& p{margin:0 var(--spacer-3) var(--spacer-2) var(--spacer-3)}&+propskit-group{box-shadow:inset 0 1px 0 0 var(--figma-color-border);&:not([name]){padding-top:var(--spacer-2-5)}}&[borderless]:not([borderless=false])+propskit-group{box-shadow:none;&:not([name]){padding-top:0}}&[compact]:not([compact=false])>fig-header{--fig-header-height:var(--spacer-5);height:var(--fig-header-height)}&>fig-header{cursor:default;padding-left:var(--spacer-3);&:focus-visible{--figma-focus-outline-radius:var(--radius-medium);outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset);border-radius:var(--figma-focus-outline-radius)}& h3{user-select:none;margin:0;& .propskit-group-chevron{--icon:var(--icon-16-chevron);--size:1rem;color:var(--figma-color-text-tertiary);transition:transform var(--transition-duration) var(--transition-timing-function);margin-left:calc(var(--spacer-3) * -1);transform:rotate(-90deg)}}}&:not([open]):not([open=true]),&[open=false]{margin-bottom:0;&>fig-header{color:var(--figma-color-text-secondary);&:hover{color:var(--figma-color-text);& .propskit-group-chevron{color:inherit}}}&>:not(fig-header){display:none}}&[open]:not([open=false])>fig-header .propskit-group-chevron{transform:rotate(0)}&>fig-header>.propskit-group-reset-tooltip{opacity:0;visibility:hidden;pointer-events:none;color:var(--figma-color-icon-tertiary);transition:opacity var(--transition-duration) var(--transition-timing-function), visibility var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);flex-shrink:0;& fig-icon{color:var(--figma-color-icon-tertiary)}&:hover,&:focus-within{& fig-icon{color:var(--figma-color-icon-primary,var(--figma-color-icon))}}}&[data-dirty]:not([data-dirty=false]):not([show-reset=false])>fig-header>.propskit-group-reset-tooltip:not([hidden]){opacity:1;visibility:visible;pointer-events:auto}&[show-reset=false]>fig-header>.propskit-group-reset-tooltip{display:none}}main:has(>propskit-group[name]:first-child),fig-content:has(>propskit-group[name]:first-child){padding-top:0}main:has(>propskit-group[name]:last-child),fig-content:has(>propskit-group[name]:last-child){padding-bottom:0}:is(propskit-switch,propskit-color,propskit-gradient,propskit-text,propskit-number,propskit-slider):is(:not([size]),[size=large]){& fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5)}}:is(propskit-color,propskit-number):is(:not([size]),[size=large]){& fig-field fig-input-number{margin-right:var(--spacer-1)}}propskit-text:is(:not([size]),[size=large]){& fig-field>fig-input-text{margin-right:var(--spacer-1)}}propskit-switch{--propskit-switch-height:2rem;--propskit-switch-vertical-padding:var(--spacer-1);--propskit-switch-horizontal-padding:var(--spacer-3);width:100%;height:calc(var(--propskit-switch-height) + var(--propskit-switch-vertical-padding) * 2);padding:var(--propskit-switch-vertical-padding) var(--propskit-switch-horizontal-padding);display:block;&:not([size]),&[size=large]{& fig-field:not([direction=vertical]){padding-right:var(--spacer-1)}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){height:100%;padding:0 0 0 var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);align-items:center;display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:auto;align-items:center;margin:0;padding:0;display:flex;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-segmented-control{flex:none;min-width:4.5rem;margin-left:auto}}}propskit-color{--propskit-color-height:2rem;--propskit-color-vertical-padding:var(--spacer-1);--propskit-color-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-color-height) + var(--propskit-color-vertical-padding) * 2);padding:var(--propskit-color-vertical-padding) var(--propskit-color-horizontal-padding);display:block;&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding-left:var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;width:auto;min-width:0;max-width:50%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-color{--figma-focus-outline-offset:1px;min-width:0;max-width:none;height:var(--propskit-color-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;align-self:center;margin-left:auto;position:relative;flex:0 auto!important;width:fit-content!important;&:hover:not(:focus):not(:focus-within):not(.has-popup-open){outline:none!important}&>.input-combo{flex:none;width:auto}& fig-input-text{flex:0 0 3.25rem;width:3.25rem;& input{field-sizing:fixed;box-sizing:border-box;width:100%;min-width:0}}& fig-input-number{flex:0 0 3rem;width:3rem;min-width:3rem;& input{field-sizing:fixed;box-sizing:border-box;width:100%;min-width:0}}}}}propskit-gradient{--propskit-gradient-height:2rem;--propskit-gradient-vertical-padding:var(--spacer-1);--propskit-gradient-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-gradient-height) + var(--propskit-gradient-vertical-padding) * 2);padding:var(--propskit-gradient-vertical-padding) var(--propskit-gradient-horizontal-padding);display:block;&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding:0 var(--spacer-1) 0 var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;min-width:0;max-width:40%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:0 auto;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-gradient{border-radius:var(--radius-medium);flex:0 0 50%;width:50%;min-width:0;margin-left:auto;position:relative;&:hover{outline:none!important}}}}propskit-select{--propskit-select-height:2rem;--propskit-select-vertical-padding:var(--spacer-1);--propskit-select-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-select-height) + var(--propskit-select-vertical-padding) * 2);padding:var(--propskit-select-vertical-padding) var(--propskit-select-horizontal-padding);display:block;&:not([size]),&[size=large]{& fig-field:not([direction=vertical]){padding-left:0;&>label{inset:0 auto 0 var(--spacer-2-5);width:calc(50% - var(--spacer-2-5))}& fig-select{padding-right:var(--spacer-1);&:after{right:calc(.25rem + var(--spacer-1))}}& fig-select::part(trigger){padding-left:var(--spacer-2-5)}}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);align-items:center;height:100%;padding:0;display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{inset:0 auto 0 var(--spacer-2);z-index:1;width:calc(50% - var(--spacer-2));min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;align-items:center;margin:0;padding:0;display:flex;position:absolute;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-select{border-radius:var(--radius-medium);width:100%;min-width:0;height:100%;box-shadow:none;--fig-select-trigger-width:100%;background:0 0;flex:auto;align-self:stretch;display:flex;position:relative;&::part(label){text-align:right}}}}propskit-text{--propskit-text-height:2rem;--propskit-text-vertical-padding:var(--spacer-1);--propskit-text-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-text-height) + var(--propskit-text-vertical-padding) * 2);padding:var(--propskit-text-vertical-padding) var(--propskit-text-horizontal-padding);display:block;&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding-left:var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;width:auto;min-width:0;max-width:50%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-text{--figma-focus-outline-offset:1px;min-width:0;max-width:none;height:var(--propskit-text-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;align-self:center;margin-left:auto;position:relative;flex:0 auto!important;width:fit-content!important;&:has(input:focus){outline:var(--figma-focus-outline)!important;outline-offset:var(--figma-focus-outline-offset)!important}& input{field-sizing:content;text-align:right;flex:none;width:auto;min-width:0;max-width:100%;&:not(:focus){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}}}}propskit-number{--propskit-number-height:2rem;--propskit-number-vertical-padding:var(--spacer-1);--propskit-number-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-number-height) + var(--propskit-number-vertical-padding) * 2);padding:var(--propskit-number-vertical-padding) var(--propskit-number-horizontal-padding);display:block;&:not([size]),&[size=large]{& fig-field:not([direction=vertical])>label{inset:0 auto 0 var(--spacer-2-5)}}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}}&[steppers]:not([steppers=false]) fig-input-number input{padding-right:0}& fig-field:not([direction=vertical]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);outline:none;height:100%;display:flex;position:relative;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{inset:0 auto 0 var(--spacer-2);z-index:1;width:calc(50% - var(--spacer-2));min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;align-items:center;margin:0;padding:0;display:flex;position:absolute;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-number{width:fit-content;min-width:0;height:var(--propskit-number-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;flex:none;align-self:center;margin-left:auto;position:relative;outline:none!important;&:has(input:focus){outline:none!important}& input{field-sizing:content;text-align:right;font-variant-numeric:tabular-nums;flex:none;width:auto;min-width:0}}}}propskit-slider{--propskit-slider-elastic-distance:calc(var(--spacer-2) + .25rem);--propskit-slider-elastic-size:0px;--propskit-slider-elastic-scale:1;--propskit-slider-elastic-origin:left center;--propskit-slider-elastic-transition:.18s cubic-bezier(.2, 1.45, .35, 1);--propskit-slider-height:2rem;--propskit-slider-vertical-padding:var(--spacer-1);--propskit-slider-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;--propskit-slider-progress-shadow:inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);--propskit-slider-fig-slider-height:var(--propskit-slider-height);--propskit-slider-fig-slider-thumb-height:calc(var(--propskit-slider-fig-slider-height) - var(--spacer-2-5));--propskit-slider-number-right:2px;width:100%;height:calc(var(--propskit-slider-height) + var(--propskit-slider-vertical-padding) * 2);border-radius:var(--radius-medium);transform-origin:var(--propskit-slider-elastic-origin);transition:transform var(--propskit-slider-elastic-transition);padding-top:var(--propskit-slider-vertical-padding);padding-bottom:var(--propskit-slider-vertical-padding);padding-left:var(--propskit-slider-horizontal-padding);padding-right:var(--propskit-slider-horizontal-padding);display:block;position:relative;&:not([size]),&[size=large]{--propskit-slider-fig-slider-thumb-height:calc(var(--propskit-slider-fig-slider-height) - var(--spacer-3));--propskit-slider-number-right:calc(2px + var(--spacer-1))}& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}&[type=opacity] fig-slider{--slider-checkerboard:var(--checkerboard)}& fig-field:not([direction=vertical]){padding-left:var(--spacer-2);height:100%;display:flex;position:relative;&>label{width:100%;min-width:0;max-width:none;color:var(--figma-color-text-secondary);align-items:center;gap:var(--spacer-1);flex:auto;height:100%;margin:0;padding:0;display:flex;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-slider{--slider-height:var(--propskit-slider-fig-slider-height);background-color:#0000;padding:0;position:absolute;inset:0;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}--slider-field-height:var(--propskit-slider-height);--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:var(--propskit-slider-fig-slider-thumb-height);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--propskit-slider-thumb-inset:var(--spacer-2);--propskit-slider-progress-percent:var(--slider-percent);--propskit-slider-thumb-travel-offset:calc((var(--slider-complete) - 1) * var(--slider-thumb-width) - var(--propskit-slider-thumb-inset));--slider-thumb-edge-fade:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-thumb-opacity:calc(var(--slider-thumb-edge-fade) * var(--slider-thumb-edge-fade));--slider-tick-opacity:.5;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color), var(--handle-shadow)!important;&[type=delta],&[type=stepper],&[type=hue]{--propskit-slider-thumb-inset:0}&[type=stepper]{& datalist{opacity:0}&:hover,&:focus-within{& datalist{opacity:1}}}&[type=stepper] .fig-slider-input-container input[type=range]{margin-left:0;width:100%!important}& .fig-slider-input-container{overflow:hidden;box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)!important}}&:before{box-shadow:var(--propskit-slider-progress-shadow)!important;background:var(--figma-color-bordertranslucent)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{margin-left:0;border-radius:0!important;width:100%!important;&::-webkit-slider-thumb{margin-left:var(--propskit-slider-thumb-travel-offset)}&::-moz-range-thumb{margin-left:var(--propskit-slider-thumb-travel-offset)}}}&:not([type=delta]) .fig-slider-input-container:before{max-width:100%;width:var(--propskit-slider-progress-percent)!important}&[type=delta] .fig-slider-input-container:before{background:var(--figma-color-bordertranslucent)!important;--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}&:is([type=hue],[type=opacity]){& .fig-slider-input-container{&:after{content:"";z-index:0;pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0}& input[type=range]{z-index:1;position:relative;&::-webkit-slider-runnable-track{background:0 0}&::-moz-range-track{background:0 0}}}}&[type=hue] .fig-slider-input-container:after{--propskit-slider-hue-fade-size:30%;background:var(--bg-hue);mask-image:linear-gradient(to right, transparent 0%, #00000029 calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)), black var(--propskit-slider-progress-percent), #00000029 calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #00000029 calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)), black var(--propskit-slider-progress-percent), #00000029 calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)), transparent 100%)}&[type=opacity] .fig-slider-input-container:before{clip-path:inset(0 calc(100% - var(--propskit-slider-progress-percent)) 0 0 round var(--slider-border-radius));display:block;background:linear-gradient(to right, transparent, var(--color)), var(--slider-checkerboard)!important;width:100%!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--propskit-slider-number-right);z-index:2;border-radius:var(--radius-medium);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;top:2px;bottom:2px;box-shadow:none!important;outline:none!important;&[theme=light]{--propskit-slider-filled-text-color:#fff}&[theme=dark]{--propskit-slider-filled-text-color:#000}&:hover,&:has(input:focus){box-shadow:none!important;outline:none!important}& input{field-sizing:content;font-variant-numeric:tabular-nums;border-radius:var(--radius-medium);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}&[type=opacity][color]{& fig-slider{container-type:inline-size}& fig-input-number[theme] input{--propskit-slider-number-fill-edge:clamp(0px, calc(100% + var(--propskit-slider-number-right) - (1 - var(--slider-complete)) * 100cqw), 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right, var(--propskit-slider-filled-text-color) 0 var(--propskit-slider-number-fill-edge), var(--figma-color-text) var(--propskit-slider-number-fill-edge) 100%)!important;color:#0000!important}}&[data-elastic-dragging=true]{transform:scaleX(var(--propskit-slider-elastic-scale));transition:none}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20089_234507)\"><path d=\"M21.9392 13.4383C23.0416 12.3365 24.8073 12.3025 25.951 13.3347L26.0594 13.4383L26.1629 13.5476C27.1956 14.6911 27.1633 16.4583 26.0603 17.5613L25.118 18.5027C25.9194 19.3681 25.9023 20.7185 25.0613 21.5603L25.0603 21.5613C24.2185 22.4021 22.8681 22.4194 22.0027 21.618L18.1668 25.4549C17.8885 25.7327 17.5329 25.9242 17.1453 26.0017L15.5291 26.325C14.1302 26.6042 12.8971 25.3697 13.1756 23.9715L13.4988 22.3553C13.5763 21.9677 13.7679 21.6121 14.0457 21.3338L17.8806 17.4969C17.0787 16.6304 17.1 15.2789 17.9402 14.4383C18.7815 13.598 20.1303 13.58 20.9959 14.3806L21.9392 13.4383ZM17.4597 24.7469C17.3202 24.8861 17.1423 24.9816 16.949 25.0203L15.3328 25.3435C15.2891 25.3522 15.2458 25.359 15.2029 25.3621C15.2458 25.3593 15.2892 25.3532 15.3328 25.3445L16.949 25.0213C16.9976 25.0116 17.0453 24.998 17.0916 24.9812C17.1376 24.9647 17.1824 24.9447 17.2254 24.9217C17.2681 24.8987 17.3094 24.8725 17.3484 24.8435L17.4597 24.7478L21.9998 20.2078L22.6463 20.8543C22.6738 20.8817 22.7028 20.9072 22.7322 20.9314C22.7028 20.9071 22.6738 20.8808 22.6463 20.8533L21.9998 20.2068L17.4597 24.7469ZM14.156 24.1678C14.1474 24.2113 14.1414 24.2549 14.1385 24.2976C14.1355 24.3404 14.135 24.383 14.1375 24.4246C14.1425 24.5086 14.1584 24.5903 14.1834 24.6678V24.6658C14.1342 24.5118 14.1212 24.3417 14.156 24.1668V24.1678ZM15.4597 22.7469L15.1375 24.3631L15.4597 22.7478L19.9988 18.2078L21.2918 19.4998H21.2928L19.9988 18.2068L15.4597 22.7469ZM24.3533 20.8533C24.3257 20.8809 24.2969 20.9071 24.2674 20.9314L24.3533 20.8543C24.3827 20.8248 24.4105 20.7941 24.4363 20.7625C24.4106 20.7938 24.3826 20.824 24.3533 20.8533ZM22.2928 18.5008L23.6463 19.8543C23.6562 19.8643 23.6652 19.8752 23.6726 19.8865L23.6463 19.8533L22.2928 18.4998V18.5008ZM25.3533 16.8533L23.7068 18.4998L25.3533 16.8543C25.3991 16.8085 25.4411 16.7598 25.4812 16.7107C25.4412 16.7596 25.3989 16.8077 25.3533 16.8533ZM18.5232 16.7097C18.5597 16.7602 18.6 16.809 18.6453 16.8543L19.2908 17.4998H19.2918L18.6453 16.8533C18.6002 16.8081 18.5596 16.7598 18.5232 16.7097ZM23.3533 14.8523L20.9998 17.2058L19.6463 15.8523C19.5654 15.772 19.4341 15.7719 19.3533 15.8523C19.3404 15.8653 19.3299 15.8801 19.3211 15.8953C19.3298 15.8803 19.3406 15.8661 19.3533 15.8533C19.4342 15.7725 19.5654 15.7727 19.6463 15.8533L20.9998 17.2068L23.3533 14.8533C23.3756 14.831 23.3987 14.8093 23.4226 14.7898L23.3533 14.8523ZM3.43924 2.93924C3.85511 2.52338 4.47546 2.3891 5.02616 2.59549L16.0262 6.72049C16.6409 6.95101 17.035 7.55433 16.9978 8.20975C16.9605 8.86518 16.5009 9.42047 15.864 9.57987L11.2371 10.7371L10.0799 15.364C9.92047 16.0009 9.36518 16.4605 8.70975 16.4978C8.05433 16.535 7.45101 16.1409 7.22049 15.5262L3.09549 4.52616C2.8891 3.97546 3.02338 3.35511 3.43924 2.93924ZM18.4959 15.3279C18.4915 15.3345 18.4875 15.3417 18.4832 15.3484C18.5076 15.3103 18.5341 15.2728 18.5633 15.2371L18.4959 15.3279ZM24.6453 14.8533C24.682 14.8901 24.7147 14.9296 24.7439 14.9705C24.7147 14.9294 24.6821 14.8892 24.6453 14.8523C24.637 14.844 24.6275 14.8367 24.6189 14.8289C24.6276 14.837 24.6368 14.8449 24.6453 14.8533ZM25.5974 14.4461C25.631 14.4969 25.662 14.5492 25.6902 14.6023C25.6326 14.4937 25.5642 14.389 25.4842 14.2908L25.5974 14.4461ZM24.1668 13.5935C24.157 13.5927 24.1473 13.5913 24.1375 13.5906L23.9998 13.5857C24.0555 13.5857 24.1112 13.5887 24.1668 13.5935Z\" fill=\"white\"/></g><path d=\"M22.6472 14.1463C23.3946 13.3992 24.6058 13.3992 25.3532 14.1463C26.1005 14.8938 26.1005 16.1059 25.3532 16.8533L23.7077 18.4988L24.3542 19.1453C24.8254 19.6168 24.8253 20.3809 24.3542 20.8524C23.8828 21.3237 23.1186 21.3236 22.6472 20.8524L22.0007 20.2069L17.4606 24.7459C17.3211 24.8853 17.1433 24.9806 16.9499 25.0194L15.3337 25.3426C14.6341 25.4823 14.0172 24.8654 14.1569 24.1658L14.4802 22.5506C14.5189 22.3572 14.6142 22.1784 14.7536 22.0389L19.2927 17.4988L18.6462 16.8524C18.1752 16.3809 18.1759 15.6157 18.6472 15.1444C19.1185 14.6737 19.8829 14.6736 20.3542 15.1444L21.0007 15.7908L22.6472 14.1463ZM15.4606 22.7459L15.1374 24.3621L16.7536 24.0389L21.2936 19.4998L19.9997 18.2059L15.4606 22.7459ZM4.14618 3.64631C4.28483 3.50767 4.49189 3.46321 4.67548 3.53205L15.6755 7.65705C15.8803 7.73388 16.011 7.93474 15.9987 8.15315C15.9863 8.37167 15.8331 8.55709 15.6208 8.61018L10.4118 9.91194L9.11005 15.1209C9.05696 15.3333 8.87154 15.4864 8.65302 15.4988C8.43465 15.5111 8.23375 15.3804 8.15692 15.1756L4.03192 4.17561C3.96308 3.99203 4.00756 3.78495 4.14618 3.64631Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20089_234507\" x=\"0\" y=\"0.5\" width=\"29.9133\" height=\"29.8647\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20089_234507\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20089_234507\" result=\"shape\"/></filter></defs></svg>") 3 3, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}body.fig-lab-rotate-active,body.fig-lab-rotate-active *{cursor:var(--fig-lab-cursor-rotate)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle{&[type=color]{--width:.75rem;--height:.75rem;--fig-handle-padding:1px;--fig-handle-shadow:none;&:hover,&:focus-within,&[selected]:not([selected=false]){--width:1rem;--height:1rem;--fig-handle-outline-color:transparent}&.dragging,&:active{--fig-handle-padding:2px!important}&[selected]:not([selected=false]){--fig-handle-padding:2px}}}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}propskit-oscillator{--aspect-ratio:2 / 1;--oscillator-stroke-width:2;--propskit-oscillator-playhead-radius:5px;flex-direction:column;width:100%;display:flex;& .propskit-oscillator-svg-container{border-radius:var(--radius-medium);padding:var(--spacer-3) var(--spacer-5);margin-bottom:var(--spacer-2);position:relative;overflow:hidden;&:before{inset:0 var(--spacer-3);content:"";background:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);position:absolute}&:is(:hover,:active,:focus,:focus-visible,:focus-within){overflow:visible}& path{stroke:var(--figma-color-border-strong)}}& .propskit-oscillator-svg{width:100%;aspect-ratio:var(--aspect-ratio);z-index:1;display:block;position:relative;overflow:visible;& .propskit-oscillator-handle{opacity:0}&:hover,&:focus-within,&.dragging{& .propskit-oscillator-handle{opacity:1}}}& .propskit-oscillator-bounds{fill:#0000}& .propskit-oscillator-baseline{pointer-events:none;stroke:var(--figma-color-bordertranslucent);stroke-width:var(--oscillator-stroke-width);stroke-linecap:round}& .propskit-oscillator-path{pointer-events:none;fill:none;stroke:var(--figma-color-text);stroke-width:var(--oscillator-stroke-width);stroke-linejoin:round;stroke-linecap:round}& .propskit-oscillator-playhead{pointer-events:none;r:var(--propskit-oscillator-playhead-radius);fill:var(--handle-color);stroke:var(--figma-color-bg);stroke-width:1px}& .propskit-oscillator-handle{pointer-events:all;cursor:default;overflow:visible;& .propskit-oscillator-handle-inner{place-items:center;width:100%;height:100%;display:grid;overflow:visible}}& .propskit-oscillator-frequency-handle{cursor:ew-resize;& fig-handle,& fig-handle:hover,& fig-handle .fig-handle-hit-area,& fig-handle:hover .fig-handle-hit-area,& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:ew-resize!important}}& .propskit-oscillator-amplitude-handle{cursor:ns-resize;& fig-handle,& fig-handle:hover,& fig-handle .fig-handle-hit-area,& fig-handle:hover .fig-handle-hit-area,& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:ns-resize!important}}& .propskit-oscillator-waves{flex-direction:column;gap:0;display:flex}& .propskit-oscillator-wave{margin-bottom:0;&>fig-header{& .propskit-oscillator-remove-button,& .propskit-oscillator-add-type-button{flex-shrink:0}}}& .propskit-oscillator-field{width:100%}& .propskit-oscillator-add-type-button{width:var(--spacer-4);height:var(--spacer-4);min-width:var(--spacer-4)}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.6}}fig-reorder{display:contents}fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item],fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header *,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>label{cursor:grab}fig-reorder>.dragging{background-color:var(--figma-color-bg-selected)}[data-reorder-handle]{cursor:grab}fig-reorder[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}body.fig-reorder-dragging,body.fig-reorder-dragging *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}.fig-reorder-indicator{pointer-events:none;z-index:1000000;background:var(--figma-color-border-strong);position:fixed}.fig-reorder-indicator[data-axis=vertical]{height:2px}.fig-reorder-indicator[data-axis=horizontal]{width:2px}:root,:host{--icon-24-eyedropper:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E")}dialog[is=fig-toast]{contain:layout paint;--z-index:999999;z-index:var(--z-index);box-shadow:var(--figma-elevation-100);border-radius:var(--radius-large);padding:var(--spacer-2) var(--spacer-3);align-items:center;gap:var(--spacer-2);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--figma-color-bg);justify-content:center;&[open]:not([open=false]){display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}& fig-button:last-child{margin-right:calc(var(--spacer-2) * -1)}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=danger]{background-color:var(--figma-color-bg-danger);color-scheme:dark}&[theme=brand]{background-color:var(--figma-color-bg-brand);color-scheme:dark}&[theme=success]{background-color:var(--figma-color-bg-success);color-scheme:dark}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{contain:layout;width:240px;padding:0;& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}&>fig-content{padding-bottom:var(--spacer-2-5)}& .fig-fill-picker-close{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& fig-preview{overflow:visible}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}&.is-hue-only{grid-template-rows:1fr;& .fig-fill-picker-eyedropper{width:auto;height:var(--spacer-4);aspect-ratio:auto;grid-row:1}}}& .fig-fill-picker-inputs{&:not([direction=vertical]):not(:has(>label)){grid-template-columns:var(--fig-field-left-padding) 3.5rem var(--spacer-2) minmax(0, 1fr) var(--fig-field-right-padding)}& .fig-fill-picker-input-mode{flex-shrink:0;align-self:center;width:3.5rem}& .fig-fill-picker-input-fields{width:100%;min-width:0;display:flex;& .input-combo{flex:1;min-width:0;& fig-input-number>input,& fig-input-text:not(.fig-fill-picker-ci-hex)>input{text-align:center;padding-inline:0}}& fig-input-text{flex:1;min-width:0}& .fig-fill-picker-ci-css{font-variant-numeric:tabular-nums}& .fig-fill-picker-ci-hex-row{& .fig-fill-picker-ci-hex{flex:auto;min-width:0}& .fig-fill-picker-ci-a{flex:0 0 3rem}}& .fig-fill-picker-ci-a{flex:0 0 2.75rem;min-width:2.75rem}}}& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);margin-top:calc(var(--spacer-4) + var(--spacer-1));background:0 0;margin-bottom:0;&:after{display:none}}& fig-field.fig-fill-picker-gradient-header{grid-template-columns:unset;grid-template-areas:unset;padding-right:var(--spacer-2);padding-left:var(--spacer-3);align-items:center;gap:var(--spacer-2);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}& .fig-fill-picker-gradient-type,& .fig-fill-picker-gradient-angle,& .fig-fill-picker-gradient-center{flex:1 1 0;width:auto;min-width:0}& .fig-fill-picker-gradient-type,& .fig-fill-picker-gradient-angle{display:flex}& .fig-fill-picker-gradient-angle{& input{flex:auto;width:100%;min-width:0;max-width:none}}& .fig-fill-picker-gradient-center{& fig-input-number{flex:1 1 0;width:auto;min-width:0}}& .fig-fill-picker-gradient-actions{align-items:center;gap:var(--spacer-1);flex-shrink:0;margin-left:auto;display:flex}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& .fig-fill-picker-gradient-space{& fig-select-option{&:hover:before,&:focus-visible:before{background-color:var(--figma-color-bg-tertiary)}}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex;& fig-reorder{display:contents}}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex;&.dragging{background-color:var(--figma-color-bg-selected)}&>.fig-fill-picker-stop-position{flex:0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}& fig-field.fig-fill-picker-media-header{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);justify-content:space-between;align-items:center;gap:var(--spacer-2);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}& .fig-fill-picker-scale-mode{flex:none;width:4.5rem}& .fig-fill-picker-scale{flex:none;width:56px}& .fig-fill-picker-media-rotate{flex-shrink:0;margin-left:auto}}& .fig-fill-picker-media-preview{width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3) var(--spacer-1);border-radius:var(--radius-medium);position:relative;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-button{visibility:hidden}&:hover{& fig-button{visibility:visible}}}}& fig-image.fig-fill-picker-media-preview{aspect-ratio:1;justify-content:center;align-items:center;display:flex;overflow:hidden}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{aspect-ratio:unset;max-width:none;max-height:none;width:calc(100% - var(--spacer-3) * 2);align-items:stretch;gap:var(--spacer-2);flex-direction:column;display:flex;overflow:visible;&>fig-preview{aspect-ratio:1;border-radius:var(--radius-medium);width:100%;max-width:none;overflow:hidden}}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}
1
+ fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.fig-layer-row{align-items:center;gap:var(--spacer-1);padding:var(--spacer-1) var(--spacer-2);height:var(--spacer-4);border-radius:var(--radius-medium);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-chevron);visibility:hidden;background:var(--figma-color-text-tertiary);width:var(--spacer-3);height:var(--spacer-3);left:calc(var(--spacer-3) * -1);top:var(--spacer-1);flex-shrink:0;transition:transform .15s;display:flex;position:absolute;rotate:-90deg;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .fig-layer-icon{width:var(--spacer-3);height:var(--spacer-3);color:var(--figma-color-icon-tertiary);margin-left:calc(var(--spacer-1) * -1);flex-shrink:0}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}fig-ai-prompt{--fig-ai-prompt-margin-inline:var(--spacer-3);box-sizing:border-box;width:calc(100% - var(--fig-ai-prompt-margin-inline) - var(--fig-ai-prompt-margin-inline));min-height:8rem;margin-inline:var(--fig-ai-prompt-margin-inline);border:1px solid var(--figma-color-border);border-radius:var(--radius-large);background:var(--figma-color-bg);color:var(--figma-color-text);flex-direction:column;display:flex;&:has(>fig-input-text:focus-within){outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&>fig-input-text{width:100%;min-width:0;box-shadow:none;font-size:var(--body-large-fontSize);background:0 0;border-radius:0;flex:auto;&:hover,&:has(textarea:focus){box-shadow:none;outline:0}&[disabled]:not([disabled=false]){box-shadow:none;background:0 0}&>textarea{box-sizing:border-box;width:100%;height:auto;min-height:var(--spacer-6);padding:var(--spacer-3);resize:none;font-size:inherit;align-self:stretch;padding-bottom:0}}&>fig-footer{box-shadow:none;border:none;justify-content:space-between}}fig-chat-message{box-sizing:border-box;width:100%;max-width:100%;color:var(--figma-color-text);font-size:var(--body-large-fontSize);line-height:calc(var(--line-height) + var(--spacer-1));overflow-wrap:anywhere;white-space:pre-wrap;display:block;&[from=user]{width:auto;padding:var(--spacer-2) var(--spacer-2-5);border-radius:var(--radius-large);background:var(--figma-color-bg-secondary);margin-inline-start:var(--spacer-4)}&[from=user]:has(>fig-avatar){margin-inline-end:calc(var(--spacer-4) + var(--spacer-2));position:relative;&>fig-avatar{right:calc(-1 * (var(--spacer-4) + var(--spacer-2)));position:absolute;bottom:0}}&+fig-chat-message{margin-top:var(--spacer-3)}}propskit-group{width:100%;margin-bottom:var(--spacer-2-5);display:block;& p{margin:0 var(--spacer-3) var(--spacer-2) var(--spacer-3)}&+propskit-group{box-shadow:inset 0 1px 0 0 var(--figma-color-border);&:not([name]){padding-top:var(--spacer-2-5)}}&[borderless]:not([borderless=false])+propskit-group{box-shadow:none;&:not([name]){padding-top:0}}&[compact]:not([compact=false])>fig-header{--fig-header-height:var(--spacer-5);height:var(--fig-header-height)}&>fig-header{cursor:default;padding-left:var(--spacer-3);&:focus-visible{--figma-focus-outline-radius:var(--radius-medium);outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset);border-radius:var(--figma-focus-outline-radius)}& h3{user-select:none;margin:0;& .propskit-group-chevron{--icon:var(--icon-16-chevron);--size:1rem;color:var(--figma-color-text-tertiary);transition:transform var(--transition-duration) var(--transition-timing-function);margin-left:calc(var(--spacer-3) * -1);transform:rotate(-90deg)}}}&:not([open]):not([open=true]),&[open=false]{margin-bottom:0;&>fig-header{color:var(--figma-color-text-secondary);&:hover{color:var(--figma-color-text);& .propskit-group-chevron{color:inherit}}}&>:not(fig-header){display:none}}&[open]:not([open=false])>fig-header .propskit-group-chevron{transform:rotate(0)}&>fig-header>.propskit-group-reset-tooltip{opacity:0;visibility:hidden;pointer-events:none;color:var(--figma-color-icon-tertiary);transition:opacity var(--transition-duration) var(--transition-timing-function), visibility var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);flex-shrink:0;& fig-icon{color:var(--figma-color-icon-tertiary)}&:hover,&:focus-within{& fig-icon{color:var(--figma-color-icon-primary,var(--figma-color-icon))}}}&[data-dirty]:not([data-dirty=false]):not([show-reset=false])>fig-header>.propskit-group-reset-tooltip:not([hidden]){opacity:1;visibility:visible;pointer-events:auto}&[show-reset=false]>fig-header>.propskit-group-reset-tooltip{display:none}}main:has(>propskit-group[name]:first-child),fig-content:has(>propskit-group[name]:first-child){padding-top:0}main:has(>propskit-group[name]:last-child),fig-content:has(>propskit-group[name]:last-child){padding-bottom:0}:is(propskit-switch,propskit-color,propskit-gradient,propskit-text,propskit-number,propskit-slider)[size=large]{& fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5)}}:is(propskit-color,propskit-number)[size=large]{& fig-field fig-input-number{margin-right:var(--spacer-1)}}propskit-text[size=large]{& fig-field>fig-input-text{margin-right:var(--spacer-1)}}propskit-switch{--propskit-switch-height:1.5rem;--propskit-switch-vertical-padding:var(--spacer-1);--propskit-switch-horizontal-padding:var(--spacer-3);width:100%;height:calc(var(--propskit-switch-height) + var(--propskit-switch-vertical-padding) * 2);padding:var(--propskit-switch-vertical-padding) var(--propskit-switch-horizontal-padding);display:block;&[size=large]{--propskit-switch-height:2rem;& fig-field:not([direction=vertical]){padding-right:var(--spacer-1)}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){height:100%;padding:0 0 0 var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);align-items:center;display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:auto;align-items:center;margin:0;padding:0;display:flex;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-segmented-control{flex:none;min-width:4.5rem;margin-left:auto}}}propskit-color{--propskit-color-height:1.5rem;--propskit-color-vertical-padding:var(--spacer-1);--propskit-color-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-color-height) + var(--propskit-color-vertical-padding) * 2);padding:var(--propskit-color-vertical-padding) var(--propskit-color-horizontal-padding);display:block;&[size=large]{--propskit-color-height:2rem}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding-left:var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;width:auto;min-width:0;max-width:50%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-color{--figma-focus-outline-offset:1px;min-width:0;max-width:none;height:var(--propskit-color-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;align-self:center;margin-left:auto;position:relative;flex:0 auto!important;width:fit-content!important;&:hover:not(:focus):not(:focus-within):not(.has-popup-open){outline:none!important}&>.input-combo{flex:none;width:auto}& fig-input-text{flex:0 0 3.25rem;width:3.25rem;& input{field-sizing:fixed;box-sizing:border-box;width:100%;min-width:0}}& fig-input-number{flex:0 0 3rem;width:3rem;min-width:3rem;& input{field-sizing:fixed;box-sizing:border-box;width:100%;min-width:0}}}}}propskit-gradient{--propskit-gradient-height:1.5rem;--propskit-gradient-vertical-padding:var(--spacer-1);--propskit-gradient-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-gradient-height) + var(--propskit-gradient-vertical-padding) * 2);padding:var(--propskit-gradient-vertical-padding) var(--propskit-gradient-horizontal-padding);display:block;&[size=large]{--propskit-gradient-height:2rem;& fig-field:not([direction=vertical]){padding-right:var(--spacer-1)}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding:0 var(--spacer-1) 0 var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;min-width:0;max-width:40%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:0 auto;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-gradient{border-radius:var(--radius-medium);flex:0 0 50%;width:50%;min-width:0;margin-left:auto;position:relative;&:hover{outline:none!important}}}}propskit-select{--propskit-select-height:1.5rem;--propskit-select-vertical-padding:var(--spacer-1);--propskit-select-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-select-height) + var(--propskit-select-vertical-padding) * 2);padding:var(--propskit-select-vertical-padding) var(--propskit-select-horizontal-padding);display:block;&[size=large]{--propskit-select-height:2rem;& fig-field:not([direction=vertical]){padding-left:0;&>label{inset:0 auto 0 var(--spacer-2-5);width:calc(50% - var(--spacer-2-5))}& fig-select{padding-right:var(--spacer-1);&:after{right:calc(.25rem + var(--spacer-1))}}& fig-select::part(trigger){padding-left:var(--spacer-2-5)}}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);align-items:center;height:100%;padding:0;display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{inset:0 auto 0 var(--spacer-2);z-index:1;width:calc(50% - var(--spacer-2));min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;align-items:center;margin:0;padding:0;display:flex;position:absolute;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-select{border-radius:var(--radius-medium);width:100%;min-width:0;height:100%;box-shadow:none;--fig-select-trigger-width:100%;background:0 0;flex:auto;align-self:stretch;display:flex;position:relative;&::part(label){text-align:right}}}}propskit-text{--propskit-text-height:1.5rem;--propskit-text-vertical-padding:var(--spacer-1);--propskit-text-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-text-height) + var(--propskit-text-vertical-padding) * 2);padding:var(--propskit-text-vertical-padding) var(--propskit-text-horizontal-padding);display:block;&[size=large]{--propskit-text-height:2rem}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding-left:var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;width:auto;min-width:0;max-width:50%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-text{--figma-focus-outline-offset:1px;min-width:0;max-width:none;height:var(--propskit-text-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;align-self:center;margin-left:auto;position:relative;flex:0 auto!important;width:fit-content!important;&:has(input:focus){outline:var(--figma-focus-outline)!important;outline-offset:var(--figma-focus-outline-offset)!important}& input{field-sizing:content;text-align:right;flex:none;width:auto;min-width:0;max-width:100%;&:not(:focus){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}}}}propskit-number{--propskit-number-height:1.5rem;--propskit-number-vertical-padding:var(--spacer-1);--propskit-number-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-number-height) + var(--propskit-number-vertical-padding) * 2);padding:var(--propskit-number-vertical-padding) var(--propskit-number-horizontal-padding);display:block;&[size=large]{--propskit-number-height:2rem;& fig-field:not([direction=vertical])>label{inset:0 auto 0 var(--spacer-2-5)}}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}}&[steppers]:not([steppers=false]) fig-input-number input{padding-right:0}& fig-field:not([direction=vertical]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);outline:none;height:100%;display:flex;position:relative;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{inset:0 auto 0 var(--spacer-2);z-index:1;width:calc(50% - var(--spacer-2));min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;align-items:center;margin:0;padding:0;display:flex;position:absolute;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-number{width:fit-content;min-width:0;height:var(--propskit-number-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;flex:none;align-self:center;margin-left:auto;position:relative;outline:none!important;&:has(input:focus){outline:none!important}& input{field-sizing:content;text-align:right;font-variant-numeric:tabular-nums;flex:none;width:auto;min-width:0}}}}propskit-slider{--propskit-slider-elastic-distance:calc(var(--spacer-2) + .25rem);--propskit-slider-elastic-size:0px;--propskit-slider-elastic-scale:1;--propskit-slider-elastic-origin:left center;--propskit-slider-elastic-transition:.18s cubic-bezier(.2, 1.45, .35, 1);--propskit-slider-height:1.5rem;--propskit-slider-vertical-padding:var(--spacer-1);--propskit-slider-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;--propskit-slider-progress-shadow:inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);--propskit-slider-fig-slider-height:var(--propskit-slider-height);--propskit-slider-fig-slider-thumb-height:calc(var(--propskit-slider-fig-slider-height) - var(--spacer-2-5));--propskit-slider-number-right:2px;width:100%;height:calc(var(--propskit-slider-height) + var(--propskit-slider-vertical-padding) * 2);border-radius:var(--radius-medium);transform-origin:var(--propskit-slider-elastic-origin);transition:transform var(--propskit-slider-elastic-transition);padding-top:var(--propskit-slider-vertical-padding);padding-bottom:var(--propskit-slider-vertical-padding);padding-left:var(--propskit-slider-horizontal-padding);padding-right:var(--propskit-slider-horizontal-padding);display:block;position:relative;&[size=large]{--propskit-slider-height:2rem;--propskit-slider-fig-slider-thumb-height:calc(var(--propskit-slider-fig-slider-height) - var(--spacer-3));--propskit-slider-number-right:calc(2px + var(--spacer-1))}& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}&[type=opacity] fig-slider{--slider-checkerboard:var(--checkerboard)}& fig-field:not([direction=vertical]){padding-left:var(--spacer-2);height:100%;display:flex;position:relative;&>label{width:100%;min-width:0;max-width:none;color:var(--figma-color-text-secondary);align-items:center;gap:var(--spacer-1);flex:auto;height:100%;margin:0;padding:0;display:flex;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-slider{--slider-height:var(--propskit-slider-fig-slider-height);background-color:#0000;padding:0;position:absolute;inset:0;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}--slider-field-height:var(--propskit-slider-height);--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:var(--propskit-slider-fig-slider-thumb-height);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--propskit-slider-thumb-inset:var(--spacer-2);--propskit-slider-progress-percent:var(--slider-percent);--propskit-slider-thumb-travel-offset:calc((var(--slider-complete) - 1) * var(--slider-thumb-width) - var(--propskit-slider-thumb-inset));--slider-thumb-edge-fade:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-thumb-opacity:calc(var(--slider-thumb-edge-fade) * var(--slider-thumb-edge-fade));--slider-tick-opacity:.5;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color), var(--handle-shadow)!important;&[type=delta],&[type=stepper],&[type=hue]{--propskit-slider-thumb-inset:0}&[type=stepper]{& datalist{opacity:0}&:hover,&:focus-within{& datalist{opacity:1}}}&[type=stepper] .fig-slider-input-container input[type=range]{margin-left:0;width:100%!important}& .fig-slider-input-container{overflow:hidden;box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)!important}}&:before{box-shadow:var(--propskit-slider-progress-shadow)!important;background:var(--figma-color-bordertranslucent)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{margin-left:0;border-radius:0!important;width:100%!important;&::-webkit-slider-thumb{margin-left:var(--propskit-slider-thumb-travel-offset)}&::-moz-range-thumb{margin-left:var(--propskit-slider-thumb-travel-offset)}}}&:not([type=delta]) .fig-slider-input-container:before{max-width:100%;width:var(--propskit-slider-progress-percent)!important}&[type=delta] .fig-slider-input-container:before{background:var(--figma-color-bordertranslucent)!important;--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}&:is([type=hue],[type=opacity]){& .fig-slider-input-container{&:after{content:"";z-index:0;pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0}& input[type=range]{z-index:1;position:relative;&::-webkit-slider-runnable-track{background:0 0}&::-moz-range-track{background:0 0}}}}&[type=hue] .fig-slider-input-container:after{--propskit-slider-hue-fade-size:30%;background:var(--bg-hue);mask-image:linear-gradient(to right, transparent 0%, #00000029 calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)), black var(--propskit-slider-progress-percent), #00000029 calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #00000029 calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)), black var(--propskit-slider-progress-percent), #00000029 calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)), transparent 100%)}&[type=opacity] .fig-slider-input-container:before{clip-path:inset(0 calc(100% - var(--propskit-slider-progress-percent)) 0 0 round var(--slider-border-radius));display:block;background:linear-gradient(to right, transparent, var(--color)), var(--slider-checkerboard)!important;width:100%!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--propskit-slider-number-right);z-index:2;border-radius:var(--radius-medium);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;top:2px;bottom:2px;box-shadow:none!important;outline:none!important;&[theme=light]{--propskit-slider-filled-text-color:#fff}&[theme=dark]{--propskit-slider-filled-text-color:#000}&:hover,&:has(input:focus){box-shadow:none!important;outline:none!important}& input{field-sizing:content;font-variant-numeric:tabular-nums;border-radius:var(--radius-medium);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}&[type=opacity][color]{& fig-slider{container-type:inline-size}& fig-input-number[theme] input{--propskit-slider-number-fill-edge:clamp(0px, calc(100% + var(--propskit-slider-number-right) - (1 - var(--slider-complete)) * 100cqw), 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right, var(--propskit-slider-filled-text-color) 0 var(--propskit-slider-number-fill-edge), var(--figma-color-text) var(--propskit-slider-number-fill-edge) 100%)!important;color:#0000!important}}&[data-elastic-dragging=true]{transform:scaleX(var(--propskit-slider-elastic-scale));transition:none}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20089_234507)\"><path d=\"M21.9392 13.4383C23.0416 12.3365 24.8073 12.3025 25.951 13.3347L26.0594 13.4383L26.1629 13.5476C27.1956 14.6911 27.1633 16.4583 26.0603 17.5613L25.118 18.5027C25.9194 19.3681 25.9023 20.7185 25.0613 21.5603L25.0603 21.5613C24.2185 22.4021 22.8681 22.4194 22.0027 21.618L18.1668 25.4549C17.8885 25.7327 17.5329 25.9242 17.1453 26.0017L15.5291 26.325C14.1302 26.6042 12.8971 25.3697 13.1756 23.9715L13.4988 22.3553C13.5763 21.9677 13.7679 21.6121 14.0457 21.3338L17.8806 17.4969C17.0787 16.6304 17.1 15.2789 17.9402 14.4383C18.7815 13.598 20.1303 13.58 20.9959 14.3806L21.9392 13.4383ZM17.4597 24.7469C17.3202 24.8861 17.1423 24.9816 16.949 25.0203L15.3328 25.3435C15.2891 25.3522 15.2458 25.359 15.2029 25.3621C15.2458 25.3593 15.2892 25.3532 15.3328 25.3445L16.949 25.0213C16.9976 25.0116 17.0453 24.998 17.0916 24.9812C17.1376 24.9647 17.1824 24.9447 17.2254 24.9217C17.2681 24.8987 17.3094 24.8725 17.3484 24.8435L17.4597 24.7478L21.9998 20.2078L22.6463 20.8543C22.6738 20.8817 22.7028 20.9072 22.7322 20.9314C22.7028 20.9071 22.6738 20.8808 22.6463 20.8533L21.9998 20.2068L17.4597 24.7469ZM14.156 24.1678C14.1474 24.2113 14.1414 24.2549 14.1385 24.2976C14.1355 24.3404 14.135 24.383 14.1375 24.4246C14.1425 24.5086 14.1584 24.5903 14.1834 24.6678V24.6658C14.1342 24.5118 14.1212 24.3417 14.156 24.1668V24.1678ZM15.4597 22.7469L15.1375 24.3631L15.4597 22.7478L19.9988 18.2078L21.2918 19.4998H21.2928L19.9988 18.2068L15.4597 22.7469ZM24.3533 20.8533C24.3257 20.8809 24.2969 20.9071 24.2674 20.9314L24.3533 20.8543C24.3827 20.8248 24.4105 20.7941 24.4363 20.7625C24.4106 20.7938 24.3826 20.824 24.3533 20.8533ZM22.2928 18.5008L23.6463 19.8543C23.6562 19.8643 23.6652 19.8752 23.6726 19.8865L23.6463 19.8533L22.2928 18.4998V18.5008ZM25.3533 16.8533L23.7068 18.4998L25.3533 16.8543C25.3991 16.8085 25.4411 16.7598 25.4812 16.7107C25.4412 16.7596 25.3989 16.8077 25.3533 16.8533ZM18.5232 16.7097C18.5597 16.7602 18.6 16.809 18.6453 16.8543L19.2908 17.4998H19.2918L18.6453 16.8533C18.6002 16.8081 18.5596 16.7598 18.5232 16.7097ZM23.3533 14.8523L20.9998 17.2058L19.6463 15.8523C19.5654 15.772 19.4341 15.7719 19.3533 15.8523C19.3404 15.8653 19.3299 15.8801 19.3211 15.8953C19.3298 15.8803 19.3406 15.8661 19.3533 15.8533C19.4342 15.7725 19.5654 15.7727 19.6463 15.8533L20.9998 17.2068L23.3533 14.8533C23.3756 14.831 23.3987 14.8093 23.4226 14.7898L23.3533 14.8523ZM3.43924 2.93924C3.85511 2.52338 4.47546 2.3891 5.02616 2.59549L16.0262 6.72049C16.6409 6.95101 17.035 7.55433 16.9978 8.20975C16.9605 8.86518 16.5009 9.42047 15.864 9.57987L11.2371 10.7371L10.0799 15.364C9.92047 16.0009 9.36518 16.4605 8.70975 16.4978C8.05433 16.535 7.45101 16.1409 7.22049 15.5262L3.09549 4.52616C2.8891 3.97546 3.02338 3.35511 3.43924 2.93924ZM18.4959 15.3279C18.4915 15.3345 18.4875 15.3417 18.4832 15.3484C18.5076 15.3103 18.5341 15.2728 18.5633 15.2371L18.4959 15.3279ZM24.6453 14.8533C24.682 14.8901 24.7147 14.9296 24.7439 14.9705C24.7147 14.9294 24.6821 14.8892 24.6453 14.8523C24.637 14.844 24.6275 14.8367 24.6189 14.8289C24.6276 14.837 24.6368 14.8449 24.6453 14.8533ZM25.5974 14.4461C25.631 14.4969 25.662 14.5492 25.6902 14.6023C25.6326 14.4937 25.5642 14.389 25.4842 14.2908L25.5974 14.4461ZM24.1668 13.5935C24.157 13.5927 24.1473 13.5913 24.1375 13.5906L23.9998 13.5857C24.0555 13.5857 24.1112 13.5887 24.1668 13.5935Z\" fill=\"white\"/></g><path d=\"M22.6472 14.1463C23.3946 13.3992 24.6058 13.3992 25.3532 14.1463C26.1005 14.8938 26.1005 16.1059 25.3532 16.8533L23.7077 18.4988L24.3542 19.1453C24.8254 19.6168 24.8253 20.3809 24.3542 20.8524C23.8828 21.3237 23.1186 21.3236 22.6472 20.8524L22.0007 20.2069L17.4606 24.7459C17.3211 24.8853 17.1433 24.9806 16.9499 25.0194L15.3337 25.3426C14.6341 25.4823 14.0172 24.8654 14.1569 24.1658L14.4802 22.5506C14.5189 22.3572 14.6142 22.1784 14.7536 22.0389L19.2927 17.4988L18.6462 16.8524C18.1752 16.3809 18.1759 15.6157 18.6472 15.1444C19.1185 14.6737 19.8829 14.6736 20.3542 15.1444L21.0007 15.7908L22.6472 14.1463ZM15.4606 22.7459L15.1374 24.3621L16.7536 24.0389L21.2936 19.4998L19.9997 18.2059L15.4606 22.7459ZM4.14618 3.64631C4.28483 3.50767 4.49189 3.46321 4.67548 3.53205L15.6755 7.65705C15.8803 7.73388 16.011 7.93474 15.9987 8.15315C15.9863 8.37167 15.8331 8.55709 15.6208 8.61018L10.4118 9.91194L9.11005 15.1209C9.05696 15.3333 8.87154 15.4864 8.65302 15.4988C8.43465 15.5111 8.23375 15.3804 8.15692 15.1756L4.03192 4.17561C3.96308 3.99203 4.00756 3.78495 4.14618 3.64631Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20089_234507\" x=\"0\" y=\"0.5\" width=\"29.9133\" height=\"29.8647\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20089_234507\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20089_234507\" result=\"shape\"/></filter></defs></svg>") 3 3, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}body.fig-lab-rotate-active,body.fig-lab-rotate-active *{cursor:var(--fig-lab-cursor-rotate)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle{&[type=color]{--width:.75rem;--height:.75rem;--fig-handle-padding:1px;--fig-handle-shadow:none;&:hover,&:focus-within,&[selected]:not([selected=false]){--width:1rem;--height:1rem;--fig-handle-outline-color:transparent}&.dragging,&:active{--fig-handle-padding:2px!important}&[selected]:not([selected=false]){--fig-handle-padding:2px}}}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}propskit-oscillator{--aspect-ratio:2 / 1;--oscillator-stroke-width:2;--propskit-oscillator-playhead-radius:5px;flex-direction:column;width:100%;display:flex;& .propskit-oscillator-svg-container{border-radius:var(--radius-medium);padding:var(--spacer-3) var(--spacer-5);margin-bottom:var(--spacer-2);position:relative;overflow:hidden;&:before{inset:0 var(--spacer-3);content:"";background:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);position:absolute}&:is(:hover,:active,:focus,:focus-visible,:focus-within){overflow:visible}& path{stroke:var(--figma-color-border-strong)}}& .propskit-oscillator-svg{width:100%;aspect-ratio:var(--aspect-ratio);z-index:1;display:block;position:relative;overflow:visible;& .propskit-oscillator-handle{opacity:0}&:hover,&:focus-within,&.dragging{& .propskit-oscillator-handle{opacity:1}}}& .propskit-oscillator-bounds{fill:#0000}& .propskit-oscillator-baseline{pointer-events:none;stroke:var(--figma-color-bordertranslucent);stroke-width:var(--oscillator-stroke-width);stroke-linecap:round}& .propskit-oscillator-path{pointer-events:none;fill:none;stroke:var(--figma-color-text);stroke-width:var(--oscillator-stroke-width);stroke-linejoin:round;stroke-linecap:round}& .propskit-oscillator-playhead{pointer-events:none;r:var(--propskit-oscillator-playhead-radius);fill:var(--handle-color);stroke:var(--figma-color-bg);stroke-width:1px}& .propskit-oscillator-handle{pointer-events:all;cursor:default;overflow:visible;& .propskit-oscillator-handle-inner{place-items:center;width:100%;height:100%;display:grid;overflow:visible}}& .propskit-oscillator-frequency-handle{cursor:ew-resize;& fig-handle,& fig-handle:hover,& fig-handle .fig-handle-hit-area,& fig-handle:hover .fig-handle-hit-area,& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:ew-resize!important}}& .propskit-oscillator-amplitude-handle{cursor:ns-resize;& fig-handle,& fig-handle:hover,& fig-handle .fig-handle-hit-area,& fig-handle:hover .fig-handle-hit-area,& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:ns-resize!important}}& .propskit-oscillator-waves{flex-direction:column;gap:0;display:flex}& .propskit-oscillator-wave{margin-bottom:0;&>fig-header{& .propskit-oscillator-remove-button,& .propskit-oscillator-add-type-button{flex-shrink:0}}}& .propskit-oscillator-field{width:100%}& .propskit-oscillator-add-type-button{width:var(--spacer-4);height:var(--spacer-4);min-width:var(--spacer-4)}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.6}}fig-reorder{display:contents}fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item],fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header *,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>label{cursor:grab}fig-reorder>.dragging{background-color:var(--figma-color-bg-selected)}[data-reorder-handle]{cursor:grab}fig-reorder[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}body.fig-reorder-dragging,body.fig-reorder-dragging *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}.fig-reorder-indicator{pointer-events:none;z-index:1000000;background:var(--figma-color-border-strong);position:fixed}.fig-reorder-indicator[data-axis=vertical]{height:2px}.fig-reorder-indicator[data-axis=horizontal]{width:2px}:root,:host{--icon-24-eyedropper:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E")}dialog[is=fig-toast]{contain:layout paint;--z-index:999999;z-index:var(--z-index);box-shadow:var(--figma-elevation-100);border-radius:var(--radius-large);padding:var(--spacer-2) var(--spacer-3);align-items:center;gap:var(--spacer-2);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--figma-color-bg);justify-content:center;&[open]:not([open=false]){display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}& fig-button:last-child{margin-right:calc(var(--spacer-2) * -1)}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=danger]{background-color:var(--figma-color-bg-danger);color-scheme:dark}&[theme=brand]{background-color:var(--figma-color-bg-brand);color-scheme:dark}&[theme=success]{background-color:var(--figma-color-bg-success);color-scheme:dark}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{contain:layout;width:240px;padding:0;& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}&>fig-content{padding-bottom:var(--spacer-2-5)}& .fig-fill-picker-close{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& fig-preview{overflow:visible}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}&.is-hue-only{grid-template-rows:1fr;& .fig-fill-picker-eyedropper{width:auto;height:var(--spacer-4);aspect-ratio:auto;grid-row:1}}}& .fig-fill-picker-inputs{&:not([direction=vertical]):not(:has(>label)){grid-template-columns:var(--fig-field-left-padding) 3.5rem var(--spacer-2) minmax(0, 1fr) var(--fig-field-right-padding)}& .fig-fill-picker-input-mode{flex-shrink:0;align-self:center;width:3.5rem}& .fig-fill-picker-input-fields{width:100%;min-width:0;display:flex;& .input-combo{flex:1;min-width:0;& fig-input-number>input,& fig-input-text:not(.fig-fill-picker-ci-hex)>input{text-align:center;padding-inline:0}}& fig-input-text{flex:1;min-width:0}& .fig-fill-picker-ci-css{font-variant-numeric:tabular-nums}& .fig-fill-picker-ci-hex-row{& .fig-fill-picker-ci-hex{flex:auto;min-width:0}& .fig-fill-picker-ci-a{flex:0 0 3rem}}& .fig-fill-picker-ci-a{flex:0 0 2.75rem;min-width:2.75rem}}}& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);margin-top:calc(var(--spacer-4) + var(--spacer-1));background:0 0;margin-bottom:0;&:after{display:none}}& fig-field.fig-fill-picker-gradient-header{grid-template-columns:unset;grid-template-areas:unset;padding-right:var(--spacer-2);padding-left:var(--spacer-3);align-items:center;gap:var(--spacer-2);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}& .fig-fill-picker-gradient-type,& .fig-fill-picker-gradient-angle,& .fig-fill-picker-gradient-center{flex:1 1 0;width:auto;min-width:0}& .fig-fill-picker-gradient-type,& .fig-fill-picker-gradient-angle{display:flex}& .fig-fill-picker-gradient-angle{& input{flex:auto;width:100%;min-width:0;max-width:none}}& .fig-fill-picker-gradient-center{& fig-input-number{flex:1 1 0;width:auto;min-width:0}}& .fig-fill-picker-gradient-actions{align-items:center;gap:var(--spacer-1);flex-shrink:0;margin-left:auto;display:flex}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& .fig-fill-picker-gradient-space{& fig-select-option{&:hover:before,&:focus-visible:before{background-color:var(--figma-color-bg-tertiary)}}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex;& fig-reorder{display:contents}}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);padding-left:var(--spacer-3);gap:var(--spacer-2);display:flex;&.dragging{background-color:var(--figma-color-bg-selected)}&>.fig-fill-picker-stop-position{flex:0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}& fig-field.fig-fill-picker-media-header{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);justify-content:space-between;align-items:center;gap:var(--spacer-2);display:flex;&>:not(.fig-field-chevron):not(label){grid-area:unset}& .fig-fill-picker-scale-mode{flex:none;width:4.5rem}& .fig-fill-picker-scale{flex:none;width:56px}& .fig-fill-picker-media-rotate{flex-shrink:0;margin-left:auto}}& .fig-fill-picker-media-preview{width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3) var(--spacer-1);border-radius:var(--radius-medium);position:relative;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-button{visibility:hidden}&:hover{& fig-button{visibility:visible}}}}& fig-image.fig-fill-picker-media-preview{aspect-ratio:1;justify-content:center;align-items:center;display:flex;overflow:hidden}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{aspect-ratio:unset;max-width:none;max-height:none;width:calc(100% - var(--spacer-3) * 2);align-items:stretch;gap:var(--spacer-2);flex-direction:column;display:flex;overflow:visible;&>fig-preview{aspect-ratio:1;border-radius:var(--radius-medium);width:100%;max-width:none;overflow:hidden}}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}
package/dist/fig-lab.css CHANGED
@@ -1 +1 @@
1
- fig-ai-prompt{--fig-ai-prompt-margin-inline:var(--spacer-3);box-sizing:border-box;width:calc(100% - var(--fig-ai-prompt-margin-inline) - var(--fig-ai-prompt-margin-inline));min-height:8rem;margin-inline:var(--fig-ai-prompt-margin-inline);border:1px solid var(--figma-color-border);border-radius:var(--radius-large);background:var(--figma-color-bg);color:var(--figma-color-text);flex-direction:column;display:flex;&:has(>fig-input-text:focus-within){outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&>fig-input-text{width:100%;min-width:0;box-shadow:none;font-size:var(--body-large-fontSize);background:0 0;border-radius:0;flex:auto;&:hover,&:has(textarea:focus){box-shadow:none;outline:0}&[disabled]:not([disabled=false]){box-shadow:none;background:0 0}&>textarea{box-sizing:border-box;width:100%;height:auto;min-height:var(--spacer-6);padding:var(--spacer-3);resize:none;font-size:inherit;align-self:stretch;padding-bottom:0}}&>fig-footer{box-shadow:none;border:none;justify-content:space-between}}fig-chat-message{box-sizing:border-box;width:100%;max-width:100%;color:var(--figma-color-text);font-size:var(--body-large-fontSize);line-height:calc(var(--line-height) + var(--spacer-1));overflow-wrap:anywhere;white-space:pre-wrap;display:block;&[from=user]{width:auto;padding:var(--spacer-2) var(--spacer-2-5);border-radius:var(--radius-large);background:var(--figma-color-bg-secondary);margin-inline-start:var(--spacer-4)}&[from=user]:has(>fig-avatar){margin-inline-end:calc(var(--spacer-4) + var(--spacer-2));position:relative;&>fig-avatar{right:calc(-1 * (var(--spacer-4) + var(--spacer-2)));position:absolute;bottom:0}}&+fig-chat-message{margin-top:var(--spacer-3)}}propskit-group{width:100%;margin-bottom:var(--spacer-2-5);display:block;& p{margin:0 var(--spacer-3) var(--spacer-2) var(--spacer-3)}&+propskit-group{box-shadow:inset 0 1px 0 0 var(--figma-color-border);&:not([name]){padding-top:var(--spacer-2-5)}}&[borderless]:not([borderless=false])+propskit-group{box-shadow:none;&:not([name]){padding-top:0}}&[compact]:not([compact=false])>fig-header{--fig-header-height:var(--spacer-5);height:var(--fig-header-height)}&>fig-header{cursor:default;padding-left:var(--spacer-3);&:focus-visible{--figma-focus-outline-radius:var(--radius-medium);outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset);border-radius:var(--figma-focus-outline-radius)}& h3{user-select:none;margin:0;& .propskit-group-chevron{--icon:var(--icon-16-chevron);--size:1rem;color:var(--figma-color-text-tertiary);transition:transform var(--transition-duration) var(--transition-timing-function);margin-left:calc(var(--spacer-3) * -1);transform:rotate(-90deg)}}}&:not([open]):not([open=true]),&[open=false]{margin-bottom:0;&>fig-header{color:var(--figma-color-text-secondary);&:hover{color:var(--figma-color-text);& .propskit-group-chevron{color:inherit}}}&>:not(fig-header){display:none}}&[open]:not([open=false])>fig-header .propskit-group-chevron{transform:rotate(0)}&>fig-header>.propskit-group-reset-tooltip{opacity:0;visibility:hidden;pointer-events:none;color:var(--figma-color-icon-tertiary);transition:opacity var(--transition-duration) var(--transition-timing-function), visibility var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);flex-shrink:0;& fig-icon{color:var(--figma-color-icon-tertiary)}&:hover,&:focus-within{& fig-icon{color:var(--figma-color-icon-primary,var(--figma-color-icon))}}}&[data-dirty]:not([data-dirty=false]):not([show-reset=false])>fig-header>.propskit-group-reset-tooltip:not([hidden]){opacity:1;visibility:visible;pointer-events:auto}&[show-reset=false]>fig-header>.propskit-group-reset-tooltip{display:none}}main:has(>propskit-group[name]:first-child),fig-content:has(>propskit-group[name]:first-child){padding-top:0}main:has(>propskit-group[name]:last-child),fig-content:has(>propskit-group[name]:last-child){padding-bottom:0}:is(propskit-switch,propskit-color,propskit-gradient,propskit-text,propskit-number,propskit-slider):is(:not([size]),[size=large]){& fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5)}}:is(propskit-color,propskit-number):is(:not([size]),[size=large]){& fig-field fig-input-number{margin-right:var(--spacer-1)}}propskit-text:is(:not([size]),[size=large]){& fig-field>fig-input-text{margin-right:var(--spacer-1)}}propskit-switch{--propskit-switch-height:2rem;--propskit-switch-vertical-padding:var(--spacer-1);--propskit-switch-horizontal-padding:var(--spacer-3);width:100%;height:calc(var(--propskit-switch-height) + var(--propskit-switch-vertical-padding) * 2);padding:var(--propskit-switch-vertical-padding) var(--propskit-switch-horizontal-padding);display:block;&:not([size]),&[size=large]{& fig-field:not([direction=vertical]){padding-right:var(--spacer-1)}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){height:100%;padding:0 0 0 var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);align-items:center;display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:auto;align-items:center;margin:0;padding:0;display:flex;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-segmented-control{flex:none;min-width:4.5rem;margin-left:auto}}}propskit-color{--propskit-color-height:2rem;--propskit-color-vertical-padding:var(--spacer-1);--propskit-color-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-color-height) + var(--propskit-color-vertical-padding) * 2);padding:var(--propskit-color-vertical-padding) var(--propskit-color-horizontal-padding);display:block;&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding-left:var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;width:auto;min-width:0;max-width:50%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-color{--figma-focus-outline-offset:1px;min-width:0;max-width:none;height:var(--propskit-color-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;align-self:center;margin-left:auto;position:relative;flex:0 auto!important;width:fit-content!important;&:hover:not(:focus):not(:focus-within):not(.has-popup-open){outline:none!important}&>.input-combo{flex:none;width:auto}& fig-input-text{flex:0 0 3.25rem;width:3.25rem;& input{field-sizing:fixed;box-sizing:border-box;width:100%;min-width:0}}& fig-input-number{flex:0 0 3rem;width:3rem;min-width:3rem;& input{field-sizing:fixed;box-sizing:border-box;width:100%;min-width:0}}}}}propskit-gradient{--propskit-gradient-height:2rem;--propskit-gradient-vertical-padding:var(--spacer-1);--propskit-gradient-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-gradient-height) + var(--propskit-gradient-vertical-padding) * 2);padding:var(--propskit-gradient-vertical-padding) var(--propskit-gradient-horizontal-padding);display:block;&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding:0 var(--spacer-1) 0 var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;min-width:0;max-width:40%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:0 auto;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-gradient{border-radius:var(--radius-medium);flex:0 0 50%;width:50%;min-width:0;margin-left:auto;position:relative;&:hover{outline:none!important}}}}propskit-select{--propskit-select-height:2rem;--propskit-select-vertical-padding:var(--spacer-1);--propskit-select-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-select-height) + var(--propskit-select-vertical-padding) * 2);padding:var(--propskit-select-vertical-padding) var(--propskit-select-horizontal-padding);display:block;&:not([size]),&[size=large]{& fig-field:not([direction=vertical]){padding-left:0;&>label{inset:0 auto 0 var(--spacer-2-5);width:calc(50% - var(--spacer-2-5))}& fig-select{padding-right:var(--spacer-1);&:after{right:calc(.25rem + var(--spacer-1))}}& fig-select::part(trigger){padding-left:var(--spacer-2-5)}}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);align-items:center;height:100%;padding:0;display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{inset:0 auto 0 var(--spacer-2);z-index:1;width:calc(50% - var(--spacer-2));min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;align-items:center;margin:0;padding:0;display:flex;position:absolute;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-select{border-radius:var(--radius-medium);width:100%;min-width:0;height:100%;box-shadow:none;--fig-select-trigger-width:100%;background:0 0;flex:auto;align-self:stretch;display:flex;position:relative;&::part(label){text-align:right}}}}propskit-text{--propskit-text-height:2rem;--propskit-text-vertical-padding:var(--spacer-1);--propskit-text-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-text-height) + var(--propskit-text-vertical-padding) * 2);padding:var(--propskit-text-vertical-padding) var(--propskit-text-horizontal-padding);display:block;&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding-left:var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;width:auto;min-width:0;max-width:50%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-text{--figma-focus-outline-offset:1px;min-width:0;max-width:none;height:var(--propskit-text-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;align-self:center;margin-left:auto;position:relative;flex:0 auto!important;width:fit-content!important;&:has(input:focus){outline:var(--figma-focus-outline)!important;outline-offset:var(--figma-focus-outline-offset)!important}& input{field-sizing:content;text-align:right;flex:none;width:auto;min-width:0;max-width:100%;&:not(:focus){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}}}}propskit-number{--propskit-number-height:2rem;--propskit-number-vertical-padding:var(--spacer-1);--propskit-number-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-number-height) + var(--propskit-number-vertical-padding) * 2);padding:var(--propskit-number-vertical-padding) var(--propskit-number-horizontal-padding);display:block;&:not([size]),&[size=large]{& fig-field:not([direction=vertical])>label{inset:0 auto 0 var(--spacer-2-5)}}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}}&[steppers]:not([steppers=false]) fig-input-number input{padding-right:0}& fig-field:not([direction=vertical]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);outline:none;height:100%;display:flex;position:relative;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{inset:0 auto 0 var(--spacer-2);z-index:1;width:calc(50% - var(--spacer-2));min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;align-items:center;margin:0;padding:0;display:flex;position:absolute;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-number{width:fit-content;min-width:0;height:var(--propskit-number-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;flex:none;align-self:center;margin-left:auto;position:relative;outline:none!important;&:has(input:focus){outline:none!important}& input{field-sizing:content;text-align:right;font-variant-numeric:tabular-nums;flex:none;width:auto;min-width:0}}}}propskit-slider{--propskit-slider-elastic-distance:calc(var(--spacer-2) + .25rem);--propskit-slider-elastic-size:0px;--propskit-slider-elastic-scale:1;--propskit-slider-elastic-origin:left center;--propskit-slider-elastic-transition:.18s cubic-bezier(.2, 1.45, .35, 1);--propskit-slider-height:2rem;--propskit-slider-vertical-padding:var(--spacer-1);--propskit-slider-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;--propskit-slider-progress-shadow:inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);--propskit-slider-fig-slider-height:var(--propskit-slider-height);--propskit-slider-fig-slider-thumb-height:calc(var(--propskit-slider-fig-slider-height) - var(--spacer-2-5));--propskit-slider-number-right:2px;width:100%;height:calc(var(--propskit-slider-height) + var(--propskit-slider-vertical-padding) * 2);border-radius:var(--radius-medium);transform-origin:var(--propskit-slider-elastic-origin);transition:transform var(--propskit-slider-elastic-transition);padding-top:var(--propskit-slider-vertical-padding);padding-bottom:var(--propskit-slider-vertical-padding);padding-left:var(--propskit-slider-horizontal-padding);padding-right:var(--propskit-slider-horizontal-padding);display:block;position:relative;&:not([size]),&[size=large]{--propskit-slider-fig-slider-thumb-height:calc(var(--propskit-slider-fig-slider-height) - var(--spacer-3));--propskit-slider-number-right:calc(2px + var(--spacer-1))}& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}&[type=opacity] fig-slider{--slider-checkerboard:var(--checkerboard)}& fig-field:not([direction=vertical]){padding-left:var(--spacer-2);height:100%;display:flex;position:relative;&>label{width:100%;min-width:0;max-width:none;color:var(--figma-color-text-secondary);align-items:center;gap:var(--spacer-1);flex:auto;height:100%;margin:0;padding:0;display:flex;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-slider{--slider-height:var(--propskit-slider-fig-slider-height);background-color:#0000;padding:0;position:absolute;inset:0;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}--slider-field-height:var(--propskit-slider-height);--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:var(--propskit-slider-fig-slider-thumb-height);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--propskit-slider-thumb-inset:var(--spacer-2);--propskit-slider-progress-percent:var(--slider-percent);--propskit-slider-thumb-travel-offset:calc((var(--slider-complete) - 1) * var(--slider-thumb-width) - var(--propskit-slider-thumb-inset));--slider-thumb-edge-fade:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-thumb-opacity:calc(var(--slider-thumb-edge-fade) * var(--slider-thumb-edge-fade));--slider-tick-opacity:.5;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color), var(--handle-shadow)!important;&[type=delta],&[type=stepper],&[type=hue]{--propskit-slider-thumb-inset:0}&[type=stepper]{& datalist{opacity:0}&:hover,&:focus-within{& datalist{opacity:1}}}&[type=stepper] .fig-slider-input-container input[type=range]{margin-left:0;width:100%!important}& .fig-slider-input-container{overflow:hidden;box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)!important}}&:before{box-shadow:var(--propskit-slider-progress-shadow)!important;background:var(--figma-color-bordertranslucent)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{margin-left:0;border-radius:0!important;width:100%!important;&::-webkit-slider-thumb{margin-left:var(--propskit-slider-thumb-travel-offset)}&::-moz-range-thumb{margin-left:var(--propskit-slider-thumb-travel-offset)}}}&:not([type=delta]) .fig-slider-input-container:before{max-width:100%;width:var(--propskit-slider-progress-percent)!important}&[type=delta] .fig-slider-input-container:before{background:var(--figma-color-bordertranslucent)!important;--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}&:is([type=hue],[type=opacity]){& .fig-slider-input-container{&:after{content:"";z-index:0;pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0}& input[type=range]{z-index:1;position:relative;&::-webkit-slider-runnable-track{background:0 0}&::-moz-range-track{background:0 0}}}}&[type=hue] .fig-slider-input-container:after{--propskit-slider-hue-fade-size:30%;background:var(--bg-hue);mask-image:linear-gradient(to right, transparent 0%, #00000029 calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)), black var(--propskit-slider-progress-percent), #00000029 calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #00000029 calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)), black var(--propskit-slider-progress-percent), #00000029 calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)), transparent 100%)}&[type=opacity] .fig-slider-input-container:before{clip-path:inset(0 calc(100% - var(--propskit-slider-progress-percent)) 0 0 round var(--slider-border-radius));display:block;background:linear-gradient(to right, transparent, var(--color)), var(--slider-checkerboard)!important;width:100%!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--propskit-slider-number-right);z-index:2;border-radius:var(--radius-medium);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;top:2px;bottom:2px;box-shadow:none!important;outline:none!important;&[theme=light]{--propskit-slider-filled-text-color:#fff}&[theme=dark]{--propskit-slider-filled-text-color:#000}&:hover,&:has(input:focus){box-shadow:none!important;outline:none!important}& input{field-sizing:content;font-variant-numeric:tabular-nums;border-radius:var(--radius-medium);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}&[type=opacity][color]{& fig-slider{container-type:inline-size}& fig-input-number[theme] input{--propskit-slider-number-fill-edge:clamp(0px, calc(100% + var(--propskit-slider-number-right) - (1 - var(--slider-complete)) * 100cqw), 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right, var(--propskit-slider-filled-text-color) 0 var(--propskit-slider-number-fill-edge), var(--figma-color-text) var(--propskit-slider-number-fill-edge) 100%)!important;color:#0000!important}}&[data-elastic-dragging=true]{transform:scaleX(var(--propskit-slider-elastic-scale));transition:none}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20089_234507)\"><path d=\"M21.9392 13.4383C23.0416 12.3365 24.8073 12.3025 25.951 13.3347L26.0594 13.4383L26.1629 13.5476C27.1956 14.6911 27.1633 16.4583 26.0603 17.5613L25.118 18.5027C25.9194 19.3681 25.9023 20.7185 25.0613 21.5603L25.0603 21.5613C24.2185 22.4021 22.8681 22.4194 22.0027 21.618L18.1668 25.4549C17.8885 25.7327 17.5329 25.9242 17.1453 26.0017L15.5291 26.325C14.1302 26.6042 12.8971 25.3697 13.1756 23.9715L13.4988 22.3553C13.5763 21.9677 13.7679 21.6121 14.0457 21.3338L17.8806 17.4969C17.0787 16.6304 17.1 15.2789 17.9402 14.4383C18.7815 13.598 20.1303 13.58 20.9959 14.3806L21.9392 13.4383ZM17.4597 24.7469C17.3202 24.8861 17.1423 24.9816 16.949 25.0203L15.3328 25.3435C15.2891 25.3522 15.2458 25.359 15.2029 25.3621C15.2458 25.3593 15.2892 25.3532 15.3328 25.3445L16.949 25.0213C16.9976 25.0116 17.0453 24.998 17.0916 24.9812C17.1376 24.9647 17.1824 24.9447 17.2254 24.9217C17.2681 24.8987 17.3094 24.8725 17.3484 24.8435L17.4597 24.7478L21.9998 20.2078L22.6463 20.8543C22.6738 20.8817 22.7028 20.9072 22.7322 20.9314C22.7028 20.9071 22.6738 20.8808 22.6463 20.8533L21.9998 20.2068L17.4597 24.7469ZM14.156 24.1678C14.1474 24.2113 14.1414 24.2549 14.1385 24.2976C14.1355 24.3404 14.135 24.383 14.1375 24.4246C14.1425 24.5086 14.1584 24.5903 14.1834 24.6678V24.6658C14.1342 24.5118 14.1212 24.3417 14.156 24.1668V24.1678ZM15.4597 22.7469L15.1375 24.3631L15.4597 22.7478L19.9988 18.2078L21.2918 19.4998H21.2928L19.9988 18.2068L15.4597 22.7469ZM24.3533 20.8533C24.3257 20.8809 24.2969 20.9071 24.2674 20.9314L24.3533 20.8543C24.3827 20.8248 24.4105 20.7941 24.4363 20.7625C24.4106 20.7938 24.3826 20.824 24.3533 20.8533ZM22.2928 18.5008L23.6463 19.8543C23.6562 19.8643 23.6652 19.8752 23.6726 19.8865L23.6463 19.8533L22.2928 18.4998V18.5008ZM25.3533 16.8533L23.7068 18.4998L25.3533 16.8543C25.3991 16.8085 25.4411 16.7598 25.4812 16.7107C25.4412 16.7596 25.3989 16.8077 25.3533 16.8533ZM18.5232 16.7097C18.5597 16.7602 18.6 16.809 18.6453 16.8543L19.2908 17.4998H19.2918L18.6453 16.8533C18.6002 16.8081 18.5596 16.7598 18.5232 16.7097ZM23.3533 14.8523L20.9998 17.2058L19.6463 15.8523C19.5654 15.772 19.4341 15.7719 19.3533 15.8523C19.3404 15.8653 19.3299 15.8801 19.3211 15.8953C19.3298 15.8803 19.3406 15.8661 19.3533 15.8533C19.4342 15.7725 19.5654 15.7727 19.6463 15.8533L20.9998 17.2068L23.3533 14.8533C23.3756 14.831 23.3987 14.8093 23.4226 14.7898L23.3533 14.8523ZM3.43924 2.93924C3.85511 2.52338 4.47546 2.3891 5.02616 2.59549L16.0262 6.72049C16.6409 6.95101 17.035 7.55433 16.9978 8.20975C16.9605 8.86518 16.5009 9.42047 15.864 9.57987L11.2371 10.7371L10.0799 15.364C9.92047 16.0009 9.36518 16.4605 8.70975 16.4978C8.05433 16.535 7.45101 16.1409 7.22049 15.5262L3.09549 4.52616C2.8891 3.97546 3.02338 3.35511 3.43924 2.93924ZM18.4959 15.3279C18.4915 15.3345 18.4875 15.3417 18.4832 15.3484C18.5076 15.3103 18.5341 15.2728 18.5633 15.2371L18.4959 15.3279ZM24.6453 14.8533C24.682 14.8901 24.7147 14.9296 24.7439 14.9705C24.7147 14.9294 24.6821 14.8892 24.6453 14.8523C24.637 14.844 24.6275 14.8367 24.6189 14.8289C24.6276 14.837 24.6368 14.8449 24.6453 14.8533ZM25.5974 14.4461C25.631 14.4969 25.662 14.5492 25.6902 14.6023C25.6326 14.4937 25.5642 14.389 25.4842 14.2908L25.5974 14.4461ZM24.1668 13.5935C24.157 13.5927 24.1473 13.5913 24.1375 13.5906L23.9998 13.5857C24.0555 13.5857 24.1112 13.5887 24.1668 13.5935Z\" fill=\"white\"/></g><path d=\"M22.6472 14.1463C23.3946 13.3992 24.6058 13.3992 25.3532 14.1463C26.1005 14.8938 26.1005 16.1059 25.3532 16.8533L23.7077 18.4988L24.3542 19.1453C24.8254 19.6168 24.8253 20.3809 24.3542 20.8524C23.8828 21.3237 23.1186 21.3236 22.6472 20.8524L22.0007 20.2069L17.4606 24.7459C17.3211 24.8853 17.1433 24.9806 16.9499 25.0194L15.3337 25.3426C14.6341 25.4823 14.0172 24.8654 14.1569 24.1658L14.4802 22.5506C14.5189 22.3572 14.6142 22.1784 14.7536 22.0389L19.2927 17.4988L18.6462 16.8524C18.1752 16.3809 18.1759 15.6157 18.6472 15.1444C19.1185 14.6737 19.8829 14.6736 20.3542 15.1444L21.0007 15.7908L22.6472 14.1463ZM15.4606 22.7459L15.1374 24.3621L16.7536 24.0389L21.2936 19.4998L19.9997 18.2059L15.4606 22.7459ZM4.14618 3.64631C4.28483 3.50767 4.49189 3.46321 4.67548 3.53205L15.6755 7.65705C15.8803 7.73388 16.011 7.93474 15.9987 8.15315C15.9863 8.37167 15.8331 8.55709 15.6208 8.61018L10.4118 9.91194L9.11005 15.1209C9.05696 15.3333 8.87154 15.4864 8.65302 15.4988C8.43465 15.5111 8.23375 15.3804 8.15692 15.1756L4.03192 4.17561C3.96308 3.99203 4.00756 3.78495 4.14618 3.64631Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20089_234507\" x=\"0\" y=\"0.5\" width=\"29.9133\" height=\"29.8647\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20089_234507\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20089_234507\" result=\"shape\"/></filter></defs></svg>") 3 3, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}body.fig-lab-rotate-active,body.fig-lab-rotate-active *{cursor:var(--fig-lab-cursor-rotate)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle{&[type=color]{--width:.75rem;--height:.75rem;--fig-handle-padding:1px;--fig-handle-shadow:none;&:hover,&:focus-within,&[selected]:not([selected=false]){--width:1rem;--height:1rem;--fig-handle-outline-color:transparent}&.dragging,&:active{--fig-handle-padding:2px!important}&[selected]:not([selected=false]){--fig-handle-padding:2px}}}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}propskit-oscillator{--aspect-ratio:2 / 1;--oscillator-stroke-width:2;--propskit-oscillator-playhead-radius:5px;flex-direction:column;width:100%;display:flex;& .propskit-oscillator-svg-container{border-radius:var(--radius-medium);padding:var(--spacer-3) var(--spacer-5);margin-bottom:var(--spacer-2);position:relative;overflow:hidden;&:before{inset:0 var(--spacer-3);content:"";background:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);position:absolute}&:is(:hover,:active,:focus,:focus-visible,:focus-within){overflow:visible}& path{stroke:var(--figma-color-border-strong)}}& .propskit-oscillator-svg{width:100%;aspect-ratio:var(--aspect-ratio);z-index:1;display:block;position:relative;overflow:visible;& .propskit-oscillator-handle{opacity:0}&:hover,&:focus-within,&.dragging{& .propskit-oscillator-handle{opacity:1}}}& .propskit-oscillator-bounds{fill:#0000}& .propskit-oscillator-baseline{pointer-events:none;stroke:var(--figma-color-bordertranslucent);stroke-width:var(--oscillator-stroke-width);stroke-linecap:round}& .propskit-oscillator-path{pointer-events:none;fill:none;stroke:var(--figma-color-text);stroke-width:var(--oscillator-stroke-width);stroke-linejoin:round;stroke-linecap:round}& .propskit-oscillator-playhead{pointer-events:none;r:var(--propskit-oscillator-playhead-radius);fill:var(--handle-color);stroke:var(--figma-color-bg);stroke-width:1px}& .propskit-oscillator-handle{pointer-events:all;cursor:default;overflow:visible;& .propskit-oscillator-handle-inner{place-items:center;width:100%;height:100%;display:grid;overflow:visible}}& .propskit-oscillator-frequency-handle{cursor:ew-resize;& fig-handle,& fig-handle:hover,& fig-handle .fig-handle-hit-area,& fig-handle:hover .fig-handle-hit-area,& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:ew-resize!important}}& .propskit-oscillator-amplitude-handle{cursor:ns-resize;& fig-handle,& fig-handle:hover,& fig-handle .fig-handle-hit-area,& fig-handle:hover .fig-handle-hit-area,& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:ns-resize!important}}& .propskit-oscillator-waves{flex-direction:column;gap:0;display:flex}& .propskit-oscillator-wave{margin-bottom:0;&>fig-header{& .propskit-oscillator-remove-button,& .propskit-oscillator-add-type-button{flex-shrink:0}}}& .propskit-oscillator-field{width:100%}& .propskit-oscillator-add-type-button{width:var(--spacer-4);height:var(--spacer-4);min-width:var(--spacer-4)}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.6}}fig-reorder{display:contents}fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item],fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header *,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>label{cursor:grab}fig-reorder>.dragging{background-color:var(--figma-color-bg-selected)}[data-reorder-handle]{cursor:grab}fig-reorder[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}body.fig-reorder-dragging,body.fig-reorder-dragging *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}.fig-reorder-indicator{pointer-events:none;z-index:1000000;background:var(--figma-color-border-strong);position:fixed}.fig-reorder-indicator[data-axis=vertical]{height:2px}.fig-reorder-indicator[data-axis=horizontal]{width:2px}
1
+ fig-ai-prompt{--fig-ai-prompt-margin-inline:var(--spacer-3);box-sizing:border-box;width:calc(100% - var(--fig-ai-prompt-margin-inline) - var(--fig-ai-prompt-margin-inline));min-height:8rem;margin-inline:var(--fig-ai-prompt-margin-inline);border:1px solid var(--figma-color-border);border-radius:var(--radius-large);background:var(--figma-color-bg);color:var(--figma-color-text);flex-direction:column;display:flex;&:has(>fig-input-text:focus-within){outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&>fig-input-text{width:100%;min-width:0;box-shadow:none;font-size:var(--body-large-fontSize);background:0 0;border-radius:0;flex:auto;&:hover,&:has(textarea:focus){box-shadow:none;outline:0}&[disabled]:not([disabled=false]){box-shadow:none;background:0 0}&>textarea{box-sizing:border-box;width:100%;height:auto;min-height:var(--spacer-6);padding:var(--spacer-3);resize:none;font-size:inherit;align-self:stretch;padding-bottom:0}}&>fig-footer{box-shadow:none;border:none;justify-content:space-between}}fig-chat-message{box-sizing:border-box;width:100%;max-width:100%;color:var(--figma-color-text);font-size:var(--body-large-fontSize);line-height:calc(var(--line-height) + var(--spacer-1));overflow-wrap:anywhere;white-space:pre-wrap;display:block;&[from=user]{width:auto;padding:var(--spacer-2) var(--spacer-2-5);border-radius:var(--radius-large);background:var(--figma-color-bg-secondary);margin-inline-start:var(--spacer-4)}&[from=user]:has(>fig-avatar){margin-inline-end:calc(var(--spacer-4) + var(--spacer-2));position:relative;&>fig-avatar{right:calc(-1 * (var(--spacer-4) + var(--spacer-2)));position:absolute;bottom:0}}&+fig-chat-message{margin-top:var(--spacer-3)}}propskit-group{width:100%;margin-bottom:var(--spacer-2-5);display:block;& p{margin:0 var(--spacer-3) var(--spacer-2) var(--spacer-3)}&+propskit-group{box-shadow:inset 0 1px 0 0 var(--figma-color-border);&:not([name]){padding-top:var(--spacer-2-5)}}&[borderless]:not([borderless=false])+propskit-group{box-shadow:none;&:not([name]){padding-top:0}}&[compact]:not([compact=false])>fig-header{--fig-header-height:var(--spacer-5);height:var(--fig-header-height)}&>fig-header{cursor:default;padding-left:var(--spacer-3);&:focus-visible{--figma-focus-outline-radius:var(--radius-medium);outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset);border-radius:var(--figma-focus-outline-radius)}& h3{user-select:none;margin:0;& .propskit-group-chevron{--icon:var(--icon-16-chevron);--size:1rem;color:var(--figma-color-text-tertiary);transition:transform var(--transition-duration) var(--transition-timing-function);margin-left:calc(var(--spacer-3) * -1);transform:rotate(-90deg)}}}&:not([open]):not([open=true]),&[open=false]{margin-bottom:0;&>fig-header{color:var(--figma-color-text-secondary);&:hover{color:var(--figma-color-text);& .propskit-group-chevron{color:inherit}}}&>:not(fig-header){display:none}}&[open]:not([open=false])>fig-header .propskit-group-chevron{transform:rotate(0)}&>fig-header>.propskit-group-reset-tooltip{opacity:0;visibility:hidden;pointer-events:none;color:var(--figma-color-icon-tertiary);transition:opacity var(--transition-duration) var(--transition-timing-function), visibility var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);flex-shrink:0;& fig-icon{color:var(--figma-color-icon-tertiary)}&:hover,&:focus-within{& fig-icon{color:var(--figma-color-icon-primary,var(--figma-color-icon))}}}&[data-dirty]:not([data-dirty=false]):not([show-reset=false])>fig-header>.propskit-group-reset-tooltip:not([hidden]){opacity:1;visibility:visible;pointer-events:auto}&[show-reset=false]>fig-header>.propskit-group-reset-tooltip{display:none}}main:has(>propskit-group[name]:first-child),fig-content:has(>propskit-group[name]:first-child){padding-top:0}main:has(>propskit-group[name]:last-child),fig-content:has(>propskit-group[name]:last-child){padding-bottom:0}:is(propskit-switch,propskit-color,propskit-gradient,propskit-text,propskit-number,propskit-slider)[size=large]{& fig-field:not([direction=vertical]){padding-left:var(--spacer-2-5)}}:is(propskit-color,propskit-number)[size=large]{& fig-field fig-input-number{margin-right:var(--spacer-1)}}propskit-text[size=large]{& fig-field>fig-input-text{margin-right:var(--spacer-1)}}propskit-switch{--propskit-switch-height:1.5rem;--propskit-switch-vertical-padding:var(--spacer-1);--propskit-switch-horizontal-padding:var(--spacer-3);width:100%;height:calc(var(--propskit-switch-height) + var(--propskit-switch-vertical-padding) * 2);padding:var(--propskit-switch-vertical-padding) var(--propskit-switch-horizontal-padding);display:block;&[size=large]{--propskit-switch-height:2rem;& fig-field:not([direction=vertical]){padding-right:var(--spacer-1)}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){height:100%;padding:0 0 0 var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);align-items:center;display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:auto;align-items:center;margin:0;padding:0;display:flex;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-segmented-control{flex:none;min-width:4.5rem;margin-left:auto}}}propskit-color{--propskit-color-height:1.5rem;--propskit-color-vertical-padding:var(--spacer-1);--propskit-color-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-color-height) + var(--propskit-color-vertical-padding) * 2);padding:var(--propskit-color-vertical-padding) var(--propskit-color-horizontal-padding);display:block;&[size=large]{--propskit-color-height:2rem}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding-left:var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;width:auto;min-width:0;max-width:50%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-color{--figma-focus-outline-offset:1px;min-width:0;max-width:none;height:var(--propskit-color-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;align-self:center;margin-left:auto;position:relative;flex:0 auto!important;width:fit-content!important;&:hover:not(:focus):not(:focus-within):not(.has-popup-open){outline:none!important}&>.input-combo{flex:none;width:auto}& fig-input-text{flex:0 0 3.25rem;width:3.25rem;& input{field-sizing:fixed;box-sizing:border-box;width:100%;min-width:0}}& fig-input-number{flex:0 0 3rem;width:3rem;min-width:3rem;& input{field-sizing:fixed;box-sizing:border-box;width:100%;min-width:0}}}}}propskit-gradient{--propskit-gradient-height:1.5rem;--propskit-gradient-vertical-padding:var(--spacer-1);--propskit-gradient-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-gradient-height) + var(--propskit-gradient-vertical-padding) * 2);padding:var(--propskit-gradient-vertical-padding) var(--propskit-gradient-horizontal-padding);display:block;&[size=large]{--propskit-gradient-height:2rem;& fig-field:not([direction=vertical]){padding-right:var(--spacer-1)}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding:0 var(--spacer-1) 0 var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;min-width:0;max-width:40%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:0 auto;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-gradient{border-radius:var(--radius-medium);flex:0 0 50%;width:50%;min-width:0;margin-left:auto;position:relative;&:hover{outline:none!important}}}}propskit-select{--propskit-select-height:1.5rem;--propskit-select-vertical-padding:var(--spacer-1);--propskit-select-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-select-height) + var(--propskit-select-vertical-padding) * 2);padding:var(--propskit-select-vertical-padding) var(--propskit-select-horizontal-padding);display:block;&[size=large]{--propskit-select-height:2rem;& fig-field:not([direction=vertical]){padding-left:0;&>label{inset:0 auto 0 var(--spacer-2-5);width:calc(50% - var(--spacer-2-5))}& fig-select{padding-right:var(--spacer-1);&:after{right:calc(.25rem + var(--spacer-1))}}& fig-select::part(trigger){padding-left:var(--spacer-2-5)}}}&[disabled]:not([disabled=false]){pointer-events:none;& label{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);align-items:center;height:100%;padding:0;display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{inset:0 auto 0 var(--spacer-2);z-index:1;width:calc(50% - var(--spacer-2));min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;align-items:center;margin:0;padding:0;display:flex;position:absolute;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-select{border-radius:var(--radius-medium);width:100%;min-width:0;height:100%;box-shadow:none;--fig-select-trigger-width:100%;background:0 0;flex:auto;align-self:stretch;display:flex;position:relative;&::part(label){text-align:right}}}}propskit-text{--propskit-text-height:1.5rem;--propskit-text-vertical-padding:var(--spacer-1);--propskit-text-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-text-height) + var(--propskit-text-vertical-padding) * 2);padding:var(--propskit-text-vertical-padding) var(--propskit-text-horizontal-padding);display:block;&[size=large]{--propskit-text-height:2rem}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}}& fig-field:not([direction=vertical]){align-items:center;gap:var(--spacer-2);height:100%;padding-left:var(--spacer-2);border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);display:flex;position:relative;&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{z-index:1;width:auto;min-width:0;max-width:50%;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;flex:none;align-items:center;margin:0;padding:0;display:flex;position:relative;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-text{--figma-focus-outline-offset:1px;min-width:0;max-width:none;height:var(--propskit-text-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;align-self:center;margin-left:auto;position:relative;flex:0 auto!important;width:fit-content!important;&:has(input:focus){outline:var(--figma-focus-outline)!important;outline-offset:var(--figma-focus-outline-offset)!important}& input{field-sizing:content;text-align:right;flex:none;width:auto;min-width:0;max-width:100%;&:not(:focus){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}}}}propskit-number{--propskit-number-height:1.5rem;--propskit-number-vertical-padding:var(--spacer-1);--propskit-number-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;width:100%;height:calc(var(--propskit-number-height) + var(--propskit-number-vertical-padding) * 2);padding:var(--propskit-number-vertical-padding) var(--propskit-number-horizontal-padding);display:block;&[size=large]{--propskit-number-height:2rem;& fig-field:not([direction=vertical])>label{inset:0 auto 0 var(--spacer-2-5)}}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}}&[steppers]:not([steppers=false]) fig-input-number input{padding-right:0}& fig-field:not([direction=vertical]){border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);outline:none;height:100%;display:flex;position:relative;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0}&:hover:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)}&>label{inset:0 auto 0 var(--spacer-2);z-index:1;width:calc(50% - var(--spacer-2));min-width:0;color:var(--figma-color-text-secondary);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;align-items:center;margin:0;padding:0;display:flex;position:absolute;overflow:hidden;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-input-number{width:fit-content;min-width:0;height:var(--propskit-number-height);border-radius:var(--radius-medium);box-shadow:none;background-color:#0000;flex:none;align-self:center;margin-left:auto;position:relative;outline:none!important;&:has(input:focus){outline:none!important}& input{field-sizing:content;text-align:right;font-variant-numeric:tabular-nums;flex:none;width:auto;min-width:0}}}}propskit-slider{--propskit-slider-elastic-distance:calc(var(--spacer-2) + .25rem);--propskit-slider-elastic-size:0px;--propskit-slider-elastic-scale:1;--propskit-slider-elastic-origin:left center;--propskit-slider-elastic-transition:.18s cubic-bezier(.2, 1.45, .35, 1);--propskit-slider-height:1.5rem;--propskit-slider-vertical-padding:var(--spacer-1);--propskit-slider-horizontal-padding:var(--spacer-3);--figma-focus-outline-offset:1px;--propskit-slider-progress-shadow:inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a);--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);--propskit-slider-fig-slider-height:var(--propskit-slider-height);--propskit-slider-fig-slider-thumb-height:calc(var(--propskit-slider-fig-slider-height) - var(--spacer-2-5));--propskit-slider-number-right:2px;width:100%;height:calc(var(--propskit-slider-height) + var(--propskit-slider-vertical-padding) * 2);border-radius:var(--radius-medium);transform-origin:var(--propskit-slider-elastic-origin);transition:transform var(--propskit-slider-elastic-transition);padding-top:var(--propskit-slider-vertical-padding);padding-bottom:var(--propskit-slider-vertical-padding);padding-left:var(--propskit-slider-horizontal-padding);padding-right:var(--propskit-slider-horizontal-padding);display:block;position:relative;&[size=large]{--propskit-slider-height:2rem;--propskit-slider-fig-slider-thumb-height:calc(var(--propskit-slider-fig-slider-height) - var(--spacer-3));--propskit-slider-number-right:calc(2px + var(--spacer-1))}& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}&[type=opacity] fig-slider{--slider-checkerboard:var(--checkerboard)}& fig-field:not([direction=vertical]){padding-left:var(--spacer-2);height:100%;display:flex;position:relative;&>label{width:100%;min-width:0;max-width:none;color:var(--figma-color-text-secondary);align-items:center;gap:var(--spacer-1);flex:auto;height:100%;margin:0;padding:0;display:flex;& fig-icon:first-child{margin-left:calc(var(--spacer-1) * -1)}}& fig-slider{--slider-height:var(--propskit-slider-fig-slider-height);background-color:#0000;padding:0;position:absolute;inset:0;&:focus-within{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}--slider-field-height:var(--propskit-slider-height);--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:var(--propskit-slider-fig-slider-thumb-height);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--propskit-slider-thumb-inset:var(--spacer-2);--propskit-slider-progress-percent:var(--slider-percent);--propskit-slider-thumb-travel-offset:calc((var(--slider-complete) - 1) * var(--slider-thumb-width) - var(--propskit-slider-thumb-inset));--slider-thumb-edge-fade:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-thumb-opacity:calc(var(--slider-thumb-edge-fade) * var(--slider-thumb-edge-fade));--slider-tick-opacity:.5;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color), var(--handle-shadow)!important;&[type=delta],&[type=stepper],&[type=hue]{--propskit-slider-thumb-inset:0}&[type=stepper]{& datalist{opacity:0}&:hover,&:focus-within{& datalist{opacity:1}}}&[type=stepper] .fig-slider-input-container input[type=range]{margin-left:0;width:100%!important}& .fig-slider-input-container{overflow:hidden;box-shadow:none!important;background-color:var(--figma-color-bg-secondary)!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent)!important}}&:before{box-shadow:var(--propskit-slider-progress-shadow)!important;background:var(--figma-color-bordertranslucent)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{margin-left:0;border-radius:0!important;width:100%!important;&::-webkit-slider-thumb{margin-left:var(--propskit-slider-thumb-travel-offset)}&::-moz-range-thumb{margin-left:var(--propskit-slider-thumb-travel-offset)}}}&:not([type=delta]) .fig-slider-input-container:before{max-width:100%;width:var(--propskit-slider-progress-percent)!important}&[type=delta] .fig-slider-input-container:before{background:var(--figma-color-bordertranslucent)!important;--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}&:is([type=hue],[type=opacity]){& .fig-slider-input-container{&:after{content:"";z-index:0;pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0}& input[type=range]{z-index:1;position:relative;&::-webkit-slider-runnable-track{background:0 0}&::-moz-range-track{background:0 0}}}}&[type=hue] .fig-slider-input-container:after{--propskit-slider-hue-fade-size:30%;background:var(--bg-hue);mask-image:linear-gradient(to right, transparent 0%, #00000029 calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)), black var(--propskit-slider-progress-percent), #00000029 calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #00000029 calc(var(--propskit-slider-progress-percent) - var(--propskit-slider-hue-fade-size)), black var(--propskit-slider-progress-percent), #00000029 calc(var(--propskit-slider-progress-percent) + var(--propskit-slider-hue-fade-size)), transparent 100%)}&[type=opacity] .fig-slider-input-container:before{clip-path:inset(0 calc(100% - var(--propskit-slider-progress-percent)) 0 0 round var(--slider-border-radius));display:block;background:linear-gradient(to right, transparent, var(--color)), var(--slider-checkerboard)!important;width:100%!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--propskit-slider-number-right);z-index:2;border-radius:var(--radius-medium);background-color:#0000;border-left:0;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;top:2px;bottom:2px;box-shadow:none!important;outline:none!important;&[theme=light]{--propskit-slider-filled-text-color:#fff}&[theme=dark]{--propskit-slider-filled-text-color:#000}&:hover,&:has(input:focus){box-shadow:none!important;outline:none!important}& input{field-sizing:content;font-variant-numeric:tabular-nums;border-radius:var(--radius-medium);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}&[type=opacity][color]{& fig-slider{container-type:inline-size}& fig-input-number[theme] input{--propskit-slider-number-fill-edge:clamp(0px, calc(100% + var(--propskit-slider-number-right) - (1 - var(--slider-complete)) * 100cqw), 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right, var(--propskit-slider-filled-text-color) 0 var(--propskit-slider-number-fill-edge), var(--figma-color-text) var(--propskit-slider-number-fill-edge) 100%)!important;color:#0000!important}}&[data-elastic-dragging=true]{transform:scaleX(var(--propskit-slider-elastic-scale));transition:none}}body{--fig-lab-cursor:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_231516)\"><g filter=\"url(%23filter0_d_20065_231516)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_231516\" x=\"-0.5\" y=\"0.5\" width=\"20\" height=\"20\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_231516\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_231516\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_231516\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, default;--fig-lab-cursor-eyedropper:url("data:image/svg+xml,<svg width=\"33\" height=\"32\" viewBox=\"0 0 33 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g filter=\"url(%23filter0_d_20089_234507)\"><path d=\"M21.9392 13.4383C23.0416 12.3365 24.8073 12.3025 25.951 13.3347L26.0594 13.4383L26.1629 13.5476C27.1956 14.6911 27.1633 16.4583 26.0603 17.5613L25.118 18.5027C25.9194 19.3681 25.9023 20.7185 25.0613 21.5603L25.0603 21.5613C24.2185 22.4021 22.8681 22.4194 22.0027 21.618L18.1668 25.4549C17.8885 25.7327 17.5329 25.9242 17.1453 26.0017L15.5291 26.325C14.1302 26.6042 12.8971 25.3697 13.1756 23.9715L13.4988 22.3553C13.5763 21.9677 13.7679 21.6121 14.0457 21.3338L17.8806 17.4969C17.0787 16.6304 17.1 15.2789 17.9402 14.4383C18.7815 13.598 20.1303 13.58 20.9959 14.3806L21.9392 13.4383ZM17.4597 24.7469C17.3202 24.8861 17.1423 24.9816 16.949 25.0203L15.3328 25.3435C15.2891 25.3522 15.2458 25.359 15.2029 25.3621C15.2458 25.3593 15.2892 25.3532 15.3328 25.3445L16.949 25.0213C16.9976 25.0116 17.0453 24.998 17.0916 24.9812C17.1376 24.9647 17.1824 24.9447 17.2254 24.9217C17.2681 24.8987 17.3094 24.8725 17.3484 24.8435L17.4597 24.7478L21.9998 20.2078L22.6463 20.8543C22.6738 20.8817 22.7028 20.9072 22.7322 20.9314C22.7028 20.9071 22.6738 20.8808 22.6463 20.8533L21.9998 20.2068L17.4597 24.7469ZM14.156 24.1678C14.1474 24.2113 14.1414 24.2549 14.1385 24.2976C14.1355 24.3404 14.135 24.383 14.1375 24.4246C14.1425 24.5086 14.1584 24.5903 14.1834 24.6678V24.6658C14.1342 24.5118 14.1212 24.3417 14.156 24.1668V24.1678ZM15.4597 22.7469L15.1375 24.3631L15.4597 22.7478L19.9988 18.2078L21.2918 19.4998H21.2928L19.9988 18.2068L15.4597 22.7469ZM24.3533 20.8533C24.3257 20.8809 24.2969 20.9071 24.2674 20.9314L24.3533 20.8543C24.3827 20.8248 24.4105 20.7941 24.4363 20.7625C24.4106 20.7938 24.3826 20.824 24.3533 20.8533ZM22.2928 18.5008L23.6463 19.8543C23.6562 19.8643 23.6652 19.8752 23.6726 19.8865L23.6463 19.8533L22.2928 18.4998V18.5008ZM25.3533 16.8533L23.7068 18.4998L25.3533 16.8543C25.3991 16.8085 25.4411 16.7598 25.4812 16.7107C25.4412 16.7596 25.3989 16.8077 25.3533 16.8533ZM18.5232 16.7097C18.5597 16.7602 18.6 16.809 18.6453 16.8543L19.2908 17.4998H19.2918L18.6453 16.8533C18.6002 16.8081 18.5596 16.7598 18.5232 16.7097ZM23.3533 14.8523L20.9998 17.2058L19.6463 15.8523C19.5654 15.772 19.4341 15.7719 19.3533 15.8523C19.3404 15.8653 19.3299 15.8801 19.3211 15.8953C19.3298 15.8803 19.3406 15.8661 19.3533 15.8533C19.4342 15.7725 19.5654 15.7727 19.6463 15.8533L20.9998 17.2068L23.3533 14.8533C23.3756 14.831 23.3987 14.8093 23.4226 14.7898L23.3533 14.8523ZM3.43924 2.93924C3.85511 2.52338 4.47546 2.3891 5.02616 2.59549L16.0262 6.72049C16.6409 6.95101 17.035 7.55433 16.9978 8.20975C16.9605 8.86518 16.5009 9.42047 15.864 9.57987L11.2371 10.7371L10.0799 15.364C9.92047 16.0009 9.36518 16.4605 8.70975 16.4978C8.05433 16.535 7.45101 16.1409 7.22049 15.5262L3.09549 4.52616C2.8891 3.97546 3.02338 3.35511 3.43924 2.93924ZM18.4959 15.3279C18.4915 15.3345 18.4875 15.3417 18.4832 15.3484C18.5076 15.3103 18.5341 15.2728 18.5633 15.2371L18.4959 15.3279ZM24.6453 14.8533C24.682 14.8901 24.7147 14.9296 24.7439 14.9705C24.7147 14.9294 24.6821 14.8892 24.6453 14.8523C24.637 14.844 24.6275 14.8367 24.6189 14.8289C24.6276 14.837 24.6368 14.8449 24.6453 14.8533ZM25.5974 14.4461C25.631 14.4969 25.662 14.5492 25.6902 14.6023C25.6326 14.4937 25.5642 14.389 25.4842 14.2908L25.5974 14.4461ZM24.1668 13.5935C24.157 13.5927 24.1473 13.5913 24.1375 13.5906L23.9998 13.5857C24.0555 13.5857 24.1112 13.5887 24.1668 13.5935Z\" fill=\"white\"/></g><path d=\"M22.6472 14.1463C23.3946 13.3992 24.6058 13.3992 25.3532 14.1463C26.1005 14.8938 26.1005 16.1059 25.3532 16.8533L23.7077 18.4988L24.3542 19.1453C24.8254 19.6168 24.8253 20.3809 24.3542 20.8524C23.8828 21.3237 23.1186 21.3236 22.6472 20.8524L22.0007 20.2069L17.4606 24.7459C17.3211 24.8853 17.1433 24.9806 16.9499 25.0194L15.3337 25.3426C14.6341 25.4823 14.0172 24.8654 14.1569 24.1658L14.4802 22.5506C14.5189 22.3572 14.6142 22.1784 14.7536 22.0389L19.2927 17.4988L18.6462 16.8524C18.1752 16.3809 18.1759 15.6157 18.6472 15.1444C19.1185 14.6737 19.8829 14.6736 20.3542 15.1444L21.0007 15.7908L22.6472 14.1463ZM15.4606 22.7459L15.1374 24.3621L16.7536 24.0389L21.2936 19.4998L19.9997 18.2059L15.4606 22.7459ZM4.14618 3.64631C4.28483 3.50767 4.49189 3.46321 4.67548 3.53205L15.6755 7.65705C15.8803 7.73388 16.011 7.93474 15.9987 8.15315C15.9863 8.37167 15.8331 8.55709 15.6208 8.61018L10.4118 9.91194L9.11005 15.1209C9.05696 15.3333 8.87154 15.4864 8.65302 15.4988C8.43465 15.5111 8.23375 15.3804 8.15692 15.1756L4.03192 4.17561C3.96308 3.99203 4.00756 3.78495 4.14618 3.64631Z\" fill=\"black\"/><defs><filter id=\"filter0_d_20089_234507\" x=\"0\" y=\"0.5\" width=\"29.9133\" height=\"29.8647\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20089_234507\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20089_234507\" result=\"shape\"/></filter></defs></svg>") 3 3, crosshair;--fig-lab-cursor-move:url("data:image/svg+xml,<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g clip-path=\"url(%23clip0_20065_165164)\"><g filter=\"url(%23filter0_d_20065_165164)\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.93938 2.93938C3.35531 2.52345 3.97597 2.38901 4.52673 2.59555L15.5267 6.72055C16.1416 6.95111 16.535 7.55477 16.4976 8.21034C16.4603 8.86592 16.0009 9.421 15.3638 9.58026L10.737 10.737L9.58026 15.3638C9.421 16.0009 8.86592 16.4603 8.21034 16.4976C7.55477 16.535 6.95111 16.1416 6.72055 15.5267L2.59555 4.52673C2.38901 3.97597 2.52345 3.35531 2.93938 2.93938Z\" fill=\"white\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4394 12.9394C19.0252 12.3536 19.9749 12.3536 20.5607 12.9394L26.0607 18.4394C26.6465 19.0252 26.6465 19.9749 26.0607 20.5607L20.5607 26.0607C19.9749 26.6465 19.0252 26.6465 18.4394 26.0607L12.9394 20.5607C12.3536 19.9749 12.3536 19.0252 12.9394 18.4394L18.4394 12.9394Z\" fill=\"white\"/></g><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.17558 3.53185C3.99199 3.463 3.7851 3.50782 3.64646 3.64646C3.50782 3.7851 3.463 3.99199 3.53185 4.17558L7.65685 15.1756C7.7337 15.3805 7.93492 15.5117 8.15345 15.4992C8.37197 15.4868 8.557 15.3336 8.61009 15.1213L9.91232 9.91232L15.1213 8.61009C15.3336 8.557 15.4868 8.37197 15.4992 8.15345C15.5117 7.93492 15.3805 7.7337 15.1756 7.65685L4.17558 3.53185Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19.1464 13.6464C19.3417 13.4512 19.6583 13.4512 19.8536 13.6464L21.8536 15.6464C22.0488 15.8417 22.0488 16.1583 21.8536 16.3536C21.6583 16.5488 21.3417 16.5488 21.1464 16.3536L20 15.2071V19H23.7929L22.6464 17.8536C22.4512 17.6583 22.4512 17.3417 22.6464 17.1464C22.8417 16.9512 23.1583 16.9512 23.3536 17.1464L25.3536 19.1464C25.5488 19.3417 25.5488 19.6583 25.3536 19.8536L23.3536 21.8536C23.1583 22.0488 22.8417 22.0488 22.6464 21.8536C22.4512 21.6583 22.4512 21.3417 22.6464 21.1464L23.7929 20H20V23.7929L21.1464 22.6464C21.3417 22.4512 21.6583 22.4512 21.8536 22.6464C22.0488 22.8417 22.0488 23.1583 21.8536 23.3536L19.8536 25.3536C19.6583 25.5488 19.3417 25.5488 19.1464 25.3536L17.1464 23.3536C16.9512 23.1583 16.9512 22.8417 17.1464 22.6464C17.3417 22.4512 17.6583 22.4512 17.8536 22.6464L19 23.7929V20H15.2071L16.3536 21.1464C16.5488 21.3417 16.5488 21.6583 16.3536 21.8536C16.1583 22.0488 15.8417 22.0488 15.6464 21.8536L13.6464 19.8536C13.4512 19.6583 13.4512 19.3417 13.6464 19.1464L15.6464 17.1464C15.8417 16.9512 16.1583 16.9512 16.3536 17.1464C16.5488 17.3417 16.5488 17.6583 16.3536 17.8536L15.2071 19H19V15.2071L17.8536 16.3536C17.6583 16.5488 17.3417 16.5488 17.1464 16.3536C16.9512 16.1583 16.9512 15.8417 17.1464 15.6464L19.1464 13.6464Z\" fill=\"black\"/></g><defs><filter id=\"filter0_d_20065_165164\" x=\"-0.5\" y=\"0.5\" width=\"30\" height=\"30\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/><feOffset dy=\"1\"/><feGaussianBlur stdDeviation=\"1.5\"/><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0\"/><feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_20065_165164\"/><feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_20065_165164\" result=\"shape\"/></filter><clipPath id=\"clip0_20065_165164\"><rect width=\"32\" height=\"32\" fill=\"white\"/></clipPath></defs></svg>") 3 3, move}body.fig-lab-move-active,body.fig-lab-move-active *{cursor:var(--fig-lab-cursor-move)!important}body.fig-lab-rotate-active,body.fig-lab-rotate-active *{cursor:var(--fig-lab-cursor-rotate)!important}fig-canvas-control{--fig-canvas-control-line-stroke:light-dark(#fff,#ffffff80);--fig-canvas-control-radius-stroke:#0d99ff;--fig-canvas-control-radius-stroke-halo:#fff;--fig-canvas-control-line-stroke-hover:#0d99ff;--fig-canvas-control-line-stroke-active:#0d99ff;--fig-canvas-control-line-stroke-width:1px;--fig-canvas-control-line-stroke-width-hover:2px;display:contents;&:has(.fig-canvas-control-radius-hit:hover){--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& fig-handle{&[type=color]{--width:.75rem;--height:.75rem;--fig-handle-padding:1px;--fig-handle-shadow:none;&:hover,&:focus-within,&[selected]:not([selected=false]){--width:1rem;--height:1rem;--fig-handle-outline-color:transparent}&.dragging,&:active{--fig-handle-padding:2px!important}&[selected]:not([selected=false]){--fig-handle-padding:2px}}}& fig-handle:hover,& fig-handle:hover .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor)!important}&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging),&[type=color] fig-handle[type=color]:hover:not(:active,.active,.dragging) .fig-handle-hit-area{cursor:var(--fig-lab-cursor-eyedropper)!important}& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area:not([data-cursor]){cursor:var(--fig-lab-cursor-move)!important}& .fig-canvas-control-angle-line-hit{cursor:var(--fig-lab-cursor-move)}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill}& .fig-canvas-control-radius-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);filter:none}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none}}&.fig-canvas-control-ring-active{--fig-canvas-control-line-stroke-width:var(--fig-canvas-control-line-stroke-width-hover)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-radius-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-angle-line-halo{stroke:var(--fig-canvas-control-radius-stroke-halo);stroke-width:calc(var(--fig-canvas-control-line-stroke-width) + 2px);stroke-linecap:butt;filter:none}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field:not([direction=vertical]) &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus{outline:var(--figma-focus-outline);outline-offset:var(--figma-focus-outline-offset)}&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}propskit-oscillator{--aspect-ratio:2 / 1;--oscillator-stroke-width:2;--propskit-oscillator-playhead-radius:5px;flex-direction:column;width:100%;display:flex;& .propskit-oscillator-svg-container{border-radius:var(--radius-medium);padding:var(--spacer-3) var(--spacer-5);margin-bottom:var(--spacer-2);position:relative;overflow:hidden;&:before{inset:0 var(--spacer-3);content:"";background:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);position:absolute}&:is(:hover,:active,:focus,:focus-visible,:focus-within){overflow:visible}& path{stroke:var(--figma-color-border-strong)}}& .propskit-oscillator-svg{width:100%;aspect-ratio:var(--aspect-ratio);z-index:1;display:block;position:relative;overflow:visible;& .propskit-oscillator-handle{opacity:0}&:hover,&:focus-within,&.dragging{& .propskit-oscillator-handle{opacity:1}}}& .propskit-oscillator-bounds{fill:#0000}& .propskit-oscillator-baseline{pointer-events:none;stroke:var(--figma-color-bordertranslucent);stroke-width:var(--oscillator-stroke-width);stroke-linecap:round}& .propskit-oscillator-path{pointer-events:none;fill:none;stroke:var(--figma-color-text);stroke-width:var(--oscillator-stroke-width);stroke-linejoin:round;stroke-linecap:round}& .propskit-oscillator-playhead{pointer-events:none;r:var(--propskit-oscillator-playhead-radius);fill:var(--handle-color);stroke:var(--figma-color-bg);stroke-width:1px}& .propskit-oscillator-handle{pointer-events:all;cursor:default;overflow:visible;& .propskit-oscillator-handle-inner{place-items:center;width:100%;height:100%;display:grid;overflow:visible}}& .propskit-oscillator-frequency-handle{cursor:ew-resize;& fig-handle,& fig-handle:hover,& fig-handle .fig-handle-hit-area,& fig-handle:hover .fig-handle-hit-area,& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:ew-resize!important}}& .propskit-oscillator-amplitude-handle{cursor:ns-resize;& fig-handle,& fig-handle:hover,& fig-handle .fig-handle-hit-area,& fig-handle:hover .fig-handle-hit-area,& fig-handle:is(:active,.active,.dragging),& fig-handle:is(:active,.active,.dragging) .fig-handle-hit-area{cursor:ns-resize!important}}& .propskit-oscillator-waves{flex-direction:column;gap:0;display:flex}& .propskit-oscillator-wave{margin-bottom:0;&>fig-header{& .propskit-oscillator-remove-button,& .propskit-oscillator-add-type-button{flex-shrink:0}}}& .propskit-oscillator-field{width:100%}& .propskit-oscillator-add-type-button{width:var(--spacer-4);height:var(--spacer-4);min-width:var(--spacer-4)}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.6}}fig-reorder{display:contents}fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item],fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>fig-header *,fig-reorder:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]>label{cursor:grab}fig-reorder>.dragging{background-color:var(--figma-color-bg-selected)}[data-reorder-handle]{cursor:grab}fig-reorder[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}body.fig-reorder-dragging,body.fig-reorder-dragging *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}.fig-reorder-indicator{pointer-events:none;z-index:1000000;background:var(--figma-color-border-strong);position:fixed}.fig-reorder-indicator[data-axis=vertical]{height:2px}.fig-reorder-indicator[data-axis=horizontal]{width:2px}
package/dist/fig-lab.js CHANGED
@@ -1,4 +1,4 @@
1
- function L(J,Q){if(!customElements.get(J))customElements.define(J,Q)}function U(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}function $J(J,Q,Z){let $=Number(Q),j=Number(Z),_=Number.isFinite($)?Math.max(0,Math.min(1,$)):Number.isFinite(j)?Math.max(0,Math.min(100,j))/100:1,X=Number.isFinite(j)?Math.max(0,Math.min(100,j)):Math.round(_*100);return{color:J,alpha:_,opacity:X}}var h=new WeakMap;function C(J){let Q=h.get(J);if(!Q){let Z=document.createElement("fig-menu");Z.setAttribute("position","bottom left"),Z.setAttribute("offset","0 0");let $=document.createElement("fig-menu-item");$.setAttribute("value","reset-default"),$.textContent="Reset",Z.appendChild($);let j=0,_=()=>{if(j)clearTimeout(j),j=0;window.removeEventListener("pointerup",X,!0),window.removeEventListener("pointercancel",X,!0)},X=()=>{_();let G=Q?.point;if(G)Z.showAt?.(G.x,G.y)};Q={menu:Z,point:null,clearPendingOpen:_,handleContextMenu:(G)=>{if(U(J,"disabled")||G.target?.closest?.("fig-menu"))return;G.preventDefault(),G.stopPropagation(),G.stopImmediatePropagation?.(),Q.point={x:G.clientX,y:G.clientY},_(),window.addEventListener("pointerup",X,{once:!0,capture:!0}),window.addEventListener("pointercancel",X,{once:!0,capture:!0}),j=window.setTimeout(X,180)},handleChange:(G)=>{if(G.stopPropagation(),G.detail?.value==="reset-default")J.resetToDefault?.()}},h.set(J,Q)}if(Q.menu.parentElement!==J)J.appendChild(Q.menu);J.removeEventListener("contextmenu",Q.handleContextMenu),J.addEventListener("contextmenu",Q.handleContextMenu),Q.menu.removeEventListener("change",Q.handleChange),Q.menu.addEventListener("change",Q.handleChange)}function f(J){let Q=h.get(J);if(!Q)return;Q.clearPendingOpen(),J.removeEventListener("contextmenu",Q.handleContextMenu),Q.menu.removeEventListener("change",Q.handleChange)}function b(J,Q){for(let Z of["input","change"])J.dispatchEvent(new CustomEvent(Z,{detail:Q,bubbles:!0,cancelable:!0,composed:!0}))}function A(J,Q){if(typeof J==="boolean"||typeof Q==="boolean")return Boolean(J)===Boolean(Q);return String(J??"")===String(Q??"")}function jJ(J,Q){let Z=($)=>{if(Array.isArray($))return $.map(Z);if($&&typeof $==="object")return Object.keys($).sort().reduce((j,_)=>{return j[_]=Z($[_]),j},{});return $};try{let $=typeof J==="string"?JSON.parse(J):J,j=typeof Q==="string"?JSON.parse(Q):Q;return JSON.stringify(Z($))===JSON.stringify(Z(j))}catch{return A(J,Q)}}function _J(J,Q){if(!J||!Q)return null;let Z=document.createElement("span");Z.style.cssText="position:absolute;visibility:hidden;pointer-events:none;color:"+Q,J.appendChild(Z);let $=getComputedStyle(Z).color;if(Z.remove(),!$.startsWith("rgb"))return null;let j=$.match(/[\d.]+/g)?.slice(0,3).map(Number);if(!j||j.length<3||j.some(Number.isNaN))return null;let[_,X,Y]=j.map((G)=>{let k=G/255;return k<=0.04045?k/12.92:((k+0.055)/1.055)**2.4});return 0.2126*_+0.7152*X+0.0722*Y<=0.179?"light":"dark"}var u=0;function XJ(J="fig-lab"){return u+=1,`${J}-${u}`}class s extends HTMLElement{}L("fig-ai-prompt",s);class o extends HTMLElement{}L("fig-chat-message",o);class r extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#K.bind(this);#Y=!1;static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#k()}#G(){this.#Y=U(this,"checked");let Q=Array.from(this.childNodes).filter((Y)=>Y.nodeType!==Node.TEXT_NODE||Boolean(Y.textContent?.trim())).find((Y)=>Y.nodeType===Node.ELEMENT_NODE&&Y.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-segmented-control"),_=document.createElement("fig-segment"),X=document.createElement("fig-segment");j.setAttribute("sizing","equal"),_.setAttribute("value","off"),_.textContent="Off",X.setAttribute("value","on"),X.textContent="On",j.append(_,X),Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#k(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#P(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id","checked","value","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("value",U(this,"checked")?"on":"off"),this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#O.bind(this,"input"),this.#$??=this.#O.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.value==="on";this.toggleAttribute("checked",Z);let $={checked:Z,value:this.getAttribute("value")??""};this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#K(J){if(J.target instanceof Element&&J.target.closest("fig-segmented-control, fig-menu"))return;let Q=this.#J?.value==="on"?"off":"on";this.#J?.querySelector(`fig-segment[value="${Q}"]`)?.click()}get checked(){return this.#J?this.#J.value==="on":U(this,"checked")}set checked(J){let Q=Boolean(J);if(this.toggleAttribute("checked",Q),this.#J)this.#J.value=Q?"on":"off"}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){this.setAttribute("value",J??"")}get defaultValue(){return this.hasAttribute("default")?U(this,"default"):this.#Y}get isDefault(){return this.checked===this.defaultValue}resetToDefault(){let J=this.defaultValue;this.checked=J,b(this,{checked:J,value:this.getAttribute("value")??""})}focus(J){(this.#J?.querySelector("fig-segment[selected]")||this.#J?.querySelector("fig-segment"))?.focus(J)}}L("propskit-switch",r);class l extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#z.bind(this);#Y=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.#Y===null)this.#Y=this.getAttribute("default")??this.getAttribute("value")??"";if(this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#k()}#G(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-color");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#k(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Color")}#P(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","text","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J){let $=this.getAttribute(Z)??"";if(Z==="value"&&this.#J.getAttribute("value")===$)continue;this.#J.setAttribute(Z,$)}this.#J.setAttribute("text","true"),this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#K.bind(this,"input"),this.#$??=this.#K.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J){let Q=J instanceof CustomEvent&&J.detail!==void 0?J.detail:void 0;if(typeof Q==="string"&&Q)return Q;if(Q&&typeof Q==="object"){if(typeof Q.value==="string"&&Q.value)return Q.value;if(typeof Q.hex==="string"&&Q.hex)return Q.hex;if(typeof Q.color==="string"&&Q.color)return Q.color}if(typeof this.#J?.value==="string"&&this.#J.value)return this.#J.value;return this.#J?.getAttribute("value")??""}#K(J,Q){Q.stopImmediatePropagation();let Z=this.#O(Q);if(this.setAttribute("value",Z),this.#J&&this.#J.getAttribute("value")!==Z)this.#J.setAttribute("value",Z);let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#z(J){if(J.target instanceof Element&&J.target.closest("fig-input-color, fig-menu"))return;this.focus()}get value(){return this.getAttribute("value")??this.#J?.value??this.#J?.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value"),this.#J?.removeAttribute("value");return}let Q=String(J);if(this.setAttribute("value",Q),this.#J&&this.#J.getAttribute("value")!==Q)this.#J.setAttribute("value",Q)}#S(J){if(!this.#J)return;if(this.#J.getAttribute("value")===J)this.#J.removeAttribute("value");this.#J.setAttribute("value",J)}#L(){return this.getAttribute("default")??this.#Y??""}get defaultValue(){return String(this.#L())}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;this.setAttribute("value",J),this.#S(J),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#J?.querySelector("input:not([tabindex='-1'])")?.focus(J)}}L("propskit-color",l);class d extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#z.bind(this);#Y=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.#Y===null)this.#Y=this.getAttribute("default")??this.getAttribute("value")??JSON.stringify(this.#J?.value??{});if(this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#k()}#G(){let Q=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())).find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-gradient");Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#k(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Gradient")}#P(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let $ of this.#N)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){let j=this.getAttribute($)??"";if($==="value"&&this.#J.getAttribute("value")===j)continue;this.#J.setAttribute($,j)}if(!this.hasAttribute("edit"))this.#J.setAttribute("edit","true");let Z=this.getAttribute("size");if(!Z||Z==="large")this.#J.setAttribute("size","large");else this.#J.removeAttribute("size");this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#K.bind(this,"input"),this.#$??=this.#K.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J){let Q=J instanceof CustomEvent&&J.detail&&typeof J.detail==="object"?J.detail:this.#J?.value;if(!Q||typeof Q!=="object")return this.value;return JSON.stringify(Q)}#K(J,Q){Q.stopImmediatePropagation();let Z=this.#O(Q);this.setAttribute("value",Z);let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#z(J){if(J.target instanceof Element&&J.target.closest("fig-input-gradient, fig-menu"))return;this.focus()}get value(){return this.getAttribute("value")??JSON.stringify(this.#J?.value??{})}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value"),this.#J?.removeAttribute("value");return}let Q=typeof J==="object"?JSON.stringify(J):String(J);if(this.setAttribute("value",Q),this.#J&&this.#J.getAttribute("value")!==Q)this.#J.setAttribute("value",Q)}get defaultValue(){return this.getAttribute("default")??this.#Y??""}get isDefault(){return jJ(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;if(!J)return;this.value=J;let Q=this.#J?.value;b(this,Q)}focus(J){this.#J?.focus(J)}}L("propskit-gradient",d);class i extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=null;#Y=this.#T.bind(this);#G=this.#f.bind(this);#k=!1;#P=null;static get observedAttributes(){return["label","direction","aria-label","options","value"]}connectedCallback(){if(!this.#Z)this.#q();if(this.#M(),this.#O(),this.#K(),this.removeEventListener("click",this.#Y),this.addEventListener("click",this.#Y),this.removeEventListener("pointerdown",this.#G,!0),this.addEventListener("pointerdown",this.#G,!0),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;let j=$.attributeName;if(j==="label"||j==="direction"||j==="aria-label")Q=!0;else Z=!0}if(Q)this.#M();if(Z)this.#O()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#z(),this.removeEventListener("click",this.#Y),this.removeEventListener("pointerdown",this.#G,!0),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label"){this.#M();return}if(J==="options"||J==="value")this.#O()}#q(){this.#P=this.getAttribute("value")??"";let J=this.querySelector(":scope > label"),Q=document.createElement("fig-field"),Z=J||document.createElement("label"),$=document.createElement("fig-select");$.setAttribute("full",""),Q.append(Z,$),this.#Z=Q,this.#Q=Z,this.#J=$,this.#X=Boolean(J),this.replaceChildren(Q)}#M(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Select"),this.#J.setAttribute("full","")}#U(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","full","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#O(){if(!this.#J)return;let J=this.#U().sort((Z,$)=>{if(Z==="options")return-1;if($==="options")return 1;if(Z==="value")return 1;if($==="value")return-1;return 0}),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#K(){if(!this.#J)return;this.#_??=this.#S.bind(this,"input"),this.#$??=this.#S.bind(this,"change"),this.#B??=this.#S.bind(this,"optionhover"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$),this.#J.addEventListener("optionhover",this.#B)}#z(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$);if(this.#B)this.#J.removeEventListener("optionhover",this.#B)}#S(J,Q){if(Q.target!==this.#J)return;Q.stopImmediatePropagation();let Z=this.#J?.value??"";if(J!=="optionhover")this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#L(){if(!this.#J)return!1;if(this.#J.open)return!0;let J=this.#J.shadowRoot?.querySelector('dialog[is="fig-popup"]');return Boolean(J?.open||J?.matches?.(":open"))}#f(J){if(!(J.target instanceof Element))return;if(J.target.closest("fig-menu"))return;if(J.target.closest("fig-select")){this.#k=!1;return}this.#k=this.#L()}#T(J){if(J.target instanceof Element&&J.target.closest("fig-menu"))return;if(J.target instanceof Element&&J.target.closest("fig-select")){this.#k=!1;return}if(!this.#J||U(this.#J,"disabled")){this.#k=!1;return}if(this.#J.focus(),this.#k||this.#L()){this.#k=!1,this.#J.open=!1;return}this.#J.open=!0}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get defaultValue(){return this.getAttribute("default")??this.#P??""}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;if(this.value=J,this.#J)this.#J.value=J;b(this,J)}focus(J){this.#J?.focus(J)}}L("propskit-select",i);class a extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#K.bind(this);#Y=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#k()}#G(){this.#Y=this.getAttribute("value")??"";let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-text");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#k(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Text")}#P(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","multiline","resizable","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#O.bind(this,"input"),this.#$??=this.#O.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.value??"";this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#K(J){if(J.target instanceof Element&&J.target.closest("fig-input-text, fig-menu"))return;this.focus()}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0){if(this.removeAttribute("value"),this.#J)this.#J.value=""}else{let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}}get defaultValue(){return this.getAttribute("default")??this.#Y??""}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;this.value=J,b(this,J)}focus(J){this.#J?.focus(J)}}L("propskit-text",a);class n extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#K.bind(this);#Y=null;static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#k()}#G(){this.#Y=this.getAttribute("value")??this.getAttribute("min")??"0";let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-number");Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z);for(let _ of J)if(_!==Q)j.appendChild(_)}#k(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#P(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#O.bind(this,"input"),this.#$??=this.#O.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J,Q){Q.stopImmediatePropagation();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0)this.setAttribute("value",String(this.#J.value));this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#K(J){if(J.target instanceof Element&&J.target.closest("fig-input-number, fig-menu"))return;this.focus()}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){if(this.removeAttribute("value"),this.#J)this.#J.value=""}else{let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}}get defaultValue(){return this.getAttribute("default")??this.#Y??"0"}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;this.value=J,b(this,this.#J?.value??J)}focus(J){this.#J?.focus(J)}}L("propskit-number",n);class y extends HTMLElement{static observedAttributes=["name","open","show-reset"];static#Z=["propskit-color","propskit-gradient","propskit-number","propskit-select","propskit-slider","propskit-switch","propskit-text","propskit-oscillator"].join(",");#Q=null;#J=null;#X=null;#j=null;#N=0;#_=()=>this.#Y();connectedCallback(){this.#T(),this.#$(),requestAnimationFrame(()=>{this.#K()})}disconnectedCallback(){if(this.#B(),this.#N)cancelAnimationFrame(this.#N),this.#N=0;this.#Q?.removeEventListener("click",this.#k),this.#Q?.removeEventListener("keydown",this.#P),this.#X?.querySelector("fig-button")?.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="open"){this.#Q?.setAttribute("aria-expanded",String(this.open));return}if(J==="show-reset"){this.#L(),this.#K();return}this.#T()}get open(){let J=this.getAttribute("open");return J!==null&&J!=="false"}set open(J){let Q=this.open;if(J)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Q?.setAttribute("aria-expanded",String(!!J)),Q!==!!J)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!J},bubbles:!0}))}get showReset(){let J=this.getAttribute("show-reset");if(J===null)return!0;return J!=="false"}set showReset(J){if(J)this.setAttribute("show-reset","true");else this.setAttribute("show-reset","false")}get dirty(){return this.hasAttribute("data-dirty")&&this.getAttribute("data-dirty")!=="false"}resetProperties(){this.#S()}#$(){if(this.removeEventListener("input",this.#_,!0),this.removeEventListener("change",this.#_,!0),this.addEventListener("input",this.#_,!0),this.addEventListener("change",this.#_,!0),!this.#j)this.#j=new MutationObserver(()=>{this.#Y()});this.#j.disconnect(),this.#j.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value","checked","default"]})}#B(){this.removeEventListener("input",this.#_,!0),this.removeEventListener("change",this.#_,!0),this.#j?.disconnect()}#Y(){if(this.#N)return;this.#N=requestAnimationFrame(()=>{this.#N=0,this.#K()})}#G(J){return J instanceof Element&&Boolean(J.closest(".propskit-group-reset, .propskit-group-reset-tooltip"))}#k=(J)=>{if(this.#G(J.target))return;J.stopPropagation(),this.open=!this.open};#P=(J)=>{if(this.#G(J.target))return;if(J.key!=="Enter"&&J.key!==" ")return;J.preventDefault(),J.stopPropagation(),this.open=!this.open};#q=(J)=>{J.preventDefault(),J.stopPropagation(),this.#S()};#M(){return[...this.querySelectorAll(y.#Z)].filter((J)=>J.closest("propskit-group")===this&&!J.parentElement?.closest(y.#Z))}#U(J){return J.isDefault===!1}#O(){for(let J of this.#M())if(this.#U(J))return!0;return!1}#K(){if(this.#O())this.setAttribute("data-dirty","");else this.removeAttribute("data-dirty");this.#L()}#z(J){if(typeof J.resetToDefault==="function")J.resetToDefault()}#S(){for(let J of this.#M())this.#z(J);this.#K(),this.dispatchEvent(new CustomEvent("reset",{bubbles:!0,composed:!0}))}#L(){if(!this.showReset){this.#X?.setAttribute("hidden","");return}this.#f(),this.#X?.removeAttribute("hidden")}#f(){if(!this.#Q||!this.showReset)return;let J=this.#Q.querySelector(":scope > .propskit-group-reset-tooltip");if(!J){J=document.createElement("fig-tooltip"),J.className="propskit-group-reset-tooltip",J.setAttribute("text","Reset properties");let Q=document.createElement("fig-button");Q.className="propskit-group-reset",Q.setAttribute("variant","ghost"),Q.setAttribute("icon",""),Q.setAttribute("aria-label","Reset properties");let Z=document.createElement("fig-icon");Z.setAttribute("name","reset"),Q.appendChild(Z),J.appendChild(Q),this.#Q.appendChild(J),Q.addEventListener("click",this.#q)}else{let Q=J.querySelector("fig-button");Q?.removeEventListener("click",this.#q),Q?.addEventListener("click",this.#q)}this.#X=J}#T(){let Q=this.getAttribute("name")||"Group",Z=this.querySelector(":scope > fig-header");if(Z)this.#Q=Z;else if(!this.#Q||!this.#Q.dataset.generated||this.#Q.parentElement!==this)this.#Q=document.createElement("fig-header"),this.#Q.setAttribute("borderless",""),this.#Q.dataset.generated="true",this.prepend(this.#Q);let $=this.#Q.querySelector(":scope > h3"),j=this.#Q.querySelector(":scope > fig-button.propskit-group-disclosure");if(!$&&j){if($=j.querySelector(":scope > h3"),$)this.#Q.insertBefore($,j);j.remove()}if(!$)$=document.createElement("h3"),this.#Q.prepend($);let _=$.querySelector(":scope > button.propskit-group-disclosure");if(_){while(_.firstChild)$.insertBefore(_.firstChild,_);_.remove()}if(!$.id)$.id=XJ("propskit-group");if(this.#Q.dataset.generated){let X=$.querySelector(".propskit-group-chevron");if($.textContent=Q,X)$.prepend(X)}if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",$.id);if(!$.querySelector(".propskit-group-chevron")){let X=document.createElement("fig-icon");X.setAttribute("name","chevron"),X.setAttribute("size","small"),X.className="propskit-group-chevron",$.prepend(X)}if(this.#J=$.querySelector(".propskit-group-chevron"),this.#L(),this.#Q.setAttribute("role","button"),this.#Q.setAttribute("tabindex","0"),this.#Q.setAttribute("aria-expanded",String(this.open)),this.#Q.removeEventListener("click",this.#k),this.#Q.addEventListener("click",this.#k),this.#Q.removeEventListener("keydown",this.#P),this.#Q.addEventListener("keydown",this.#P),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Q.setAttribute("aria-expanded","false")}}L("propskit-group",y);class t extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=0;#$=0;#B=null;#Y=null;#G=0;#k=null;#P=null;#q=!1;#M=0;#U=null;#O=0;#K=null;#z=null;#S=null;#L=this.#_J.bind(this);#f=this.#XJ.bind(this);#T=this.#$J.bind(this);#R=this.#h.bind(this);#V=this.#r.bind(this);#F=this.#MJ.bind(this);#p=this.#x.bind(this);#D=new Set(["variant","color","text","full","elastic","size","name","class","data-wave-index","data-active","data-elastic-dragging","style"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#E();if(this.#b(),this.#A(),this.#KJ(),this.#u(),this.removeEventListener("pointerdown",this.#L,{capture:!0}),this.addEventListener("pointerdown",this.#L,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#V),this.addEventListener("contextmenu",this.#V),this.removeEventListener("click",this.#p,!0),this.addEventListener("click",this.#p,!0),this.#Y?.removeEventListener("change",this.#F),this.#Y?.addEventListener("change",this.#F),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName==="value"){this.#y();continue}if($.attributeName==="color"){Z=!0;continue}if($.attributeName&&this.#D.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#b();if(Z)this.#A(),this.#u()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#j?.disconnect(),this.#_)cancelAnimationFrame(this.#_),this.#_=0;if(this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#JJ(),this.#e(),this.#QJ(),this.#o(),this.#PJ(),this.removeEventListener("pointerdown",this.#L,{capture:!0}),this.removeEventListener("contextmenu",this.#V),this.removeEventListener("click",this.#p,!0),this.#Y?.removeEventListener("change",this.#F)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#b()}#E(){this.#P=this.getAttribute("value")??this.getAttribute("min")??"0";let J=Array.from(this.childNodes).filter((_)=>{return _.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())}),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-slider");j.setAttribute("text","true");for(let _ of this.#C()){let X=this.getAttribute(_);j.setAttribute(_,X??"")}Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z),this.#H();for(let _ of J){if(_===Q)continue;this.#J.appendChild(_)}}#H(){let J=document.createElement("fig-menu");J.setAttribute("position","bottom left"),J.setAttribute("offset","0 0");let Q=document.createElement("fig-menu-item");Q.setAttribute("value","reset-default"),Q.textContent="Reset",J.appendChild(Q),J.addEventListener("change",this.#F),this.#Y=J,this.appendChild(J)}#b(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Q.parentElement===this.#Z)this.#Q.remove()}else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#A(){if(!this.#J)return;let J=this.#C(),Q=new Set(J.filter(($)=>$!=="text"&&$!=="value"));for(let $ of this.#N)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){if($==="text"||$==="value")continue;let j=this.getAttribute($)??"";if(this.#J.getAttribute($)!==j)this.#J.setAttribute($,j)}this.#J.removeAttribute("variant"),this.#J.removeAttribute("color"),this.#J.removeAttribute("transform"),this.#J.removeAttribute("full"),this.#J.setAttribute("text","true");let Z=(this.getAttribute("type")||"range").toLowerCase();if(Z==="delta"||Z==="stepper")this.#J.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#J.removeAttribute("default");if(Z==="stepper")this.#J.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#J.removeAttribute("step");if(Z==="opacity")this.#J.style.setProperty("--color",this.getAttribute("color")||"var(--figma-color-bg-secondary)");else this.#J.style.removeProperty("--color");this.#d(Z),this.#N=Q,this.#y(),this.#I()}#d(J){let Q=this.#J?.querySelector("fig-input-number");if(!Q)return;if(J!=="opacity"||!this.hasAttribute("color")){Q.removeAttribute("theme");return}let Z=_J(this.#J,this.getAttribute("color"));if(Z)Q.setAttribute("theme",Z);else Q.removeAttribute("theme")}#y(){if(!this.#J)return;let J=this.getAttribute("value")??"";if(String(this.#J.value)!==J)this.#J.value=J}#C(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#D.has(Q))}#I(){if(this.#_)cancelAnimationFrame(this.#_);this.#_=requestAnimationFrame(()=>{this.#_=0,this.#NJ(),this.#W()})}#u(){if(this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{this.#$=0,this.#W()})}#W(){let J=this.#J?.querySelector('input[type="range"]'),Q=this.#J?.querySelector("fig-input-number input");if(J!==this.#B)this.#c(J);if(J){J.removeAttribute("tabindex"),J.removeAttribute("aria-hidden");let Z=this.getAttribute("aria-label")||this.#Q?.textContent?.trim()||"Slider";if(!J.hasAttribute("aria-label")&&!J.hasAttribute("aria-labelledby"))J.setAttribute("aria-label",Z)}if(Q)Q.removeAttribute("tabindex"),Q.removeAttribute("aria-hidden")}#x(J){if(U(this,"disabled"))return;if(J.target instanceof Element&&J.target.closest("fig-input-number, fig-menu"))return;this.#i()}#i(){requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(this.isConnected&&!U(this,"disabled"))this.focus()})})}#c(J){if(this.#o(),this.#B=J,!this.#B)return;this.#B.addEventListener("dblclick",this.#R,{capture:!0})}#o(){if(!this.#B)return;this.#B.removeEventListener("dblclick",this.#R,{capture:!0}),this.#B=null}#h(J){J.preventDefault(),J.stopImmediatePropagation(),this.#n()}#_J(J){if(J.button!==0||U(this,"disabled"))return;if(this.getAttribute("elastic")==="false")return;if(J.target?.closest?.("fig-input-number"))return;let Q=this.#J?.querySelector('input[type="range"]')??this.#B;if(!Q)return;this.#e(),this.#QJ(),this.#B=Q,this.#q=!0,this.#K=J.pointerId,this.#M=this.#OJ();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#U={left:Z.left,right:Z.right,width:Z.width},this.#O=$.width,window.addEventListener("pointermove",this.#f,{passive:!0}),window.addEventListener("pointerup",this.#T,{once:!0}),window.addEventListener("pointercancel",this.#T,{once:!0}),window.addEventListener("blur",this.#T,{once:!0})}#XJ(J){if(!this.#q)return;if(J.pointerId!==this.#K)return;if(J.buttons===0){this.#$J(J);return}this.#jJ(J.clientX)}#$J(J){if(J?.pointerId!==void 0&&this.#K!==null&&J.pointerId!==this.#K)return;let Q=J?.type==="pointerup"||J?.type==="pointermove"&&J.buttons===0;if(this.#e(),this.#QJ(),Q)this.#i()}#e(){window.removeEventListener("pointermove",this.#f),window.removeEventListener("pointerup",this.#T),window.removeEventListener("pointercancel",this.#T),window.removeEventListener("blur",this.#T),this.#q=!1,this.#K=null}#r(J){if(U(this,"disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#JJ(),this.#BJ(J.clientX,J.clientY)}#BJ(J,Q){let Z=!1,$=0,j=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",j,!0),window.removeEventListener("pointercancel",j,!0),requestAnimationFrame(()=>{this.#Y?.showAt?.(J,Q)})};window.addEventListener("pointerup",j,{once:!0,capture:!0}),window.addEventListener("pointercancel",j,{once:!0,capture:!0}),$=window.setTimeout(j,180)}#MJ(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#n()}#JJ(){if(this.#G)clearTimeout(this.#G),this.#G=0;this.#k=null}#OJ(){let J=getComputedStyle(this).getPropertyValue("--propskit-slider-elastic-distance").trim();if(J.includes("var(")||!J.endsWith("px")){let Z=document.createElement("div");Object.assign(Z.style,{position:"absolute",visibility:"hidden",pointerEvents:"none",width:"var(--propskit-slider-elastic-distance)"}),this.appendChild(Z),J=getComputedStyle(Z).width,Z.remove()}let Q=Number.parseFloat(J);return Number.isFinite(Q)?Math.max(0,Q):0}#jJ(J){let Q=this.#U;if(!Q||!this.#M){this.#QJ();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#l();return}let $=Math.max(-this.#M,Math.min(this.#M,Z*0.5)),j=Math.abs($),_=this.#O?(this.#O+j)/this.#O:1;this.dataset.elasticDragging="true",this.style.setProperty("--propskit-slider-elastic-size",`${j}px`),this.style.setProperty("--propskit-slider-elastic-scale",`${_}`),this.style.setProperty("--propskit-slider-elastic-origin",$<0?"right center":"left center")}#QJ(){this.#l(),this.#M=0,this.#U=null,this.#O=0,this.#K=null}#l(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--propskit-slider-elastic-size"),this.style.removeProperty("--propskit-slider-elastic-scale")}#YJ(J){let Q=this.#B;if(!Q)return this.#J?.value??"";let Z=Q.getBoundingClientRect(),$=Z.width?Math.min(1,Math.max(0,(J.clientX-Z.left)/Z.width)):0,j=Number(Q.min||0),_=Number(Q.max||100),X=Q.step==="any"?0:Number(Q.step||1),Y=j+(_-j)*$;if(!X)return String(Y);let B=Math.round((Y-j)/X)*X+j,G=Math.max(0,`${X}`.split(".")[1]?.length||0);return String(Number(B.toFixed(G)))}#s(){return this.getAttribute("default")??this.#J?.getAttribute("default")??this.#P??this.#B?.min??"0"}#n(){this.#JJ(),this.#ZJ(this.#s(),"input"),this.#ZJ(this.#s(),"change")}#ZJ(J,Q){if(!this.#J||J===null||J===void 0)return;this.#J.value=J,this.setAttribute("value",String(this.#J.value)),this.dispatchEvent(new CustomEvent(Q,{detail:this.#J.value,bubbles:!0,cancelable:!0,composed:!0}))}#NJ(){if(!this.#J)return;let J=this.#J.querySelector("fig-input-number");if(!J)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){J.removeAttribute("steppers");return}let Z=this.getAttribute("steppers");J.setAttribute("steppers",Z??"")}#KJ(){if(!this.#J)return;if(!this.#z)this.#z=this.#qJ.bind(this,"input");if(!this.#S)this.#S=this.#qJ.bind(this,"change");this.#J.addEventListener("input",this.#z),this.#J.addEventListener("change",this.#S)}#PJ(){if(!this.#J)return;if(this.#z)this.#J.removeEventListener("input",this.#z);if(this.#S)this.#J.removeEventListener("change",this.#S)}#qJ(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#QJ();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0){let $=String(this.#J.value);if(this.getAttribute("value")!==$)this.setAttribute("value",$)}this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#W();let Q=this.#J?.querySelector('input[type="range"]');Q?.setAttribute("data-propskit-focus-called",""),Q?.focus(J)}get value(){return this.getAttribute("value")??this.#J?.value??""}set value(J){if(J===null||J===void 0||J===""){if(this.removeAttribute("value"),this.#J)this.#J.value="";return}let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}get defaultValue(){return this.#s()}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){this.#n()}}L("propskit-slider",t);class e extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Z=50;#Q=50;#J=75;#X=75;#j=0;#N=!1;#_=0;#$=null;#B=null;#Y=null;#G=null;#k=null;#P=null;#q=null;#M=null;#U=null;#O=!1;#K=!1;#z=!1;#S=!1;#L=null;#f="";#T="";#R=null;#V=null;#F=null;#p="";#D="";#E=null;#H=null;#b=null;get#A(){return this.getAttribute("type")||"point"}get#d(){return this.#A==="point-radius"||this.#A==="point-radius-angle"}get#y(){return this.#A==="point-radius-angle"}get#C(){return this.#A==="point-point"}get#I(){return this.#A==="point-radius-angle"||this.#A==="point-point"}get#u(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#W(){let J=this.getAttribute("snapping");if(J===null)return"false";let Q=J.trim().toLowerCase();if(Q==="modifier")return"modifier";if(Q===""||Q==="true")return"true";return"false"}#x(J){let Q=this.#W;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#i(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Z)}%, ${Math.round(this.#Q)}%`}get#c(){let J=this.getAttribute("name");if(J){let Q=J.split(",");if(Q.length>1)return Q[1].trim()}return`${Math.round(this.#J)}%, ${Math.round(this.#X)}%`}get#o(){return this.getAttribute("drag-surface")||"parent"}get#h(){let J=this.#o;if(J==="parent")return this.parentElement;return this.closest(J)}get#_J(){let J=this.#o;if(J==="parent"){let Q=this.parentElement;if(Q)return Q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return J}#XJ(J){if(this.#N)return this.#j/100*J;return this.#j}#$J(){if(this.#N)return`Radius ${Math.round(this.#j)}%`;return`Radius ${Math.round(this.#j)}`}connectedCallback(){this.#e(),this.#r()}disconnectedCallback(){this.#LJ(),this.#DJ(),this.#JJ(),this.#l(),document.body.classList.remove("fig-lab-move-active"),document.body.classList.remove("fig-lab-rotate-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#O&&!this.#K&&!this.#z&&!this.#S)if(this.#e(),this.#$)this.#m();else this.#r();if(J==="type")this.#LJ(),this.#e(),this.#r();if(J==="color"&&this.#$)if(Z)this.#$.setAttribute("color",Z);else this.#$.removeAttribute("color");if(J==="disabled")this.#LJ(),this.#r();if(J==="tooltips")this.#r();if(J==="snapping"&&this.#$){if(this.#$.setAttribute("drag-snapping",Z||"false"),this.#B)this.#B.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#P)this.#P.setAttribute("text",this.#i);if(this.#q)this.#q.setAttribute("text",this.#c)}}#e(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(typeof Q.x==="number")this.#Z=Q.x;if(typeof Q.y==="number")this.#Q=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#N=!0,this.#j=parseFloat(Z);else this.#N=!1,this.#j=parseFloat(Z);if(!Number.isFinite(this.#j))this.#j=0}if(typeof Q.angle==="number")this.#_=Q.angle;if(typeof Q.x2==="number")this.#J=Q.x2;if(typeof Q.y2==="number")this.#X=Q.y2}catch{}}get value(){let J={x:this.#Z,y:this.#Q};if(this.#A==="color"){let Q=this.getAttribute("color")||this.#$?.getAttribute("color");if(Q)J.color=Q}if(this.#d)J.radius=this.#N?`${this.#j}%`:this.#j;if(this.#y)J.angle=this.#_;if(this.#C)J.x2=this.#J,J.y2=this.#X;return J}set value(J){if(typeof J==="object")this.setAttribute("value",JSON.stringify(J));else if(typeof J==="string")this.setAttribute("value",J)}#r(){this.#LJ(),this.innerHTML="",this.#$=null,this.#B=null,this.#Y=null,this.#G=null,this.#k=null,this.#P=null,this.#q=null,this.#M=null,this.#U=null;let J=U(this,"disabled"),Q=this.#A,Z=this.#u,$=this.#_J,j=document.createElement("fig-handle");if(j.setAttribute("drag","true"),j.setAttribute("drag-surface",$),j.setAttribute("drag-axes","x,y"),j.setAttribute("drag-snapping",this.#W),j.setAttribute("value",`${this.#Z}% ${this.#Q}%`),J)j.setAttribute("disabled","");if(Q==="color"){j.setAttribute("type","color");let _=this.getAttribute("color");if(_)j.setAttribute("color",_)}else j.setAttribute("type","canvas");if(this.#C)j.setAttribute("hit-area","12 circle"),j.setAttribute("hit-area-mode","delegate");if(this.#$=j,this.#d)this.#KJ();if(this.#I)this.#PJ();if(Z){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#i),_.appendChild(j),this.appendChild(_),this.#P=_}else this.appendChild(j);if(this.#y)this.#SJ(J,Z,$);if(this.#C)this.#HJ(J,Z,$);this.#BJ(this.#$),this.#BJ(this.#Y),this.#BJ(this.#B),this.#RJ(),this.#n(),requestAnimationFrame(()=>this.#m())}#BJ(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>{if(Q.target?.classList?.contains("fig-handle-hit-area")&&J.querySelector(".fig-handle-hit-area"))this.#QJ(Q,J);else this.#MJ(Q)},{capture:!0})}#MJ(J){if(U(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#L===null)this.#f=document.body.style.getPropertyValue("cursor"),this.#T=document.body.style.getPropertyPriority("cursor");if(this.#L=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#R)this.#R=(Q)=>{if(Q?.pointerId!==void 0&&this.#L!==null&&Q.pointerId!==this.#L)return;if(Q?.type==="blur")this.#JJ();else requestAnimationFrame(()=>this.#JJ())};window.addEventListener("pointerup",this.#R),window.addEventListener("pointercancel",this.#R),window.addEventListener("blur",this.#R)}#JJ(){if(this.#L===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#f)document.body.style.setProperty("cursor",this.#f,this.#T);else document.body.style.removeProperty("cursor");if(this.#L=null,this.#f="",this.#T="",this.#R)window.removeEventListener("pointerup",this.#R),window.removeEventListener("pointercancel",this.#R),window.removeEventListener("blur",this.#R)}#OJ(J){if(!J)return 0;if(J===this.#Y)return this.#_;if(!this.#C)return 0;let Q=this.#TJ();return J===this.#$?Q+180:Q}#jJ(){if(this.#V===null)return;let J=this.#zJ(this.#OJ(this.#F));document.body.style.setProperty("--fig-lab-cursor-rotate",J),document.body.style.setProperty("cursor",J,"important")}#QJ(J,Q){if(U(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#V===null)this.#p=document.body.style.getPropertyValue("cursor"),this.#D=document.body.style.getPropertyPriority("cursor");if(this.#V=J?.pointerId??-1,this.#F=Q,document.body.classList.add("fig-lab-rotate-active"),this.#jJ(),!this.#E)this.#E=(Z)=>{if(Z?.pointerId!==void 0&&this.#V!==null&&Z.pointerId!==this.#V)return;if(Z?.type==="blur")this.#l();else requestAnimationFrame(()=>this.#l())};window.addEventListener("pointerup",this.#E),window.addEventListener("pointercancel",this.#E),window.addEventListener("blur",this.#E)}#l(){if(this.#V===null)return;if(document.body.classList.remove("fig-lab-rotate-active"),document.body.style.removeProperty("--fig-lab-cursor-rotate"),this.#p)document.body.style.setProperty("cursor",this.#p,this.#D);else document.body.style.removeProperty("cursor");if(this.#V=null,this.#F=null,this.#p="",this.#D="",this.#E)window.removeEventListener("pointerup",this.#E),window.removeEventListener("pointercancel",this.#E),window.removeEventListener("blur",this.#E)}#YJ(J,Q,Z,$){if(!J)return;let j=()=>!!$?.(),_=()=>{let B=Q();if(!B)return;B.removeAttribute("show"),B.hidePopup?.()},X=()=>{if(j()){_();return}let B=Q();if(!B)return;if(Z)B.setAttribute("text",Z());B.setAttribute("show","true"),B.showPopup?.()},Y=()=>{_()};J.addEventListener("pointerenter",X),J.addEventListener("pointerleave",Y)}#s(){return this.#O||this.#K||this.#z||this.#S}#n(){if(this.#$)this.#YJ(this.#$,()=>this.#P,()=>this.#i,()=>this.#s()||!!this.#$?.querySelector("fig-color-tip"));if(this.#Y)this.#YJ(this.#Y,()=>this.#U,()=>`Angle ${Math.round(this.#_)}°`,()=>this.#s());if(this.#B)this.#YJ(this.#B,()=>this.#q,()=>this.#c,()=>this.#s());if(this.#G){let J=this.#G.querySelector(".fig-canvas-control-radius-hit");this.#NJ(J||this.#G)}if(this.#A==="color"&&this.#$&&this.#P)new MutationObserver(()=>{if(this.#$?.querySelector("fig-color-tip"))this.#P?.removeAttribute("show"),this.#P?.hidePopup?.()}).observe(this.#$,{childList:!0,subtree:!0})}#ZJ(J,Q){let Z=this.#M;if(!Z?.popup)return;let $=Q-8;Z.popup.anchor={getBoundingClientRect:()=>({left:J,top:$,right:J,bottom:$,width:0,height:0,x:J,y:$})},Z.popup.queueReposition?.()}#NJ(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#M;if(!Z)return;Z.setAttribute("text",this.#$J()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#ZJ(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#z)return;this.#ZJ(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#z)return;let Q=this.#M;if(!Q)return;Q.removeAttribute("show")})}#KJ(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");Q.classList.add("fig-canvas-control-radius"),Q.setAttribute("overflow","visible");let Z=document.createElementNS("http://www.w3.org/2000/svg","circle");Z.classList.add("fig-canvas-control-radius-hit"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","circle");$.classList.add("fig-canvas-control-radius-halo"),Q.appendChild($);let j=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(j),this.#G=Q,this.#u){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#$J()),_.appendChild(Q),this.appendChild(_),this.#M=_}else this.appendChild(Q);this.#fJ(Z)}#PJ(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");if(Q.classList.add("fig-canvas-control-angle-svg"),Q.setAttribute("overflow","visible"),Q.style.position="absolute",Q.style.pointerEvents="none",this.#C){let j=document.createElementNS("http://www.w3.org/2000/svg","line");j.classList.add("fig-canvas-control-angle-line-hit"),j.setAttribute("stroke","transparent"),j.setAttribute("stroke-width","12"),j.setAttribute("stroke-linecap","round"),j.style.pointerEvents="stroke",Q.appendChild(j),this.#qJ(j)}let Z=document.createElementNS("http://www.w3.org/2000/svg","line");Z.classList.add("fig-canvas-control-angle-line-halo"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","line");$.classList.add("fig-canvas-control-angle-line"),Q.appendChild($),this.#k=Q,this.appendChild(Q)}#qJ(J){J.addEventListener("pointerdown",(Q)=>{if(U(this,"disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#h;if(!Z)return;let{clientX:$,clientY:j}=Q,_=this.#Z,X=this.#Q,Y=this.#J,B=this.#X;this.#O=!0,this.#K=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let G=(N)=>{let P=Z.getBoundingClientRect(),O=P.width>0?(N.clientX-$)/P.width*100:0,q=P.height>0?(N.clientY-j)/P.height*100:0,K=-Math.min(_,Y),z=100-Math.max(_,Y),T=-Math.min(X,B),F=100-Math.max(X,B),S=Math.max(K,Math.min(z,O)),W=Math.max(T,Math.min(F,q));this.#Z=_+S,this.#Q=X+W,this.#J=Y+S,this.#X=B+W,this.#m(),this.#a()},k=this.#VJ((N)=>{if(document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#O=!1,this.#K=!1,N)this.#t(),this.#v()});window.addEventListener("pointermove",G,{signal:k.signal}),window.addEventListener("pointerup",()=>k.finish(!0),{signal:k.signal}),window.addEventListener("pointercancel",()=>k.finish(!1),{signal:k.signal})})}#SJ(J,Q,Z){let $=document.createElement("fig-handle");if($.setAttribute("type","canvas"),$.setAttribute("drag","true"),$.setAttribute("drag-surface",Z),$.setAttribute("drag-axes","x,y"),$.setAttribute("size","small"),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),J)$.setAttribute("disabled","");if(this.#Y=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",`${Math.round(this.#_)}°`),j.appendChild($),this.appendChild(j),this.#U=j}else this.appendChild($)}#HJ(J,Q,Z){let $=document.createElement("fig-handle");if($.setAttribute("type","canvas"),$.setAttribute("drag","true"),$.setAttribute("drag-surface",Z),$.setAttribute("drag-axes","x,y"),$.setAttribute("drag-snapping",this.#W),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#J}% ${this.#X}%`),J)$.setAttribute("disabled","");if(this.#B=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#c),j.appendChild($),this.appendChild(j),this.#q=j}else this.appendChild($)}#g(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`}#zJ(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J-45)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`}#GJ(J,Q){if(!J)return;J.style.setProperty("cursor",Q,"important")}#UJ(J,Q){if(!J)return;let Z=J.querySelector(".fig-handle-hit-area");if(!Z)return;if(Z.setAttribute("data-cursor","rotate"),this.#GJ(Z,this.#zJ(Q)),this.#F===J)this.#jJ()}#CJ(){if(!this.#Y||!this.#y)return;this.#UJ(this.#Y,this.#_)}#TJ(){return Math.atan2(this.#X-this.#Q,this.#J-this.#Z)*180/Math.PI}#FJ(){if(!this.#C)return;let J=this.#TJ();this.#$?.style.removeProperty("cursor"),this.#B?.style.removeProperty("cursor"),this.#UJ(this.#$,J+180),this.#UJ(this.#B,J)}#kJ(J,Q,Z,$){J.style.setProperty("--fig-handle-position-translate","-50% -50%"),J.style.left=`${Q/100*$.width}px`,J.style.top=`${Z/100*$.height}px`}#m(){let J=this.#h;if(!J||!this.#$)return;let Q=J.getBoundingClientRect();if(this.#kJ(this.#$,this.#Z,this.#Q,Q),this.#G){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#XJ(Q.width),_=this.#G,X=Math.max(j*2,1);_.style.position="absolute",_.style.width=`${X}px`,_.style.height=`${X}px`,_.style.left=`${Z-j}px`,_.style.top=`${$-j}px`,_.setAttribute("viewBox",`0 0 ${X} ${X}`);let Y=_.querySelectorAll("circle");for(let B of Y)B.setAttribute("cx",String(j)),B.setAttribute("cy",String(j)),B.setAttribute("r",String(Math.max(j-1,0)))}if(this.#k&&this.#I){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j,_;if(this.#C)j=this.#J/100*Q.width,_=this.#X/100*Q.height;else{let B=this.#XJ(Q.width),G=this.#_*Math.PI/180;j=Z+B*Math.cos(G),_=$+B*Math.sin(G)}let X=this.#k;X.style.width=`${Q.width}px`,X.style.height=`${Q.height}px`,X.style.left="0",X.style.top="0",X.setAttribute("viewBox",`0 0 ${Q.width} ${Q.height}`);let Y=X.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo, .fig-canvas-control-angle-line-hit");for(let B of Y)B.setAttribute("x1",String(Z)),B.setAttribute("y1",String($)),B.setAttribute("x2",String(j)),B.setAttribute("y2",String(_))}if(this.#Y&&this.#y){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#XJ(Q.width),_=this.#_*Math.PI/180,X=Z+j*Math.cos(_),Y=$+j*Math.sin(_),B=Q.width>0?X/Q.width*100:0,G=Q.height>0?Y/Q.height*100:0;this.#kJ(this.#Y,B,G,Q)}if(this.#B&&this.#C)this.#kJ(this.#B,this.#J,this.#X,Q);this.#CJ(),this.#FJ()}#a(J=this.value){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:J}))}#v(J=this.value){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:J}))}#WJ(J){return{...this.value,...$J(J.color,J.alpha,J.opacity)}}#t(){this.setAttribute("value",JSON.stringify(this.value))}#RJ(){if(!this.#$)return;if(this.#$.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",this.#$.getAttribute("color")||J.detail.color),this.#a(this.#WJ(J.detail));return}this.#O=!0;let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#P)this.#P.removeAttribute("show"),this.#P.hidePopup?.();this.#m(),this.#a()}),this.#$.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",this.#$.getAttribute("color")||J.detail.color),this.#v(this.#WJ(J.detail));return}let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#P)this.#P.removeAttribute("show");this.#m(),this.#t(),this.#v(),requestAnimationFrame(()=>{this.#O=!1})}),this.#Y)this.#Y.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#h;if(!Q)return;this.#S=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Z/100*Z.width,j=this.#Q/100*Z.height,_=J.detail?.x??0,X=J.detail?.y??0,Y=this.#Y.offsetWidth/2,B=this.#Y.offsetHeight/2,G=_+Y-$,k=X+B-j,N=Math.atan2(k,G)*180/Math.PI;if(this.#x(J.detail?.shiftKey))N=Math.round(N/15)*15;this.#_=N;let P=Math.sqrt(G*G+k*k);if(this.#x(J.detail?.shiftKey)){let O=this.#N?5:10;if(this.#N){let q=P/Z.width*100;q=Math.round(q/O)*O,P=q/100*Z.width}else P=Math.round(P/O)*O}if(this.#N)this.#j=Math.max(0,P/Z.width*100);else this.#j=Math.max(0,P);if(this.#U)this.#U.setAttribute("text",`Angle ${Math.round(this.#_)}°`),this.#U.setAttribute("show","true"),this.#U.showPopup?.();this.#m(),this.#a()}),this.#Y.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#U)this.#U.removeAttribute("show");this.#m(),this.#t(),this.#v(),requestAnimationFrame(()=>{this.#S=!1})}),this.#Y.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#h;if(!Z)return;if(this.#S=!0,this.classList.add("fig-canvas-control-ring-active"),this.#Y.setAttribute("selected",""),this.#U)this.#U.setAttribute("show","true"),this.#U.showPopup?.();let $=(_)=>{let X=Z.getBoundingClientRect(),Y=this.#Z/100*X.width,B=this.#Q/100*X.height,G=_.clientX-X.left-Y,k=_.clientY-X.top-B,N=Math.atan2(k,G)*180/Math.PI;if(this.#x(_.shiftKey))N=Math.round(N/15)*15;if(this.#_=N,this.#U)this.#U.setAttribute("text",`Angle ${Math.round(N)}°`);this.#m(),this.#a()},j=this.#VJ((_)=>{if(this.#S=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#Y.removeAttribute("selected"),this.#U)this.#U.removeAttribute("show");if(_)this.#t(),this.#v()});window.addEventListener("pointermove",$,{signal:j.signal}),window.addEventListener("pointerup",()=>j.finish(!0),{signal:j.signal}),window.addEventListener("pointercancel",()=>j.finish(!1),{signal:j.signal})});if(this.#B)this.#B.addEventListener("input",(J)=>{J.stopPropagation(),this.#K=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#X/100;if(this.#J=Math.round(Math.max(0,Math.min(100,Q*100))),this.#X=Math.round(Math.max(0,Math.min(100,Z*100))),this.#q)this.#q.removeAttribute("show"),this.#q.hidePopup?.();this.#m(),this.#a()}),this.#B.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#q)this.#q.removeAttribute("show");this.#m(),this.#t(),this.#v(),requestAnimationFrame(()=>{this.#K=!1})}),this.#w(this.#$,!0),this.#w(this.#B,!1)}#w(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let j=this.#h;if(!j)return;this.#O=!0;let _=j.getBoundingClientRect(),X=Q?this.#J:this.#Z,Y=Q?this.#X:this.#Q,B=Q?this.#Z:this.#J,G=Q?this.#Q:this.#X,k=X/100*_.width,N=Y/100*_.height,P=B/100*_.width,O=G/100*_.height,q=Math.sqrt((P-k)**2+(O-N)**2),K=Q?this.#P:this.#q;if(K)K.removeAttribute("show"),K.hidePopup?.();let z=(F)=>{let S=j.getBoundingClientRect(),W=X/100*S.width,D=Y/100*S.height,R=F.clientX-S.left-W,E=F.clientY-S.top-D,V=Math.atan2(E,R);if(this.#x(F.shiftKey))V=Math.round(V*180/Math.PI/15)*15*Math.PI/180;let QJ=W+q*Math.cos(V),ZJ=D+q*Math.sin(V),g=Math.max(0,Math.min(100,QJ/S.width*100)),m=Math.max(0,Math.min(100,ZJ/S.height*100));if(Q)this.#Z=g,this.#Q=m;else this.#J=g,this.#X=m;this.#m(),this.#a()},T=this.#VJ((F)=>{if(this.#O=!1,K)K.removeAttribute("show");if(F)this.#t(),this.#v()});window.addEventListener("pointermove",z,{signal:T.signal}),window.addEventListener("pointerup",()=>T.finish(!0),{signal:T.signal}),window.addEventListener("pointercancel",()=>T.finish(!1),{signal:T.signal})})}#fJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#z)return;let $=this.#h;if(!$)return;let j=$.getBoundingClientRect(),_=this.#Z/100*j.width,X=this.#Q/100*j.height,Y=Math.atan2(Z.clientY-j.top-X,Z.clientX-j.left-_)*180/Math.PI;this.#GJ(J,this.#g(Y))});let Q=(Z)=>{if(U(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#h;if(!$)return;if(this.#M)this.#M.setAttribute("show","true"),this.#M.showPopup?.(),this.#ZJ(Z.clientX,Z.clientY);if(this.#U)this.#U.removeAttribute("show"),this.#U.hidePopup?.();let j=this.#Y?.style.pointerEvents,_=this.#Y?.querySelector(".fig-handle-hit-area"),X=_?.style.pointerEvents;if(this.#Y)this.#Y.style.pointerEvents="none";if(_)_.style.pointerEvents="none";let Y=document.body.style.cursor;J.style.pointerEvents="none";let B=$.getBoundingClientRect(),G=this.#Z/100*B.width,k=this.#Q/100*B.height,N=Math.atan2(Z.clientY-B.top-k,Z.clientX-B.left-G)*180/Math.PI,P=Math.round(N);document.body.style.cursor=this.#g(P);let O=(K)=>{let z=$.getBoundingClientRect(),T=this.#Z/100*z.width,F=this.#Q/100*z.height,S=K.clientX-z.left-T,W=K.clientY-z.top-F,D=Math.round(Math.atan2(W,S)*180/Math.PI);if(D!==P)P=D,document.body.style.cursor=this.#g(D);let R=Math.sqrt(S*S+W*W);if(this.#x(K.shiftKey)){let E=this.#N?5:10;if(this.#N){let V=R/z.width*100;V=Math.round(V/E)*E,R=V/100*z.width}else R=Math.round(R/E)*E}if(this.#N)this.#j=Math.max(0,R/z.width*100);else this.#j=Math.max(0,R);if(this.#M)this.#M.setAttribute("text",this.#$J()),this.#ZJ(K.clientX,K.clientY);this.#m(),this.#a()},q=this.#VJ((K)=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#Y)this.#Y.style.pointerEvents=j??"";if(_)_.style.pointerEvents=X??"";if(document.body.style.cursor=Y,this.#M)this.#M.removeAttribute("show");if(K)this.#t(),this.#v()});window.addEventListener("pointermove",O,{signal:q.signal}),window.addEventListener("pointerup",()=>q.finish(!0),{signal:q.signal}),window.addEventListener("pointercancel",()=>q.finish(!1),{signal:q.signal})};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#DJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}#VJ(J){this.#LJ();let Q=new AbortController,Z=!1,$=(j=!1)=>{if(Z)return;if(Z=!0,Q.abort(),this.#H===Q)this.#H=null,this.#b=null;J(j)};return this.#H=Q,this.#b=$,{signal:Q.signal,finish:$}}#LJ(){this.#b?.(!1),this.#H?.abort(),this.#H=null,this.#b=null}}L("fig-canvas-control",e);class M extends HTMLElement{#Z=[M.#F()];#Q=0;#J=2;#X=240;#j=120;#N={min:-1,max:1};#_=null;#$=null;#B=null;#Y=null;#G=0;#k=null;#P=null;#q=null;#M=null;#U=[];#O=[];#K=[];#z=[];#S=new Set;#L=null;#f=null;#T=null;#R=null;#V=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#F(J="sine"){return{type:J,frequency:1,amplitude:1,phase:0,offset:0}}static get observedAttributes(){return["value","precision","aspect-ratio","edit","disabled"]}connectedCallback(){if(this.#V===null)this.#V=this.getAttribute("default")??this.getAttribute("value")??JSON.stringify({waves:[M.#F()]});this.#J=this.#p("precision",2),this.#A(this.getAttribute("value")),this.#b(),this.#h(),this.#OJ(),C(this)}disconnectedCallback(){if(this.#kJ(),this.#NJ(),this.#L)this.#L.disconnect(),this.#L=null;f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#A(Z),this.isConnected)this.#h();return}if(J==="precision"){if(this.#J=this.#p("precision",2),this.isConnected)this.#v();return}if(J==="aspect-ratio"){if(this.#b(),this.#$)this.#n();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#h()}}get value(){return JSON.stringify(this.data)}set value(J){this.setAttribute("value",typeof J==="object"&&J!==null?JSON.stringify(J):J)}get defaultValue(){return this.getAttribute("default")??this.#V??""}get isDefault(){let J=this.#d(this.defaultValue);if(!J)return!1;return JSON.stringify(this.data.waves)===JSON.stringify(J.map((Q)=>this.#C(Q)))}resetToDefault(){let J=this.defaultValue;if(!J)return;this.value=J,this.#w("input"),this.#w("change")}get data(){return{waves:this.#Z.map((J)=>this.#C(J))}}get preset(){let J=this.#I;return M.TYPES.find((Q)=>Q.value===J.type)?.name}#p(J,Q){let Z=Number.parseInt(this.getAttribute(J)||"",10);return Number.isFinite(Z)?Math.max(0,Math.min(100,Z)):Q}#D(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let $=Z.trim().toLowerCase();if($===""||$==="true")return!0;if($==="false")return!1;return!0}#E(){return this.getAttribute("edit")!=="false"}#H(){return this.#D("disabled",!1)}#b(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#A(J){let Q=this.#d(J);if(!Q)return!1;if(this.#Z=Q,!this.#Z.length)this.#Z=[M.#F()];return this.#Q=Math.min(this.#Q,this.#Z.length-1),!0}#d(J){if(!J)return null;let Q=null;if(typeof J==="string")try{Q=JSON.parse(J)}catch{return null}else if(typeof J==="object")Q=J;if(!Q)return null;return(Array.isArray(Q)?Q:Array.isArray(Q.waves)?Q.waves:[Q]).map(($)=>this.#y($))}#y(J={}){return{type:this.#u(J.type),frequency:this.#W(J.frequency,1,0.1,16),amplitude:this.#W(J.amplitude,1,-4,4),phase:this.#W(J.phase,0,-360,360),offset:this.#W(J.offset,0,-4,4)}}#C(J){return{type:J.type,frequency:this.#x(J.frequency),amplitude:this.#x(J.amplitude),phase:this.#x(J.phase),offset:this.#x(J.offset)}}get#I(){if(!this.#Z[this.#Q])this.#Q=0;return this.#Z[this.#Q]||M.#F()}#u(J){let Q=String(J||"").toLowerCase();return M.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#W(J,Q,Z,$){let j=Number.parseFloat(J);if(!Number.isFinite(j))return Q;return Math.min($,Math.max(Z,j))}#x(J){let Q=10**this.#J;return Math.round(J*Q)/Q}static#i(J){return String(J).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}static#c(J){return M.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let j=Q-10,_="";for(let X=0;X<=32;X++){let Y=X/32,B=M.#o(J,Y),G=5+Y*j,k=5+(1-(B+1)/2)*j;_+=`${X===0?"M":"L"}${G.toFixed(1)},${k.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${_}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#o(J,Q,Z=0){let $=Q+Z/360,j=$-Math.floor($),_=$*Math.PI*2;switch(J){case"square":return Math.sin(_)>=0?1:-1;case"sawtooth":return j*2-1;case"triangle":return 1-Math.abs(j*4-2);default:return Math.sin(_)}}#h(){this.#kJ(),this.#NJ(),this.innerHTML=this.#_J(),this.#BJ(),this.#jJ(),this.#n(),this.#HJ(),this.#ZJ(),C(this)}#_J(){let J=this.#E()&&!this.#H(),Q=J?"":" disabled";return`<div class="propskit-oscillator-svg-container">
1
+ function L(J,Q){if(!customElements.get(J))customElements.define(J,Q)}function U(J,Q){return J.hasAttribute(Q)&&J.getAttribute(Q)!=="false"}function $J(J,Q,Z){let $=Number(Q),j=Number(Z),_=Number.isFinite($)?Math.max(0,Math.min(1,$)):Number.isFinite(j)?Math.max(0,Math.min(100,j))/100:1,X=Number.isFinite(j)?Math.max(0,Math.min(100,j)):Math.round(_*100);return{color:J,alpha:_,opacity:X}}var h=new WeakMap;function C(J){let Q=h.get(J);if(!Q){let Z=document.createElement("fig-menu");Z.setAttribute("position","bottom left"),Z.setAttribute("offset","0 0");let $=document.createElement("fig-menu-item");$.setAttribute("value","reset-default"),$.textContent="Reset",Z.appendChild($);let j=0,_=()=>{if(j)clearTimeout(j),j=0;window.removeEventListener("pointerup",X,!0),window.removeEventListener("pointercancel",X,!0)},X=()=>{_();let G=Q?.point;if(G)Z.showAt?.(G.x,G.y)};Q={menu:Z,point:null,clearPendingOpen:_,handleContextMenu:(G)=>{if(U(J,"disabled")||G.target?.closest?.("fig-menu"))return;G.preventDefault(),G.stopPropagation(),G.stopImmediatePropagation?.(),Q.point={x:G.clientX,y:G.clientY},_(),window.addEventListener("pointerup",X,{once:!0,capture:!0}),window.addEventListener("pointercancel",X,{once:!0,capture:!0}),j=window.setTimeout(X,180)},handleChange:(G)=>{if(G.stopPropagation(),G.detail?.value==="reset-default")J.resetToDefault?.()}},h.set(J,Q)}if(Q.menu.parentElement!==J)J.appendChild(Q.menu);J.removeEventListener("contextmenu",Q.handleContextMenu),J.addEventListener("contextmenu",Q.handleContextMenu),Q.menu.removeEventListener("change",Q.handleChange),Q.menu.addEventListener("change",Q.handleChange)}function f(J){let Q=h.get(J);if(!Q)return;Q.clearPendingOpen(),J.removeEventListener("contextmenu",Q.handleContextMenu),Q.menu.removeEventListener("change",Q.handleChange)}function b(J,Q){for(let Z of["input","change"])J.dispatchEvent(new CustomEvent(Z,{detail:Q,bubbles:!0,cancelable:!0,composed:!0}))}function A(J,Q){if(typeof J==="boolean"||typeof Q==="boolean")return Boolean(J)===Boolean(Q);return String(J??"")===String(Q??"")}function jJ(J,Q){let Z=($)=>{if(Array.isArray($))return $.map(Z);if($&&typeof $==="object")return Object.keys($).sort().reduce((j,_)=>{return j[_]=Z($[_]),j},{});return $};try{let $=typeof J==="string"?JSON.parse(J):J,j=typeof Q==="string"?JSON.parse(Q):Q;return JSON.stringify(Z($))===JSON.stringify(Z(j))}catch{return A(J,Q)}}function _J(J,Q){if(!J||!Q)return null;let Z=document.createElement("span");Z.style.cssText="position:absolute;visibility:hidden;pointer-events:none;color:"+Q,J.appendChild(Z);let $=getComputedStyle(Z).color;if(Z.remove(),!$.startsWith("rgb"))return null;let j=$.match(/[\d.]+/g)?.slice(0,3).map(Number);if(!j||j.length<3||j.some(Number.isNaN))return null;let[_,X,Y]=j.map((G)=>{let k=G/255;return k<=0.04045?k/12.92:((k+0.055)/1.055)**2.4});return 0.2126*_+0.7152*X+0.0722*Y<=0.179?"light":"dark"}var u=0;function XJ(J="fig-lab"){return u+=1,`${J}-${u}`}class s extends HTMLElement{}L("fig-ai-prompt",s);class o extends HTMLElement{}L("fig-chat-message",o);class r extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#K.bind(this);#Y=!1;static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#k()}#G(){this.#Y=U(this,"checked");let Q=Array.from(this.childNodes).filter((Y)=>Y.nodeType!==Node.TEXT_NODE||Boolean(Y.textContent?.trim())).find((Y)=>Y.nodeType===Node.ELEMENT_NODE&&Y.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-segmented-control"),_=document.createElement("fig-segment"),X=document.createElement("fig-segment");j.setAttribute("sizing","equal"),_.setAttribute("value","off"),_.textContent="Off",X.setAttribute("value","on"),X.textContent="On",j.append(_,X),Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#k(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#P(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id","checked","value","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#J.setAttribute("value",U(this,"checked")?"on":"off"),this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#O.bind(this,"input"),this.#$??=this.#O.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.value==="on";this.toggleAttribute("checked",Z);let $={checked:Z,value:this.getAttribute("value")??""};this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#K(J){if(J.target instanceof Element&&J.target.closest("fig-segmented-control, fig-menu"))return;let Q=this.#J?.value==="on"?"off":"on";this.#J?.querySelector(`fig-segment[value="${Q}"]`)?.click()}get checked(){return this.#J?this.#J.value==="on":U(this,"checked")}set checked(J){let Q=Boolean(J);if(this.toggleAttribute("checked",Q),this.#J)this.#J.value=Q?"on":"off"}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){this.setAttribute("value",J??"")}get defaultValue(){return this.hasAttribute("default")?U(this,"default"):this.#Y}get isDefault(){return this.checked===this.defaultValue}resetToDefault(){let J=this.defaultValue;this.checked=J,b(this,{checked:J,value:this.getAttribute("value")??""})}focus(J){(this.#J?.querySelector("fig-segment[selected]")||this.#J?.querySelector("fig-segment"))?.focus(J)}}L("propskit-switch",r);class l extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#z.bind(this);#Y=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.#Y===null)this.#Y=this.getAttribute("default")??this.getAttribute("value")??"";if(this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#k()}#G(){let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-color");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#k(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Color")}#P(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","text","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J){let $=this.getAttribute(Z)??"";if(Z==="value"&&this.#J.getAttribute("value")===$)continue;this.#J.setAttribute(Z,$)}this.#J.setAttribute("text","true"),this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#K.bind(this,"input"),this.#$??=this.#K.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J){let Q=J instanceof CustomEvent&&J.detail!==void 0?J.detail:void 0;if(typeof Q==="string"&&Q)return Q;if(Q&&typeof Q==="object"){if(typeof Q.value==="string"&&Q.value)return Q.value;if(typeof Q.hex==="string"&&Q.hex)return Q.hex;if(typeof Q.color==="string"&&Q.color)return Q.color}if(typeof this.#J?.value==="string"&&this.#J.value)return this.#J.value;return this.#J?.getAttribute("value")??""}#K(J,Q){Q.stopImmediatePropagation();let Z=this.#O(Q);if(this.setAttribute("value",Z),this.#J&&this.#J.getAttribute("value")!==Z)this.#J.setAttribute("value",Z);let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#z(J){if(J.target instanceof Element&&J.target.closest("fig-input-color, fig-menu"))return;this.focus()}get value(){return this.getAttribute("value")??this.#J?.value??this.#J?.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value"),this.#J?.removeAttribute("value");return}let Q=String(J);if(this.setAttribute("value",Q),this.#J&&this.#J.getAttribute("value")!==Q)this.#J.setAttribute("value",Q)}#S(J){if(!this.#J)return;if(this.#J.getAttribute("value")===J)this.#J.removeAttribute("value");this.#J.setAttribute("value",J)}#L(){return this.getAttribute("default")??this.#Y??""}get defaultValue(){return String(this.#L())}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;this.setAttribute("value",J),this.#S(J),this.dispatchEvent(new CustomEvent("input",{detail:J,bubbles:!0,cancelable:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:J,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#J?.querySelector("input:not([tabindex='-1'])")?.focus(J)}}L("propskit-color",l);class d extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#z.bind(this);#Y=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.#Y===null)this.#Y=this.getAttribute("default")??this.getAttribute("value")??JSON.stringify(this.#J?.value??{});if(this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#k()}#G(){let Q=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())).find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-gradient");Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#k(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Gradient")}#P(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J){let $=this.getAttribute(Z)??"";if(Z==="value"&&this.#J.getAttribute("value")===$)continue;this.#J.setAttribute(Z,$)}if(!this.hasAttribute("edit"))this.#J.setAttribute("edit","true");this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#K.bind(this,"input"),this.#$??=this.#K.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J){let Q=J instanceof CustomEvent&&J.detail&&typeof J.detail==="object"?J.detail:this.#J?.value;if(!Q||typeof Q!=="object")return this.value;return JSON.stringify(Q)}#K(J,Q){Q.stopImmediatePropagation();let Z=this.#O(Q);this.setAttribute("value",Z);let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#z(J){if(J.target instanceof Element&&J.target.closest("fig-input-gradient, fig-menu"))return;this.focus()}get value(){return this.getAttribute("value")??JSON.stringify(this.#J?.value??{})}set value(J){if(J===null||J===void 0||J===""){this.removeAttribute("value"),this.#J?.removeAttribute("value");return}let Q=typeof J==="object"?JSON.stringify(J):String(J);if(this.setAttribute("value",Q),this.#J&&this.#J.getAttribute("value")!==Q)this.#J.setAttribute("value",Q)}get defaultValue(){return this.getAttribute("default")??this.#Y??""}get isDefault(){return jJ(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;if(!J)return;this.value=J;let Q=this.#J?.value;b(this,Q)}focus(J){this.#J?.focus(J)}}L("propskit-gradient",d);class i extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=null;#Y=this.#T.bind(this);#G=this.#f.bind(this);#k=!1;#P=null;static get observedAttributes(){return["label","direction","aria-label","options","value"]}connectedCallback(){if(!this.#Z)this.#q();if(this.#M(),this.#O(),this.#K(),this.removeEventListener("click",this.#Y),this.addEventListener("click",this.#Y),this.removeEventListener("pointerdown",this.#G,!0),this.addEventListener("pointerdown",this.#G,!0),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;let j=$.attributeName;if(j==="label"||j==="direction"||j==="aria-label")Q=!0;else Z=!0}if(Q)this.#M();if(Z)this.#O()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#z(),this.removeEventListener("click",this.#Y),this.removeEventListener("pointerdown",this.#G,!0),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label"){this.#M();return}if(J==="options"||J==="value")this.#O()}#q(){this.#P=this.getAttribute("value")??"";let J=this.querySelector(":scope > label"),Q=document.createElement("fig-field"),Z=J||document.createElement("label"),$=document.createElement("fig-select");$.setAttribute("full",""),Q.append(Z,$),this.#Z=Q,this.#Q=Z,this.#J=$,this.#X=Boolean(J),this.replaceChildren(Q)}#M(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Select"),this.#J.setAttribute("full","")}#U(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","full","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#O(){if(!this.#J)return;let J=this.#U().sort((Z,$)=>{if(Z==="options")return-1;if($==="options")return 1;if(Z==="value")return 1;if($==="value")return-1;return 0}),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#K(){if(!this.#J)return;this.#_??=this.#S.bind(this,"input"),this.#$??=this.#S.bind(this,"change"),this.#B??=this.#S.bind(this,"optionhover"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$),this.#J.addEventListener("optionhover",this.#B)}#z(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$);if(this.#B)this.#J.removeEventListener("optionhover",this.#B)}#S(J,Q){if(Q.target!==this.#J)return;Q.stopImmediatePropagation();let Z=this.#J?.value??"";if(J!=="optionhover")this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#L(){if(!this.#J)return!1;if(this.#J.open)return!0;let J=this.#J.shadowRoot?.querySelector('dialog[is="fig-popup"]');return Boolean(J?.open||J?.matches?.(":open"))}#f(J){if(!(J.target instanceof Element))return;if(J.target.closest("fig-menu"))return;if(J.target.closest("fig-select")){this.#k=!1;return}this.#k=this.#L()}#T(J){if(J.target instanceof Element&&J.target.closest("fig-menu"))return;if(J.target instanceof Element&&J.target.closest("fig-select")){this.#k=!1;return}if(!this.#J||U(this.#J,"disabled")){this.#k=!1;return}if(this.#J.focus(),this.#k||this.#L()){this.#k=!1,this.#J.open=!1;return}this.#J.open=!0}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0)this.removeAttribute("value");else this.setAttribute("value",String(J))}get defaultValue(){return this.getAttribute("default")??this.#P??""}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;if(this.value=J,this.#J)this.#J.value=J;b(this,J)}focus(J){this.#J?.focus(J)}}L("propskit-select",i);class a extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#K.bind(this);#Y=null;static get observedAttributes(){return["label","direction","aria-label"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction"||$.attributeName==="aria-label")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction"||J==="aria-label")this.#k()}#G(){this.#Y=this.getAttribute("value")??"";let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-text");for(let _ of J)if(_!==Q)j.appendChild(_);Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z)}#k(){if(!this.#Z||!this.#Q||!this.#J)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal"),this.#J.setAttribute("aria-label",this.getAttribute("aria-label")||this.#Q.textContent?.trim()||"Text")}#P(){let J=new Set(["label","direction","oninput","onchange","class","style","id","size","aria-label","multiline","resizable","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#O.bind(this,"input"),this.#$??=this.#O.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J,Q){Q.stopImmediatePropagation();let Z=this.#J?.value??"";this.setAttribute("value",String(Z));let $=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:Z;this.dispatchEvent(new CustomEvent(J,{detail:$,bubbles:!0,cancelable:!0,composed:!0}))}#K(J){if(J.target instanceof Element&&J.target.closest("fig-input-text, fig-menu"))return;this.focus()}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0){if(this.removeAttribute("value"),this.#J)this.#J.value=""}else{let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}}get defaultValue(){return this.getAttribute("default")??this.#Y??""}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;this.value=J,b(this,J)}focus(J){this.#J?.focus(J)}}L("propskit-text",a);class n extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=null;#$=null;#B=this.#K.bind(this);#Y=null;static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#G();if(this.#k(),this.#q(),this.#M(),this.removeEventListener("click",this.#B),this.addEventListener("click",this.#B),C(this),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J){if($.type!=="attributes")continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#k();if(Z)this.#q()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){this.#j?.disconnect(),this.#U(),this.removeEventListener("click",this.#B),f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#k()}#G(){this.#Y=this.getAttribute("value")??this.getAttribute("min")??"0";let J=Array.from(this.childNodes).filter((_)=>_.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-input-number");Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z);for(let _ of J)if(_!==Q)j.appendChild(_)}#k(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()==="")this.#Q.remove();else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#P(){let J=new Set(["label","direction","size","oninput","onchange","class","style","id","default"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!Q.startsWith("data-"))}#q(){if(!this.#J)return;let J=this.#P(),Q=new Set(J);for(let Z of this.#N)if(!Q.has(Z))this.#J.removeAttribute(Z);for(let Z of J)this.#J.setAttribute(Z,this.getAttribute(Z)??"");this.#N=Q}#M(){if(!this.#J)return;this.#_??=this.#O.bind(this,"input"),this.#$??=this.#O.bind(this,"change"),this.#J.addEventListener("input",this.#_),this.#J.addEventListener("change",this.#$)}#U(){if(!this.#J)return;if(this.#_)this.#J.removeEventListener("input",this.#_);if(this.#$)this.#J.removeEventListener("change",this.#$)}#O(J,Q){Q.stopImmediatePropagation();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0)this.setAttribute("value",String(this.#J.value));this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}#K(J){if(J.target instanceof Element&&J.target.closest("fig-input-number, fig-menu"))return;this.focus()}get value(){return this.#J?.value??this.getAttribute("value")??""}set value(J){if(J===null||J===void 0||J===""){if(this.removeAttribute("value"),this.#J)this.#J.value=""}else{let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}}get defaultValue(){return this.getAttribute("default")??this.#Y??"0"}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){let J=this.defaultValue;this.value=J,b(this,this.#J?.value??J)}focus(J){this.#J?.focus(J)}}L("propskit-number",n);class y extends HTMLElement{static observedAttributes=["name","open","show-reset"];static#Z=["propskit-color","propskit-gradient","propskit-number","propskit-select","propskit-slider","propskit-switch","propskit-text","propskit-oscillator"].join(",");#Q=null;#J=null;#X=null;#j=null;#N=0;#_=()=>this.#Y();connectedCallback(){this.#T(),this.#$(),requestAnimationFrame(()=>{this.#K()})}disconnectedCallback(){if(this.#B(),this.#N)cancelAnimationFrame(this.#N),this.#N=0;this.#Q?.removeEventListener("click",this.#k),this.#Q?.removeEventListener("keydown",this.#P),this.#X?.querySelector("fig-button")?.removeEventListener("click",this.#q)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="open"){this.#Q?.setAttribute("aria-expanded",String(this.open));return}if(J==="show-reset"){this.#L(),this.#K();return}this.#T()}get open(){let J=this.getAttribute("open");return J!==null&&J!=="false"}set open(J){let Q=this.open;if(J)this.setAttribute("open","true");else this.setAttribute("open","false");if(this.#Q?.setAttribute("aria-expanded",String(!!J)),Q!==!!J)this.dispatchEvent(new CustomEvent("openchange",{detail:{open:!!J},bubbles:!0}))}get showReset(){let J=this.getAttribute("show-reset");if(J===null)return!0;return J!=="false"}set showReset(J){if(J)this.setAttribute("show-reset","true");else this.setAttribute("show-reset","false")}get dirty(){return this.hasAttribute("data-dirty")&&this.getAttribute("data-dirty")!=="false"}resetProperties(){this.#S()}#$(){if(this.removeEventListener("input",this.#_,!0),this.removeEventListener("change",this.#_,!0),this.addEventListener("input",this.#_,!0),this.addEventListener("change",this.#_,!0),!this.#j)this.#j=new MutationObserver(()=>{this.#Y()});this.#j.disconnect(),this.#j.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["value","checked","default"]})}#B(){this.removeEventListener("input",this.#_,!0),this.removeEventListener("change",this.#_,!0),this.#j?.disconnect()}#Y(){if(this.#N)return;this.#N=requestAnimationFrame(()=>{this.#N=0,this.#K()})}#G(J){return J instanceof Element&&Boolean(J.closest(".propskit-group-reset, .propskit-group-reset-tooltip"))}#k=(J)=>{if(this.#G(J.target))return;J.stopPropagation(),this.open=!this.open};#P=(J)=>{if(this.#G(J.target))return;if(J.key!=="Enter"&&J.key!==" ")return;J.preventDefault(),J.stopPropagation(),this.open=!this.open};#q=(J)=>{J.preventDefault(),J.stopPropagation(),this.#S()};#M(){return[...this.querySelectorAll(y.#Z)].filter((J)=>J.closest("propskit-group")===this&&!J.parentElement?.closest(y.#Z))}#U(J){return J.isDefault===!1}#O(){for(let J of this.#M())if(this.#U(J))return!0;return!1}#K(){if(this.#O())this.setAttribute("data-dirty","");else this.removeAttribute("data-dirty");this.#L()}#z(J){if(typeof J.resetToDefault==="function")J.resetToDefault()}#S(){for(let J of this.#M())this.#z(J);this.#K(),this.dispatchEvent(new CustomEvent("reset",{bubbles:!0,composed:!0}))}#L(){if(!this.showReset){this.#X?.setAttribute("hidden","");return}this.#f(),this.#X?.removeAttribute("hidden")}#f(){if(!this.#Q||!this.showReset)return;let J=this.#Q.querySelector(":scope > .propskit-group-reset-tooltip");if(!J){J=document.createElement("fig-tooltip"),J.className="propskit-group-reset-tooltip",J.setAttribute("text","Reset properties");let Q=document.createElement("fig-button");Q.className="propskit-group-reset",Q.setAttribute("variant","ghost"),Q.setAttribute("icon",""),Q.setAttribute("aria-label","Reset properties");let Z=document.createElement("fig-icon");Z.setAttribute("name","reset"),Q.appendChild(Z),J.appendChild(Q),this.#Q.appendChild(J),Q.addEventListener("click",this.#q)}else{let Q=J.querySelector("fig-button");Q?.removeEventListener("click",this.#q),Q?.addEventListener("click",this.#q)}this.#X=J}#T(){let Q=this.getAttribute("name")||"Group",Z=this.querySelector(":scope > fig-header");if(Z)this.#Q=Z;else if(!this.#Q||!this.#Q.dataset.generated||this.#Q.parentElement!==this)this.#Q=document.createElement("fig-header"),this.#Q.setAttribute("borderless",""),this.#Q.dataset.generated="true",this.prepend(this.#Q);let $=this.#Q.querySelector(":scope > h3"),j=this.#Q.querySelector(":scope > fig-button.propskit-group-disclosure");if(!$&&j){if($=j.querySelector(":scope > h3"),$)this.#Q.insertBefore($,j);j.remove()}if(!$)$=document.createElement("h3"),this.#Q.prepend($);let _=$.querySelector(":scope > button.propskit-group-disclosure");if(_){while(_.firstChild)$.insertBefore(_.firstChild,_);_.remove()}if(!$.id)$.id=XJ("propskit-group");if(this.#Q.dataset.generated){let X=$.querySelector(".propskit-group-chevron");if($.textContent=Q,X)$.prepend(X)}if(!this.hasAttribute("role"))this.setAttribute("role","group");if(!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby"))this.setAttribute("aria-labelledby",$.id);if(!$.querySelector(".propskit-group-chevron")){let X=document.createElement("fig-icon");X.setAttribute("name","chevron"),X.setAttribute("size","small"),X.className="propskit-group-chevron",$.prepend(X)}if(this.#J=$.querySelector(".propskit-group-chevron"),this.#L(),this.#Q.setAttribute("role","button"),this.#Q.setAttribute("tabindex","0"),this.#Q.setAttribute("aria-expanded",String(this.open)),this.#Q.removeEventListener("click",this.#k),this.#Q.addEventListener("click",this.#k),this.#Q.removeEventListener("keydown",this.#P),this.#Q.addEventListener("keydown",this.#P),!this.hasAttribute("open"))this.setAttribute("open","false"),this.#Q.setAttribute("aria-expanded","false")}}L("propskit-group",y);class t extends HTMLElement{#Z=null;#Q=null;#J=null;#X=!1;#j=null;#N=new Set;#_=0;#$=0;#B=null;#Y=null;#G=0;#k=null;#P=null;#q=!1;#M=0;#U=null;#O=0;#K=null;#z=null;#S=null;#L=this.#_J.bind(this);#f=this.#XJ.bind(this);#T=this.#$J.bind(this);#R=this.#h.bind(this);#V=this.#r.bind(this);#F=this.#MJ.bind(this);#p=this.#x.bind(this);#D=new Set(["variant","color","text","full","elastic","size","name","class","data-wave-index","data-active","data-elastic-dragging","style"]);static get observedAttributes(){return["label","direction"]}connectedCallback(){if(!this.#Z)this.#E();if(this.#b(),this.#A(),this.#KJ(),this.#u(),this.removeEventListener("pointerdown",this.#L,{capture:!0}),this.addEventListener("pointerdown",this.#L,{capture:!0,passive:!0}),this.removeEventListener("contextmenu",this.#V),this.addEventListener("contextmenu",this.#V),this.removeEventListener("click",this.#p,!0),this.addEventListener("click",this.#p,!0),this.#Y?.removeEventListener("change",this.#F),this.#Y?.addEventListener("change",this.#F),!this.#j)this.#j=new MutationObserver((J)=>{let Q=!1,Z=!1;for(let $ of J)if($.type==="attributes"){if($.attributeName==="value"){this.#y();continue}if($.attributeName==="color"){Z=!0;continue}if($.attributeName&&this.#D.has($.attributeName))continue;if($.attributeName==="label"||$.attributeName==="direction")Q=!0;else Z=!0}if(Q)this.#b();if(Z)this.#A(),this.#u()});this.#j.observe(this,{attributes:!0})}disconnectedCallback(){if(this.#j?.disconnect(),this.#_)cancelAnimationFrame(this.#_),this.#_=0;if(this.#$)cancelAnimationFrame(this.#$),this.#$=0;this.#JJ(),this.#e(),this.#QJ(),this.#o(),this.#PJ(),this.removeEventListener("pointerdown",this.#L,{capture:!0}),this.removeEventListener("contextmenu",this.#V),this.removeEventListener("click",this.#p,!0),this.#Y?.removeEventListener("change",this.#F)}attributeChangedCallback(J,Q,Z){if(Q===Z||!this.#Z)return;if(J==="label"||J==="direction")this.#b()}#E(){this.#P=this.getAttribute("value")??this.getAttribute("min")??"0";let J=Array.from(this.childNodes).filter((_)=>{return _.nodeType!==Node.TEXT_NODE||Boolean(_.textContent?.trim())}),Q=J.find((_)=>_.nodeType===Node.ELEMENT_NODE&&_.matches("label")),Z=document.createElement("fig-field"),$=Q||document.createElement("label"),j=document.createElement("fig-slider");j.setAttribute("text","true");for(let _ of this.#C()){let X=this.getAttribute(_);j.setAttribute(_,X??"")}Z.append($,j),this.#Z=Z,this.#Q=$,this.#J=j,this.#X=Boolean(Q),this.replaceChildren(Z),this.#H();for(let _ of J){if(_===Q)continue;this.#J.appendChild(_)}}#H(){let J=document.createElement("fig-menu");J.setAttribute("position","bottom left"),J.setAttribute("offset","0 0");let Q=document.createElement("fig-menu-item");Q.setAttribute("value","reset-default"),Q.textContent="Reset",J.appendChild(Q),J.addEventListener("change",this.#F),this.#Y=J,this.appendChild(J)}#b(){if(!this.#Z||!this.#Q)return;let J=this.hasAttribute("label"),Q=this.getAttribute("label");if(J&&(Q??"").trim()===""){if(this.#Q.parentElement===this.#Z)this.#Q.remove()}else{if(!this.#X)this.#Q.textContent=J?Q??"":"Label";if(this.#Q.parentElement!==this.#Z)this.#Z.prepend(this.#Q)}this.#Z.setAttribute("direction",this.getAttribute("direction")||"horizontal")}#A(){if(!this.#J)return;let J=this.#C(),Q=new Set(J.filter(($)=>$!=="text"&&$!=="value"));for(let $ of this.#N)if(!Q.has($))this.#J.removeAttribute($);for(let $ of J){if($==="text"||$==="value")continue;let j=this.getAttribute($)??"";if(this.#J.getAttribute($)!==j)this.#J.setAttribute($,j)}this.#J.removeAttribute("variant"),this.#J.removeAttribute("color"),this.#J.removeAttribute("transform"),this.#J.removeAttribute("full"),this.#J.setAttribute("text","true");let Z=(this.getAttribute("type")||"range").toLowerCase();if(Z==="delta"||Z==="stepper")this.#J.setAttribute("default",this.getAttribute("default")??"50");else if(!this.hasAttribute("default"))this.#J.removeAttribute("default");if(Z==="stepper")this.#J.setAttribute("step",this.getAttribute("step")??"10");else if(!this.hasAttribute("step"))this.#J.removeAttribute("step");if(Z==="opacity")this.#J.style.setProperty("--color",this.getAttribute("color")||"var(--figma-color-bg-secondary)");else this.#J.style.removeProperty("--color");this.#d(Z),this.#N=Q,this.#y(),this.#I()}#d(J){let Q=this.#J?.querySelector("fig-input-number");if(!Q)return;if(J!=="opacity"||!this.hasAttribute("color")){Q.removeAttribute("theme");return}let Z=_J(this.#J,this.getAttribute("color"));if(Z)Q.setAttribute("theme",Z);else Q.removeAttribute("theme")}#y(){if(!this.#J)return;let J=this.getAttribute("value")??"";if(String(this.#J.value)!==J)this.#J.value=J}#C(){let J=new Set(["label","direction","oninput","onchange","steppers"]);return this.getAttributeNames().filter((Q)=>!J.has(Q)&&!this.#D.has(Q))}#I(){if(this.#_)cancelAnimationFrame(this.#_);this.#_=requestAnimationFrame(()=>{this.#_=0,this.#NJ(),this.#W()})}#u(){if(this.#$)cancelAnimationFrame(this.#$);this.#$=requestAnimationFrame(()=>{this.#$=0,this.#W()})}#W(){let J=this.#J?.querySelector('input[type="range"]'),Q=this.#J?.querySelector("fig-input-number input");if(J!==this.#B)this.#c(J);if(J){J.removeAttribute("tabindex"),J.removeAttribute("aria-hidden");let Z=this.getAttribute("aria-label")||this.#Q?.textContent?.trim()||"Slider";if(!J.hasAttribute("aria-label")&&!J.hasAttribute("aria-labelledby"))J.setAttribute("aria-label",Z)}if(Q)Q.removeAttribute("tabindex"),Q.removeAttribute("aria-hidden")}#x(J){if(U(this,"disabled"))return;if(J.target instanceof Element&&J.target.closest("fig-input-number, fig-menu"))return;this.#i()}#i(){requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(this.isConnected&&!U(this,"disabled"))this.focus()})})}#c(J){if(this.#o(),this.#B=J,!this.#B)return;this.#B.addEventListener("dblclick",this.#R,{capture:!0})}#o(){if(!this.#B)return;this.#B.removeEventListener("dblclick",this.#R,{capture:!0}),this.#B=null}#h(J){J.preventDefault(),J.stopImmediatePropagation(),this.#n()}#_J(J){if(J.button!==0||U(this,"disabled"))return;if(this.getAttribute("elastic")==="false")return;if(J.target?.closest?.("fig-input-number"))return;let Q=this.#J?.querySelector('input[type="range"]')??this.#B;if(!Q)return;this.#e(),this.#QJ(),this.#B=Q,this.#q=!0,this.#K=J.pointerId,this.#M=this.#OJ();let Z=Q.getBoundingClientRect(),$=this.getBoundingClientRect();this.#U={left:Z.left,right:Z.right,width:Z.width},this.#O=$.width,window.addEventListener("pointermove",this.#f,{passive:!0}),window.addEventListener("pointerup",this.#T,{once:!0}),window.addEventListener("pointercancel",this.#T,{once:!0}),window.addEventListener("blur",this.#T,{once:!0})}#XJ(J){if(!this.#q)return;if(J.pointerId!==this.#K)return;if(J.buttons===0){this.#$J(J);return}this.#jJ(J.clientX)}#$J(J){if(J?.pointerId!==void 0&&this.#K!==null&&J.pointerId!==this.#K)return;let Q=J?.type==="pointerup"||J?.type==="pointermove"&&J.buttons===0;if(this.#e(),this.#QJ(),Q)this.#i()}#e(){window.removeEventListener("pointermove",this.#f),window.removeEventListener("pointerup",this.#T),window.removeEventListener("pointercancel",this.#T),window.removeEventListener("blur",this.#T),this.#q=!1,this.#K=null}#r(J){if(U(this,"disabled"))return;J.preventDefault(),J.stopPropagation(),J.stopImmediatePropagation(),this.#JJ(),this.#BJ(J.clientX,J.clientY)}#BJ(J,Q){let Z=!1,$=0,j=()=>{if(Z)return;Z=!0,window.clearTimeout($),window.removeEventListener("pointerup",j,!0),window.removeEventListener("pointercancel",j,!0),requestAnimationFrame(()=>{this.#Y?.showAt?.(J,Q)})};window.addEventListener("pointerup",j,{once:!0,capture:!0}),window.addEventListener("pointercancel",j,{once:!0,capture:!0}),$=window.setTimeout(j,180)}#MJ(J){if(J.stopPropagation(),J.detail?.value!=="reset-default")return;this.#n()}#JJ(){if(this.#G)clearTimeout(this.#G),this.#G=0;this.#k=null}#OJ(){let J=getComputedStyle(this).getPropertyValue("--propskit-slider-elastic-distance").trim();if(J.includes("var(")||!J.endsWith("px")){let Z=document.createElement("div");Object.assign(Z.style,{position:"absolute",visibility:"hidden",pointerEvents:"none",width:"var(--propskit-slider-elastic-distance)"}),this.appendChild(Z),J=getComputedStyle(Z).width,Z.remove()}let Q=Number.parseFloat(J);return Number.isFinite(Q)?Math.max(0,Q):0}#jJ(J){let Q=this.#U;if(!Q||!this.#M){this.#QJ();return}let Z=J<Q.left?J-Q.left:J>Q.right?J-Q.right:0;if(!Z){this.#l();return}let $=Math.max(-this.#M,Math.min(this.#M,Z*0.5)),j=Math.abs($),_=this.#O?(this.#O+j)/this.#O:1;this.dataset.elasticDragging="true",this.style.setProperty("--propskit-slider-elastic-size",`${j}px`),this.style.setProperty("--propskit-slider-elastic-scale",`${_}`),this.style.setProperty("--propskit-slider-elastic-origin",$<0?"right center":"left center")}#QJ(){this.#l(),this.#M=0,this.#U=null,this.#O=0,this.#K=null}#l(){this.removeAttribute("data-elastic-dragging"),this.style.removeProperty("--propskit-slider-elastic-size"),this.style.removeProperty("--propskit-slider-elastic-scale")}#YJ(J){let Q=this.#B;if(!Q)return this.#J?.value??"";let Z=Q.getBoundingClientRect(),$=Z.width?Math.min(1,Math.max(0,(J.clientX-Z.left)/Z.width)):0,j=Number(Q.min||0),_=Number(Q.max||100),X=Q.step==="any"?0:Number(Q.step||1),Y=j+(_-j)*$;if(!X)return String(Y);let B=Math.round((Y-j)/X)*X+j,G=Math.max(0,`${X}`.split(".")[1]?.length||0);return String(Number(B.toFixed(G)))}#s(){return this.getAttribute("default")??this.#J?.getAttribute("default")??this.#P??this.#B?.min??"0"}#n(){this.#JJ(),this.#ZJ(this.#s(),"input"),this.#ZJ(this.#s(),"change")}#ZJ(J,Q){if(!this.#J||J===null||J===void 0)return;this.#J.value=J,this.setAttribute("value",String(this.#J.value)),this.dispatchEvent(new CustomEvent(Q,{detail:this.#J.value,bubbles:!0,cancelable:!0,composed:!0}))}#NJ(){if(!this.#J)return;let J=this.#J.querySelector("fig-input-number");if(!J)return;if(!(this.hasAttribute("steppers")&&this.getAttribute("steppers")!=="false")){J.removeAttribute("steppers");return}let Z=this.getAttribute("steppers");J.setAttribute("steppers",Z??"")}#KJ(){if(!this.#J)return;if(!this.#z)this.#z=this.#qJ.bind(this,"input");if(!this.#S)this.#S=this.#qJ.bind(this,"change");this.#J.addEventListener("input",this.#z),this.#J.addEventListener("change",this.#S)}#PJ(){if(!this.#J)return;if(this.#z)this.#J.removeEventListener("input",this.#z);if(this.#S)this.#J.removeEventListener("change",this.#S)}#qJ(J,Q){if(Q.stopImmediatePropagation(),J==="change")this.#QJ();let Z=Q instanceof CustomEvent&&Q.detail!==void 0?Q.detail:this.#J?.value;if(this.#J?.value!==void 0){let $=String(this.#J.value);if(this.getAttribute("value")!==$)this.setAttribute("value",$)}this.dispatchEvent(new CustomEvent(J,{detail:Z,bubbles:!0,cancelable:!0,composed:!0}))}focus(J){this.#W();let Q=this.#J?.querySelector('input[type="range"]');Q?.setAttribute("data-propskit-focus-called",""),Q?.focus(J)}get value(){return this.getAttribute("value")??this.#J?.value??""}set value(J){if(J===null||J===void 0||J===""){if(this.removeAttribute("value"),this.#J)this.#J.value="";return}let Q=String(J);if(this.setAttribute("value",Q),this.#J)this.#J.value=Q}get defaultValue(){return this.#s()}get isDefault(){return A(this.value,this.defaultValue)}resetToDefault(){this.#n()}}L("propskit-slider",t);class e extends HTMLElement{static observedAttributes=["type","value","color","name","tooltips","disabled","drag-surface","snapping"];#Z=50;#Q=50;#J=75;#X=75;#j=0;#N=!1;#_=0;#$=null;#B=null;#Y=null;#G=null;#k=null;#P=null;#q=null;#M=null;#U=null;#O=!1;#K=!1;#z=!1;#S=!1;#L=null;#f="";#T="";#R=null;#V=null;#F=null;#p="";#D="";#E=null;#H=null;#b=null;get#A(){return this.getAttribute("type")||"point"}get#d(){return this.#A==="point-radius"||this.#A==="point-radius-angle"}get#y(){return this.#A==="point-radius-angle"}get#C(){return this.#A==="point-point"}get#I(){return this.#A==="point-radius-angle"||this.#A==="point-point"}get#u(){let J=this.getAttribute("tooltips");return J===null||J!=="false"}get#W(){let J=this.getAttribute("snapping");if(J===null)return"false";let Q=J.trim().toLowerCase();if(Q==="modifier")return"modifier";if(Q===""||Q==="true")return"true";return"false"}#x(J){let Q=this.#W;if(Q==="true")return!0;if(Q==="modifier")return!!J;return!1}get#i(){let J=this.getAttribute("name");if(J)return J.split(",")[0].trim();return`${Math.round(this.#Z)}%, ${Math.round(this.#Q)}%`}get#c(){let J=this.getAttribute("name");if(J){let Q=J.split(",");if(Q.length>1)return Q[1].trim()}return`${Math.round(this.#J)}%, ${Math.round(this.#X)}%`}get#o(){return this.getAttribute("drag-surface")||"parent"}get#h(){let J=this.#o;if(J==="parent")return this.parentElement;return this.closest(J)}get#_J(){let J=this.#o;if(J==="parent"){let Q=this.parentElement;if(Q)return Q.setAttribute("data-fig-canvas-control-surface",""),"[data-fig-canvas-control-surface]"}return J}#XJ(J){if(this.#N)return this.#j/100*J;return this.#j}#$J(){if(this.#N)return`Radius ${Math.round(this.#j)}%`;return`Radius ${Math.round(this.#j)}`}connectedCallback(){this.#e(),this.#r()}disconnectedCallback(){this.#LJ(),this.#DJ(),this.#JJ(),this.#l(),document.body.classList.remove("fig-lab-move-active"),document.body.classList.remove("fig-lab-rotate-active")}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"&&!this.#O&&!this.#K&&!this.#z&&!this.#S)if(this.#e(),this.#$)this.#m();else this.#r();if(J==="type")this.#LJ(),this.#e(),this.#r();if(J==="color"&&this.#$)if(Z)this.#$.setAttribute("color",Z);else this.#$.removeAttribute("color");if(J==="disabled")this.#LJ(),this.#r();if(J==="tooltips")this.#r();if(J==="snapping"&&this.#$){if(this.#$.setAttribute("drag-snapping",Z||"false"),this.#B)this.#B.setAttribute("drag-snapping",Z||"false")}if(J==="name"){if(this.#P)this.#P.setAttribute("text",this.#i);if(this.#q)this.#q.setAttribute("text",this.#c)}}#e(){let J=this.getAttribute("value");if(!J)return;try{let Q=JSON.parse(J);if(typeof Q.x==="number")this.#Z=Q.x;if(typeof Q.y==="number")this.#Q=Q.y;if(Q.radius!==void 0){let Z=String(Q.radius);if(Z.endsWith("%"))this.#N=!0,this.#j=parseFloat(Z);else this.#N=!1,this.#j=parseFloat(Z);if(!Number.isFinite(this.#j))this.#j=0}if(typeof Q.angle==="number")this.#_=Q.angle;if(typeof Q.x2==="number")this.#J=Q.x2;if(typeof Q.y2==="number")this.#X=Q.y2}catch{}}get value(){let J={x:this.#Z,y:this.#Q};if(this.#A==="color"){let Q=this.getAttribute("color")||this.#$?.getAttribute("color");if(Q)J.color=Q}if(this.#d)J.radius=this.#N?`${this.#j}%`:this.#j;if(this.#y)J.angle=this.#_;if(this.#C)J.x2=this.#J,J.y2=this.#X;return J}set value(J){if(typeof J==="object")this.setAttribute("value",JSON.stringify(J));else if(typeof J==="string")this.setAttribute("value",J)}#r(){this.#LJ(),this.innerHTML="",this.#$=null,this.#B=null,this.#Y=null,this.#G=null,this.#k=null,this.#P=null,this.#q=null,this.#M=null,this.#U=null;let J=U(this,"disabled"),Q=this.#A,Z=this.#u,$=this.#_J,j=document.createElement("fig-handle");if(j.setAttribute("drag","true"),j.setAttribute("drag-surface",$),j.setAttribute("drag-axes","x,y"),j.setAttribute("drag-snapping",this.#W),j.setAttribute("value",`${this.#Z}% ${this.#Q}%`),J)j.setAttribute("disabled","");if(Q==="color"){j.setAttribute("type","color");let _=this.getAttribute("color");if(_)j.setAttribute("color",_)}else j.setAttribute("type","canvas");if(this.#C)j.setAttribute("hit-area","12 circle"),j.setAttribute("hit-area-mode","delegate");if(this.#$=j,this.#d)this.#KJ();if(this.#I)this.#PJ();if(Z){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#i),_.appendChild(j),this.appendChild(_),this.#P=_}else this.appendChild(j);if(this.#y)this.#SJ(J,Z,$);if(this.#C)this.#HJ(J,Z,$);this.#BJ(this.#$),this.#BJ(this.#Y),this.#BJ(this.#B),this.#RJ(),this.#n(),requestAnimationFrame(()=>this.#m())}#BJ(J){if(!J)return;J.addEventListener("pointerdown",(Q)=>{if(Q.target?.classList?.contains("fig-handle-hit-area")&&J.querySelector(".fig-handle-hit-area"))this.#QJ(Q,J);else this.#MJ(Q)},{capture:!0})}#MJ(J){if(U(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#L===null)this.#f=document.body.style.getPropertyValue("cursor"),this.#T=document.body.style.getPropertyPriority("cursor");if(this.#L=J?.pointerId??-1,document.body.classList.add("fig-lab-move-active"),document.body.style.setProperty("cursor","var(--fig-lab-cursor-move)","important"),!this.#R)this.#R=(Q)=>{if(Q?.pointerId!==void 0&&this.#L!==null&&Q.pointerId!==this.#L)return;if(Q?.type==="blur")this.#JJ();else requestAnimationFrame(()=>this.#JJ())};window.addEventListener("pointerup",this.#R),window.addEventListener("pointercancel",this.#R),window.addEventListener("blur",this.#R)}#JJ(){if(this.#L===null)return;if(document.body.classList.remove("fig-lab-move-active"),this.#f)document.body.style.setProperty("cursor",this.#f,this.#T);else document.body.style.removeProperty("cursor");if(this.#L=null,this.#f="",this.#T="",this.#R)window.removeEventListener("pointerup",this.#R),window.removeEventListener("pointercancel",this.#R),window.removeEventListener("blur",this.#R)}#OJ(J){if(!J)return 0;if(J===this.#Y)return this.#_;if(!this.#C)return 0;let Q=this.#TJ();return J===this.#$?Q+180:Q}#jJ(){if(this.#V===null)return;let J=this.#zJ(this.#OJ(this.#F));document.body.style.setProperty("--fig-lab-cursor-rotate",J),document.body.style.setProperty("cursor",J,"important")}#QJ(J,Q){if(U(this,"disabled"))return;if(J?.button!==void 0&&J.button!==0)return;if(J?.isPrimary===!1)return;if(this.#V===null)this.#p=document.body.style.getPropertyValue("cursor"),this.#D=document.body.style.getPropertyPriority("cursor");if(this.#V=J?.pointerId??-1,this.#F=Q,document.body.classList.add("fig-lab-rotate-active"),this.#jJ(),!this.#E)this.#E=(Z)=>{if(Z?.pointerId!==void 0&&this.#V!==null&&Z.pointerId!==this.#V)return;if(Z?.type==="blur")this.#l();else requestAnimationFrame(()=>this.#l())};window.addEventListener("pointerup",this.#E),window.addEventListener("pointercancel",this.#E),window.addEventListener("blur",this.#E)}#l(){if(this.#V===null)return;if(document.body.classList.remove("fig-lab-rotate-active"),document.body.style.removeProperty("--fig-lab-cursor-rotate"),this.#p)document.body.style.setProperty("cursor",this.#p,this.#D);else document.body.style.removeProperty("cursor");if(this.#V=null,this.#F=null,this.#p="",this.#D="",this.#E)window.removeEventListener("pointerup",this.#E),window.removeEventListener("pointercancel",this.#E),window.removeEventListener("blur",this.#E)}#YJ(J,Q,Z,$){if(!J)return;let j=()=>!!$?.(),_=()=>{let B=Q();if(!B)return;B.removeAttribute("show"),B.hidePopup?.()},X=()=>{if(j()){_();return}let B=Q();if(!B)return;if(Z)B.setAttribute("text",Z());B.setAttribute("show","true"),B.showPopup?.()},Y=()=>{_()};J.addEventListener("pointerenter",X),J.addEventListener("pointerleave",Y)}#s(){return this.#O||this.#K||this.#z||this.#S}#n(){if(this.#$)this.#YJ(this.#$,()=>this.#P,()=>this.#i,()=>this.#s()||!!this.#$?.querySelector("fig-color-tip"));if(this.#Y)this.#YJ(this.#Y,()=>this.#U,()=>`Angle ${Math.round(this.#_)}°`,()=>this.#s());if(this.#B)this.#YJ(this.#B,()=>this.#q,()=>this.#c,()=>this.#s());if(this.#G){let J=this.#G.querySelector(".fig-canvas-control-radius-hit");this.#NJ(J||this.#G)}if(this.#A==="color"&&this.#$&&this.#P)new MutationObserver(()=>{if(this.#$?.querySelector("fig-color-tip"))this.#P?.removeAttribute("show"),this.#P?.hidePopup?.()}).observe(this.#$,{childList:!0,subtree:!0})}#ZJ(J,Q){let Z=this.#M;if(!Z?.popup)return;let $=Q-8;Z.popup.anchor={getBoundingClientRect:()=>({left:J,top:$,right:J,bottom:$,width:0,height:0,x:J,y:$})},Z.popup.queueReposition?.()}#NJ(J){if(!J)return;J.addEventListener("pointerenter",(Q)=>{let Z=this.#M;if(!Z)return;Z.setAttribute("text",this.#$J()),Z.setAttribute("show","true"),Z.showPopup?.(),this.#ZJ(Q.clientX,Q.clientY)}),J.addEventListener("pointermove",(Q)=>{if(this.#z)return;this.#ZJ(Q.clientX,Q.clientY)}),J.addEventListener("pointerleave",()=>{if(this.#z)return;let Q=this.#M;if(!Q)return;Q.removeAttribute("show")})}#KJ(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");Q.classList.add("fig-canvas-control-radius"),Q.setAttribute("overflow","visible");let Z=document.createElementNS("http://www.w3.org/2000/svg","circle");Z.classList.add("fig-canvas-control-radius-hit"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","circle");$.classList.add("fig-canvas-control-radius-halo"),Q.appendChild($);let j=document.createElementNS("http://www.w3.org/2000/svg","circle");if(Q.appendChild(j),this.#G=Q,this.#u){let _=document.createElement("fig-tooltip");_.setAttribute("action","manual"),_.setAttribute("theme","canvas"),_.setAttribute("pointer","false"),_.setAttribute("text",this.#$J()),_.appendChild(Q),this.appendChild(_),this.#M=_}else this.appendChild(Q);this.#fJ(Z)}#PJ(){let Q=document.createElementNS("http://www.w3.org/2000/svg","svg");if(Q.classList.add("fig-canvas-control-angle-svg"),Q.setAttribute("overflow","visible"),Q.style.position="absolute",Q.style.pointerEvents="none",this.#C){let j=document.createElementNS("http://www.w3.org/2000/svg","line");j.classList.add("fig-canvas-control-angle-line-hit"),j.setAttribute("stroke","transparent"),j.setAttribute("stroke-width","12"),j.setAttribute("stroke-linecap","round"),j.style.pointerEvents="stroke",Q.appendChild(j),this.#qJ(j)}let Z=document.createElementNS("http://www.w3.org/2000/svg","line");Z.classList.add("fig-canvas-control-angle-line-halo"),Q.appendChild(Z);let $=document.createElementNS("http://www.w3.org/2000/svg","line");$.classList.add("fig-canvas-control-angle-line"),Q.appendChild($),this.#k=Q,this.appendChild(Q)}#qJ(J){J.addEventListener("pointerdown",(Q)=>{if(U(this,"disabled"))return;Q.preventDefault(),Q.stopPropagation();let Z=this.#h;if(!Z)return;let{clientX:$,clientY:j}=Q,_=this.#Z,X=this.#Q,Y=this.#J,B=this.#X;this.#O=!0,this.#K=!0,document.body.classList.add("fig-lab-move-active"),J.style.pointerEvents="none";let G=(N)=>{let P=Z.getBoundingClientRect(),O=P.width>0?(N.clientX-$)/P.width*100:0,q=P.height>0?(N.clientY-j)/P.height*100:0,K=-Math.min(_,Y),z=100-Math.max(_,Y),T=-Math.min(X,B),F=100-Math.max(X,B),S=Math.max(K,Math.min(z,O)),W=Math.max(T,Math.min(F,q));this.#Z=_+S,this.#Q=X+W,this.#J=Y+S,this.#X=B+W,this.#m(),this.#a()},k=this.#VJ((N)=>{if(document.body.classList.remove("fig-lab-move-active"),J.style.pointerEvents="stroke",this.#O=!1,this.#K=!1,N)this.#t(),this.#v()});window.addEventListener("pointermove",G,{signal:k.signal}),window.addEventListener("pointerup",()=>k.finish(!0),{signal:k.signal}),window.addEventListener("pointercancel",()=>k.finish(!1),{signal:k.signal})})}#SJ(J,Q,Z){let $=document.createElement("fig-handle");if($.setAttribute("type","canvas"),$.setAttribute("drag","true"),$.setAttribute("drag-surface",Z),$.setAttribute("drag-axes","x,y"),$.setAttribute("size","small"),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),J)$.setAttribute("disabled","");if(this.#Y=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",`${Math.round(this.#_)}°`),j.appendChild($),this.appendChild(j),this.#U=j}else this.appendChild($)}#HJ(J,Q,Z){let $=document.createElement("fig-handle");if($.setAttribute("type","canvas"),$.setAttribute("drag","true"),$.setAttribute("drag-surface",Z),$.setAttribute("drag-axes","x,y"),$.setAttribute("drag-snapping",this.#W),$.setAttribute("hit-area","12 circle"),$.setAttribute("hit-area-mode","delegate"),$.setAttribute("value",`${this.#J}% ${this.#X}%`),J)$.setAttribute("disabled","");if(this.#B=$,Q){let j=document.createElement("fig-tooltip");j.setAttribute("action","manual"),j.setAttribute("theme","canvas"),j.setAttribute("pointer","false"),j.setAttribute("text",this.#c),j.appendChild($),this.appendChild(j),this.#q=j}else this.appendChild($)}#g(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.1212 16.9998L11.5607 17.4394C12.1465 18.0252 12.1464 18.975 11.5606 19.5607C10.9748 20.1465 10.0251 20.1465 9.4393 19.5606L6.4393 16.5604C5.85354 15.9746 5.85357 15.0249 6.43938 14.4391L9.43938 11.4393C10.0252 10.8535 10.9749 10.8536 11.5607 11.4394C12.1465 12.0252 12.1464 12.9749 11.5606 13.5607L11.1215 13.9998L20.8786 13.9999L20.4394 13.5607C19.8536 12.9749 19.8535 12.0252 20.4393 11.4394C21.0251 10.8536 21.9749 10.8536 22.5606 11.4394L25.5606 14.4393C25.842 14.7206 26 15.1021 26 15.4999C26 15.8978 25.842 16.2793 25.5607 16.5606L22.5607 19.5607C21.9749 20.1465 21.0251 20.1465 20.4393 19.5607C19.8536 18.9749 19.8535 18.0252 20.4393 17.4394L20.8788 16.9999L11.1212 16.9998Z' fill='white'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.8536 12.1465C11.0488 12.3417 11.0488 12.6583 10.8535 12.8536L8.70715 14.9998L23.2929 14.9999L21.1465 12.8536C20.9512 12.6583 20.9512 12.3417 21.1464 12.1465C21.3417 11.9512 21.6583 11.9512 21.8535 12.1465L24.8535 15.1464C24.9473 15.2402 25 15.3673 25 15.4999C25 15.6326 24.9473 15.7597 24.8536 15.8535L21.8536 18.8536C21.6583 19.0488 21.3417 19.0488 21.1465 18.8536C20.9512 18.6583 20.9512 18.3417 21.1464 18.1465L23.2929 15.9999L8.70705 15.9998L10.8536 18.1465C11.0488 18.3417 11.0488 18.6583 10.8535 18.8536C10.6583 19.0488 10.3417 19.0488 10.1464 18.8535L7.14643 15.8533C6.95118 15.658 6.95119 15.3415 7.14646 15.1462L10.1465 12.1464C10.3417 11.9512 10.6583 11.9512 10.8536 12.1465Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='3' y='9' width='26' height='15' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, nwse-resize`}#zJ(J){return`url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(${Math.round(J-45)} 16 16)'%3E%3Cg filter='url(%23f)'%3E%3Cpath d='M12.5607 22.4393L12.0216 21.9002C17.1558 21.2216 21.2216 17.1558 21.9002 12.0216L22.4393 12.5607C23.0251 13.1464 23.9749 13.1464 24.5607 12.5607C25.1464 11.9749 25.1464 11.0251 24.5607 10.4393L21.5607 7.43934C20.9749 6.85355 20.0251 6.85355 19.4393 7.43934L16.4393 10.4393C15.8536 11.0251 15.8536 11.9749 16.4393 12.5607C17.0251 13.1464 17.9749 13.1464 18.5607 12.5607L18.8056 12.3157C18.1013 15.5527 15.5527 18.1013 12.3157 18.8056L12.5607 18.5607C13.1464 17.9749 13.1464 17.0251 12.5607 16.4393C11.9749 15.8536 11.0251 15.8536 10.4393 16.4393L7.43934 19.4393C6.85356 20.0251 6.85356 20.9749 7.43934 21.5607L10.4393 24.5607C11.0251 25.1464 11.9749 25.1464 12.5607 24.5607C13.1464 23.9749 13.1464 23.0251 12.5607 22.4393Z' fill='white'/%3E%3C/g%3E%3Cpath d='M23.8536 11.8536C23.6583 12.0488 23.3417 12.0488 23.1464 11.8536L21 9.70711V10.5C21 16.299 16.299 21 10.5 21H9.70711L11.8536 23.1464C12.0488 23.3417 12.0488 23.6583 11.8536 23.8536C11.6583 24.0488 11.3417 24.0488 11.1464 23.8536L8.14645 20.8536C7.95119 20.6583 7.95119 20.3417 8.14645 20.1464L11.1464 17.1464C11.3417 16.9512 11.6583 16.9512 11.8536 17.1464C12.0488 17.3417 12.0488 17.6583 11.8536 17.8536L9.70711 20H10.5C15.7467 20 20 15.7467 20 10.5V9.70711L17.8536 11.8536C17.6583 12.0488 17.3417 12.0488 17.1464 11.8536C16.9512 11.6583 16.9512 11.3417 17.1464 11.1464L20.1464 8.14645C20.3417 7.95119 20.6583 7.95119 20.8536 8.14645L23.8536 11.1464C24.0488 11.3417 24.0488 11.6583 23.8536 11.8536Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='f' x='4' y='5' width='24' height='24' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='a'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='b'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3CfeBlend in2='a' result='c'/%3E%3CfeBlend in='SourceGraphic' in2='c'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 16 16, pointer`}#GJ(J,Q){if(!J)return;J.style.setProperty("cursor",Q,"important")}#UJ(J,Q){if(!J)return;let Z=J.querySelector(".fig-handle-hit-area");if(!Z)return;if(Z.setAttribute("data-cursor","rotate"),this.#GJ(Z,this.#zJ(Q)),this.#F===J)this.#jJ()}#CJ(){if(!this.#Y||!this.#y)return;this.#UJ(this.#Y,this.#_)}#TJ(){return Math.atan2(this.#X-this.#Q,this.#J-this.#Z)*180/Math.PI}#FJ(){if(!this.#C)return;let J=this.#TJ();this.#$?.style.removeProperty("cursor"),this.#B?.style.removeProperty("cursor"),this.#UJ(this.#$,J+180),this.#UJ(this.#B,J)}#kJ(J,Q,Z,$){J.style.setProperty("--fig-handle-position-translate","-50% -50%"),J.style.left=`${Q/100*$.width}px`,J.style.top=`${Z/100*$.height}px`}#m(){let J=this.#h;if(!J||!this.#$)return;let Q=J.getBoundingClientRect();if(this.#kJ(this.#$,this.#Z,this.#Q,Q),this.#G){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#XJ(Q.width),_=this.#G,X=Math.max(j*2,1);_.style.position="absolute",_.style.width=`${X}px`,_.style.height=`${X}px`,_.style.left=`${Z-j}px`,_.style.top=`${$-j}px`,_.setAttribute("viewBox",`0 0 ${X} ${X}`);let Y=_.querySelectorAll("circle");for(let B of Y)B.setAttribute("cx",String(j)),B.setAttribute("cy",String(j)),B.setAttribute("r",String(Math.max(j-1,0)))}if(this.#k&&this.#I){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j,_;if(this.#C)j=this.#J/100*Q.width,_=this.#X/100*Q.height;else{let B=this.#XJ(Q.width),G=this.#_*Math.PI/180;j=Z+B*Math.cos(G),_=$+B*Math.sin(G)}let X=this.#k;X.style.width=`${Q.width}px`,X.style.height=`${Q.height}px`,X.style.left="0",X.style.top="0",X.setAttribute("viewBox",`0 0 ${Q.width} ${Q.height}`);let Y=X.querySelectorAll(".fig-canvas-control-angle-line, .fig-canvas-control-angle-line-halo, .fig-canvas-control-angle-line-hit");for(let B of Y)B.setAttribute("x1",String(Z)),B.setAttribute("y1",String($)),B.setAttribute("x2",String(j)),B.setAttribute("y2",String(_))}if(this.#Y&&this.#y){let Z=this.#Z/100*Q.width,$=this.#Q/100*Q.height,j=this.#XJ(Q.width),_=this.#_*Math.PI/180,X=Z+j*Math.cos(_),Y=$+j*Math.sin(_),B=Q.width>0?X/Q.width*100:0,G=Q.height>0?Y/Q.height*100:0;this.#kJ(this.#Y,B,G,Q)}if(this.#B&&this.#C)this.#kJ(this.#B,this.#J,this.#X,Q);this.#CJ(),this.#FJ()}#a(J=this.value){this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:J}))}#v(J=this.value){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:J}))}#WJ(J){return{...this.value,...$J(J.color,J.alpha,J.opacity)}}#t(){this.setAttribute("value",JSON.stringify(this.value))}#RJ(){if(!this.#$)return;if(this.#$.addEventListener("input",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",this.#$.getAttribute("color")||J.detail.color),this.#a(this.#WJ(J.detail));return}this.#O=!0;let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#P)this.#P.removeAttribute("show"),this.#P.hidePopup?.();this.#m(),this.#a()}),this.#$.addEventListener("change",(J)=>{if(J.stopPropagation(),J.detail?.color){this.setAttribute("color",this.#$.getAttribute("color")||J.detail.color),this.#v(this.#WJ(J.detail));return}let Q=J.detail?.px??this.#Z/100,Z=J.detail?.py??this.#Q/100;if(this.#Z=Math.round(Math.max(0,Math.min(100,Q*100))),this.#Q=Math.round(Math.max(0,Math.min(100,Z*100))),this.#P)this.#P.removeAttribute("show");this.#m(),this.#t(),this.#v(),requestAnimationFrame(()=>{this.#O=!1})}),this.#Y)this.#Y.addEventListener("input",(J)=>{J.stopPropagation();let Q=this.#h;if(!Q)return;this.#S=!0,this.classList.add("fig-canvas-control-ring-active");let Z=Q.getBoundingClientRect(),$=this.#Z/100*Z.width,j=this.#Q/100*Z.height,_=J.detail?.x??0,X=J.detail?.y??0,Y=this.#Y.offsetWidth/2,B=this.#Y.offsetHeight/2,G=_+Y-$,k=X+B-j,N=Math.atan2(k,G)*180/Math.PI;if(this.#x(J.detail?.shiftKey))N=Math.round(N/15)*15;this.#_=N;let P=Math.sqrt(G*G+k*k);if(this.#x(J.detail?.shiftKey)){let O=this.#N?5:10;if(this.#N){let q=P/Z.width*100;q=Math.round(q/O)*O,P=q/100*Z.width}else P=Math.round(P/O)*O}if(this.#N)this.#j=Math.max(0,P/Z.width*100);else this.#j=Math.max(0,P);if(this.#U)this.#U.setAttribute("text",`Angle ${Math.round(this.#_)}°`),this.#U.setAttribute("show","true"),this.#U.showPopup?.();this.#m(),this.#a()}),this.#Y.addEventListener("change",(J)=>{if(J.stopPropagation(),this.classList.remove("fig-canvas-control-ring-active"),this.#U)this.#U.removeAttribute("show");this.#m(),this.#t(),this.#v(),requestAnimationFrame(()=>{this.#S=!1})}),this.#Y.addEventListener("hitareadown",(J)=>{J.stopPropagation();let Q=J.detail?.originalEvent;if(!Q)return;Q.preventDefault();let Z=this.#h;if(!Z)return;if(this.#S=!0,this.classList.add("fig-canvas-control-ring-active"),this.#Y.setAttribute("selected",""),this.#U)this.#U.setAttribute("show","true"),this.#U.showPopup?.();let $=(_)=>{let X=Z.getBoundingClientRect(),Y=this.#Z/100*X.width,B=this.#Q/100*X.height,G=_.clientX-X.left-Y,k=_.clientY-X.top-B,N=Math.atan2(k,G)*180/Math.PI;if(this.#x(_.shiftKey))N=Math.round(N/15)*15;if(this.#_=N,this.#U)this.#U.setAttribute("text",`Angle ${Math.round(N)}°`);this.#m(),this.#a()},j=this.#VJ((_)=>{if(this.#S=!1,this.classList.remove("fig-canvas-control-ring-active"),this.#Y.removeAttribute("selected"),this.#U)this.#U.removeAttribute("show");if(_)this.#t(),this.#v()});window.addEventListener("pointermove",$,{signal:j.signal}),window.addEventListener("pointerup",()=>j.finish(!0),{signal:j.signal}),window.addEventListener("pointercancel",()=>j.finish(!1),{signal:j.signal})});if(this.#B)this.#B.addEventListener("input",(J)=>{J.stopPropagation(),this.#K=!0;let Q=J.detail?.px??this.#J/100,Z=J.detail?.py??this.#X/100;if(this.#J=Math.round(Math.max(0,Math.min(100,Q*100))),this.#X=Math.round(Math.max(0,Math.min(100,Z*100))),this.#q)this.#q.removeAttribute("show"),this.#q.hidePopup?.();this.#m(),this.#a()}),this.#B.addEventListener("change",(J)=>{if(J.stopPropagation(),this.#q)this.#q.removeAttribute("show");this.#m(),this.#t(),this.#v(),requestAnimationFrame(()=>{this.#K=!1})}),this.#w(this.#$,!0),this.#w(this.#B,!1)}#w(J,Q){if(!J)return;J.addEventListener("hitareadown",(Z)=>{Z.stopPropagation();let $=Z.detail?.originalEvent;if(!$)return;$.preventDefault();let j=this.#h;if(!j)return;this.#O=!0;let _=j.getBoundingClientRect(),X=Q?this.#J:this.#Z,Y=Q?this.#X:this.#Q,B=Q?this.#Z:this.#J,G=Q?this.#Q:this.#X,k=X/100*_.width,N=Y/100*_.height,P=B/100*_.width,O=G/100*_.height,q=Math.sqrt((P-k)**2+(O-N)**2),K=Q?this.#P:this.#q;if(K)K.removeAttribute("show"),K.hidePopup?.();let z=(F)=>{let S=j.getBoundingClientRect(),W=X/100*S.width,D=Y/100*S.height,R=F.clientX-S.left-W,E=F.clientY-S.top-D,V=Math.atan2(E,R);if(this.#x(F.shiftKey))V=Math.round(V*180/Math.PI/15)*15*Math.PI/180;let QJ=W+q*Math.cos(V),ZJ=D+q*Math.sin(V),g=Math.max(0,Math.min(100,QJ/S.width*100)),m=Math.max(0,Math.min(100,ZJ/S.height*100));if(Q)this.#Z=g,this.#Q=m;else this.#J=g,this.#X=m;this.#m(),this.#a()},T=this.#VJ((F)=>{if(this.#O=!1,K)K.removeAttribute("show");if(F)this.#t(),this.#v()});window.addEventListener("pointermove",z,{signal:T.signal}),window.addEventListener("pointerup",()=>T.finish(!0),{signal:T.signal}),window.addEventListener("pointercancel",()=>T.finish(!1),{signal:T.signal})})}#fJ(J){if(!J)return;J.addEventListener("pointermove",(Z)=>{if(this.#z)return;let $=this.#h;if(!$)return;let j=$.getBoundingClientRect(),_=this.#Z/100*j.width,X=this.#Q/100*j.height,Y=Math.atan2(Z.clientY-j.top-X,Z.clientX-j.left-_)*180/Math.PI;this.#GJ(J,this.#g(Y))});let Q=(Z)=>{if(U(this,"disabled"))return;Z.preventDefault(),Z.stopPropagation(),this.#z=!0,this.classList.add("fig-canvas-control-ring-active");let $=this.#h;if(!$)return;if(this.#M)this.#M.setAttribute("show","true"),this.#M.showPopup?.(),this.#ZJ(Z.clientX,Z.clientY);if(this.#U)this.#U.removeAttribute("show"),this.#U.hidePopup?.();let j=this.#Y?.style.pointerEvents,_=this.#Y?.querySelector(".fig-handle-hit-area"),X=_?.style.pointerEvents;if(this.#Y)this.#Y.style.pointerEvents="none";if(_)_.style.pointerEvents="none";let Y=document.body.style.cursor;J.style.pointerEvents="none";let B=$.getBoundingClientRect(),G=this.#Z/100*B.width,k=this.#Q/100*B.height,N=Math.atan2(Z.clientY-B.top-k,Z.clientX-B.left-G)*180/Math.PI,P=Math.round(N);document.body.style.cursor=this.#g(P);let O=(K)=>{let z=$.getBoundingClientRect(),T=this.#Z/100*z.width,F=this.#Q/100*z.height,S=K.clientX-z.left-T,W=K.clientY-z.top-F,D=Math.round(Math.atan2(W,S)*180/Math.PI);if(D!==P)P=D,document.body.style.cursor=this.#g(D);let R=Math.sqrt(S*S+W*W);if(this.#x(K.shiftKey)){let E=this.#N?5:10;if(this.#N){let V=R/z.width*100;V=Math.round(V/E)*E,R=V/100*z.width}else R=Math.round(R/E)*E}if(this.#N)this.#j=Math.max(0,R/z.width*100);else this.#j=Math.max(0,R);if(this.#M)this.#M.setAttribute("text",this.#$J()),this.#ZJ(K.clientX,K.clientY);this.#m(),this.#a()},q=this.#VJ((K)=>{if(this.#z=!1,this.classList.remove("fig-canvas-control-ring-active"),J.style.pointerEvents="",this.#Y)this.#Y.style.pointerEvents=j??"";if(_)_.style.pointerEvents=X??"";if(document.body.style.cursor=Y,this.#M)this.#M.removeAttribute("show");if(K)this.#t(),this.#v()});window.addEventListener("pointermove",O,{signal:q.signal}),window.addEventListener("pointerup",()=>q.finish(!0),{signal:q.signal}),window.addEventListener("pointercancel",()=>q.finish(!1),{signal:q.signal})};J.addEventListener("pointerdown",Q),this._radiusDragCleanup=()=>J.removeEventListener("pointerdown",Q)}#DJ(){if(this._radiusDragCleanup)this._radiusDragCleanup(),this._radiusDragCleanup=null}#VJ(J){this.#LJ();let Q=new AbortController,Z=!1,$=(j=!1)=>{if(Z)return;if(Z=!0,Q.abort(),this.#H===Q)this.#H=null,this.#b=null;J(j)};return this.#H=Q,this.#b=$,{signal:Q.signal,finish:$}}#LJ(){this.#b?.(!1),this.#H?.abort(),this.#H=null,this.#b=null}}L("fig-canvas-control",e);class M extends HTMLElement{#Z=[M.#F()];#Q=0;#J=2;#X=240;#j=120;#N={min:-1,max:1};#_=null;#$=null;#B=null;#Y=null;#G=0;#k=null;#P=null;#q=null;#M=null;#U=[];#O=[];#K=[];#z=[];#S=new Set;#L=null;#f=null;#T=null;#R=null;#V=null;static TYPES=[{name:"Wave",value:"sine"},{name:"Square",value:"square"},{name:"Sawtooth",value:"sawtooth"},{name:"Triangle",value:"triangle"}];static#F(J="sine"){return{type:J,frequency:1,amplitude:1,phase:0,offset:0}}static get observedAttributes(){return["value","precision","aspect-ratio","edit","disabled"]}connectedCallback(){if(this.#V===null)this.#V=this.getAttribute("default")??this.getAttribute("value")??JSON.stringify({waves:[M.#F()]});this.#J=this.#p("precision",2),this.#A(this.getAttribute("value")),this.#b(),this.#h(),this.#OJ(),C(this)}disconnectedCallback(){if(this.#kJ(),this.#NJ(),this.#L)this.#L.disconnect(),this.#L=null;f(this)}attributeChangedCallback(J,Q,Z){if(Q===Z)return;if(J==="value"){if(this.#A(Z),this.isConnected)this.#h();return}if(J==="precision"){if(this.#J=this.#p("precision",2),this.isConnected)this.#v();return}if(J==="aspect-ratio"){if(this.#b(),this.#$)this.#n();return}if(J==="edit"||J==="disabled"){if(this.isConnected)this.#h()}}get value(){return JSON.stringify(this.data)}set value(J){this.setAttribute("value",typeof J==="object"&&J!==null?JSON.stringify(J):J)}get defaultValue(){return this.getAttribute("default")??this.#V??""}get isDefault(){let J=this.#d(this.defaultValue);if(!J)return!1;return JSON.stringify(this.data.waves)===JSON.stringify(J.map((Q)=>this.#C(Q)))}resetToDefault(){let J=this.defaultValue;if(!J)return;this.value=J,this.#w("input"),this.#w("change")}get data(){return{waves:this.#Z.map((J)=>this.#C(J))}}get preset(){let J=this.#I;return M.TYPES.find((Q)=>Q.value===J.type)?.name}#p(J,Q){let Z=Number.parseInt(this.getAttribute(J)||"",10);return Number.isFinite(Z)?Math.max(0,Math.min(100,Z)):Q}#D(J,Q=!1){let Z=this.getAttribute(J);if(Z===null)return Q;let $=Z.trim().toLowerCase();if($===""||$==="true")return!0;if($==="false")return!1;return!0}#E(){return this.getAttribute("edit")!=="false"}#H(){return this.#D("disabled",!1)}#b(){let J=this.getAttribute("aspect-ratio")||"2 / 1";this.style.setProperty("--aspect-ratio",J)}#A(J){let Q=this.#d(J);if(!Q)return!1;if(this.#Z=Q,!this.#Z.length)this.#Z=[M.#F()];return this.#Q=Math.min(this.#Q,this.#Z.length-1),!0}#d(J){if(!J)return null;let Q=null;if(typeof J==="string")try{Q=JSON.parse(J)}catch{return null}else if(typeof J==="object")Q=J;if(!Q)return null;return(Array.isArray(Q)?Q:Array.isArray(Q.waves)?Q.waves:[Q]).map(($)=>this.#y($))}#y(J={}){return{type:this.#u(J.type),frequency:this.#W(J.frequency,1,0.1,16),amplitude:this.#W(J.amplitude,1,-4,4),phase:this.#W(J.phase,0,-360,360),offset:this.#W(J.offset,0,-4,4)}}#C(J){return{type:J.type,frequency:this.#x(J.frequency),amplitude:this.#x(J.amplitude),phase:this.#x(J.phase),offset:this.#x(J.offset)}}get#I(){if(!this.#Z[this.#Q])this.#Q=0;return this.#Z[this.#Q]||M.#F()}#u(J){let Q=String(J||"").toLowerCase();return M.TYPES.some((Z)=>Z.value===Q)?Q:"sine"}#W(J,Q,Z,$){let j=Number.parseFloat(J);if(!Number.isFinite(j))return Q;return Math.min($,Math.max(Z,j))}#x(J){let Q=10**this.#J;return Math.round(J*Q)/Q}static#i(J){return String(J).replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}static#c(J){return M.TYPES.find((Q)=>Q.value===J)?.name||"Wave"}static waveIcon(J,Q=24){let j=Q-10,_="";for(let X=0;X<=32;X++){let Y=X/32,B=M.#o(J,Y),G=5+Y*j,k=5+(1-(B+1)/2)*j;_+=`${X===0?"M":"L"}${G.toFixed(1)},${k.toFixed(1)}`}return`<svg width="${Q}" height="${Q}" viewBox="0 0 ${Q} ${Q}" fill="none"><path d="${_}" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>`}static#o(J,Q,Z=0){let $=Q+Z/360,j=$-Math.floor($),_=$*Math.PI*2;switch(J){case"square":return Math.sin(_)>=0?1:-1;case"sawtooth":return j*2-1;case"triangle":return 1-Math.abs(j*4-2);default:return Math.sin(_)}}#h(){this.#kJ(),this.#NJ(),this.innerHTML=this.#_J(),this.#BJ(),this.#jJ(),this.#n(),this.#HJ(),this.#ZJ(),C(this)}#_J(){let J=this.#E()&&!this.#H(),Q=J?"":" disabled";return`<div class="propskit-oscillator-svg-container">
2
2
  <svg viewBox="0 0 ${this.#X} ${this.#j}" class="propskit-oscillator-svg">
3
3
  <rect class="propskit-oscillator-bounds" x="0" y="0" width="${this.#X}" height="${this.#j}"></rect>
4
4
  <line class="propskit-oscillator-baseline"></line>
package/fig-lab.css CHANGED
@@ -234,7 +234,7 @@ fig-content:has(> propskit-group[name]:last-child) {
234
234
  padding-bottom: 0;
235
235
  }
236
236
 
237
- /* Default/large size: more left field padding; nudge trailing controls in from
237
+ /* Large size: more left field padding; nudge trailing controls in from
238
238
  the right. propskit-select applies left inset on label + trigger instead. */
239
239
  :is(
240
240
  propskit-switch,
@@ -243,27 +243,27 @@ fig-content:has(> propskit-group[name]:last-child) {
243
243
  propskit-text,
244
244
  propskit-number,
245
245
  propskit-slider
246
- ):is(:not([size]), [size="large"]) {
246
+ )[size="large"] {
247
247
  fig-field:not([direction="vertical"]) {
248
248
  padding-left: var(--spacer-2-5);
249
249
  }
250
250
  }
251
251
 
252
252
  /* Flex-positioned numbers — margin works. Absolute numbers use right: calc(...) below. */
253
- :is(propskit-color, propskit-number):is(:not([size]), [size="large"]) {
253
+ :is(propskit-color, propskit-number)[size="large"] {
254
254
  fig-field fig-input-number {
255
255
  margin-right: var(--spacer-1);
256
256
  }
257
257
  }
258
258
 
259
- propskit-text:is(:not([size]), [size="large"]) {
259
+ propskit-text[size="large"] {
260
260
  fig-field > fig-input-text {
261
261
  margin-right: var(--spacer-1);
262
262
  }
263
263
  }
264
264
 
265
265
  propskit-switch {
266
- --propskit-switch-height: 2rem;
266
+ --propskit-switch-height: 1.5rem;
267
267
  --propskit-switch-vertical-padding: var(--spacer-1);
268
268
  --propskit-switch-horizontal-padding: var(--spacer-3);
269
269
 
@@ -275,8 +275,9 @@ propskit-switch {
275
275
  padding: var(--propskit-switch-vertical-padding)
276
276
  var(--propskit-switch-horizontal-padding);
277
277
 
278
- &:not([size]),
279
278
  &[size="large"] {
279
+ --propskit-switch-height: 2rem;
280
+
280
281
  fig-field:not([direction="vertical"]) {
281
282
  padding-right: var(--spacer-1);
282
283
  }
@@ -339,7 +340,7 @@ propskit-switch {
339
340
  }
340
341
 
341
342
  propskit-color {
342
- --propskit-color-height: 2rem;
343
+ --propskit-color-height: 1.5rem;
343
344
  --propskit-color-vertical-padding: var(--spacer-1);
344
345
  --propskit-color-horizontal-padding: var(--spacer-3);
345
346
  --figma-focus-outline-offset: 1px;
@@ -352,6 +353,10 @@ propskit-color {
352
353
  padding: var(--propskit-color-vertical-padding)
353
354
  var(--propskit-color-horizontal-padding);
354
355
 
356
+ &[size="large"] {
357
+ --propskit-color-height: 2rem;
358
+ }
359
+
355
360
  &[disabled]:not([disabled="false"]) {
356
361
  pointer-events: none;
357
362
 
@@ -458,7 +463,7 @@ propskit-color {
458
463
  }
459
464
 
460
465
  propskit-gradient {
461
- --propskit-gradient-height: 2rem;
466
+ --propskit-gradient-height: 1.5rem;
462
467
  --propskit-gradient-vertical-padding: var(--spacer-1);
463
468
  --propskit-gradient-horizontal-padding: var(--spacer-3);
464
469
  --figma-focus-outline-offset: 1px;
@@ -471,6 +476,14 @@ propskit-gradient {
471
476
  padding: var(--propskit-gradient-vertical-padding)
472
477
  var(--propskit-gradient-horizontal-padding);
473
478
 
479
+ &[size="large"] {
480
+ --propskit-gradient-height: 2rem;
481
+
482
+ fig-field:not([direction="vertical"]) {
483
+ padding-right: var(--spacer-1);
484
+ }
485
+ }
486
+
474
487
  &[disabled]:not([disabled="false"]) {
475
488
  pointer-events: none;
476
489
 
@@ -538,7 +551,7 @@ propskit-gradient {
538
551
  }
539
552
 
540
553
  propskit-select {
541
- --propskit-select-height: 2rem;
554
+ --propskit-select-height: 1.5rem;
542
555
  --propskit-select-vertical-padding: var(--spacer-1);
543
556
  --propskit-select-horizontal-padding: var(--spacer-3);
544
557
  --figma-focus-outline-offset: 1px;
@@ -551,8 +564,9 @@ propskit-select {
551
564
  padding: var(--propskit-select-vertical-padding)
552
565
  var(--propskit-select-horizontal-padding);
553
566
 
554
- &:not([size]),
555
567
  &[size="large"] {
568
+ --propskit-select-height: 2rem;
569
+
556
570
  fig-field:not([direction="vertical"]) {
557
571
  padding-left: 0;
558
572
 
@@ -648,7 +662,7 @@ propskit-select {
648
662
  }
649
663
 
650
664
  propskit-text {
651
- --propskit-text-height: 2rem;
665
+ --propskit-text-height: 1.5rem;
652
666
  --propskit-text-vertical-padding: var(--spacer-1);
653
667
  --propskit-text-horizontal-padding: var(--spacer-3);
654
668
  --figma-focus-outline-offset: 1px;
@@ -661,6 +675,10 @@ propskit-text {
661
675
  padding: var(--propskit-text-vertical-padding)
662
676
  var(--propskit-text-horizontal-padding);
663
677
 
678
+ &[size="large"] {
679
+ --propskit-text-height: 2rem;
680
+ }
681
+
664
682
  &[disabled]:not([disabled="false"]) {
665
683
  pointer-events: none;
666
684
 
@@ -753,7 +771,7 @@ propskit-text {
753
771
  }
754
772
 
755
773
  propskit-number {
756
- --propskit-number-height: 2rem;
774
+ --propskit-number-height: 1.5rem;
757
775
  --propskit-number-vertical-padding: var(--spacer-1);
758
776
  --propskit-number-horizontal-padding: var(--spacer-3);
759
777
  --figma-focus-outline-offset: 1px;
@@ -766,8 +784,9 @@ propskit-number {
766
784
  padding: var(--propskit-number-vertical-padding)
767
785
  var(--propskit-number-horizontal-padding);
768
786
 
769
- &:not([size]),
770
787
  &[size="large"] {
788
+ --propskit-number-height: 2rem;
789
+
771
790
  fig-field:not([direction="vertical"]) > label {
772
791
  inset: 0 auto 0 var(--spacer-2-5);
773
792
  }
@@ -867,7 +886,7 @@ propskit-slider {
867
886
  --propskit-slider-elastic-scale: 1;
868
887
  --propskit-slider-elastic-origin: left center;
869
888
  --propskit-slider-elastic-transition: 0.18s cubic-bezier(0.2, 1.45, 0.35, 1);
870
- --propskit-slider-height: 2rem;
889
+ --propskit-slider-height: 1.5rem;
871
890
  --propskit-slider-vertical-padding: var(--spacer-1);
872
891
  --propskit-slider-horizontal-padding: var(--spacer-3);
873
892
  --figma-focus-outline-offset: 1px;
@@ -892,8 +911,8 @@ propskit-slider {
892
911
  padding-left: var(--propskit-slider-horizontal-padding);
893
912
  padding-right: var(--propskit-slider-horizontal-padding);
894
913
 
895
- &:not([size]),
896
914
  &[size="large"] {
915
+ --propskit-slider-height: 2rem;
897
916
  --propskit-slider-fig-slider-thumb-height: calc(
898
917
  var(--propskit-slider-fig-slider-height) - var(--spacer-3)
899
918
  );
package/fig-lab.js CHANGED
@@ -900,9 +900,6 @@ class PropskitGradient extends HTMLElement {
900
900
  }
901
901
 
902
902
  if (!this.hasAttribute("edit")) this.#input.setAttribute("edit", "true");
903
- const size = this.getAttribute("size");
904
- if (!size || size === "large") this.#input.setAttribute("size", "large");
905
- else this.#input.removeAttribute("size");
906
903
  this.#managedInputAttrs = nextManaged;
907
904
  }
908
905
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rogieking/figui3",
3
- "version": "6.29.0",
3
+ "version": "6.29.1",
4
4
  "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
5
5
  "author": "Rogie King",
6
6
  "license": "MIT",