@uniformdev/design-system 20.40.0 → 20.42.0

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 (5) hide show
  1. package/dist/esm/index.js +83 -67
  2. package/dist/index.d.mts +4 -2
  3. package/dist/index.d.ts +4 -2
  4. package/dist/index.js +83 -67
  5. package/package.json +4 -4
package/dist/esm/index.js CHANGED
@@ -665,7 +665,7 @@ var cq = (size) => `@container (min-width: ${size})`;
665
665
  var prefersReducedMotion = (cssProp) => `@media (prefers-reduced-motion: ${cssProp})`;
666
666
 
667
667
  // src/components/Layout/styles/AsideAndSectionLayout.styles.ts
668
- var AsideAdnSectionLayoutContainer = (withSidebar) => css5`
668
+ var AsideAndSectionLayoutContainer = (withSidebar) => css5`
669
669
  display: grid;
670
670
  gap: var(--spacing-sm) 0;
671
671
  height: 100%;
@@ -674,19 +674,18 @@ var AsideAdnSectionLayoutContainer = (withSidebar) => css5`
674
674
  margin-left: ${withSidebar ? 0 : "var(--spacing-sm)"};
675
675
 
676
676
  ${mq("md")} {
677
- grid-template-columns: ${withSidebar ? "200px 1fr" : "1fr"};
677
+ grid-template-columns: ${withSidebar ? "fit-content(25%) 1fr" : "1fr"};
678
678
  }
679
679
  `;
680
- var AsideAdnSectionLayoutAsideStyles = css5`
680
+ var AsideAndSectionLayoutAsideStyles = css5`
681
681
  order: 1;
682
682
  padding: var(--spacing-base) 0 var(--spacing-base) var(--spacing-base);
683
683
 
684
684
  ${mq("md")} {
685
685
  order: 0;
686
- grid-template-columns: minmax(0, 200px) 1fr;
687
686
  }
688
687
  `;
689
- var AsideAdnSectionLayoutSectionStyles = css5`
688
+ var AsideAndSectionLayoutSectionStyles = css5`
690
689
  display: flex;
691
690
  background: var(--white);
692
691
  padding: var(--spacing-lg);
@@ -694,11 +693,11 @@ var AsideAdnSectionLayoutSectionStyles = css5`
694
693
  position: relative;
695
694
  overflow: hidden;
696
695
  `;
697
- var AsideAdnSectionLayoutSectionScrollable = css5`
696
+ var AsideAndSectionLayoutSectionScrollable = css5`
698
697
  overflow: auto;
699
698
  ${scrollbarStyles}
700
699
  `;
701
- var AsideAdnSectionLayoutStickyAsideStyles = css5`
700
+ var AsideAndSectionLayoutStickyAsideStyles = css5`
702
701
  position: sticky;
703
702
  top: var(--spacing-sm);
704
703
  `;
@@ -714,21 +713,21 @@ var AsideAndSectionLayout = ({
714
713
  "main",
715
714
  {
716
715
  css: [
717
- AsideAdnSectionLayoutContainer(Boolean(sidebar)),
718
- isStickyAside ? AsideAdnSectionLayoutSectionScrollable : null
716
+ AsideAndSectionLayoutContainer(Boolean(sidebar)),
717
+ isStickyAside ? AsideAndSectionLayoutSectionScrollable : null
719
718
  ],
720
719
  children: [
721
720
  sidebar ? /* @__PURE__ */ jsx5(
722
721
  "aside",
723
722
  {
724
723
  css: [
725
- AsideAdnSectionLayoutAsideStyles,
726
- isStickyAside ? AsideAdnSectionLayoutStickyAsideStyles : null
724
+ AsideAndSectionLayoutAsideStyles,
725
+ isStickyAside ? AsideAndSectionLayoutStickyAsideStyles : null
727
726
  ],
728
727
  children: sidebar
729
728
  }
730
729
  ) : null,
731
- /* @__PURE__ */ jsx5("section", { css: AsideAdnSectionLayoutSectionStyles, children })
730
+ /* @__PURE__ */ jsx5("section", { css: AsideAndSectionLayoutSectionStyles, children })
732
731
  ]
733
732
  }
734
733
  );
@@ -2275,7 +2274,15 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
2275
2274
  );
2276
2275
  return null;
2277
2276
  }
2278
- return /* @__PURE__ */ jsx16(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
2277
+ return /* @__PURE__ */ jsx16(
2278
+ IconComponent,
2279
+ {
2280
+ role: "img",
2281
+ size,
2282
+ ...otherProps,
2283
+ css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
2284
+ }
2285
+ );
2279
2286
  };
2280
2287
  var Icon = React3.memo(IconInner);
2281
2288
 
@@ -4008,10 +4015,11 @@ var DropdownStyleMenuTrigger = forwardRef2(
4008
4015
  const buttonVariantStyle = variant === "ghost" ? ghostButtonStyle : outlineButtonStyle;
4009
4016
  return /* @__PURE__ */ jsx23("button", { ref, ...buttonProps, css: [buttonStyle(bgColor), buttonVariantStyle], type: "button", children: /* @__PURE__ */ jsxs13(HorizontalRhythm, { align: "center", gap: "xs", children: [
4010
4017
  /* @__PURE__ */ jsx23("div", { children }),
4011
- /* @__PURE__ */ jsx23(CgChevronDown, { iconColor: "currentColor", size: "1rem" })
4018
+ /* @__PURE__ */ jsx23(Icon, { icon: CgChevronDown, iconColor: "currentColor", size: "1rem" })
4012
4019
  ] }) });
4013
4020
  }
4014
4021
  );
4022
+ DropdownStyleMenuTrigger.displayName = "DropdownStyleMenuTrigger";
4015
4023
 
4016
4024
  // src/components/Menu/Menu.tsx
4017
4025
  import {
@@ -7103,12 +7111,13 @@ var Counter = ({
7103
7111
  if (typeof count === "undefined") {
7104
7112
  return null;
7105
7113
  }
7106
- const isTripleDigits = count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
7114
+ const isNumber = typeof count === "number";
7115
+ const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ jsxs39("span", { css: counterTripleValue, title: `${count}`, children: [
7107
7116
  "99",
7108
7117
  /* @__PURE__ */ jsx60(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
7109
7118
  ] }) : count;
7110
7119
  const formatCount = count === 0 ? /* @__PURE__ */ jsx60("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
7111
- return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
7120
+ return /* @__PURE__ */ jsxs39("div", { css: [counterContainer(bgColor, Boolean(icon || !isNumber)), sizeStyles[size]], ...props, children: [
7112
7121
  icon ? /* @__PURE__ */ jsx60(
7113
7122
  "span",
7114
7123
  {
@@ -7641,7 +7650,6 @@ var descriptionListLabelStyles = css51`
7641
7650
  `;
7642
7651
  var descriptionListValueStyles = css51`
7643
7652
  display: flex;
7644
- align-items: center;
7645
7653
  margin: 0;
7646
7654
  `;
7647
7655
 
@@ -16269,55 +16277,63 @@ var RichText = ({
16269
16277
  onInsertAsset
16270
16278
  }
16271
16279
  ),
16272
- /* @__PURE__ */ jsxs90("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
16273
- /* @__PURE__ */ jsxs90(
16274
- "div",
16275
- {
16276
- css: editorContainer,
16277
- className: editorInputWrapperClassName,
16278
- ref: onEditorContainerRef,
16279
- "data-testid": "value-container",
16280
- children: [
16281
- /* @__PURE__ */ jsx134(
16282
- RichTextPlugin,
16283
- {
16284
- contentEditable: /* @__PURE__ */ jsx134(ContentEditable, { css: editorInput, className: editorInputClassName }),
16285
- placeholder: /* @__PURE__ */ jsx134("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
16286
- ErrorBoundary: LexicalErrorBoundary
16287
- }
16288
- ),
16289
- /* @__PURE__ */ jsx134(ListPlugin, {}),
16290
- /* @__PURE__ */ jsx134(ListIndentPlugin, { maxDepth: 4 }),
16291
- /* @__PURE__ */ jsx134(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
16292
- /* @__PURE__ */ jsx134("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(
16293
- TableActionMenuPlugin,
16294
- {
16295
- positioningAnchorEl: editorContainerRef,
16296
- menuPortalEl: portalContainerRef
16297
- }
16298
- ) : null }),
16299
- editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
16300
- readOnly ? null : /* @__PURE__ */ jsx134(HistoryPlugin, {}),
16301
- /* @__PURE__ */ jsx134(DisableStylesPlugin, {}),
16302
- /* @__PURE__ */ jsx134(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
16303
- ]
16304
- }
16305
- ),
16306
- /* @__PURE__ */ jsx134(Fragment18, { children }),
16307
- editorContainerRef ? /* @__PURE__ */ jsx134(
16308
- LinkNodePlugin,
16309
- {
16310
- onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
16311
- getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
16312
- var _a, _b;
16313
- return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
16314
- } : void 0,
16315
- positioningAnchorEl: editorContainerRef
16316
- }
16317
- ) : null,
16318
- /* @__PURE__ */ jsx134(TableSelectionPlugin_default, {}),
16319
- /* @__PURE__ */ jsx134(ImprovedAssetSelectionPlugin_default, {})
16320
- ] })
16280
+ /* @__PURE__ */ jsxs90(
16281
+ "div",
16282
+ {
16283
+ css: editorContainerWrapper,
16284
+ "data-editor-container-wrapper": true,
16285
+ ref: onPortalContainerRef,
16286
+ children: [
16287
+ /* @__PURE__ */ jsxs90(
16288
+ "div",
16289
+ {
16290
+ css: editorContainer,
16291
+ className: editorInputWrapperClassName,
16292
+ ref: onEditorContainerRef,
16293
+ "data-testid": "value-container",
16294
+ children: [
16295
+ /* @__PURE__ */ jsx134(
16296
+ RichTextPlugin,
16297
+ {
16298
+ contentEditable: /* @__PURE__ */ jsx134(ContentEditable, { css: editorInput, className: editorInputClassName }),
16299
+ placeholder: /* @__PURE__ */ jsx134("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
16300
+ ErrorBoundary: LexicalErrorBoundary
16301
+ }
16302
+ ),
16303
+ /* @__PURE__ */ jsx134(ListPlugin, {}),
16304
+ /* @__PURE__ */ jsx134(ListIndentPlugin, { maxDepth: 4 }),
16305
+ /* @__PURE__ */ jsx134(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
16306
+ /* @__PURE__ */ jsx134("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(
16307
+ TableActionMenuPlugin,
16308
+ {
16309
+ positioningAnchorEl: editorContainerRef,
16310
+ menuPortalEl: portalContainerRef
16311
+ }
16312
+ ) : null }),
16313
+ editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
16314
+ readOnly ? null : /* @__PURE__ */ jsx134(HistoryPlugin, {}),
16315
+ /* @__PURE__ */ jsx134(DisableStylesPlugin, {}),
16316
+ /* @__PURE__ */ jsx134(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
16317
+ ]
16318
+ }
16319
+ ),
16320
+ /* @__PURE__ */ jsx134(Fragment18, { children }),
16321
+ editorContainerRef ? /* @__PURE__ */ jsx134(
16322
+ LinkNodePlugin,
16323
+ {
16324
+ onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
16325
+ getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
16326
+ var _a, _b;
16327
+ return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
16328
+ } : void 0,
16329
+ positioningAnchorEl: editorContainerRef
16330
+ }
16331
+ ) : null,
16332
+ /* @__PURE__ */ jsx134(TableSelectionPlugin_default, {}),
16333
+ /* @__PURE__ */ jsx134(ImprovedAssetSelectionPlugin_default, {})
16334
+ ]
16335
+ }
16336
+ )
16321
16337
  ] });
16322
16338
  };
16323
16339
 
@@ -16959,7 +16975,7 @@ var lightFadingOut = keyframes5`
16959
16975
  `;
16960
16976
  var skeletonStyles = css106`
16961
16977
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
16962
- background-color: var(--gray-900);
16978
+ background-color: var(--gray-500);
16963
16979
  `;
16964
16980
 
16965
16981
  // src/components/Skeleton/Skeleton.tsx
package/dist/index.d.mts CHANGED
@@ -1502,8 +1502,10 @@ declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProp
1502
1502
  type CounterBgColors = 'var(--white)' | 'var(--gray-50)' | 'var(--accent-light)' | 'var(--accent-dark)' | 'transparent';
1503
1503
  type CounterIconColors = 'auto' | 'var(--utility-caution-icon)' | 'var(--utility-danger-icon)' | 'var(--utility-info-icon)' | 'var(--utility-success-icon)' | 'red';
1504
1504
  type CounterProps = {
1505
- /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
1506
- count: number | undefined;
1505
+ /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear.
1506
+ * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
1507
+ */
1508
+ count: number | string | undefined;
1507
1509
  /** sets the background color
1508
1510
  * @default 'transparent'
1509
1511
  */
package/dist/index.d.ts CHANGED
@@ -1502,8 +1502,10 @@ declare const MultilineChip: ({ children, onClick, ...props }: MultilineChipProp
1502
1502
  type CounterBgColors = 'var(--white)' | 'var(--gray-50)' | 'var(--accent-light)' | 'var(--accent-dark)' | 'transparent';
1503
1503
  type CounterIconColors = 'auto' | 'var(--utility-caution-icon)' | 'var(--utility-danger-icon)' | 'var(--utility-info-icon)' | 'var(--utility-success-icon)' | 'red';
1504
1504
  type CounterProps = {
1505
- /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear. */
1506
- count: number | undefined;
1505
+ /** sets the count value, a 0 will show a dot instead of a number. Undefined will cause the counter to disappear.
1506
+ * String can be used for formatting purposes, e.g. "1.2k" or regionalized number, e.g. "1,200"
1507
+ */
1508
+ count: number | string | undefined;
1507
1509
  /** sets the background color
1508
1510
  * @default 'transparent'
1509
1511
  */
package/dist/index.js CHANGED
@@ -2337,7 +2337,7 @@ var cq = (size) => `@container (min-width: ${size})`;
2337
2337
  var prefersReducedMotion = (cssProp) => `@media (prefers-reduced-motion: ${cssProp})`;
2338
2338
 
2339
2339
  // src/components/Layout/styles/AsideAndSectionLayout.styles.ts
2340
- var AsideAdnSectionLayoutContainer = (withSidebar) => import_react6.css`
2340
+ var AsideAndSectionLayoutContainer = (withSidebar) => import_react6.css`
2341
2341
  display: grid;
2342
2342
  gap: var(--spacing-sm) 0;
2343
2343
  height: 100%;
@@ -2346,19 +2346,18 @@ var AsideAdnSectionLayoutContainer = (withSidebar) => import_react6.css`
2346
2346
  margin-left: ${withSidebar ? 0 : "var(--spacing-sm)"};
2347
2347
 
2348
2348
  ${mq("md")} {
2349
- grid-template-columns: ${withSidebar ? "200px 1fr" : "1fr"};
2349
+ grid-template-columns: ${withSidebar ? "fit-content(25%) 1fr" : "1fr"};
2350
2350
  }
2351
2351
  `;
2352
- var AsideAdnSectionLayoutAsideStyles = import_react6.css`
2352
+ var AsideAndSectionLayoutAsideStyles = import_react6.css`
2353
2353
  order: 1;
2354
2354
  padding: var(--spacing-base) 0 var(--spacing-base) var(--spacing-base);
2355
2355
 
2356
2356
  ${mq("md")} {
2357
2357
  order: 0;
2358
- grid-template-columns: minmax(0, 200px) 1fr;
2359
2358
  }
2360
2359
  `;
2361
- var AsideAdnSectionLayoutSectionStyles = import_react6.css`
2360
+ var AsideAndSectionLayoutSectionStyles = import_react6.css`
2362
2361
  display: flex;
2363
2362
  background: var(--white);
2364
2363
  padding: var(--spacing-lg);
@@ -2366,11 +2365,11 @@ var AsideAdnSectionLayoutSectionStyles = import_react6.css`
2366
2365
  position: relative;
2367
2366
  overflow: hidden;
2368
2367
  `;
2369
- var AsideAdnSectionLayoutSectionScrollable = import_react6.css`
2368
+ var AsideAndSectionLayoutSectionScrollable = import_react6.css`
2370
2369
  overflow: auto;
2371
2370
  ${scrollbarStyles}
2372
2371
  `;
2373
- var AsideAdnSectionLayoutStickyAsideStyles = import_react6.css`
2372
+ var AsideAndSectionLayoutStickyAsideStyles = import_react6.css`
2374
2373
  position: sticky;
2375
2374
  top: var(--spacing-sm);
2376
2375
  `;
@@ -2386,21 +2385,21 @@ var AsideAndSectionLayout = ({
2386
2385
  "main",
2387
2386
  {
2388
2387
  css: [
2389
- AsideAdnSectionLayoutContainer(Boolean(sidebar)),
2390
- isStickyAside ? AsideAdnSectionLayoutSectionScrollable : null
2388
+ AsideAndSectionLayoutContainer(Boolean(sidebar)),
2389
+ isStickyAside ? AsideAndSectionLayoutSectionScrollable : null
2391
2390
  ],
2392
2391
  children: [
2393
2392
  sidebar ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
2394
2393
  "aside",
2395
2394
  {
2396
2395
  css: [
2397
- AsideAdnSectionLayoutAsideStyles,
2398
- isStickyAside ? AsideAdnSectionLayoutStickyAsideStyles : null
2396
+ AsideAndSectionLayoutAsideStyles,
2397
+ isStickyAside ? AsideAndSectionLayoutStickyAsideStyles : null
2399
2398
  ],
2400
2399
  children: sidebar
2401
2400
  }
2402
2401
  ) : null,
2403
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { css: AsideAdnSectionLayoutSectionStyles, children })
2402
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { css: AsideAndSectionLayoutSectionStyles, children })
2404
2403
  ]
2405
2404
  }
2406
2405
  );
@@ -3989,7 +3988,15 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
3989
3988
  );
3990
3989
  return null;
3991
3990
  }
3992
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
3991
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
3992
+ IconComponent,
3993
+ {
3994
+ role: "img",
3995
+ size,
3996
+ ...otherProps,
3997
+ css: [IconImg, iconColor ? functionalColors : void 0, customColor[iconColor]]
3998
+ }
3999
+ );
3993
4000
  };
3994
4001
  var Icon = import_react24.default.memo(IconInner);
3995
4002
 
@@ -5739,10 +5746,11 @@ var DropdownStyleMenuTrigger = (0, import_react31.forwardRef)(
5739
5746
  const buttonVariantStyle = variant === "ghost" ? ghostButtonStyle : outlineButtonStyle;
5740
5747
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { ref, ...buttonProps, css: [buttonStyle(bgColor), buttonVariantStyle], type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
5741
5748
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children }),
5742
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_CgChevronDown2.CgChevronDown, { iconColor: "currentColor", size: "1rem" })
5749
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { icon: import_CgChevronDown2.CgChevronDown, iconColor: "currentColor", size: "1rem" })
5743
5750
  ] }) });
5744
5751
  }
5745
5752
  );
5753
+ DropdownStyleMenuTrigger.displayName = "DropdownStyleMenuTrigger";
5746
5754
 
5747
5755
  // src/components/Menu/Menu.tsx
5748
5756
  init_emotion_jsx_shim();
@@ -8900,12 +8908,13 @@ var Counter = ({
8900
8908
  if (typeof count === "undefined") {
8901
8909
  return null;
8902
8910
  }
8903
- const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
8911
+ const isNumber = typeof count === "number";
8912
+ const isTripleDigits = isNumber && count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
8904
8913
  "99",
8905
8914
  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
8906
8915
  ] }) : count;
8907
8916
  const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
8908
- return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
8917
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon || !isNumber)), sizeStyles[size]], ...props, children: [
8909
8918
  icon ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
8910
8919
  "span",
8911
8920
  {
@@ -9440,7 +9449,6 @@ var descriptionListLabelStyles = import_react75.css`
9440
9449
  `;
9441
9450
  var descriptionListValueStyles = import_react75.css`
9442
9451
  display: flex;
9443
- align-items: center;
9444
9452
  margin: 0;
9445
9453
  `;
9446
9454
 
@@ -18132,55 +18140,63 @@ var RichText = ({
18132
18140
  onInsertAsset
18133
18141
  }
18134
18142
  ),
18135
- /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
18136
- /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
18137
- "div",
18138
- {
18139
- css: editorContainer,
18140
- className: editorInputWrapperClassName,
18141
- ref: onEditorContainerRef,
18142
- "data-testid": "value-container",
18143
- children: [
18144
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
18145
- import_LexicalRichTextPlugin.RichTextPlugin,
18146
- {
18147
- contentEditable: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
18148
- placeholder: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
18149
- ErrorBoundary: import_LexicalErrorBoundary.default
18150
- }
18151
- ),
18152
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalListPlugin.ListPlugin, {}),
18153
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ListIndentPlugin, { maxDepth: 4 }),
18154
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
18155
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
18156
- TableActionMenuPlugin,
18157
- {
18158
- positioningAnchorEl: editorContainerRef,
18159
- menuPortalEl: portalContainerRef
18160
- }
18161
- ) : null }),
18162
- editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
18163
- readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
18164
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DisableStylesPlugin, {}),
18165
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
18166
- ]
18167
- }
18168
- ),
18169
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, { children }),
18170
- editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
18171
- LinkNodePlugin,
18172
- {
18173
- onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
18174
- getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
18175
- var _a, _b;
18176
- return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
18177
- } : void 0,
18178
- positioningAnchorEl: editorContainerRef
18179
- }
18180
- ) : null,
18181
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableSelectionPlugin_default, {}),
18182
- /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ImprovedAssetSelectionPlugin_default, {})
18183
- ] })
18143
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
18144
+ "div",
18145
+ {
18146
+ css: editorContainerWrapper,
18147
+ "data-editor-container-wrapper": true,
18148
+ ref: onPortalContainerRef,
18149
+ children: [
18150
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
18151
+ "div",
18152
+ {
18153
+ css: editorContainer,
18154
+ className: editorInputWrapperClassName,
18155
+ ref: onEditorContainerRef,
18156
+ "data-testid": "value-container",
18157
+ children: [
18158
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
18159
+ import_LexicalRichTextPlugin.RichTextPlugin,
18160
+ {
18161
+ contentEditable: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
18162
+ placeholder: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
18163
+ ErrorBoundary: import_LexicalErrorBoundary.default
18164
+ }
18165
+ ),
18166
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalListPlugin.ListPlugin, {}),
18167
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ListIndentPlugin, { maxDepth: 4 }),
18168
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalTablePlugin.TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
18169
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
18170
+ TableActionMenuPlugin,
18171
+ {
18172
+ positioningAnchorEl: editorContainerRef,
18173
+ menuPortalEl: portalContainerRef
18174
+ }
18175
+ ) : null }),
18176
+ editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
18177
+ readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
18178
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DisableStylesPlugin, {}),
18179
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
18180
+ ]
18181
+ }
18182
+ ),
18183
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_jsx_runtime134.Fragment, { children }),
18184
+ editorContainerRef ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
18185
+ LinkNodePlugin,
18186
+ {
18187
+ onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
18188
+ getBoundPath: (variables == null ? void 0 : variables.bindVariables) ? (path) => {
18189
+ var _a, _b;
18190
+ return (_b = (_a = variables.bindVariables) == null ? void 0 : _a.call(variables, path)) != null ? _b : path;
18191
+ } : void 0,
18192
+ positioningAnchorEl: editorContainerRef
18193
+ }
18194
+ ) : null,
18195
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TableSelectionPlugin_default, {}),
18196
+ /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(ImprovedAssetSelectionPlugin_default, {})
18197
+ ]
18198
+ }
18199
+ )
18184
18200
  ] });
18185
18201
  };
18186
18202
 
@@ -18838,7 +18854,7 @@ var lightFadingOut = import_react176.keyframes`
18838
18854
  `;
18839
18855
  var skeletonStyles = import_react176.css`
18840
18856
  animation: ${lightFadingOut} 1s ease-out infinite alternate;
18841
- background-color: var(--gray-900);
18857
+ background-color: var(--gray-500);
18842
18858
  `;
18843
18859
 
18844
18860
  // src/components/Skeleton/Skeleton.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/design-system",
3
- "version": "20.40.0",
3
+ "version": "20.42.0",
4
4
  "description": "Uniform design system components",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "exports": {
@@ -38,8 +38,8 @@
38
38
  "@storybook/theming": "^8.3.3",
39
39
  "@types/react": "18.3.24",
40
40
  "@types/react-dom": "18.3.7",
41
- "@uniformdev/canvas": "^20.40.0",
42
- "@uniformdev/richtext": "^20.40.0",
41
+ "@uniformdev/canvas": "^20.42.0",
42
+ "@uniformdev/richtext": "^20.42.0",
43
43
  "@vitest/coverage-v8": "3.2.4",
44
44
  "autoprefixer": "10.4.21",
45
45
  "hygen": "6.2.11",
@@ -93,5 +93,5 @@
93
93
  "publishConfig": {
94
94
  "access": "public"
95
95
  },
96
- "gitHead": "5a63373f91355d8865feac0d3fc11be59a5e38bd"
96
+ "gitHead": "2002a4f5112b8796179d6d9fae5df26a45f8ea1d"
97
97
  }