@guardian/stand 0.0.48 → 0.0.49

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 (25) hide show
  1. package/dist/components/Form/Form.cjs +2 -2
  2. package/dist/components/Form/Form.js +2 -2
  3. package/dist/components/Form/styles.cjs +4 -1
  4. package/dist/components/Form/styles.js +4 -1
  5. package/dist/components/Form/types.d.cts +4 -0
  6. package/dist/components/Form/types.d.ts +4 -0
  7. package/dist/components/Select/Select.cjs +4 -1
  8. package/dist/components/Select/Select.js +4 -1
  9. package/dist/styleD/build/css/component/form.css +1 -0
  10. package/dist/styleD/build/css/component/intendedAudienceSignifier.css +0 -2
  11. package/dist/styleD/build/css/semantic/colors.css +4 -0
  12. package/dist/styleD/build/css/semantic/sizing.css +1 -0
  13. package/dist/styleD/build/typescript/component/form.cjs +2 -1
  14. package/dist/styleD/build/typescript/component/form.d.cts +1 -0
  15. package/dist/styleD/build/typescript/component/form.d.ts +1 -0
  16. package/dist/styleD/build/typescript/component/form.js +2 -1
  17. package/dist/styleD/build/typescript/semantic/colors.cjs +5 -1
  18. package/dist/styleD/build/typescript/semantic/colors.d.cts +4 -0
  19. package/dist/styleD/build/typescript/semantic/colors.d.ts +4 -0
  20. package/dist/styleD/build/typescript/semantic/colors.js +5 -1
  21. package/dist/styleD/build/typescript/semantic/sizing.cjs +2 -1
  22. package/dist/styleD/build/typescript/semantic/sizing.d.cts +3 -0
  23. package/dist/styleD/build/typescript/semantic/sizing.d.ts +3 -0
  24. package/dist/styleD/build/typescript/semantic/sizing.js +2 -1
  25. package/package.json +1 -1
package/dist/components/Form/Form.cjs CHANGED
@@ -5,11 +5,11 @@ const require_types = require("./types.cjs");
5
5
  let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
6
6
  let react_aria_components = require("react-aria-components");
7
7
  //#region src/components/Form/Form.tsx
8
- function FormInputContainer({ as: Component, size = "md", label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
8
+ function FormInputContainer({ as: Component, size = "md", fluid = false, label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
9
9
  if (!require_types.ALLOWED_FORM_CONTAINERS.includes(Component)) return null;
10
10
  const mergedTheme = require_mergeDeep.mergeDeep(require_mergeDeep.mergeDeep(require_styles.defaultFormInputContainerTheme, theme), formInputContainerTheme ?? {});
11
11
  return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Component, {
12
- css: [require_styles.formInputContainerStyles(mergedTheme), cssOverrides],
12
+ css: [require_styles.formInputContainerStyles(mergedTheme, { fluid }), cssOverrides],
13
13
  isDisabled,
14
14
  ...props,
15
15
  children: [
package/dist/components/Form/Form.js CHANGED
@@ -5,11 +5,11 @@ import { ALLOWED_FORM_CONTAINERS } from "./types.js";
5
5
  import { jsx, jsxs } from "@emotion/react/jsx-runtime";
6
6
  import { FieldError, Label } from "react-aria-components";
7
7
  //#region src/components/Form/Form.tsx
8
- function FormInputContainer({ as: Component, size = "md", label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
8
+ function FormInputContainer({ as: Component, size = "md", fluid = false, label, renderLabel, description, error, isDisabled = false, theme = {}, formInputContainerTheme, cssOverrides, children, ...props }) {
9
9
  if (!ALLOWED_FORM_CONTAINERS.includes(Component)) return null;
10
10
  const mergedTheme = mergeDeep(mergeDeep(defaultFormInputContainerTheme, theme), formInputContainerTheme ?? {});
11
11
  return /* @__PURE__ */ jsxs(Component, {
12
- css: [formInputContainerStyles(mergedTheme), cssOverrides],
12
+ css: [formInputContainerStyles(mergedTheme, { fluid }), cssOverrides],
13
13
  isDisabled,
14
14
  ...props,
15
15
  children: [
package/dist/components/Form/styles.cjs CHANGED
@@ -3,12 +3,15 @@ const require_form = require("../../styleD/build/typescript/component/form.cjs")
3
3
  let _emotion_react = require("@emotion/react");
4
4
  //#region src/components/Form/styles.ts
5
5
  const defaultFormInputContainerTheme = require_form.componentForm.input;
6
- const formInputContainerStyles = (theme) => {
6
+ const formInputContainerStyles = (theme, { fluid }) => {
7
7
  return _emotion_react.css`
8
8
  display: ${theme.shared.container.display};
9
9
  flex-direction: ${theme.shared.container.flexDirection};
10
10
  gap: ${theme.shared.container.gap};
11
11
  width: ${theme.shared.container.width};
12
+ ${!fluid && _emotion_react.css`
13
+ max-width: ${theme.shared.container.maxWidth};
14
+ `}
12
15
  `;
13
16
  };
14
17
  const formInputLabelStyles = (theme, { isDisabled, size }) => {
package/dist/components/Form/styles.js CHANGED
@@ -3,12 +3,15 @@ import { componentForm } from "../../styleD/build/typescript/component/form.js";
3
3
  import { css } from "@emotion/react";
4
4
  //#region src/components/Form/styles.ts
5
5
  const defaultFormInputContainerTheme = componentForm.input;
6
- const formInputContainerStyles = (theme) => {
6
+ const formInputContainerStyles = (theme, { fluid }) => {
7
7
  return css`
8
8
  display: ${theme.shared.container.display};
9
9
  flex-direction: ${theme.shared.container.flexDirection};
10
10
  gap: ${theme.shared.container.gap};
11
11
  width: ${theme.shared.container.width};
12
+ ${!fluid && css`
13
+ max-width: ${theme.shared.container.maxWidth};
14
+ `}
12
15
  `;
13
16
  };
14
17
  const formInputLabelStyles = (theme, { isDisabled, size }) => {
package/dist/components/Form/types.d.cts CHANGED
@@ -10,6 +10,10 @@ type FormInputContainerDefaultProps<ReactAriaInput extends {
10
10
  * The size of the form input, 'md' (default) or 'sm'.
11
11
  */
12
12
  size?: keyof Omit<ComponentTheme, 'shared'>;
13
+ /**
14
+ * Whether the form input should take up the full width of its container. Defaults to false, which applies a max-width to the input for better readability.
15
+ */
16
+ fluid?: boolean;
13
17
  /**
14
18
  * The label text for the form field.
15
19
  */
package/dist/components/Form/types.d.ts CHANGED
@@ -10,6 +10,10 @@ type FormInputContainerDefaultProps<ReactAriaInput extends {
10
10
  * The size of the form input, 'md' (default) or 'sm'.
11
11
  */
12
12
  size?: keyof Omit<ComponentTheme, 'shared'>;
13
+ /**
14
+ * Whether the form input should take up the full width of its container. Defaults to false, which applies a max-width to the input for better readability.
15
+ */
16
+ fluid?: boolean;
13
17
  /**
14
18
  * The label text for the form field.
15
19
  */
package/dist/components/Select/Select.cjs CHANGED
@@ -51,7 +51,10 @@ function Select({ isInvalid, theme = {}, children, ...props }) {
51
51
  css: require_styles.popoverStyles(),
52
52
  offset: mergedTheme.shared.offset,
53
53
  containerPadding: mergedTheme.shared.containerPadding,
54
- children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, { children })
54
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, {
55
+ theme: mergedTheme,
56
+ children
57
+ })
55
58
  })]
56
59
  });
57
60
  }
package/dist/components/Select/Select.js CHANGED
@@ -49,7 +49,10 @@ function Select$1({ isInvalid, theme = {}, children, ...props }) {
49
49
  css: popoverStyles(),
50
50
  offset: mergedTheme.shared.offset,
51
51
  containerPadding: mergedTheme.shared.containerPadding,
52
- children: /* @__PURE__ */ jsx(ListBox$1, { children })
52
+ children: /* @__PURE__ */ jsx(ListBox$1, {
53
+ theme: mergedTheme,
54
+ children
55
+ })
53
56
  })]
54
57
  });
55
58
  }
package/dist/styleD/build/css/component/form.css CHANGED
@@ -7,6 +7,7 @@
7
7
  --component-form-input-shared-container-flex-direction: column;
8
8
  --component-form-input-shared-container-gap: 0.25rem;
9
9
  --component-form-input-shared-container-width: 100%;
10
+ --component-form-input-shared-container-max-width: 450px;
10
11
  --component-form-input-shared-label-color: #000000;
11
12
  --component-form-input-shared-label-disabled-color: #999999;
12
13
  --component-form-input-shared-description-color: #545454;
package/dist/styleD/build/css/component/intendedAudienceSignifier.css CHANGED
@@ -21,7 +21,5 @@
21
21
  --component-intended-audience-signifier-chevron-fill: #545454;
22
22
  --component-intended-audience-signifier-chevron-size: 10px;
23
23
  --component-intended-audience-signifier-color: #545454;
24
- --component-intended-audience-signifier-typography-font: normal 460
25
- 0.75rem/1.3 'Open Sans';
26
24
  --component-intended-audience-signifier-typography-line-height: 1;
27
25
  }
package/dist/styleD/build/css/semantic/colors.css CHANGED
@@ -28,6 +28,10 @@
28
28
  --semantic-colors-bg-raised-level1: #f6f6f6;
29
29
  --semantic-colors-bg-raised-level2: #ededed;
30
30
  --semantic-colors-bg-raised-level3: #e6e6e6;
31
+ --semantic-colors-bg-base-inverse: #000000;
32
+ --semantic-colors-bg-raised-level1-inverse: #333333;
33
+ --semantic-colors-bg-raised-level2-inverse: #545454;
34
+ --semantic-colors-bg-raised-level3-inverse: #666666;
31
35
  --semantic-colors-border-stronger: #545454;
32
36
  --semantic-colors-border-strong: #8d8d8d;
33
37
  --semantic-colors-border-weak: #cccccc;
package/dist/styleD/build/css/semantic/sizing.css CHANGED
@@ -18,4 +18,5 @@
18
18
  --semantic-sizing-sidebar-md-px: 200px;
19
19
  --semantic-sizing-sidebar-lg-px: 280px;
20
20
  --semantic-sizing-layout-max-width-px: 1584px;
21
+ --semantic-sizing-input-max-width-px: 450px;
21
22
  }
package/dist/styleD/build/typescript/component/form.cjs CHANGED
@@ -8,7 +8,8 @@ const componentForm = { input: {
8
8
  display: "flex",
9
9
  flexDirection: "column",
10
10
  gap: "0.25rem",
11
- width: "100%"
11
+ width: "100%",
12
+ maxWidth: "450px"
12
13
  },
13
14
  label: {
14
15
  color: "#000000",
package/dist/styleD/build/typescript/component/form.d.cts CHANGED
@@ -10,6 +10,7 @@ declare const componentForm: {
10
10
  flexDirection: string;
11
11
  gap: string;
12
12
  width: string;
13
+ maxWidth: string;
13
14
  };
14
15
  label: {
15
16
  color: string;
package/dist/styleD/build/typescript/component/form.d.ts CHANGED
@@ -10,6 +10,7 @@ declare const componentForm: {
10
10
  flexDirection: string;
11
11
  gap: string;
12
12
  width: string;
13
+ maxWidth: string;
13
14
  };
14
15
  label: {
15
16
  color: string;
package/dist/styleD/build/typescript/component/form.js CHANGED
@@ -8,7 +8,8 @@ const componentForm = { input: {
8
8
  display: "flex",
9
9
  flexDirection: "column",
10
10
  gap: "0.25rem",
11
- width: "100%"
11
+ width: "100%",
12
+ maxWidth: "450px"
12
13
  },
13
14
  label: {
14
15
  color: "#000000",
package/dist/styleD/build/typescript/semantic/colors.cjs CHANGED
@@ -30,7 +30,11 @@ const semanticColors = {
30
30
  base: "#ffffff",
31
31
  raisedLevel1: "#f6f6f6",
32
32
  raisedLevel2: "#ededed",
33
- raisedLevel3: "#e6e6e6"
33
+ raisedLevel3: "#e6e6e6",
34
+ baseInverse: "#000000",
35
+ raisedLevel1Inverse: "#333333",
36
+ raisedLevel2Inverse: "#545454",
37
+ raisedLevel3Inverse: "#666666"
34
38
  },
35
39
  border: {
36
40
  stronger: "#545454",
package/dist/styleD/build/typescript/semantic/colors.d.cts CHANGED
@@ -31,6 +31,10 @@ declare const semanticColors: {
31
31
  raisedLevel1: string;
32
32
  raisedLevel2: string;
33
33
  raisedLevel3: string;
34
+ baseInverse: string;
35
+ raisedLevel1Inverse: string;
36
+ raisedLevel2Inverse: string;
37
+ raisedLevel3Inverse: string;
34
38
  };
35
39
  border: {
36
40
  stronger: string;
package/dist/styleD/build/typescript/semantic/colors.d.ts CHANGED
@@ -31,6 +31,10 @@ declare const semanticColors: {
31
31
  raisedLevel1: string;
32
32
  raisedLevel2: string;
33
33
  raisedLevel3: string;
34
+ baseInverse: string;
35
+ raisedLevel1Inverse: string;
36
+ raisedLevel2Inverse: string;
37
+ raisedLevel3Inverse: string;
34
38
  };
35
39
  border: {
36
40
  stronger: string;
package/dist/styleD/build/typescript/semantic/colors.js CHANGED
@@ -30,7 +30,11 @@ const semanticColors = {
30
30
  base: "#ffffff",
31
31
  raisedLevel1: "#f6f6f6",
32
32
  raisedLevel2: "#ededed",
33
- raisedLevel3: "#e6e6e6"
33
+ raisedLevel3: "#e6e6e6",
34
+ baseInverse: "#000000",
35
+ raisedLevel1Inverse: "#333333",
36
+ raisedLevel2Inverse: "#545454",
37
+ raisedLevel3Inverse: "#666666"
34
38
  },
35
39
  border: {
36
40
  stronger: "#545454",
package/dist/styleD/build/typescript/semantic/sizing.cjs CHANGED
@@ -25,7 +25,8 @@ const semanticSizing = {
25
25
  mdPx: "200px",
26
26
  lgPx: "280px"
27
27
  },
28
- layout: { maxWidthPx: "1584px" }
28
+ layout: { maxWidthPx: "1584px" },
29
+ input: { maxWidthPx: "450px" }
29
30
  };
30
31
  //#endregion
31
32
  exports.semanticSizing = semanticSizing;
package/dist/styleD/build/typescript/semantic/sizing.d.cts CHANGED
@@ -28,6 +28,9 @@ declare const semanticSizing: {
28
28
  layout: {
29
29
  maxWidthPx: string;
30
30
  };
31
+ input: {
32
+ maxWidthPx: string;
33
+ };
31
34
  };
32
35
  type SemanticSizing = typeof semanticSizing;
33
36
  //#endregion
package/dist/styleD/build/typescript/semantic/sizing.d.ts CHANGED
@@ -28,6 +28,9 @@ declare const semanticSizing: {
28
28
  layout: {
29
29
  maxWidthPx: string;
30
30
  };
31
+ input: {
32
+ maxWidthPx: string;
33
+ };
31
34
  };
32
35
  type SemanticSizing = typeof semanticSizing;
33
36
  //#endregion
package/dist/styleD/build/typescript/semantic/sizing.js CHANGED
@@ -25,7 +25,8 @@ const semanticSizing = {
25
25
  mdPx: "200px",
26
26
  lgPx: "280px"
27
27
  },
28
- layout: { maxWidthPx: "1584px" }
28
+ layout: { maxWidthPx: "1584px" },
29
+ input: { maxWidthPx: "450px" }
29
30
  };
30
31
  //#endregion
31
32
  export { semanticSizing };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.48",
3
+ "version": "0.0.49",
4
4
  "repository": {
5
5
  "url": "https://github.com/guardian/stand"
6
6
  },