@fxhash/params 0.0.9 → 0.0.10

package/dist/Controls.cjs

@@ -1,34 +1,34 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkYXDLGCFJcjs = require('./chunk-YXDLGCFJ.cjs');
-require('./chunk-TKKYM77A.cjs');
-require('./chunk-K4EW6YY3.cjs');
-require('./chunk-JAU4ONF2.cjs');
+var _chunk3OF5LR4Ycjs = require('./chunk-3OF5LR4Y.cjs');
+require('./chunk-LTIGECX6.cjs');
+require('./chunk-WHVPVEYH.cjs');
+require('./chunk-K22KNCGR.cjs');
 
 
-var _chunkX4O42D2Pcjs = require('./chunk-X4O42D2P.cjs');
+var _chunkZ5Z6AKH7cjs = require('./chunk-Z5Z6AKH7.cjs');
 
 
 var _chunkEACKNC6Ccjs = require('./chunk-EACKNC6C.cjs');
-require('./chunk-C6GTVBY6.cjs');
-require('./chunk-D4RVVQC7.cjs');
-require('./chunk-VED7SCYX.cjs');
-require('./chunk-KZMSUHQX.cjs');
-require('./chunk-HJBHIE5T.cjs');
-require('./chunk-QM6EKPI6.cjs');
+require('./chunk-AMJCUB2I.cjs');
+require('./chunk-2XWOWIXK.cjs');
+require('./chunk-3QFEC7SK.cjs');
+require('./chunk-YLZI7BR5.cjs');
+require('./chunk-M7HJ2CKM.cjs');
+require('./chunk-TQGOPELV.cjs');
 
 
 
-var _chunkQDLMFMLLcjs = require('./chunk-QDLMFMLL.cjs');
-require('./chunk-OFUKQ2TB.cjs');
+var _chunkLVN3UGUHcjs = require('./chunk-LVN3UGUH.cjs');
+require('./chunk-CVLSVTCX.cjs');
 
 // src/Controls.tsx
 var _react = require('react');
 
 // src/Controls.module.scss
 var Controls_module_default = {
-  "controls": "_controls_25wa3_1",
-  "blade": "_blade_25wa3_8"
+  "controls": "_controls_10c1n_1",
+  "blade": "_blade_10c1n_8"
 };
 
 // src/Controls.tsx
@@ -42,7 +42,7 @@ function ControllerBlade(props) {
   const isValid = _react.useMemo.call(void 0, () => parsed && parsed.success, [parsed]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: Controls_module_default.blade, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkYXDLGCFJcjs.ParameterController,
+      _chunk3OF5LR4Ycjs.ParameterController,
       {
         parameter,
         value: parameter.value,
@@ -50,7 +50,7 @@ function ControllerBlade(props) {
       }
     ),
     onClickLockButton && isValid && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkX4O42D2Pcjs.LockButton,
+      _chunkZ5Z6AKH7cjs.LockButton,
       {
         className: Controls_module_default.lockButton,
         title: `toggle lock ${parameter.id} param`,
@@ -67,7 +67,7 @@ var Controls = ({
   lockedParamIds,
   onChangeData
 }) => {
-  const consolidatedParams = _chunkQDLMFMLLcjs.consolidateParams.call(void 0, params, data);
+  const consolidatedParams = _chunkLVN3UGUHcjs.consolidateParams.call(void 0, params, data);
   const p = _react.createRef.call(void 0, );
   _react.useEffect.call(void 0, () => {
     const ps = {};
@@ -75,7 +75,7 @@ var Controls = ({
       consolidatedParams.forEach((p2) => {
         ps[p2.id] = p2.value;
       });
-      if (_chunkQDLMFMLLcjs.stringifyParamsData.call(void 0, data) !== _chunkQDLMFMLLcjs.stringifyParamsData.call(void 0, ps))
+      if (_chunkLVN3UGUHcjs.stringifyParamsData.call(void 0, data) !== _chunkLVN3UGUHcjs.stringifyParamsData.call(void 0, ps))
         onChangeData(ps);
     }
   }, [params]);

package/dist/Controls.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Controls.tsx","../src/Controls.module.scss"],"names":["p"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,WAAW,WAAW,eAAyB;;;ACAZ,IAAO,0BAAQ;AAAA,EACzD,YAAY;AAAA,EACZ,SAAS;AACX;;;ADqBI,SACE,KADF;AARJ,SAAS,gBAAgB,OAA6B;AACpD,QAAM,EAAE,WAAW,mBAAmB,gBAAgB,cAAc,IAAI;AACxE,QAAM,SAAS;AAAA,IACb,MAAM,4BAA4B,SAAS;AAAA,IAC3C,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,UAAU,QAAQ,MAAM,UAAU,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,SACE,qBAAC,SAAI,WAAW,wBAAQ,OACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,UAAU;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,IACC,qBAAqB,WACpB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,wBAAQ;AAAA,QACnB,OAAO,eAAe,UAAU;AAAA,QAChC,UAAU,gBAAgB,SAAS,UAAU,EAAE;AAAA,QAC/C,SAAS,CAAC,MAAM,kBAAkB,UAAU,EAAE;AAAA;AAAA,IAChD;AAAA,KAEJ;AAEJ;AAkBO,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,qBAAqB,kBAAkB,QAAQ,IAAI;AAEzD,QAAM,IAAqC,UAAU;AAErD,YAAU,MAAM;AACd,UAAM,KAAU,CAAC;AACjB,QAAI,oBAAoB,SAAS,GAAG;AAClC,yBAAmB,QAAQ,CAACA,OAAW;AACrC,WAAGA,GAAE,EAAE,IAAIA,GAAE;AAAA,MACf,CAAC;AACD,UAAI,oBAAoB,IAAI,MAAM,oBAAoB,EAAE;AACtD,qBAAa,EAAE;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,oBAAoB,CAAC,IAAY,UAAe;AACpD,UAAM,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AACvC,iBAAa,SAAS,EAAE,IAAI,MAAM,CAAC;AAAA,EACrC;AAEA,SACE,oBAAC,SAAI,WAAW,wBAAQ,UAAU,KAAK,GACpC,8BAAoB,IAAI,CAACA,OAAW;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAWA;AAAA,QACX,eAAe;AAAA,QACf;AAAA,QACA;AAAA;AAAA,MAJKA,GAAE;AAAA,IAKT;AAAA,EAEJ,CAAC,GACH;AAEJ","sourcesContent":["import { createRef, useEffect, useMemo, useState } from \"react\"\nimport { consolidateParams } from \"utils\"\nimport { ParameterController } from \"./Controller/Param\"\nimport { LockButton } from \"./LockButton/LockButton\"\nimport classes from \"./Controls.module.scss\"\nimport { validateParameterDefinition } from \"./validation\"\nimport { stringifyParamsData } from \"./utils\"\nimport { FxParamType, FxParamTypeMap } from \"./types.js\"\n\ninterface ControllerBladeProps {\n  parameter: any\n  onClickLockButton?: (id: string) => void\n  lockedParamIds?: string[]\n  onChangeParam: (id: string, value: any) => void\n}\n\nfunction ControllerBlade(props: ControllerBladeProps) {\n  const { parameter, onClickLockButton, lockedParamIds, onChangeParam } = props\n  const parsed = useMemo(\n    () => validateParameterDefinition(parameter),\n    [parameter]\n  )\n  const isValid = useMemo(() => parsed && parsed.success, [parsed])\n  return (\n    <div className={classes.blade}>\n      <ParameterController\n        parameter={parameter}\n        value={parameter.value}\n        onChange={onChangeParam}\n      />\n      {onClickLockButton && isValid && (\n        <LockButton\n          className={classes.lockButton}\n          title={`toggle lock ${parameter.id} param`}\n          isLocked={lockedParamIds?.includes(parameter.id)}\n          onClick={(e) => onClickLockButton(parameter.id)}\n        />\n      )}\n    </div>\n  )\n}\n\nexport type ControlsOnChangeDataHandler = (\n  newData: Record<string, any>,\n  changedParam?: {\n    id: string\n    value: FxParamTypeMap[FxParamType]\n  }\n) => void\n\ninterface ControlsProps {\n  params: any\n  onClickLockButton?: (id: string) => void\n  lockedParamIds?: string[]\n  onChangeData: ControlsOnChangeDataHandler\n  data: Record<string, any>\n}\n\nexport const Controls = ({\n  params,\n  data,\n  onClickLockButton,\n  lockedParamIds,\n  onChangeData,\n}: ControlsProps) => {\n  const consolidatedParams = consolidateParams(params, data)\n\n  const p: React.RefObject<HTMLDivElement> = createRef()\n\n  useEffect(() => {\n    const ps: any = {}\n    if (consolidatedParams?.length > 0) {\n      consolidatedParams.forEach((p: any) => {\n        ps[p.id] = p.value\n      })\n      if (stringifyParamsData(data) !== stringifyParamsData(ps))\n        onChangeData(ps)\n    }\n  }, [params])\n\n  const handleChangeParam = (id: string, value: any) => {\n    const newData = { ...data, [id]: value }\n    onChangeData(newData, { id, value })\n  }\n\n  return (\n    <div className={classes.controls} ref={p}>\n      {consolidatedParams?.map((p: any) => {\n        return (\n          <ControllerBlade\n            key={p.id}\n            parameter={p}\n            onChangeParam={handleChangeParam}\n            lockedParamIds={lockedParamIds}\n            onClickLockButton={onClickLockButton}\n          />\n        )\n      })}\n    </div>\n  )\n}\n","import 'css-chunk:src/Controls.module.scss';export default {\n  \"controls\": \"_controls_25wa3_1\",\n  \"blade\": \"_blade_25wa3_8\"\n};"]}
+{"version":3,"sources":["../src/Controls.tsx","../src/Controls.module.scss"],"names":["p"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,WAAW,WAAW,eAAyB;;;ACAZ,IAAO,0BAAQ;AAAA,EACzD,YAAY;AAAA,EACZ,SAAS;AACX;;;ADqBI,SACE,KADF;AARJ,SAAS,gBAAgB,OAA6B;AACpD,QAAM,EAAE,WAAW,mBAAmB,gBAAgB,cAAc,IAAI;AACxE,QAAM,SAAS;AAAA,IACb,MAAM,4BAA4B,SAAS;AAAA,IAC3C,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,UAAU,QAAQ,MAAM,UAAU,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,SACE,qBAAC,SAAI,WAAW,wBAAQ,OACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,UAAU;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,IACC,qBAAqB,WACpB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,wBAAQ;AAAA,QACnB,OAAO,eAAe,UAAU;AAAA,QAChC,UAAU,gBAAgB,SAAS,UAAU,EAAE;AAAA,QAC/C,SAAS,OAAK,kBAAkB,UAAU,EAAE;AAAA;AAAA,IAC9C;AAAA,KAEJ;AAEJ;AAkBO,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,qBAAqB,kBAAkB,QAAQ,IAAI;AAEzD,QAAM,IAAqC,UAAU;AAErD,YAAU,MAAM;AACd,UAAM,KAAU,CAAC;AACjB,QAAI,oBAAoB,SAAS,GAAG;AAClC,yBAAmB,QAAQ,CAACA,OAAW;AACrC,WAAGA,GAAE,EAAE,IAAIA,GAAE;AAAA,MACf,CAAC;AACD,UAAI,oBAAoB,IAAI,MAAM,oBAAoB,EAAE;AACtD,qBAAa,EAAE;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,oBAAoB,CAAC,IAAY,UAAe;AACpD,UAAM,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AACvC,iBAAa,SAAS,EAAE,IAAI,MAAM,CAAC;AAAA,EACrC;AAEA,SACE,oBAAC,SAAI,WAAW,wBAAQ,UAAU,KAAK,GACpC,8BAAoB,IAAI,CAACA,OAAW;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAWA;AAAA,QACX,eAAe;AAAA,QACf;AAAA,QACA;AAAA;AAAA,MAJKA,GAAE;AAAA,IAKT;AAAA,EAEJ,CAAC,GACH;AAEJ","sourcesContent":["import { createRef, useEffect, useMemo, useState } from \"react\"\nimport { consolidateParams } from \"utils\"\nimport { ParameterController } from \"./Controller/Param\"\nimport { LockButton } from \"./LockButton/LockButton\"\nimport classes from \"./Controls.module.scss\"\nimport { validateParameterDefinition } from \"./validation\"\nimport { stringifyParamsData } from \"./utils\"\nimport { FxParamType, FxParamTypeMap } from \"./types.js\"\n\ninterface ControllerBladeProps {\n  parameter: any\n  onClickLockButton?: (id: string) => void\n  lockedParamIds?: string[]\n  onChangeParam: (id: string, value: any) => void\n}\n\nfunction ControllerBlade(props: ControllerBladeProps) {\n  const { parameter, onClickLockButton, lockedParamIds, onChangeParam } = props\n  const parsed = useMemo(\n    () => validateParameterDefinition(parameter),\n    [parameter]\n  )\n  const isValid = useMemo(() => parsed && parsed.success, [parsed])\n  return (\n    <div className={classes.blade}>\n      <ParameterController\n        parameter={parameter}\n        value={parameter.value}\n        onChange={onChangeParam}\n      />\n      {onClickLockButton && isValid && (\n        <LockButton\n          className={classes.lockButton}\n          title={`toggle lock ${parameter.id} param`}\n          isLocked={lockedParamIds?.includes(parameter.id)}\n          onClick={e => onClickLockButton(parameter.id)}\n        />\n      )}\n    </div>\n  )\n}\n\nexport type ControlsOnChangeDataHandler = (\n  newData: Record<string, any>,\n  changedParam?: {\n    id: string\n    value: FxParamTypeMap[FxParamType]\n  }\n) => void\n\ninterface ControlsProps {\n  params: any\n  onClickLockButton?: (id: string) => void\n  lockedParamIds?: string[]\n  onChangeData: ControlsOnChangeDataHandler\n  data: Record<string, any>\n}\n\nexport const Controls = ({\n  params,\n  data,\n  onClickLockButton,\n  lockedParamIds,\n  onChangeData,\n}: ControlsProps) => {\n  const consolidatedParams = consolidateParams(params, data)\n\n  const p: React.RefObject<HTMLDivElement> = createRef()\n\n  useEffect(() => {\n    const ps: any = {}\n    if (consolidatedParams?.length > 0) {\n      consolidatedParams.forEach((p: any) => {\n        ps[p.id] = p.value\n      })\n      if (stringifyParamsData(data) !== stringifyParamsData(ps))\n        onChangeData(ps)\n    }\n  }, [params])\n\n  const handleChangeParam = (id: string, value: any) => {\n    const newData = { ...data, [id]: value }\n    onChangeData(newData, { id, value })\n  }\n\n  return (\n    <div className={classes.controls} ref={p}>\n      {consolidatedParams?.map((p: any) => {\n        return (\n          <ControllerBlade\n            key={p.id}\n            parameter={p}\n            onChangeParam={handleChangeParam}\n            lockedParamIds={lockedParamIds}\n            onClickLockButton={onClickLockButton}\n          />\n        )\n      })}\n    </div>\n  )\n}\n","import 'css-chunk:src/Controls.module.scss';export default {\n  \"controls\": \"_controls_10c1n_1\",\n  \"blade\": \"_blade_10c1n_8\"\n};"]}

package/dist/Controls.css

@@ -1,78 +1,78 @@
 /* esbuild-sass-plugin:css-chunk:src/Controller/Controller.module.scss */
-._controller_1rjbl_1 {
+._controller_t5850_1 {
   display: flex;
   align-items: center;
   gap: var(--fxl-spacing-xxs);
 }
-._controller_1rjbl_1 label {
+._controller_t5850_1 label {
   flex: 1;
   font-size: 1rem;
   word-break: break-all;
   font-size: var(--fxl-font-size-s);
 }
-._controller_1rjbl_1 ._inputContainer_1rjbl_12 {
+._controller_t5850_1 ._inputContainer_t5850_12 {
   width: 200px;
   display: flex;
   align-items: center;
 }
-._default_1rjbl_18 input:nth-child(1),
-._default_1rjbl_18 select:nth-child(1) {
+._default_t5850_18 input:nth-child(1),
+._default_t5850_18 select:nth-child(1) {
   margin-right: var(--fxl-spacing-xxs);
   width: 65%;
 }
-._default_1rjbl_18 input:nth-child(2),
-._default_1rjbl_18 select:nth-child(2) {
+._default_t5850_18 input:nth-child(2),
+._default_t5850_18 select:nth-child(2) {
   margin-left: var(--fxl-spacing-xxs);
   width: 35%;
 }
-._default_1rjbl_18 input:only-child,
-._default_1rjbl_18 select:only-child {
+._default_t5850_18 input:only-child,
+._default_t5850_18 select:only-child {
   width: 100%;
   margin-right: 0;
 }
-._invert_1rjbl_31 input:nth-child(1),
-._invert_1rjbl_31 select:nth-child(1) {
+._invert_t5850_34 input:nth-child(1),
+._invert_t5850_34 select:nth-child(1) {
   margin-right: var(--fxl-spacing-xxs);
   width: 30%;
 }
-._invert_1rjbl_31 input:nth-child(2),
-._invert_1rjbl_31 select:nth-child(2) {
+._invert_t5850_34 input:nth-child(2),
+._invert_t5850_34 select:nth-child(2) {
   margin-left: var(--fxl-spacing-xxs);
   width: 70%;
 }
-._invert_1rjbl_31 input:only-child,
-._invert_1rjbl_31 select:only-child {
+._invert_t5850_34 input:only-child,
+._invert_t5850_34 select:only-child {
   width: 100%;
   margin-right: 0;
 }
-._box_1rjbl_44 input:nth-child(1),
-._box_1rjbl_44 select:nth-child(1) {
+._box_t5850_50 input:nth-child(1),
+._box_t5850_50 select:nth-child(1) {
   margin-right: var(--fxl-spacing-xxs);
   width: 30px;
 }
-._box_1rjbl_44 input:nth-child(2),
-._box_1rjbl_44 select:nth-child(2) {
+._box_t5850_50 input:nth-child(2),
+._box_t5850_50 select:nth-child(2) {
   margin-left: var(--fxl-spacing-xxs);
   width: calc(100% - 30px);
 }
-._box_1rjbl_44 input:only-child,
-._box_1rjbl_44 select:only-child {
+._box_t5850_50 input:only-child,
+._box_t5850_50 select:only-child {
   width: 30px;
   margin-right: 0;
 }
-._numberInput_1rjbl_58::-webkit-outer-spin-button,
-._numberInput_1rjbl_58::-webkit-inner-spin-button {
+._numberInput_t5850_67::-webkit-outer-spin-button,
+._numberInput_t5850_67::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-._numberInput_1rjbl_58[type=number] {
+._numberInput_t5850_67[type=number] {
   -moz-appearance: textfield;
 }
 
 /* esbuild-sass-plugin:css-chunk:src/BaseInput.module.scss */
-._baseInput_jtvfw_1,
-._baseSelect_jtvfw_1,
-._baseButton_jtvfw_1 {
+._baseInput_13ljm_1,
+._baseSelect_13ljm_2,
+._baseButton_13ljm_3 {
   font-family: var(--fxl-font-family);
   font-size: var(--fxl-font-size-regular);
   height: 30px;
@@ -82,47 +82,47 @@
   padding: 0 var(--fxl-spacing-xxs);
   outline-offset: -1px;
 }
-._baseInput_jtvfw_1:hover,
-._baseSelect_jtvfw_1:hover,
-._baseButton_jtvfw_1:hover {
+._baseInput_13ljm_1:hover,
+._baseSelect_13ljm_2:hover,
+._baseButton_13ljm_3:hover {
   background: var(--fxl-color-background3);
 }
-._baseInput_jtvfw_1:focus-visible,
-._baseSelect_jtvfw_1:focus-visible,
-._baseButton_jtvfw_1:focus-visible {
+._baseInput_13ljm_1:focus-visible,
+._baseSelect_13ljm_2:focus-visible,
+._baseButton_13ljm_3:focus-visible {
   outline: 1px solid var(--fxl-color-primary);
 }
-._baseInput_jtvfw_1:disabled,
-._baseSelect_jtvfw_1:disabled,
-._baseButton_jtvfw_1:disabled {
+._baseInput_13ljm_1:disabled,
+._baseSelect_13ljm_2:disabled,
+._baseButton_13ljm_3:disabled {
   opacity: 0.6;
   pointer-events: none;
 }
-._baseButton_jtvfw_1 {
+._baseButton_13ljm_3 {
   cursor: pointer;
   background: var(--fxl-color-background2);
   color: var(--fxl-color-text-primary);
   font-weight: 700;
 }
-._baseButton_jtvfw_1:hover {
+._baseButton_13ljm_3:hover {
   background: var(--fxl-color-background3);
   color: var(--fxl-color-light);
   outline: 1px solid var(--fxl-color-primary);
 }
-._baseButton_jtvfw_1:focus-visible {
+._baseButton_13ljm_3:focus-visible {
   outline: 1px solid var(--fxl-color-primary);
   outline-offset: 2px;
 }
-._baseButton_jtvfw_1._color-secondary_jtvfw_37 {
+._baseButton_13ljm_3._color-secondary_13ljm_45 {
   background: var(--fxl-color-dark1);
   color: var(--fxl-color-light);
 }
-._baseButton_jtvfw_1._color-secondary_jtvfw_37:hover {
+._baseButton_13ljm_3._color-secondary_13ljm_45:hover {
   background: var(--fxl-color-dark2);
   color: var(--fxl-color-light);
   outline: 1px solid var(--fxl-color-primary);
 }
-._iconButton_jtvfw_47 {
+._iconButton_13ljm_55 {
   width: 30px !important;
   cursor: pointer;
   padding: 0;
@@ -132,7 +132,7 @@
   flex-grow: 0;
   flex-shrink: 0;
 }
-._baseInput_jtvfw_1[type=range] {
+._baseInput_13ljm_1[type=range] {
   -webkit-appearance: none;
   appearance: none;
   height: 3px !important;
@@ -141,7 +141,7 @@
   padding: 0 !important;
   border: none;
 }
-._baseInput_jtvfw_1[type=range]::-webkit-slider-thumb {
+._baseInput_13ljm_1[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
@@ -150,17 +150,17 @@
   background: var(--fxl-color-primary);
   border-radius: 50%;
 }
-._baseInput_jtvfw_1[type=range]::-webkit-slider-thumb:hover {
+._baseInput_13ljm_1[type=range]::-webkit-slider-thumb:hover {
   transform: scale(1.1);
 }
-._baseInput_jtvfw_1[type=range]::-moz-range-thumb {
+._baseInput_13ljm_1[type=range]::-moz-range-thumb {
   cursor: pointer;
   width: 15px;
   height: 15px;
   background: var(--fxl-color-primary);
   border-radius: 50%;
 }
-._baseInput_jtvfw_1[type=checkbox] {
+._baseInput_13ljm_1[type=checkbox] {
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
@@ -170,7 +170,7 @@
   padding: 0;
   position: relative;
 }
-._baseInput_jtvfw_1[type=checkbox]:checked:after {
+._baseInput_13ljm_1[type=checkbox]:checked:after {
   content: "";
   width: 15px;
   height: 15px;
@@ -182,7 +182,7 @@
 }
 
 /* esbuild-sass-plugin:css-chunk:src/Controller/Color.module.scss */
-._squaredButton_13v06_1 {
+._squaredButton_p7fh7_1 {
   width: 30px;
   height: 30px;
   padding: 0;
@@ -190,50 +190,50 @@
   position: relative;
   background: white !important;
 }
-._squaredButton_13v06_1._active_13v06_9 {
+._squaredButton_p7fh7_1._active_p7fh7_9 {
   border-color: var(--fxl-color-primary);
 }
-._squaredButton_13v06_1:focus-visible {
+._squaredButton_p7fh7_1:focus-visible {
   outline-offset: -1px;
 }
-._square_13v06_1 {
+._square_p7fh7_1 {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
 }
-._pickerWrapper_13v06_24 {
+._pickerWrapper_p7fh7_24 {
   position: relative;
 }
-._pickerAbsoluteWrapper_13v06_28 {
+._pickerAbsoluteWrapper_p7fh7_28 {
   position: absolute;
   bottom: 0;
   transform: translate(0, calc(100% + var(--fxl-spacing-xxs)));
   z-index: 10;
 }
-._picker_13v06_24 {
+._picker_p7fh7_24 {
   border: 1px solid var(--fxl-color-light2);
 }
-._picker_13v06_24 input {
+._picker_p7fh7_24 input {
   background: var(--fxl-color-light);
 }
-._colorful_13v06_42 .react-colorful__saturation {
+._colorful_p7fh7_42 .react-colorful__saturation {
   border-radius: 0;
 }
-._colorful_13v06_42 .react-colorful__last-control {
+._colorful_p7fh7_42 .react-colorful__last-control {
   border-radius: 0;
 }
 
 /* esbuild-sass-plugin:css-chunk:src/Controller/Invalid.module.scss */
-._invalid_9fznv_1 {
+._invalid_u8v12_1 {
   color: var(--fxl-color-light);
   display: flex;
   width: 100%;
   flex-direction: column;
   margin-bottom: var(--fxl-spacing-xxs);
 }
-._invalid_9fznv_1 label {
+._invalid_u8v12_1 label {
   color: var(--fxl-color-light1);
   cursor: pointer;
   display: flex;
@@ -244,10 +244,10 @@
   text-align: center;
   position: relative;
 }
-._invalid_9fznv_1 label:hover {
+._invalid_u8v12_1 label:hover {
   background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--fxl-color-dark2) 5px, var(--fxl-color-dark2) 10px);
 }
-._invalid_9fznv_1 label i {
+._invalid_u8v12_1 label i {
   font-style: normal;
   position: absolute;
   left: var(--fxl-spacing-sm);
@@ -255,26 +255,26 @@
   transform: translate(0, -50%) rotate(-90deg);
   font-size: var(--fxl-font-size-m);
 }
-._invalid_9fznv_1 label i._isOpen_9fznv_30 {
+._invalid_u8v12_1 label i._isOpen_u8v12_30 {
   transform: translate(0, -50%) rotate(0);
 }
-._errorsWrapper_9fznv_34 {
+._errorsWrapper_u8v12_34 {
   border: 2px solid var(--fxl-color-dark2);
   border-top: none;
   padding: var(--fxl-spacing-sm);
 }
-._attributes_9fznv_40 {
+._attributes_u8v12_40 {
   margin-bottom: var(--fxl-spacing-l);
 }
-._issue_9fznv_44 h3 {
+._issue_u8v12_44 h3 {
   font-weight: 400;
 }
-._issue_9fznv_44 p {
+._issue_u8v12_44 p {
   color: var(--fxl-color-light1);
 }
 
 /* esbuild-sass-plugin:css-chunk:src/Controller/Bytes.module.scss */
-._root_1qszq_1 {
+._root_sy7al_1 {
   width: 100%;
   overflow-x: auto;
   height: 100%;
@@ -282,23 +282,23 @@
 }
 
 /* esbuild-sass-plugin:css-chunk:src/LockButton/LockButton.module.scss */
-._lockButton_1bbiz_1 {
+._lockButton_xs4tj_1 {
   color: var(--fxl-color-light1) !important;
 }
 
 /* esbuild-sass-plugin:css-chunk:src/Controls.module.scss */
-._controls_25wa3_1 {
+._controls_10c1n_1 {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   gap: var(--fxl-spacing-xxs);
 }
-._blade_25wa3_8 {
+._blade_10c1n_8 {
   display: flex;
   gap: var(--fxl-spacing-xxs);
   align-items: center;
 }
-._blade_25wa3_8 > div {
+._blade_10c1n_8 > div {
   flex-grow: 1;
 }
 /*# sourceMappingURL=Controls.css.map */

package/dist/Controls.css.map

@@ -1 +1 @@
-{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/Controller/Controller.module.scss","esbuild-sass-plugin:css-chunk:src/BaseInput.module.scss","esbuild-sass-plugin:css-chunk:src/Controller/Color.module.scss","esbuild-sass-plugin:css-chunk:src/Controller/Invalid.module.scss","esbuild-sass-plugin:css-chunk:src/Controller/Bytes.module.scss","esbuild-sass-plugin:css-chunk:src/LockButton/LockButton.module.scss","esbuild-sass-plugin:css-chunk:src/Controls.module.scss"],"sourcesContent":["._controller_1rjbl_1 {\n  display: flex;\n  align-items: center;\n  gap: var(--fxl-spacing-xxs);\n}\n._controller_1rjbl_1 label {\n  flex: 1;\n  font-size: 1rem;\n  word-break: break-all;\n  font-size: var(--fxl-font-size-s);\n}\n._controller_1rjbl_1 ._inputContainer_1rjbl_12 {\n  width: 200px;\n  display: flex;\n  align-items: center;\n}\n\n._default_1rjbl_18 input:nth-child(1), ._default_1rjbl_18 select:nth-child(1) {\n  margin-right: var(--fxl-spacing-xxs);\n  width: 65%;\n}\n._default_1rjbl_18 input:nth-child(2), ._default_1rjbl_18 select:nth-child(2) {\n  margin-left: var(--fxl-spacing-xxs);\n  width: 35%;\n}\n._default_1rjbl_18 input:only-child, ._default_1rjbl_18 select:only-child {\n  width: 100%;\n  margin-right: 0;\n}\n\n._invert_1rjbl_31 input:nth-child(1), ._invert_1rjbl_31 select:nth-child(1) {\n  margin-right: var(--fxl-spacing-xxs);\n  width: 30%;\n}\n._invert_1rjbl_31 input:nth-child(2), ._invert_1rjbl_31 select:nth-child(2) {\n  margin-left: var(--fxl-spacing-xxs);\n  width: 70%;\n}\n._invert_1rjbl_31 input:only-child, ._invert_1rjbl_31 select:only-child {\n  width: 100%;\n  margin-right: 0;\n}\n\n._box_1rjbl_44 input:nth-child(1), ._box_1rjbl_44 select:nth-child(1) {\n  margin-right: var(--fxl-spacing-xxs);\n  width: 30px;\n}\n._box_1rjbl_44 input:nth-child(2), ._box_1rjbl_44 select:nth-child(2) {\n  margin-left: var(--fxl-spacing-xxs);\n  width: calc(100% - 30px);\n}\n._box_1rjbl_44 input:only-child, ._box_1rjbl_44 select:only-child {\n  width: 30px;\n  margin-right: 0;\n}\n\n/* Chrome, Safari, Edge, Opera */\n._numberInput_1rjbl_58::-webkit-outer-spin-button,\n._numberInput_1rjbl_58::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n._numberInput_1rjbl_58[type=number] {\n  -moz-appearance: textfield;\n}","._baseInput_jtvfw_1, ._baseSelect_jtvfw_1, ._baseButton_jtvfw_1 {\n  font-family: var(--fxl-font-family);\n  font-size: var(--fxl-font-size-regular);\n  height: 30px;\n  color: var(--fxl-color-text-primary);\n  background: var(--fxl-color-background2);\n  border: 1px solid var(--fxl-color-light2);\n  padding: 0 var(--fxl-spacing-xxs);\n  outline-offset: -1px;\n}\n._baseInput_jtvfw_1:hover, ._baseSelect_jtvfw_1:hover, ._baseButton_jtvfw_1:hover {\n  background: var(--fxl-color-background3);\n}\n._baseInput_jtvfw_1:focus-visible, ._baseSelect_jtvfw_1:focus-visible, ._baseButton_jtvfw_1:focus-visible {\n  outline: 1px solid var(--fxl-color-primary);\n}\n._baseInput_jtvfw_1:disabled, ._baseSelect_jtvfw_1:disabled, ._baseButton_jtvfw_1:disabled {\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n._baseButton_jtvfw_1 {\n  cursor: pointer;\n  background: var(--fxl-color-background2);\n  color: var(--fxl-color-text-primary);\n  font-weight: 700;\n}\n._baseButton_jtvfw_1:hover {\n  background: var(--fxl-color-background3);\n  color: var(--fxl-color-light);\n  outline: 1px solid var(--fxl-color-primary);\n}\n._baseButton_jtvfw_1:focus-visible {\n  outline: 1px solid var(--fxl-color-primary);\n  outline-offset: 2px;\n}\n._baseButton_jtvfw_1._color-secondary_jtvfw_37 {\n  background: var(--fxl-color-dark1);\n  color: var(--fxl-color-light);\n}\n._baseButton_jtvfw_1._color-secondary_jtvfw_37:hover {\n  background: var(--fxl-color-dark2);\n  color: var(--fxl-color-light);\n  outline: 1px solid var(--fxl-color-primary);\n}\n\n._iconButton_jtvfw_47 {\n  width: 30px !important;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n._baseInput_jtvfw_1[type=range] {\n  -webkit-appearance: none;\n  appearance: none;\n  height: 3px !important;\n  background: var(--fxl-color-light2);\n  outline: none;\n  padding: 0 !important;\n  border: none;\n}\n\n._baseInput_jtvfw_1[type=range]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  cursor: pointer;\n  width: 15px;\n  height: 15px;\n  background: var(--fxl-color-primary);\n  border-radius: 50%;\n}\n._baseInput_jtvfw_1[type=range]::-webkit-slider-thumb:hover {\n  transform: scale(1.1);\n}\n\n._baseInput_jtvfw_1[type=range]::-moz-range-thumb {\n  cursor: pointer;\n  width: 15px;\n  height: 15px;\n  background: var(--fxl-color-primary);\n  border-radius: 50%;\n}\n\n._baseInput_jtvfw_1[type=checkbox] {\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  width: 30px !important;\n  height: 30px !important;\n  margin: 0;\n  padding: 0;\n  position: relative;\n}\n._baseInput_jtvfw_1[type=checkbox]:checked:after {\n  content: \"\";\n  width: 15px;\n  height: 15px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--fxl-color-primary);\n}","._squaredButton_13v06_1 {\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  border: 1px solid var(--fxl-color-light2);\n  position: relative;\n  background: white !important;\n}\n._squaredButton_13v06_1._active_13v06_9 {\n  border-color: var(--fxl-color-primary);\n}\n._squaredButton_13v06_1:focus-visible {\n  outline-offset: -1px;\n}\n\n._square_13v06_1 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n._pickerWrapper_13v06_24 {\n  position: relative;\n}\n\n._pickerAbsoluteWrapper_13v06_28 {\n  position: absolute;\n  bottom: 0;\n  transform: translate(0, calc(100% + var(--fxl-spacing-xxs)));\n  z-index: 10;\n}\n\n._picker_13v06_24 {\n  border: 1px solid var(--fxl-color-light2);\n}\n._picker_13v06_24 input {\n  background: var(--fxl-color-light);\n}\n\n._colorful_13v06_42 .react-colorful__saturation {\n  border-radius: 0;\n}\n._colorful_13v06_42 .react-colorful__last-control {\n  border-radius: 0;\n}","._invalid_9fznv_1 {\n  color: var(--fxl-color-light);\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  margin-bottom: var(--fxl-spacing-xxs);\n}\n._invalid_9fznv_1 label {\n  color: var(--fxl-color-light1);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 30px;\n  background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--fxl-color-dark1) 5px, var(--fxl-color-dark1) 10px);\n  text-align: center;\n  position: relative;\n}\n._invalid_9fznv_1 label:hover {\n  background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--fxl-color-dark2) 5px, var(--fxl-color-dark2) 10px);\n}\n._invalid_9fznv_1 label i {\n  font-style: normal;\n  position: absolute;\n  left: var(--fxl-spacing-sm);\n  top: 50%;\n  transform: translate(0, -50%) rotate(-90deg);\n  font-size: var(--fxl-font-size-m);\n}\n._invalid_9fznv_1 label i._isOpen_9fznv_30 {\n  transform: translate(0, -50%) rotate(0);\n}\n\n._errorsWrapper_9fznv_34 {\n  border: 2px solid var(--fxl-color-dark2);\n  border-top: none;\n  padding: var(--fxl-spacing-sm);\n}\n\n._attributes_9fznv_40 {\n  margin-bottom: var(--fxl-spacing-l);\n}\n\n._issue_9fznv_44 h3 {\n  font-weight: 400;\n}\n._issue_9fznv_44 p {\n  color: var(--fxl-color-light1);\n}","._root_1qszq_1 {\n  width: 100%;\n  overflow-x: auto;\n  height: 100%;\n  padding: 4px;\n}","._lockButton_1bbiz_1 {\n  color: var(--fxl-color-light1) !important;\n}","._controls_25wa3_1 {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  gap: var(--fxl-spacing-xxs);\n}\n\n._blade_25wa3_8 {\n  display: flex;\n  gap: var(--fxl-spacing-xxs);\n  align-items: center;\n}\n._blade_25wa3_8 > div {\n  flex-grow: 1;\n}"],"mappings":";AAAA;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAGF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAGF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAIF;AAAA;AAEE;AACA;AAAA;AAIF;AACE;AAAA;;;ACjEF;AAAA;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AAAA;AACE;AAAA;AAEF;AAAA;AAAA;AACE;AAAA;AAEF;AAAA;AAAA;AACE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AC1GF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;;;AC7CF;AACE;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;;;AC/CF;AACE;AACA;AACA;AACA;AAAA;;;ACJF;AACE;AAAA;;;ACDF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAEF;AACE;AAAA;","names":[]}
+{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/Controller/Controller.module.scss","esbuild-sass-plugin:css-chunk:src/BaseInput.module.scss","esbuild-sass-plugin:css-chunk:src/Controller/Color.module.scss","esbuild-sass-plugin:css-chunk:src/Controller/Invalid.module.scss","esbuild-sass-plugin:css-chunk:src/Controller/Bytes.module.scss","esbuild-sass-plugin:css-chunk:src/LockButton/LockButton.module.scss","esbuild-sass-plugin:css-chunk:src/Controls.module.scss"],"sourcesContent":["._controller_t5850_1 {\n  display: flex;\n  align-items: center;\n  gap: var(--fxl-spacing-xxs);\n}\n._controller_t5850_1 label {\n  flex: 1;\n  font-size: 1rem;\n  word-break: break-all;\n  font-size: var(--fxl-font-size-s);\n}\n._controller_t5850_1 ._inputContainer_t5850_12 {\n  width: 200px;\n  display: flex;\n  align-items: center;\n}\n\n._default_t5850_18 input:nth-child(1),\n._default_t5850_18 select:nth-child(1) {\n  margin-right: var(--fxl-spacing-xxs);\n  width: 65%;\n}\n._default_t5850_18 input:nth-child(2),\n._default_t5850_18 select:nth-child(2) {\n  margin-left: var(--fxl-spacing-xxs);\n  width: 35%;\n}\n._default_t5850_18 input:only-child,\n._default_t5850_18 select:only-child {\n  width: 100%;\n  margin-right: 0;\n}\n\n._invert_t5850_34 input:nth-child(1),\n._invert_t5850_34 select:nth-child(1) {\n  margin-right: var(--fxl-spacing-xxs);\n  width: 30%;\n}\n._invert_t5850_34 input:nth-child(2),\n._invert_t5850_34 select:nth-child(2) {\n  margin-left: var(--fxl-spacing-xxs);\n  width: 70%;\n}\n._invert_t5850_34 input:only-child,\n._invert_t5850_34 select:only-child {\n  width: 100%;\n  margin-right: 0;\n}\n\n._box_t5850_50 input:nth-child(1),\n._box_t5850_50 select:nth-child(1) {\n  margin-right: var(--fxl-spacing-xxs);\n  width: 30px;\n}\n._box_t5850_50 input:nth-child(2),\n._box_t5850_50 select:nth-child(2) {\n  margin-left: var(--fxl-spacing-xxs);\n  width: calc(100% - 30px);\n}\n._box_t5850_50 input:only-child,\n._box_t5850_50 select:only-child {\n  width: 30px;\n  margin-right: 0;\n}\n\n/* Chrome, Safari, Edge, Opera */\n._numberInput_t5850_67::-webkit-outer-spin-button,\n._numberInput_t5850_67::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n._numberInput_t5850_67[type=number] {\n  -moz-appearance: textfield;\n}","._baseInput_13ljm_1,\n._baseSelect_13ljm_2,\n._baseButton_13ljm_3 {\n  font-family: var(--fxl-font-family);\n  font-size: var(--fxl-font-size-regular);\n  height: 30px;\n  color: var(--fxl-color-text-primary);\n  background: var(--fxl-color-background2);\n  border: 1px solid var(--fxl-color-light2);\n  padding: 0 var(--fxl-spacing-xxs);\n  outline-offset: -1px;\n}\n._baseInput_13ljm_1:hover,\n._baseSelect_13ljm_2:hover,\n._baseButton_13ljm_3:hover {\n  background: var(--fxl-color-background3);\n}\n._baseInput_13ljm_1:focus-visible,\n._baseSelect_13ljm_2:focus-visible,\n._baseButton_13ljm_3:focus-visible {\n  outline: 1px solid var(--fxl-color-primary);\n}\n._baseInput_13ljm_1:disabled,\n._baseSelect_13ljm_2:disabled,\n._baseButton_13ljm_3:disabled {\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n._baseButton_13ljm_3 {\n  cursor: pointer;\n  background: var(--fxl-color-background2);\n  color: var(--fxl-color-text-primary);\n  font-weight: 700;\n}\n._baseButton_13ljm_3:hover {\n  background: var(--fxl-color-background3);\n  color: var(--fxl-color-light);\n  outline: 1px solid var(--fxl-color-primary);\n}\n._baseButton_13ljm_3:focus-visible {\n  outline: 1px solid var(--fxl-color-primary);\n  outline-offset: 2px;\n}\n._baseButton_13ljm_3._color-secondary_13ljm_45 {\n  background: var(--fxl-color-dark1);\n  color: var(--fxl-color-light);\n}\n._baseButton_13ljm_3._color-secondary_13ljm_45:hover {\n  background: var(--fxl-color-dark2);\n  color: var(--fxl-color-light);\n  outline: 1px solid var(--fxl-color-primary);\n}\n\n._iconButton_13ljm_55 {\n  width: 30px !important;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 0;\n  flex-shrink: 0;\n}\n\n._baseInput_13ljm_1[type=range] {\n  -webkit-appearance: none;\n  appearance: none;\n  height: 3px !important;\n  background: var(--fxl-color-light2);\n  outline: none;\n  padding: 0 !important;\n  border: none;\n}\n\n._baseInput_13ljm_1[type=range]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  cursor: pointer;\n  width: 15px;\n  height: 15px;\n  background: var(--fxl-color-primary);\n  border-radius: 50%;\n}\n._baseInput_13ljm_1[type=range]::-webkit-slider-thumb:hover {\n  transform: scale(1.1);\n}\n\n._baseInput_13ljm_1[type=range]::-moz-range-thumb {\n  cursor: pointer;\n  width: 15px;\n  height: 15px;\n  background: var(--fxl-color-primary);\n  border-radius: 50%;\n}\n\n._baseInput_13ljm_1[type=checkbox] {\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  width: 30px !important;\n  height: 30px !important;\n  margin: 0;\n  padding: 0;\n  position: relative;\n}\n._baseInput_13ljm_1[type=checkbox]:checked:after {\n  content: \"\";\n  width: 15px;\n  height: 15px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background: var(--fxl-color-primary);\n}","._squaredButton_p7fh7_1 {\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  border: 1px solid var(--fxl-color-light2);\n  position: relative;\n  background: white !important;\n}\n._squaredButton_p7fh7_1._active_p7fh7_9 {\n  border-color: var(--fxl-color-primary);\n}\n._squaredButton_p7fh7_1:focus-visible {\n  outline-offset: -1px;\n}\n\n._square_p7fh7_1 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n._pickerWrapper_p7fh7_24 {\n  position: relative;\n}\n\n._pickerAbsoluteWrapper_p7fh7_28 {\n  position: absolute;\n  bottom: 0;\n  transform: translate(0, calc(100% + var(--fxl-spacing-xxs)));\n  z-index: 10;\n}\n\n._picker_p7fh7_24 {\n  border: 1px solid var(--fxl-color-light2);\n}\n._picker_p7fh7_24 input {\n  background: var(--fxl-color-light);\n}\n\n._colorful_p7fh7_42 .react-colorful__saturation {\n  border-radius: 0;\n}\n._colorful_p7fh7_42 .react-colorful__last-control {\n  border-radius: 0;\n}","._invalid_u8v12_1 {\n  color: var(--fxl-color-light);\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  margin-bottom: var(--fxl-spacing-xxs);\n}\n._invalid_u8v12_1 label {\n  color: var(--fxl-color-light1);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 30px;\n  background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--fxl-color-dark1) 5px, var(--fxl-color-dark1) 10px);\n  text-align: center;\n  position: relative;\n}\n._invalid_u8v12_1 label:hover {\n  background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--fxl-color-dark2) 5px, var(--fxl-color-dark2) 10px);\n}\n._invalid_u8v12_1 label i {\n  font-style: normal;\n  position: absolute;\n  left: var(--fxl-spacing-sm);\n  top: 50%;\n  transform: translate(0, -50%) rotate(-90deg);\n  font-size: var(--fxl-font-size-m);\n}\n._invalid_u8v12_1 label i._isOpen_u8v12_30 {\n  transform: translate(0, -50%) rotate(0);\n}\n\n._errorsWrapper_u8v12_34 {\n  border: 2px solid var(--fxl-color-dark2);\n  border-top: none;\n  padding: var(--fxl-spacing-sm);\n}\n\n._attributes_u8v12_40 {\n  margin-bottom: var(--fxl-spacing-l);\n}\n\n._issue_u8v12_44 h3 {\n  font-weight: 400;\n}\n._issue_u8v12_44 p {\n  color: var(--fxl-color-light1);\n}","._root_sy7al_1 {\n  width: 100%;\n  overflow-x: auto;\n  height: 100%;\n  padding: 4px;\n}","._lockButton_xs4tj_1 {\n  color: var(--fxl-color-light1) !important;\n}","._controls_10c1n_1 {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  gap: var(--fxl-spacing-xxs);\n}\n\n._blade_10c1n_8 {\n  display: flex;\n  gap: var(--fxl-spacing-xxs);\n  align-items: center;\n}\n._blade_10c1n_8 > div {\n  flex-grow: 1;\n}"],"mappings":";AAAA;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAEF;AAAA;AAEE;AACA;AAAA;AAEF;AAAA;AAEE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAEF;AAAA;AAEE;AACA;AAAA;AAEF;AAAA;AAEE;AACA;AAAA;AAGF;AAAA;AAEE;AACA;AAAA;AAEF;AAAA;AAEE;AACA;AAAA;AAEF;AAAA;AAEE;AACA;AAAA;AAIF;AAAA;AAEE;AACA;AAAA;AAIF;AACE;AAAA;;;AC1EF;AAAA;AAAA;AAGE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AAAA;AAGE;AAAA;AAEF;AAAA;AAAA;AAGE;AAAA;AAEF;AAAA;AAAA;AAGE;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AClHF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;;;AC7CF;AACE;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;AAEF;AACE;AAAA;;;AC/CF;AACE;AACA;AACA;AACA;AAAA;;;ACJF;AACE;AAAA;;;ACDF;AACE;AACA;AACA;AACA;AAAA;AAGF;AACE;AACA;AACA;AAAA;AAEF;AACE;AAAA;","names":[]}

package/dist/Controls.js

@@ -1,34 +1,34 @@
 import {
   ParameterController
-} from "./chunk-57UENWLF.js";
-import "./chunk-H5IMTNFG.js";
-import "./chunk-6VMIOQSE.js";
-import "./chunk-YYEIYDDF.js";
+} from "./chunk-X4GS3I5P.js";
+import "./chunk-YNPYJVNU.js";
+import "./chunk-SOEAQVIE.js";
+import "./chunk-NBDFYP3Y.js";
 import {
   LockButton
-} from "./chunk-4OV7OX5A.js";
+} from "./chunk-XYWE6TCQ.js";
 import {
   validateParameterDefinition
 } from "./chunk-MWP7SJWC.js";
-import "./chunk-P77D7XSP.js";
-import "./chunk-YOS2HCIS.js";
-import "./chunk-2QIAF3U7.js";
-import "./chunk-ZG3OT7LF.js";
-import "./chunk-CE3TPOSO.js";
-import "./chunk-PTXBICTZ.js";
+import "./chunk-GXCX5YCI.js";
+import "./chunk-ZALRIFOG.js";
+import "./chunk-HIC6NEI2.js";
+import "./chunk-4OKETOHR.js";
+import "./chunk-2SARESCF.js";
+import "./chunk-GDSG5VLX.js";
 import {
   consolidateParams,
   stringifyParamsData
-} from "./chunk-FZWZHHQ2.js";
-import "./chunk-2BHABOFI.js";
+} from "./chunk-7H32FZ35.js";
+import "./chunk-BEDRMOBJ.js";
 
 // src/Controls.tsx
 import { createRef, useEffect, useMemo } from "react";
 
 // src/Controls.module.scss
 var Controls_module_default = {
-  "controls": "_controls_25wa3_1",
-  "blade": "_blade_25wa3_8"
+  "controls": "_controls_10c1n_1",
+  "blade": "_blade_10c1n_8"
 };
 
 // src/Controls.tsx

package/dist/Controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Controls.tsx","../src/Controls.module.scss"],"sourcesContent":["import { createRef, useEffect, useMemo, useState } from \"react\"\nimport { consolidateParams } from \"utils\"\nimport { ParameterController } from \"./Controller/Param\"\nimport { LockButton } from \"./LockButton/LockButton\"\nimport classes from \"./Controls.module.scss\"\nimport { validateParameterDefinition } from \"./validation\"\nimport { stringifyParamsData } from \"./utils\"\nimport { FxParamType, FxParamTypeMap } from \"./types.js\"\n\ninterface ControllerBladeProps {\n  parameter: any\n  onClickLockButton?: (id: string) => void\n  lockedParamIds?: string[]\n  onChangeParam: (id: string, value: any) => void\n}\n\nfunction ControllerBlade(props: ControllerBladeProps) {\n  const { parameter, onClickLockButton, lockedParamIds, onChangeParam } = props\n  const parsed = useMemo(\n    () => validateParameterDefinition(parameter),\n    [parameter]\n  )\n  const isValid = useMemo(() => parsed && parsed.success, [parsed])\n  return (\n    <div className={classes.blade}>\n      <ParameterController\n        parameter={parameter}\n        value={parameter.value}\n        onChange={onChangeParam}\n      />\n      {onClickLockButton && isValid && (\n        <LockButton\n          className={classes.lockButton}\n          title={`toggle lock ${parameter.id} param`}\n          isLocked={lockedParamIds?.includes(parameter.id)}\n          onClick={(e) => onClickLockButton(parameter.id)}\n        />\n      )}\n    </div>\n  )\n}\n\nexport type ControlsOnChangeDataHandler = (\n  newData: Record<string, any>,\n  changedParam?: {\n    id: string\n    value: FxParamTypeMap[FxParamType]\n  }\n) => void\n\ninterface ControlsProps {\n  params: any\n  onClickLockButton?: (id: string) => void\n  lockedParamIds?: string[]\n  onChangeData: ControlsOnChangeDataHandler\n  data: Record<string, any>\n}\n\nexport const Controls = ({\n  params,\n  data,\n  onClickLockButton,\n  lockedParamIds,\n  onChangeData,\n}: ControlsProps) => {\n  const consolidatedParams = consolidateParams(params, data)\n\n  const p: React.RefObject<HTMLDivElement> = createRef()\n\n  useEffect(() => {\n    const ps: any = {}\n    if (consolidatedParams?.length > 0) {\n      consolidatedParams.forEach((p: any) => {\n        ps[p.id] = p.value\n      })\n      if (stringifyParamsData(data) !== stringifyParamsData(ps))\n        onChangeData(ps)\n    }\n  }, [params])\n\n  const handleChangeParam = (id: string, value: any) => {\n    const newData = { ...data, [id]: value }\n    onChangeData(newData, { id, value })\n  }\n\n  return (\n    <div className={classes.controls} ref={p}>\n      {consolidatedParams?.map((p: any) => {\n        return (\n          <ControllerBlade\n            key={p.id}\n            parameter={p}\n            onChangeParam={handleChangeParam}\n            lockedParamIds={lockedParamIds}\n            onClickLockButton={onClickLockButton}\n          />\n        )\n      })}\n    </div>\n  )\n}\n","import 'css-chunk:src/Controls.module.scss';export default {\n  \"controls\": \"_controls_25wa3_1\",\n  \"blade\": \"_blade_25wa3_8\"\n};"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,WAAW,WAAW,eAAyB;;;ACAZ,IAAO,0BAAQ;AAAA,EACzD,YAAY;AAAA,EACZ,SAAS;AACX;;;ADqBI,SACE,KADF;AARJ,SAAS,gBAAgB,OAA6B;AACpD,QAAM,EAAE,WAAW,mBAAmB,gBAAgB,cAAc,IAAI;AACxE,QAAM,SAAS;AAAA,IACb,MAAM,4BAA4B,SAAS;AAAA,IAC3C,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,UAAU,QAAQ,MAAM,UAAU,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,SACE,qBAAC,SAAI,WAAW,wBAAQ,OACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,UAAU;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,IACC,qBAAqB,WACpB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,wBAAQ;AAAA,QACnB,OAAO,eAAe,UAAU;AAAA,QAChC,UAAU,gBAAgB,SAAS,UAAU,EAAE;AAAA,QAC/C,SAAS,CAAC,MAAM,kBAAkB,UAAU,EAAE;AAAA;AAAA,IAChD;AAAA,KAEJ;AAEJ;AAkBO,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,qBAAqB,kBAAkB,QAAQ,IAAI;AAEzD,QAAM,IAAqC,UAAU;AAErD,YAAU,MAAM;AACd,UAAM,KAAU,CAAC;AACjB,QAAI,oBAAoB,SAAS,GAAG;AAClC,yBAAmB,QAAQ,CAACA,OAAW;AACrC,WAAGA,GAAE,EAAE,IAAIA,GAAE;AAAA,MACf,CAAC;AACD,UAAI,oBAAoB,IAAI,MAAM,oBAAoB,EAAE;AACtD,qBAAa,EAAE;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,oBAAoB,CAAC,IAAY,UAAe;AACpD,UAAM,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AACvC,iBAAa,SAAS,EAAE,IAAI,MAAM,CAAC;AAAA,EACrC;AAEA,SACE,oBAAC,SAAI,WAAW,wBAAQ,UAAU,KAAK,GACpC,8BAAoB,IAAI,CAACA,OAAW;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAWA;AAAA,QACX,eAAe;AAAA,QACf;AAAA,QACA;AAAA;AAAA,MAJKA,GAAE;AAAA,IAKT;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":["p"]}
+{"version":3,"sources":["../src/Controls.tsx","../src/Controls.module.scss"],"sourcesContent":["import { createRef, useEffect, useMemo, useState } from \"react\"\nimport { consolidateParams } from \"utils\"\nimport { ParameterController } from \"./Controller/Param\"\nimport { LockButton } from \"./LockButton/LockButton\"\nimport classes from \"./Controls.module.scss\"\nimport { validateParameterDefinition } from \"./validation\"\nimport { stringifyParamsData } from \"./utils\"\nimport { FxParamType, FxParamTypeMap } from \"./types.js\"\n\ninterface ControllerBladeProps {\n  parameter: any\n  onClickLockButton?: (id: string) => void\n  lockedParamIds?: string[]\n  onChangeParam: (id: string, value: any) => void\n}\n\nfunction ControllerBlade(props: ControllerBladeProps) {\n  const { parameter, onClickLockButton, lockedParamIds, onChangeParam } = props\n  const parsed = useMemo(\n    () => validateParameterDefinition(parameter),\n    [parameter]\n  )\n  const isValid = useMemo(() => parsed && parsed.success, [parsed])\n  return (\n    <div className={classes.blade}>\n      <ParameterController\n        parameter={parameter}\n        value={parameter.value}\n        onChange={onChangeParam}\n      />\n      {onClickLockButton && isValid && (\n        <LockButton\n          className={classes.lockButton}\n          title={`toggle lock ${parameter.id} param`}\n          isLocked={lockedParamIds?.includes(parameter.id)}\n          onClick={e => onClickLockButton(parameter.id)}\n        />\n      )}\n    </div>\n  )\n}\n\nexport type ControlsOnChangeDataHandler = (\n  newData: Record<string, any>,\n  changedParam?: {\n    id: string\n    value: FxParamTypeMap[FxParamType]\n  }\n) => void\n\ninterface ControlsProps {\n  params: any\n  onClickLockButton?: (id: string) => void\n  lockedParamIds?: string[]\n  onChangeData: ControlsOnChangeDataHandler\n  data: Record<string, any>\n}\n\nexport const Controls = ({\n  params,\n  data,\n  onClickLockButton,\n  lockedParamIds,\n  onChangeData,\n}: ControlsProps) => {\n  const consolidatedParams = consolidateParams(params, data)\n\n  const p: React.RefObject<HTMLDivElement> = createRef()\n\n  useEffect(() => {\n    const ps: any = {}\n    if (consolidatedParams?.length > 0) {\n      consolidatedParams.forEach((p: any) => {\n        ps[p.id] = p.value\n      })\n      if (stringifyParamsData(data) !== stringifyParamsData(ps))\n        onChangeData(ps)\n    }\n  }, [params])\n\n  const handleChangeParam = (id: string, value: any) => {\n    const newData = { ...data, [id]: value }\n    onChangeData(newData, { id, value })\n  }\n\n  return (\n    <div className={classes.controls} ref={p}>\n      {consolidatedParams?.map((p: any) => {\n        return (\n          <ControllerBlade\n            key={p.id}\n            parameter={p}\n            onChangeParam={handleChangeParam}\n            lockedParamIds={lockedParamIds}\n            onClickLockButton={onClickLockButton}\n          />\n        )\n      })}\n    </div>\n  )\n}\n","import 'css-chunk:src/Controls.module.scss';export default {\n  \"controls\": \"_controls_10c1n_1\",\n  \"blade\": \"_blade_10c1n_8\"\n};"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,WAAW,WAAW,eAAyB;;;ACAZ,IAAO,0BAAQ;AAAA,EACzD,YAAY;AAAA,EACZ,SAAS;AACX;;;ADqBI,SACE,KADF;AARJ,SAAS,gBAAgB,OAA6B;AACpD,QAAM,EAAE,WAAW,mBAAmB,gBAAgB,cAAc,IAAI;AACxE,QAAM,SAAS;AAAA,IACb,MAAM,4BAA4B,SAAS;AAAA,IAC3C,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,UAAU,QAAQ,MAAM,UAAU,OAAO,SAAS,CAAC,MAAM,CAAC;AAChE,SACE,qBAAC,SAAI,WAAW,wBAAQ,OACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,UAAU;AAAA,QACjB,UAAU;AAAA;AAAA,IACZ;AAAA,IACC,qBAAqB,WACpB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,wBAAQ;AAAA,QACnB,OAAO,eAAe,UAAU;AAAA,QAChC,UAAU,gBAAgB,SAAS,UAAU,EAAE;AAAA,QAC/C,SAAS,OAAK,kBAAkB,UAAU,EAAE;AAAA;AAAA,IAC9C;AAAA,KAEJ;AAEJ;AAkBO,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqB;AACnB,QAAM,qBAAqB,kBAAkB,QAAQ,IAAI;AAEzD,QAAM,IAAqC,UAAU;AAErD,YAAU,MAAM;AACd,UAAM,KAAU,CAAC;AACjB,QAAI,oBAAoB,SAAS,GAAG;AAClC,yBAAmB,QAAQ,CAACA,OAAW;AACrC,WAAGA,GAAE,EAAE,IAAIA,GAAE;AAAA,MACf,CAAC;AACD,UAAI,oBAAoB,IAAI,MAAM,oBAAoB,EAAE;AACtD,qBAAa,EAAE;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,oBAAoB,CAAC,IAAY,UAAe;AACpD,UAAM,UAAU,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM;AACvC,iBAAa,SAAS,EAAE,IAAI,MAAM,CAAC;AAAA,EACrC;AAEA,SACE,oBAAC,SAAI,WAAW,wBAAQ,UAAU,KAAK,GACpC,8BAAoB,IAAI,CAACA,OAAW;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAWA;AAAA,QACX,eAAe;AAAA,QACf;AAAA,QACA;AAAA;AAAA,MAJKA,GAAE;AAAA,IAKT;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":["p"]}

package/dist/LockButton/LockButton.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkX4O42D2Pcjs = require('../chunk-X4O42D2P.cjs');
-require('../chunk-OFUKQ2TB.cjs');
+var _chunkZ5Z6AKH7cjs = require('../chunk-Z5Z6AKH7.cjs');
+require('../chunk-CVLSVTCX.cjs');
 
 
-exports.LockButton = _chunkX4O42D2Pcjs.LockButton;
+exports.LockButton = _chunkZ5Z6AKH7cjs.LockButton;
 //# sourceMappingURL=LockButton.cjs.map