@hexure/ui 1.8.1 → 1.8.3

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/dist/cjs/index.js CHANGED
@@ -2390,43 +2390,43 @@ const BulkActionBar = (_a) => {
2390
2390
  React.createElement(ErrorMsg, null, errorMsg))) : null));
2391
2391
  };
2392
2392
 
2393
- const Wrapper$e = styled.div `
2394
- background: #fff;
2395
- border-radius: 8px;
2396
- box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2397
- display: flex;
2398
- flex-direction: column;
2399
- gap: 4px;
2400
- max-height: ${props => props.$maxHeight || '312px'};
2401
- padding: 10px;
2402
- width: 200px;
2393
+ const Wrapper$e = styled.div `
2394
+ background: #fff;
2395
+ border-radius: 8px;
2396
+ box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
2397
+ display: flex;
2398
+ flex-direction: column;
2399
+ gap: 4px;
2400
+ max-height: ${props => props.$maxHeight || '312px'};
2401
+ padding: 10px;
2402
+ width: 200px;
2403
2403
  `;
2404
- const MenuItem = styled.div `
2405
- align-items: center;
2406
- border-radius: 8px;
2407
- border: 1px solid transparent;
2408
- display: flex;
2409
- gap: 8px;
2410
- height: 38px;
2411
- padding: 8px;
2412
- &:hover {
2413
- background: rgba(1, 147, 215, 0.1);
2414
- cursor: pointer;
2415
-
2416
- svg,
2417
- path {
2418
- fill: ${Colors.PRIMARY.Hex} !important;
2419
- }
2420
- }
2404
+ const MenuItem = styled.div `
2405
+ align-items: center;
2406
+ border-radius: 8px;
2407
+ border: 1px solid transparent;
2408
+ display: flex;
2409
+ gap: 8px;
2410
+ height: 38px;
2411
+ padding: 8px;
2412
+ &:hover {
2413
+ background: rgba(1, 147, 215, 0.1);
2414
+ cursor: pointer;
2415
+
2416
+ svg,
2417
+ path {
2418
+ fill: ${Colors.PRIMARY.Hex} !important;
2419
+ }
2420
+ }
2421
2421
  `;
2422
- const Title = styled.span `
2423
- font-family: Roboto;
2424
- font-size: 14px;
2425
- font-weight: 400;
2426
- height: auto;
2427
- letter-spacing: 0px;
2428
- line-height: 22px;
2429
- text-align: left;
2422
+ const Title = styled.span `
2423
+ font-family: Roboto;
2424
+ font-size: 14px;
2425
+ font-weight: 400;
2426
+ height: auto;
2427
+ letter-spacing: 0px;
2428
+ line-height: 22px;
2429
+ text-align: left;
2430
2430
  `;
2431
2431
  const MoreMenu = (_a) => {
2432
2432
  var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
@@ -2437,21 +2437,21 @@ const MoreMenu = (_a) => {
2437
2437
  })));
2438
2438
  };
2439
2439
 
2440
- const Wrapper$d = styled.div `
2441
- position: relative;
2442
- display: inline-block;
2440
+ const Wrapper$d = styled.div `
2441
+ position: relative;
2442
+ display: inline-block;
2443
2443
  `;
2444
- const StyledMoreMenu = styled(MoreMenu) `
2445
- position: absolute;
2446
- right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
2447
- left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
2448
- top: ${props => (props.$small ? '30px' : '40px')};
2449
- z-index: 10;
2444
+ const StyledMoreMenu = styled(MoreMenu) `
2445
+ position: absolute;
2446
+ right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
2447
+ left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
2448
+ top: ${props => (props.$small ? '30px' : '40px')};
2449
+ z-index: 10;
2450
2450
  `;
2451
- const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', }) => {
2451
+ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', }) => {
2452
2452
  const [show_menu, toggleMenu] = React.useState(false);
2453
2453
  return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
2454
- React.createElement(Button, { disabled: disabled, format: 'primary', icon: js.mdiDotsHorizontal, small: small }, label),
2454
+ React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
2455
2455
  show_menu ? (React.createElement(StyledMoreMenu, { "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
2456
2456
  };
2457
2457
 
@@ -3173,69 +3173,69 @@ const Field = (_a) => {
3173
3173
  validationText ? React.createElement(Validation, null, validationText) : null));
3174
3174
  };
3175
3175
 
3176
- const Dropzone = styled.div `
3177
- border-radius: 8px;
3178
- border-width: 1px;
3179
- border-style: dashed;
3180
- border-color: ${props => (props.$dragging ? Colors.PRIMARY.Hex : '#cccccc')};
3181
- background: ${props => (props.$dragging ? `rgba(${Colors.PRIMARY.Rgb}, 0.05)` : '#ffffff')};
3182
- cursor: copy;
3176
+ const Dropzone = styled.div `
3177
+ border-radius: 8px;
3178
+ border-width: 1px;
3179
+ border-style: dashed;
3180
+ border-color: ${props => (props.$dragging ? Colors.PRIMARY.Hex : '#cccccc')};
3181
+ background: ${props => (props.$dragging ? `rgba(${Colors.PRIMARY.Rgb}, 0.05)` : '#ffffff')};
3182
+ cursor: copy;
3183
3183
  `;
3184
- const IconWrapper$1 = styled.div `
3185
- width: 80px;
3186
- height: 80px;
3187
- border-radius: 40px;
3188
- background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
3189
- display: flex;
3190
- align-items: center;
3191
- justify-content: center;
3184
+ const IconWrapper$1 = styled.div `
3185
+ width: 80px;
3186
+ height: 80px;
3187
+ border-radius: 40px;
3188
+ background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
3189
+ display: flex;
3190
+ align-items: center;
3191
+ justify-content: center;
3192
3192
  `;
3193
- const StyledIcon$1 = styled(Icon) `
3194
- width: 40px !important;
3195
- height: 40px !important;
3196
-
3197
- > path {
3198
- fill: ${Colors.GRAY.Hex} !important;
3199
- }
3193
+ const StyledIcon$1 = styled(Icon) `
3194
+ width: 40px !important;
3195
+ height: 40px !important;
3196
+
3197
+ > path {
3198
+ fill: ${Colors.GRAY.Hex} !important;
3199
+ }
3200
3200
  `;
3201
- const ClickZone = styled.div `
3202
- margin: 40px 20px;
3203
- display: flex;
3204
- flex-direction: column;
3205
- align-items: center;
3206
- gap: 16px;
3201
+ const ClickZone = styled.div `
3202
+ margin: 40px 20px;
3203
+ display: flex;
3204
+ flex-direction: column;
3205
+ align-items: center;
3206
+ gap: 16px;
3207
3207
  `;
3208
- const Content$1 = styled.div `
3209
- display: flex;
3210
- flex-direction: column;
3211
- align-items: center;
3212
- gap: 2px;
3208
+ const Content$1 = styled.div `
3209
+ display: flex;
3210
+ flex-direction: column;
3211
+ align-items: center;
3212
+ gap: 2px;
3213
3213
  `;
3214
- const Files = styled.div `
3215
- display: flex;
3216
- flex-direction: column;
3217
- align-self: stretch;
3218
- gap: 10px;
3219
- margin: 20px;
3214
+ const Files = styled.div `
3215
+ display: flex;
3216
+ flex-direction: column;
3217
+ align-self: stretch;
3218
+ gap: 10px;
3219
+ margin: 20px;
3220
3220
  `;
3221
- const File = styled.div `
3222
- display: flex;
3223
- padding: 10px;
3224
- align-items: center;
3225
- justify-content: space-between;
3226
- gap: 10px;
3227
- border-radius: 4px;
3228
- border: 1px solid #cccccc;
3229
- background: #ffffff;
3221
+ const File = styled.div `
3222
+ display: flex;
3223
+ padding: 10px;
3224
+ align-items: center;
3225
+ justify-content: space-between;
3226
+ gap: 10px;
3227
+ border-radius: 4px;
3228
+ border: 1px solid #cccccc;
3229
+ background: #ffffff;
3230
3230
  `;
3231
- const Remove$1 = styled(Icon) `
3232
- width: 24px;
3233
- height: 24px;
3234
- cursor: pointer;
3235
-
3236
- > path {
3237
- fill: ${Colors.RED.Hex} !important;
3238
- }
3231
+ const Remove$1 = styled(Icon) `
3232
+ width: 24px;
3233
+ height: 24px;
3234
+ cursor: pointer;
3235
+
3236
+ > path {
3237
+ fill: ${Colors.RED.Hex} !important;
3238
+ }
3239
3239
  `;
3240
3240
  const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, message, validateFile, }) => {
3241
3241
  const inputRef = React.useRef(null);
@@ -3777,30 +3777,30 @@ const MultiSelect = (_a) => {
3777
3777
  showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
3778
3778
  };
3779
3779
 
3780
- const Wrapper$5 = styled.div `
3781
- display: flex;
3782
- padding: 16px 30px;
3783
- align-items: center;
3784
- gap: 20px;
3785
- align-self: stretch;
3786
- border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
3780
+ const Wrapper$5 = styled.div `
3781
+ display: flex;
3782
+ padding: 16px 30px;
3783
+ align-items: center;
3784
+ gap: 20px;
3785
+ align-self: stretch;
3786
+ border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
3787
3787
  `;
3788
- const Info = styled.div `
3789
- display: flex;
3790
- flex-direction: column;
3791
- align-items: flex-start;
3792
- gap: 4px;
3793
- flex: 1 0 0;
3788
+ const Info = styled.div `
3789
+ display: flex;
3790
+ flex-direction: column;
3791
+ align-items: flex-start;
3792
+ gap: 4px;
3793
+ flex: 1 0 0;
3794
3794
  `;
3795
- const Breadcrumbs = styled.div `
3796
- display: flex;
3797
- align-items: center;
3798
- gap: 4px;
3795
+ const Breadcrumbs = styled.div `
3796
+ display: flex;
3797
+ align-items: center;
3798
+ gap: 4px;
3799
3799
  `;
3800
- const Actions = styled.div `
3801
- display: flex;
3802
- align-items: center;
3803
- gap: 8px;
3800
+ const Actions = styled.div `
3801
+ display: flex;
3802
+ align-items: center;
3803
+ gap: 8px;
3804
3804
  `;
3805
3805
  const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
3806
3806
  const { menuItems = [], label = '', } = buttonMenu || {};