@uniformdev/design-system 19.57.0 → 19.58.1-alpha.16

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 +62 -50
  2. package/dist/index.d.mts +8 -3
  3. package/dist/index.d.ts +8 -3
  4. package/dist/index.js +62 -50
  5. package/package.json +6 -6
package/dist/esm/index.js CHANGED
@@ -2,7 +2,7 @@ import "./chunk-6NI3O2RY.js";
2
2
 
3
3
  // src/styles/Theme.tsx
4
4
  import { Fragment, jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
5
- var Theme = ({ disableReset = false }) => {
5
+ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
6
6
  return /* @__PURE__ */ jsxs(Fragment, { children: [
7
7
  /* @__PURE__ */ jsx2(
8
8
  "link",
@@ -68,7 +68,7 @@ var Theme = ({ disableReset = false }) => {
68
68
  --tertiary-action-hover: var(--gray-600);
69
69
  --tertiary-action-active: var(--gray-50);
70
70
  --tertiary-action-disabled: var(--gray-400);
71
-
71
+
72
72
  /* accent dark */
73
73
  --accent-dark: var(--purple-rain-500);
74
74
  --accent-dark-hover: var(--purple-rain-400);
@@ -193,64 +193,72 @@ var Theme = ({ disableReset = false }) => {
193
193
  --duration-fast: 0.25s;
194
194
  --duration-xfast: 0.15s;
195
195
  }
196
-
197
- html,
198
- body {
199
- color: var(--brand-secondary-1);
200
- font-family: var(--ff-base);
201
- scroll-behavior: smooth;
202
- font-weight: var(--fw-regular);
203
- line-height: 1.5;
196
+ `
204
197
  }
198
+ }
199
+ ),
200
+ disableGlobalReset ? null : /* @__PURE__ */ jsx2(
201
+ "style",
202
+ {
203
+ dangerouslySetInnerHTML: {
204
+ __html: `
205
+ html,
206
+ body {
207
+ color: var(--brand-secondary-1);
208
+ font-family: var(--ff-base);
209
+ scroll-behavior: smooth;
210
+ font-weight: var(--fw-regular);
211
+ line-height: 1.5;
212
+ }
205
213
 
206
- li {
207
- line-height: 1.5rem;
208
- }
214
+ li {
215
+ line-height: 1.5rem;
216
+ }
209
217
 
210
- a, button {
211
- cursor: pointer;
212
- }
218
+ a, button {
219
+ cursor: pointer;
220
+ }
213
221
 
214
- fieldset {
215
- border: 0;
216
- padding: 0;
217
- margin: 0;
218
- min-width: 0;
219
- }
222
+ fieldset {
223
+ border: 0;
224
+ padding: 0;
225
+ margin: 0;
226
+ min-width: 0;
227
+ }
220
228
 
221
- legend {
222
- margin: 0;
223
- padding: 0;
224
- }
229
+ legend {
230
+ margin: 0;
231
+ padding: 0;
232
+ }
225
233
 
226
- button, input, optgroup, select, textarea {
227
- font-family: inherit;
228
- font-size: inherit;
229
- color: inherit;
230
- line-height: 1.25rem;
231
- }
234
+ button, input, optgroup, select, textarea {
235
+ font-family: inherit;
236
+ font-size: inherit;
237
+ color: inherit;
238
+ line-height: 1.25rem;
239
+ }
232
240
 
233
- [role=button], button {
234
- cursor: pointer;
235
- }
241
+ [role=button], button {
242
+ cursor: pointer;
243
+ }
236
244
 
237
- audio, canvas, embed, iframe, img, object, svg, video {
238
- display: block;
239
- vertical-align: middle;
240
- }
245
+ audio, canvas, embed, iframe, img, object, svg, video {
246
+ display: block;
247
+ vertical-align: middle;
248
+ }
241
249
 
242
- pre {
243
- white-space: pre;
244
- }
250
+ pre {
251
+ white-space: pre;
252
+ }
245
253
 
246
- *:where(ul, ol) {
247
- all: unset;
248
- }
254
+ *:where(ul, ol) {
255
+ all: unset;
256
+ }
249
257
 
250
- ul, ol {
251
- list-style: none;
252
- }
253
- `
258
+ ul, ol {
259
+ list-style: none;
260
+ }
261
+ `
254
262
  }
255
263
  }
256
264
  )
@@ -386,7 +394,7 @@ var buttonAccentAltDarkOutline = css`
386
394
  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
387
395
 
388
396
  &:hover {
389
- color: var(--primary-action-hover);
397
+ color: var(--accent-alt-dark-hover);
390
398
  }
391
399
 
392
400
  &:disabled {
@@ -11654,6 +11662,7 @@ var Menu = ({
11654
11662
  BaseMenu,
11655
11663
  {
11656
11664
  ...menuState,
11665
+ "data-auto-resize-opt-in": true,
11657
11666
  focusable: false,
11658
11667
  "aria-label": menuLabel,
11659
11668
  ...!isRendered ? { unstable_popoverStyles: { position: "absolute", opacity: "0" } } : void 0,
@@ -16769,6 +16778,9 @@ var ParameterShell = ({
16769
16778
  {
16770
16779
  css: [
16771
16780
  inputMenu,
16781
+ css80`
16782
+ opacity: var(--opacity-100);
16783
+ `,
16772
16784
  menuItems ? css80`
16773
16785
  right: var(--spacing-md);
16774
16786
  ` : void 0
package/dist/index.d.mts CHANGED
@@ -1,10 +1,10 @@
1
+ import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
1
2
  import * as React$1 from 'react';
2
3
  import React__default, { RefObject, HTMLAttributes, ReactNode, ImgHTMLAttributes, SVGProps, CSSProperties, FocusEventHandler, ChangeEvent, HtmlHTMLAttributes } from 'react';
3
4
  import { GroupBase } from 'react-select';
4
5
  export { ActionMeta, FormatOptionLabelContext, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, GroupHeadingProps, GroupProps, MenuListProps, MenuPlacement, MultiValue, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, OnChangeValue, OptionContext, OptionProps, Options, OptionsOrGroups } from 'react-select';
5
6
  import * as _emotion_react from '@emotion/react';
6
7
  import { SerializedStyles } from '@emotion/react';
7
- import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
8
8
  import { LottieComponentProps } from 'lottie-react';
9
9
  import { ButtonProps as ButtonProps$1 } from 'reakit/Button';
10
10
  import { MenuProps as MenuProps$1, MenuItemHTMLProps } from 'reakit';
@@ -27,15 +27,20 @@ export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/ric
27
27
 
28
28
  /** @todo: line 144 onwards will be brought into a title, paragraph, list and link components */
29
29
  type ThemeProps = {
30
- /** sets whether to disable a provided reset stylesheet or not
30
+ /**
31
+ * Sets whether to disable a provided "modern-normalizer" reset stylesheet
31
32
  * @default false
32
33
  */
33
34
  disableReset?: boolean;
35
+ /**
36
+ * Sets whether to disable global Uniform reset styles
37
+ */
38
+ disableGlobalReset?: boolean;
34
39
  };
35
40
  /**
36
41
  * Uniform CSS Variables, font provider and optional reset stylesheet
37
42
  * @example <Theme disableReset={true} /> */
38
- declare const Theme: React__default.ElementType;
43
+ declare const Theme: ({ disableReset, disableGlobalReset }: ThemeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
39
44
 
40
45
  /** Breakpoint label values */
41
46
  type BreakpointSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
package/dist/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
+ import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
1
2
  import * as React$1 from 'react';
2
3
  import React__default, { RefObject, HTMLAttributes, ReactNode, ImgHTMLAttributes, SVGProps, CSSProperties, FocusEventHandler, ChangeEvent, HtmlHTMLAttributes } from 'react';
3
4
  import { GroupBase } from 'react-select';
4
5
  export { ActionMeta, FormatOptionLabelContext, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, GroupHeadingProps, GroupProps, MenuListProps, MenuPlacement, MultiValue, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, OnChangeValue, OptionContext, OptionProps, Options, OptionsOrGroups } from 'react-select';
5
6
  import * as _emotion_react from '@emotion/react';
6
7
  import { SerializedStyles } from '@emotion/react';
7
- import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
8
8
  import { LottieComponentProps } from 'lottie-react';
9
9
  import { ButtonProps as ButtonProps$1 } from 'reakit/Button';
10
10
  import { MenuProps as MenuProps$1, MenuItemHTMLProps } from 'reakit';
@@ -27,15 +27,20 @@ export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/ric
27
27
 
28
28
  /** @todo: line 144 onwards will be brought into a title, paragraph, list and link components */
29
29
  type ThemeProps = {
30
- /** sets whether to disable a provided reset stylesheet or not
30
+ /**
31
+ * Sets whether to disable a provided "modern-normalizer" reset stylesheet
31
32
  * @default false
32
33
  */
33
34
  disableReset?: boolean;
35
+ /**
36
+ * Sets whether to disable global Uniform reset styles
37
+ */
38
+ disableGlobalReset?: boolean;
34
39
  };
35
40
  /**
36
41
  * Uniform CSS Variables, font provider and optional reset stylesheet
37
42
  * @example <Theme disableReset={true} /> */
38
- declare const Theme: React__default.ElementType;
43
+ declare const Theme: ({ disableReset, disableGlobalReset }: ThemeProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
39
44
 
40
45
  /** Breakpoint label values */
41
46
  type BreakpointSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
package/dist/index.js CHANGED
@@ -1570,7 +1570,7 @@ init_emotion_jsx_shim();
1570
1570
  // src/styles/Theme.tsx
1571
1571
  init_emotion_jsx_shim();
1572
1572
  var import_jsx_runtime = require("@emotion/react/jsx-runtime");
1573
- var Theme = ({ disableReset = false }) => {
1573
+ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
1574
1574
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1575
1575
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1576
1576
  "link",
@@ -1636,7 +1636,7 @@ var Theme = ({ disableReset = false }) => {
1636
1636
  --tertiary-action-hover: var(--gray-600);
1637
1637
  --tertiary-action-active: var(--gray-50);
1638
1638
  --tertiary-action-disabled: var(--gray-400);
1639
-
1639
+
1640
1640
  /* accent dark */
1641
1641
  --accent-dark: var(--purple-rain-500);
1642
1642
  --accent-dark-hover: var(--purple-rain-400);
@@ -1761,64 +1761,72 @@ var Theme = ({ disableReset = false }) => {
1761
1761
  --duration-fast: 0.25s;
1762
1762
  --duration-xfast: 0.15s;
1763
1763
  }
1764
-
1765
- html,
1766
- body {
1767
- color: var(--brand-secondary-1);
1768
- font-family: var(--ff-base);
1769
- scroll-behavior: smooth;
1770
- font-weight: var(--fw-regular);
1771
- line-height: 1.5;
1764
+ `
1772
1765
  }
1766
+ }
1767
+ ),
1768
+ disableGlobalReset ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1769
+ "style",
1770
+ {
1771
+ dangerouslySetInnerHTML: {
1772
+ __html: `
1773
+ html,
1774
+ body {
1775
+ color: var(--brand-secondary-1);
1776
+ font-family: var(--ff-base);
1777
+ scroll-behavior: smooth;
1778
+ font-weight: var(--fw-regular);
1779
+ line-height: 1.5;
1780
+ }
1773
1781
 
1774
- li {
1775
- line-height: 1.5rem;
1776
- }
1782
+ li {
1783
+ line-height: 1.5rem;
1784
+ }
1777
1785
 
1778
- a, button {
1779
- cursor: pointer;
1780
- }
1786
+ a, button {
1787
+ cursor: pointer;
1788
+ }
1781
1789
 
1782
- fieldset {
1783
- border: 0;
1784
- padding: 0;
1785
- margin: 0;
1786
- min-width: 0;
1787
- }
1790
+ fieldset {
1791
+ border: 0;
1792
+ padding: 0;
1793
+ margin: 0;
1794
+ min-width: 0;
1795
+ }
1788
1796
 
1789
- legend {
1790
- margin: 0;
1791
- padding: 0;
1792
- }
1797
+ legend {
1798
+ margin: 0;
1799
+ padding: 0;
1800
+ }
1793
1801
 
1794
- button, input, optgroup, select, textarea {
1795
- font-family: inherit;
1796
- font-size: inherit;
1797
- color: inherit;
1798
- line-height: 1.25rem;
1799
- }
1802
+ button, input, optgroup, select, textarea {
1803
+ font-family: inherit;
1804
+ font-size: inherit;
1805
+ color: inherit;
1806
+ line-height: 1.25rem;
1807
+ }
1800
1808
 
1801
- [role=button], button {
1802
- cursor: pointer;
1803
- }
1809
+ [role=button], button {
1810
+ cursor: pointer;
1811
+ }
1804
1812
 
1805
- audio, canvas, embed, iframe, img, object, svg, video {
1806
- display: block;
1807
- vertical-align: middle;
1808
- }
1813
+ audio, canvas, embed, iframe, img, object, svg, video {
1814
+ display: block;
1815
+ vertical-align: middle;
1816
+ }
1809
1817
 
1810
- pre {
1811
- white-space: pre;
1812
- }
1818
+ pre {
1819
+ white-space: pre;
1820
+ }
1813
1821
 
1814
- *:where(ul, ol) {
1815
- all: unset;
1816
- }
1822
+ *:where(ul, ol) {
1823
+ all: unset;
1824
+ }
1817
1825
 
1818
- ul, ol {
1819
- list-style: none;
1820
- }
1821
- `
1826
+ ul, ol {
1827
+ list-style: none;
1828
+ }
1829
+ `
1822
1830
  }
1823
1831
  }
1824
1832
  )
@@ -1962,7 +1970,7 @@ var buttonAccentAltDarkOutline = import_react3.css`
1962
1970
  transition: box-shadow var(--duration-fast) var(--timing-ease-out);
1963
1971
 
1964
1972
  &:hover {
1965
- color: var(--primary-action-hover);
1973
+ color: var(--accent-alt-dark-hover);
1966
1974
  }
1967
1975
 
1968
1976
  &:disabled {
@@ -13293,6 +13301,7 @@ var Menu = ({
13293
13301
  import_Menu.Menu,
13294
13302
  {
13295
13303
  ...menuState,
13304
+ "data-auto-resize-opt-in": true,
13296
13305
  focusable: false,
13297
13306
  "aria-label": menuLabel,
13298
13307
  ...!isRendered ? { unstable_popoverStyles: { position: "absolute", opacity: "0" } } : void 0,
@@ -18583,6 +18592,9 @@ var ParameterShell = ({
18583
18592
  {
18584
18593
  css: [
18585
18594
  inputMenu,
18595
+ import_react107.css`
18596
+ opacity: var(--opacity-100);
18597
+ `,
18586
18598
  menuItems ? import_react107.css`
18587
18599
  right: var(--spacing-md);
18588
18600
  ` : void 0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uniformdev/design-system",
3
- "version": "19.57.0",
3
+ "version": "19.58.1-alpha.16+5b13596bc",
4
4
  "description": "Uniform design system components",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "./dist/index.js",
@@ -24,8 +24,8 @@
24
24
  "@storybook/react": "6.5.16",
25
25
  "@types/react": "18.2.21",
26
26
  "@types/react-dom": "18.2.7",
27
- "@uniformdev/canvas": "^19.57.0",
28
- "@uniformdev/richtext": "^19.57.0",
27
+ "@uniformdev/canvas": "^19.58.1-alpha.16+5b13596bc",
28
+ "@uniformdev/richtext": "^19.58.1-alpha.16+5b13596bc",
29
29
  "autoprefixer": "10.4.15",
30
30
  "hygen": "6.2.11",
31
31
  "postcss": "8.4.28",
@@ -44,7 +44,7 @@
44
44
  "@lexical/rich-text": "^0.12.0",
45
45
  "@lexical/selection": "^0.12.0",
46
46
  "@lexical/utils": "^0.12.0",
47
- "@monaco-editor/react": "4.5.1",
47
+ "@monaco-editor/react": "4.5.2",
48
48
  "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.10.1/react-icons-all-files-4.10.1.tgz",
49
49
  "fast-equals": "^5.0.1",
50
50
  "lexical": "^0.12.0",
@@ -52,7 +52,7 @@
52
52
  "monaco-editor": "0.41.0",
53
53
  "react-hotkeys-hook": "4.4.1",
54
54
  "react-paginate": "8.2.0",
55
- "react-select": "5.7.4",
55
+ "react-select": "5.7.5",
56
56
  "react-use": "17.4.0",
57
57
  "reakit": "1.3.11",
58
58
  "zod-to-json-schema": "3.21.4"
@@ -67,5 +67,5 @@
67
67
  "publishConfig": {
68
68
  "access": "public"
69
69
  },
70
- "gitHead": "34b8d4a74f9029d507640eb8ef52d7bcf7e6d552"
70
+ "gitHead": "5b13596bc07ad3b8d3809122c9843d17e4a6f413"
71
71
  }