pixel-react 1.8.6 → 1.8.7

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.
package/lib/index.js CHANGED
@@ -1019,7 +1019,6 @@ const Typography = ({
1019
1019
  });
1020
1020
  };
1021
1021
 
1022
- const areEqual$2 = (prevProps, nextProps) => prevProps.selectedFile?.name === nextProps.selectedFile?.name;
1023
1022
  const Button$1 = /*#__PURE__*/React.forwardRef(({
1024
1023
  variant = 'primary',
1025
1024
  backgroundColor,
@@ -1079,7 +1078,6 @@ const Button$1 = /*#__PURE__*/React.forwardRef(({
1079
1078
  }), iconPosition === 'right' && renderIcon()]
1080
1079
  });
1081
1080
  });
1082
- var Button$2 = /*#__PURE__*/React.memo(Button$1, areEqual$2);
1083
1081
 
1084
1082
  var css_248z$1f = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n width: 100%;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n background-color: var(--base-bg-color);\n transform: translateY(3px);\n border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n width: 100%;\n border-radius: 0 0 8px 8px;\n}";
1085
1083
  styleInject(css_248z$1f);
@@ -1266,17 +1264,17 @@ const Drawer = ({
1266
1264
  children: customFooter || footerContent || jsxRuntime.jsxs(jsxRuntime.Fragment, {
1267
1265
  children: [jsxRuntime.jsxs("div", {
1268
1266
  className: "button-container",
1269
- children: [leftSecondaryButtonProps.label && jsxRuntime.jsx(Button$2, {
1267
+ children: [leftSecondaryButtonProps.label && jsxRuntime.jsx(Button$1, {
1270
1268
  ...leftSecondaryButtonProps,
1271
1269
  onClick: leftPrimaryButtonProps.onClick,
1272
1270
  variant: "secondary",
1273
1271
  transparentBackground: true
1274
- }), leftPrimaryButtonProps.label && jsxRuntime.jsx(Button$2, {
1272
+ }), leftPrimaryButtonProps.label && jsxRuntime.jsx(Button$1, {
1275
1273
  ...leftPrimaryButtonProps,
1276
1274
  onClick: leftPrimaryButtonProps.onClick,
1277
1275
  variant: "primary",
1278
1276
  transparentBackground: true
1279
- }), leftTertiaryButtonProps?.label && jsxRuntime.jsx(Button$2, {
1277
+ }), leftTertiaryButtonProps?.label && jsxRuntime.jsx(Button$1, {
1280
1278
  ...leftTertiaryButtonProps,
1281
1279
  onClick: leftTertiaryButtonProps.onClick,
1282
1280
  variant: "tertiary",
@@ -1284,17 +1282,17 @@ const Drawer = ({
1284
1282
  })]
1285
1283
  }), jsxRuntime.jsxs("div", {
1286
1284
  className: "button-container",
1287
- children: [rightTertiaryButtonProps?.label && jsxRuntime.jsx(Button$2, {
1285
+ children: [rightTertiaryButtonProps?.label && jsxRuntime.jsx(Button$1, {
1288
1286
  ...rightTertiaryButtonProps,
1289
1287
  onClick: rightTertiaryButtonProps.onClick,
1290
1288
  variant: "tertiary",
1291
1289
  transparentBackground: true
1292
- }), secondaryButtonProps.label && jsxRuntime.jsx(Button$2, {
1290
+ }), secondaryButtonProps.label && jsxRuntime.jsx(Button$1, {
1293
1291
  ...secondaryButtonProps,
1294
1292
  onClick: onCancel,
1295
1293
  variant: "secondary",
1296
1294
  transparentBackground: true
1297
- }), primaryButtonProps.label && jsxRuntime.jsx(Button$2, {
1295
+ }), primaryButtonProps.label && jsxRuntime.jsx(Button$1, {
1298
1296
  ...primaryButtonProps,
1299
1297
  onClick: primaryButtonProps.onClick,
1300
1298
  variant: "primary",
@@ -1758,7 +1756,7 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1758
1756
  })
1759
1757
  }), withSelectButton && filteredOptions.length > 0 && jsxRuntime.jsx("div", {
1760
1758
  className: "select-button-container",
1761
- children: jsxRuntime.jsx(Button$2, {
1759
+ children: jsxRuntime.jsx(Button$1, {
1762
1760
  label: "Select",
1763
1761
  variant: "tertiary",
1764
1762
  onClick: onSelectClick
@@ -2220,11 +2218,11 @@ const Toaster = ({
2220
2218
  children: toastMessage
2221
2219
  }), variant === 'confirm' && jsxRuntime.jsxs("div", {
2222
2220
  className: "ff-toaster-content__prompt",
2223
- children: [jsxRuntime.jsx(Button$2, {
2221
+ children: [jsxRuntime.jsx(Button$1, {
2224
2222
  onClick: handleClose,
2225
2223
  variant: "secondary",
2226
2224
  children: "Cancel"
2227
- }), jsxRuntime.jsx(Button$2, {
2225
+ }), jsxRuntime.jsx(Button$1, {
2228
2226
  onClick: onConfirmation,
2229
2227
  variant: "delete",
2230
2228
  children: confirmationText
@@ -4343,7 +4341,7 @@ const Dropzone = ({
4343
4341
  selectedValue: selectedRadioOption?.value,
4344
4342
  onChange: handleOptionChange
4345
4343
  })]
4346
- }) : jsxRuntime.jsx(Button$2, {
4344
+ }) : jsxRuntime.jsx(Button$1, {
4347
4345
  variant: "primary",
4348
4346
  label: buttonLabel,
4349
4347
  className: 'choose-file-btn',
@@ -6425,7 +6423,7 @@ var _excluded$1 = ["style"],
6425
6423
  // It knows to compare individual style props and ignore the wrapper object.
6426
6424
  // See https://reactjs.org/docs/react-api.html#reactmemo
6427
6425
 
6428
- function areEqual$1(prevProps, nextProps) {
6426
+ function areEqual(prevProps, nextProps) {
6429
6427
  var prevStyle = prevProps.style,
6430
6428
  prevRest = _objectWithoutPropertiesLoose$3(prevProps, _excluded$1);
6431
6429
  var nextStyle = nextProps.style,
@@ -6437,7 +6435,7 @@ function areEqual$1(prevProps, nextProps) {
6437
6435
  // See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
6438
6436
 
6439
6437
  function shouldComponentUpdate(nextProps, nextState) {
6440
- return !areEqual$1(this.props, nextProps) || shallowDiffers(this.state, nextState);
6438
+ return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
6441
6439
  }
6442
6440
 
6443
6441
  var LazyLoad = /*#__PURE__*/Object.freeze({
@@ -6446,7 +6444,7 @@ var LazyLoad = /*#__PURE__*/Object.freeze({
6446
6444
  FixedSizeList: FixedSizeList,
6447
6445
  VariableSizeGrid: VariableSizeGrid,
6448
6446
  VariableSizeList: VariableSizeList,
6449
- areEqual: areEqual$1,
6447
+ areEqual: areEqual,
6450
6448
  shouldComponentUpdate: shouldComponentUpdate
6451
6449
  });
6452
6450
 
@@ -9546,12 +9544,12 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9546
9544
  children: footerContent
9547
9545
  }) : isIconModel ? jsxRuntime.jsx(jsxRuntime.Fragment, {}) : jsxRuntime.jsxs("footer", {
9548
9546
  className: "modal-footer",
9549
- children: [jsxRuntime.jsx(Button$2, {
9547
+ children: [jsxRuntime.jsx(Button$1, {
9550
9548
  variant: "primary",
9551
9549
  className: "btn-cancel",
9552
9550
  onClick: cancelButtonProps?.onClick,
9553
9551
  label: cancelButtonProps?.text
9554
- }), jsxRuntime.jsx(Button$2, {
9552
+ }), jsxRuntime.jsx(Button$1, {
9555
9553
  variant: "secondary",
9556
9554
  className: "btn-proceed",
9557
9555
  label: proceedButtonProps?.text,
@@ -21055,12 +21053,12 @@ const CustomDatePicker = ({
21055
21053
  })]
21056
21054
  }), !dateOnly && jsxRuntime.jsxs("div", {
21057
21055
  className: "ff-date-picker-controls",
21058
- children: [jsxRuntime.jsx(Button$2, {
21056
+ children: [jsxRuntime.jsx(Button$1, {
21059
21057
  className: "ff-date-picker-button",
21060
21058
  variant: "secondary",
21061
21059
  onClick: handleCancel,
21062
21060
  label: "Cancel"
21063
- }), jsxRuntime.jsx(Button$2, {
21061
+ }), jsxRuntime.jsx(Button$1, {
21064
21062
  className: "ff-date-picker-button",
21065
21063
  variant: "primary",
21066
21064
  onClick: handleSave,
@@ -29868,7 +29866,7 @@ const Branches = ({
29868
29866
  })]
29869
29867
  }) : jsxRuntime.jsx("div", {
29870
29868
  className: "ff-connecting-branch-browser-button",
29871
- children: jsxRuntime.jsx(Button$2, {
29869
+ children: jsxRuntime.jsx(Button$1, {
29872
29870
  id: `ff-sequential-branch-add-${machineInstanceId}`,
29873
29871
  variant: "tertiary",
29874
29872
  label: addInstanceLabel,
@@ -30032,7 +30030,7 @@ const SequentialConnectingBranch = ({
30032
30030
  className: "ff-branch-arrow"
30033
30031
  })
30034
30032
  }), isMachineInstances && jsxRuntime.jsx(jsxRuntime.Fragment, {
30035
- children: jsxRuntime.jsx(Button$2, {
30033
+ children: jsxRuntime.jsx(Button$1, {
30036
30034
  variant: "tertiary",
30037
30035
  label: "Add Environment",
30038
30036
  size: "small",
@@ -30158,7 +30156,7 @@ const AttachmentButton = ({
30158
30156
  fontWeight: "semi-bold",
30159
30157
  lineHeight: '18px',
30160
30158
  children: label
30161
- }), (!showSelectedFiles || selectedFiles.length === 0) && jsxRuntime.jsx(Button$2, {
30159
+ }), (!showSelectedFiles || selectedFiles.length === 0) && jsxRuntime.jsx(Button$1, {
30162
30160
  variant: buttonVariant,
30163
30161
  label: buttonLabel,
30164
30162
  size: "medium",
@@ -37538,11 +37536,11 @@ const CreateVariableSlider = ({
37538
37536
  const FooterContent = () => {
37539
37537
  return jsxRuntime.jsxs("div", {
37540
37538
  className: "ff-create-slider-footer",
37541
- children: [jsxRuntime.jsx(Button$2, {
37539
+ children: [jsxRuntime.jsx(Button$1, {
37542
37540
  onClick: onClose,
37543
37541
  label: "Cancel",
37544
37542
  variant: "tertiary"
37545
- }), jsxRuntime.jsx(Button$2, {
37543
+ }), jsxRuntime.jsx(Button$1, {
37546
37544
  variant: "primary",
37547
37545
  label: "create",
37548
37546
  type: "submit",
@@ -37801,7 +37799,6 @@ const ProgressBar = ({
37801
37799
  });
37802
37800
  };
37803
37801
 
37804
- const areEqual = (prevProps, nextProps) => prevProps.selectedFile?.name === nextProps.selectedFile?.name;
37805
37802
  const ChooseFile = ({
37806
37803
  variant = 'primary',
37807
37804
  size = 'small',
@@ -37818,7 +37815,7 @@ const ChooseFile = ({
37818
37815
  handleCloseIcon
37819
37816
  }) => {
37820
37817
  return jsxRuntime.jsx("div", {
37821
- children: jsxRuntime.jsx(Button$2, {
37818
+ children: jsxRuntime.jsx(Button$1, {
37822
37819
  variant: variant,
37823
37820
  label: label,
37824
37821
  type: type,
@@ -37836,7 +37833,6 @@ const ChooseFile = ({
37836
37833
  })
37837
37834
  });
37838
37835
  };
37839
- var ChooseFile$1 = /*#__PURE__*/React.memo(ChooseFile, areEqual);
37840
37836
 
37841
37837
  var css_248z$8 = "/* Container Styling */\n.ff-script-switch-container {\n display: flex;\n background-color: var(--base-bg-color);\n height: 24px;\n width: 48px;\n border-radius: 6px;\n border: 1px solid var(--border-color);\n align-items: center;\n justify-content: center;\n /* Button Styling */\n /* Active Button */\n}\n.ff-script-switch-container .ff-script-switch-button {\n padding: 0.1px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n outline: none;\n transition: all 0.3s ease;\n /* Button Hover Effect */\n}\n.ff-script-switch-container .ff-script-switch-button:hover {\n background-color: var(--hover-color);\n color: var(--brand-color);\n}\n.ff-script-switch-container .ff-script-switch-button.active {\n background-color: var(--ff-line-number-bg);\n color: var(--base-bg-color);\n}";
37842
37838
  styleInject(css_248z$8);
@@ -51231,11 +51227,11 @@ const PopUpModal = ({
51231
51227
  })]
51232
51228
  }), jsxRuntime.jsxs("div", {
51233
51229
  className: 'warning_modal_footer_button',
51234
- children: [jsxRuntime.jsx(Button$2, {
51230
+ children: [jsxRuntime.jsx(Button$1, {
51235
51231
  variant: "secondary",
51236
51232
  label: firstButtonLabel,
51237
51233
  onClick: onClose
51238
- }), jsxRuntime.jsx(Button$2, {
51234
+ }), jsxRuntime.jsx(Button$1, {
51239
51235
  variant: buttonVariant || 'warning',
51240
51236
  label: secondButtonLabel,
51241
51237
  onClick: onContinue
@@ -53396,12 +53392,12 @@ exports.Avatar = Avatar;
53396
53392
  exports.BASE64_REGEX = BASE64_REGEX;
53397
53393
  exports.BINARY_NUMBER_REGEX = BINARY_NUMBER_REGEX;
53398
53394
  exports.BarChart = BarChart;
53399
- exports.Button = Button$2;
53395
+ exports.Button = Button$1;
53400
53396
  exports.CREDIT_CARD_REGEX = CREDIT_CARD_REGEX;
53401
53397
  exports.CURRENCY_GENERIC_REGEX = CURRENCY_GENERIC_REGEX;
53402
53398
  exports.Checkbox = Checkbox;
53403
53399
  exports.Chip = Chip;
53404
- exports.ChooseFile = ChooseFile$1;
53400
+ exports.ChooseFile = ChooseFile;
53405
53401
  exports.Col = Col;
53406
53402
  exports.Comments = Comments;
53407
53403
  exports.ConditionalDropdown = ConditionalDropdown;