@guardian/stand 0.0.64 → 0.0.65

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 (14) hide show
  1. package/dist/components/Select/Select.cjs +10 -5
  2. package/dist/components/Select/Select.d.cts +1 -1
  3. package/dist/components/Select/Select.d.ts +1 -1
  4. package/dist/components/Select/Select.js +11 -6
  5. package/dist/components/Select/styles.cjs +13 -5
  6. package/dist/components/Select/styles.d.cts +1 -0
  7. package/dist/components/Select/styles.d.ts +1 -0
  8. package/dist/components/Select/styles.js +13 -6
  9. package/dist/styleD/build/css/component/select.css +9 -10
  10. package/dist/styleD/build/typescript/component/select.cjs +56 -49
  11. package/dist/styleD/build/typescript/component/select.d.cts +16 -11
  12. package/dist/styleD/build/typescript/component/select.d.ts +16 -11
  13. package/dist/styleD/build/typescript/component/select.js +56 -49
  14. package/package.json +1 -1
package/dist/components/Select/Select.cjs CHANGED
@@ -18,7 +18,7 @@ function Option({ children, theme = {}, id, ...props }) {
18
18
  children
19
19
  });
20
20
  }
21
- function ListBox({ children, theme = {} }) {
21
+ function ListBox({ children, size, theme = {} }) {
22
22
  const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
23
23
  const items = [];
24
24
  react.default.Children.forEach(children, (child, index) => {
@@ -30,20 +30,24 @@ function ListBox({ children, theme = {} }) {
30
30
  }
31
31
  });
32
32
  return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.ListBox, {
33
- css: require_styles.listBoxStyles(mergedTheme),
33
+ css: require_styles.listBoxStyles(mergedTheme, { size }),
34
34
  children: items
35
35
  });
36
36
  }
37
- function Select({ isInvalid, theme = {}, placement, shouldFlip, children, ...props }) {
37
+ function Select({ size = "md", isInvalid = false, theme = {}, placement, shouldFlip, children, ...props }) {
38
38
  const mergedTheme = require_mergeDeep.mergeDeep(require_styles.defaultSelectTheme, theme);
39
39
  return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_Form.FormInputContainer, {
40
40
  as: react_aria_components.Select,
41
+ size,
41
42
  isInvalid,
42
43
  ...props,
43
- size: "md",
44
44
  children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react_aria_components.Button, {
45
- css: require_styles.buttonStyles(mergedTheme, isInvalid),
45
+ css: require_styles.buttonStyles(mergedTheme, {
46
+ size,
47
+ isInvalid
48
+ }),
46
49
  children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react_aria_components.SelectValue, {}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
50
+ css: require_styles.iconStyles(),
47
51
  symbol: "keyboard_arrow_down",
48
52
  size: "lg"
49
53
  })]
@@ -54,6 +58,7 @@ function Select({ isInvalid, theme = {}, placement, shouldFlip, children, ...pro
54
58
  offset: mergedTheme.shared.offset,
55
59
  containerPadding: mergedTheme.shared.containerPadding,
56
60
  children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ListBox, {
61
+ size,
57
62
  theme: mergedTheme,
58
63
  children
59
64
  })
package/dist/components/Select/Select.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { OptionProps, SelectProps } from "./types.cjs";
2
2
  //#region src/components/Select/Select.d.ts
3
3
  declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
4
- declare function Select({ isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
4
+ declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
5
5
  //#endregion
6
6
  export { Option, Select };
package/dist/components/Select/Select.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { OptionProps, SelectProps } from "./types.js";
2
2
  //#region src/components/Select/Select.d.ts
3
3
  declare function Option({ children, theme, id, ...props }: OptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
4
- declare function Select({ isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
4
+ declare function Select({ size, isInvalid, theme, placement, shouldFlip, children, ...props }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
5
5
  //#endregion
6
6
  export { Option, Select };
package/dist/components/Select/Select.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { mergeDeep } from "../../util/mergeDeep.js";
2
2
  import { Icon } from "../Icon/Icon.js";
3
3
  import { FormInputContainer } from "../Form/Form.js";
4
- import { buttonStyles, defaultSelectTheme, listBoxItemStyles, listBoxStyles, popoverStyles } from "./styles.js";
4
+ import { buttonStyles, defaultSelectTheme, iconStyles, listBoxItemStyles, listBoxStyles, popoverStyles } from "./styles.js";
5
5
  import React from "react";
6
6
  import { jsx, jsxs } from "@emotion/react/jsx-runtime";
7
7
  import { Button, ListBox, ListBoxItem, Popover, Select, SelectValue } from "react-aria-components";
@@ -16,7 +16,7 @@ function Option({ children, theme = {}, id, ...props }) {
16
16
  children
17
17
  });
18
18
  }
19
- function ListBox$1({ children, theme = {} }) {
19
+ function ListBox$1({ children, size, theme = {} }) {
20
20
  const mergedTheme = mergeDeep(defaultSelectTheme, theme);
21
21
  const items = [];
22
22
  React.Children.forEach(children, (child, index) => {
@@ -28,20 +28,24 @@ function ListBox$1({ children, theme = {} }) {
28
28
  }
29
29
  });
30
30
  return /* @__PURE__ */ jsx(ListBox, {
31
- css: listBoxStyles(mergedTheme),
31
+ css: listBoxStyles(mergedTheme, { size }),
32
32
  children: items
33
33
  });
34
34
  }
35
- function Select$1({ isInvalid, theme = {}, placement, shouldFlip, children, ...props }) {
35
+ function Select$1({ size = "md", isInvalid = false, theme = {}, placement, shouldFlip, children, ...props }) {
36
36
  const mergedTheme = mergeDeep(defaultSelectTheme, theme);
37
37
  return /* @__PURE__ */ jsxs(FormInputContainer, {
38
38
  as: Select,
39
+ size,
39
40
  isInvalid,
40
41
  ...props,
41
- size: "md",
42
42
  children: [/* @__PURE__ */ jsxs(Button, {
43
- css: buttonStyles(mergedTheme, isInvalid),
43
+ css: buttonStyles(mergedTheme, {
44
+ size,
45
+ isInvalid
46
+ }),
44
47
  children: [/* @__PURE__ */ jsx(SelectValue, {}), /* @__PURE__ */ jsx(Icon, {
48
+ css: iconStyles(),
45
49
  symbol: "keyboard_arrow_down",
46
50
  size: "lg"
47
51
  })]
@@ -52,6 +56,7 @@ function Select$1({ isInvalid, theme = {}, placement, shouldFlip, children, ...p
52
56
  offset: mergedTheme.shared.offset,
53
57
  containerPadding: mergedTheme.shared.containerPadding,
54
58
  children: /* @__PURE__ */ jsx(ListBox$1, {
59
+ size,
55
60
  theme: mergedTheme,
56
61
  children
57
62
  })
package/dist/components/Select/styles.cjs CHANGED
@@ -42,9 +42,9 @@ const listBoxItemStyles = (theme) => {
42
42
  }
43
43
  `;
44
44
  };
45
- const listBoxStyles = (theme) => {
45
+ const listBoxStyles = (theme, { size }) => {
46
46
  return _emotion_react.css`
47
- ${require_typography.convertTypographyToEmotionStringStyle(theme.shared.listBox.typography)}
47
+ ${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
48
48
  background-color: ${theme.shared.listBox.backgroundColor};
49
49
  border: ${theme.shared.listBox.border};
50
50
  box-shadow: ${theme.shared.listBox.shadow};
@@ -52,7 +52,7 @@ const listBoxStyles = (theme) => {
52
52
  outline: none;
53
53
  `;
54
54
  };
55
- const buttonStyles = (theme, isInvalid) => {
55
+ const buttonStyles = (theme, { size, isInvalid }) => {
56
56
  return _emotion_react.css`
57
57
  display: ${theme.shared.button.display};
58
58
  justify-content: ${theme.shared.button.justifyContent};
@@ -60,11 +60,11 @@ const buttonStyles = (theme, isInvalid) => {
60
60
  background-color: ${theme.shared.button.backgroundColor};
61
61
  border: ${theme.shared.button.border};
62
62
  border-radius: ${theme.shared.button.borderRadius};
63
- height: ${theme.shared.button.height};
63
+ height: ${theme[size].height};
64
64
  padding-left: ${theme.shared.button.paddingLeft};
65
65
  padding-right: ${theme.shared.button.paddingRight};
66
66
  margin-top: ${theme.shared.button.marginTop};
67
- ${require_typography.convertTypographyToEmotionStringStyle(theme.shared.button.typography)}
67
+ ${require_typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
68
68
  color: ${theme.shared.button.color};
69
69
 
70
70
  &[data-hovered] {
@@ -90,9 +90,17 @@ const buttonStyles = (theme, isInvalid) => {
90
90
  ${isInvalid ? `border: ${theme.shared.button.error.border};` : ``}
91
91
  `;
92
92
  };
93
+ const iconStyles = () => {
94
+ return _emotion_react.css`
95
+ [data-open] & {
96
+ transform: rotate(180deg);
97
+ }
98
+ `;
99
+ };
93
100
  //#endregion
94
101
  exports.buttonStyles = buttonStyles;
95
102
  exports.defaultSelectTheme = defaultSelectTheme;
103
+ exports.iconStyles = iconStyles;
96
104
  exports.listBoxItemStyles = listBoxItemStyles;
97
105
  exports.listBoxStyles = listBoxStyles;
98
106
  exports.popoverStyles = popoverStyles;
package/dist/components/Select/styles.d.cts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { DeepPartial, Prettify } from "../../util/types.cjs";
2
2
  import { ComponentSelect } from "../../styleD/build/typescript/component/select.cjs";
3
+ import "./types.cjs";
3
4
  import { SerializedStyles } from "@emotion/react";
4
5
  //#region src/components/Select/styles.d.ts
5
6
  type SelectTheme = Prettify<ComponentSelect>;
package/dist/components/Select/styles.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { DeepPartial, Prettify } from "../../util/types.js";
2
2
  import { ComponentSelect } from "../../styleD/build/typescript/component/select.js";
3
+ import "./types.js";
3
4
  import { SerializedStyles } from "@emotion/react";
4
5
  //#region src/components/Select/styles.d.ts
5
6
  type SelectTheme = Prettify<ComponentSelect>;
package/dist/components/Select/styles.js CHANGED
@@ -42,9 +42,9 @@ const listBoxItemStyles = (theme) => {
42
42
  }
43
43
  `;
44
44
  };
45
- const listBoxStyles = (theme) => {
45
+ const listBoxStyles = (theme, { size }) => {
46
46
  return css`
47
- ${convertTypographyToEmotionStringStyle(theme.shared.listBox.typography)}
47
+ ${convertTypographyToEmotionStringStyle(theme[size].typography)}
48
48
  background-color: ${theme.shared.listBox.backgroundColor};
49
49
  border: ${theme.shared.listBox.border};
50
50
  box-shadow: ${theme.shared.listBox.shadow};
@@ -52,7 +52,7 @@ const listBoxStyles = (theme) => {
52
52
  outline: none;
53
53
  `;
54
54
  };
55
- const buttonStyles = (theme, isInvalid) => {
55
+ const buttonStyles = (theme, { size, isInvalid }) => {
56
56
  return css`
57
57
  display: ${theme.shared.button.display};
58
58
  justify-content: ${theme.shared.button.justifyContent};
@@ -60,11 +60,11 @@ const buttonStyles = (theme, isInvalid) => {
60
60
  background-color: ${theme.shared.button.backgroundColor};
61
61
  border: ${theme.shared.button.border};
62
62
  border-radius: ${theme.shared.button.borderRadius};
63
- height: ${theme.shared.button.height};
63
+ height: ${theme[size].height};
64
64
  padding-left: ${theme.shared.button.paddingLeft};
65
65
  padding-right: ${theme.shared.button.paddingRight};
66
66
  margin-top: ${theme.shared.button.marginTop};
67
- ${convertTypographyToEmotionStringStyle(theme.shared.button.typography)}
67
+ ${convertTypographyToEmotionStringStyle(theme[size].typography)}
68
68
  color: ${theme.shared.button.color};
69
69
 
70
70
  &[data-hovered] {
@@ -90,5 +90,12 @@ const buttonStyles = (theme, isInvalid) => {
90
90
  ${isInvalid ? `border: ${theme.shared.button.error.border};` : ``}
91
91
  `;
92
92
  };
93
+ const iconStyles = () => {
94
+ return css`
95
+ [data-open] & {
96
+ transform: rotate(180deg);
97
+ }
98
+ `;
99
+ };
93
100
  //#endregion
94
- export { buttonStyles, defaultSelectTheme, listBoxItemStyles, listBoxStyles, popoverStyles };
101
+ export { buttonStyles, defaultSelectTheme, iconStyles, listBoxItemStyles, listBoxStyles, popoverStyles };
package/dist/styleD/build/css/component/select.css CHANGED
@@ -16,14 +16,9 @@
16
16
  --component-select-shared-button-background-color: #ffffff;
17
17
  --component-select-shared-button-border: 0.0625rem solid #545454;
18
18
  --component-select-shared-button-border-radius: 0.25rem;
19
- --component-select-shared-button-height: 2.5rem;
20
19
  --component-select-shared-button-padding-left: 0.75rem;
21
20
  --component-select-shared-button-padding-right: 0.25rem;
22
- --component-select-shared-button-color: #545454;
23
- --component-select-shared-button-typography-font: normal 460 1rem/1.3
24
- 'Open Sans';
25
- --component-select-shared-button-typography-letter-spacing: 0rem;
26
- --component-select-shared-button-typography-font-width: 95;
21
+ --component-select-shared-button-color: #000000;
27
22
  --component-select-shared-button-focused-outline: 0.125rem solid #0072a9;
28
23
  --component-select-shared-button-focused-outline-offset: 0.125rem;
29
24
  --component-select-shared-button-disabled-background-color: #ffffff;
@@ -38,12 +33,16 @@
38
33
  --component-select-shared-option-focused-outline: 0.125rem solid #0072a9;
39
34
  --component-select-shared-option-focused-outline-offset: 0;
40
35
  --component-select-shared-option-focused-background-color: inherit;
41
- --component-select-shared-list-box-typography-font: normal 460 1rem/1.3
42
- 'Open Sans';
43
- --component-select-shared-list-box-typography-letter-spacing: 0rem;
44
- --component-select-shared-list-box-typography-font-width: 95;
45
36
  --component-select-shared-list-box-border: 0.0625rem solid #cccccc;
46
37
  --component-select-shared-list-box-background-color: #ffffff;
47
38
  --component-select-shared-list-box-shadow: 0 0.125rem 0.375rem 0
48
39
  rgb(0% 0% 0% / 0.3);
40
+ --component-select-sm-height: 2rem;
41
+ --component-select-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
42
+ --component-select-sm-typography-letter-spacing: 0rem;
43
+ --component-select-sm-typography-font-width: 95;
44
+ --component-select-md-height: 2.5rem;
45
+ --component-select-md-typography-font: normal 460 1rem/1.3 'Open Sans';
46
+ --component-select-md-typography-letter-spacing: 0rem;
47
+ --component-select-md-typography-font-width: 95;
49
48
  }
package/dist/styleD/build/typescript/component/select.cjs CHANGED
@@ -2,65 +2,72 @@
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
4
  */
5
- const componentSelect = { shared: {
6
- width: "100%",
7
- offset: 8,
8
- containerPadding: 0,
9
- hover: {
10
- backgroundColor: "#f6f6f6",
11
- outline: "none"
12
- },
13
- pressed: { backgroundColor: "#ededed" },
14
- button: {
15
- display: "flex",
16
- justifyContent: "space-between",
17
- alignItems: "center",
18
- marginTop: "0.25rem",
19
- backgroundColor: "#ffffff",
20
- border: "0.0625rem solid #545454",
21
- borderRadius: "0.25rem",
22
- height: "2.5rem",
23
- paddingLeft: "0.75rem",
24
- paddingRight: "0.25rem",
25
- color: "#545454",
26
- typography: {
27
- font: "normal 460 1rem/1.3 Open Sans",
28
- letterSpacing: "0rem",
29
- fontWidth: 95
5
+ const componentSelect = {
6
+ shared: {
7
+ width: "100%",
8
+ offset: 8,
9
+ containerPadding: 0,
10
+ hover: {
11
+ backgroundColor: "#f6f6f6",
12
+ outline: "none"
30
13
  },
31
- focused: {
32
- outline: "0.125rem solid #0072a9",
33
- outlineOffset: "0.125rem"
34
- },
35
- disabled: {
14
+ pressed: { backgroundColor: "#ededed" },
15
+ button: {
16
+ display: "flex",
17
+ justifyContent: "space-between",
18
+ alignItems: "center",
19
+ marginTop: "0.25rem",
36
20
  backgroundColor: "#ffffff",
37
- cursor: "not-allowed",
38
- color: "#999999",
39
- border: "0.0625rem solid #dcdcdc"
21
+ border: "0.0625rem solid #545454",
22
+ borderRadius: "0.25rem",
23
+ paddingLeft: "0.75rem",
24
+ paddingRight: "0.25rem",
25
+ color: "#000000",
26
+ focused: {
27
+ outline: "0.125rem solid #0072a9",
28
+ outlineOffset: "0.125rem"
29
+ },
30
+ disabled: {
31
+ backgroundColor: "#ffffff",
32
+ cursor: "not-allowed",
33
+ color: "#999999",
34
+ border: "0.0625rem solid #dcdcdc"
35
+ },
36
+ error: { border: "0.0625rem solid #b42a19" }
37
+ },
38
+ option: {
39
+ paddingLeft: "1rem",
40
+ paddingRight: "1rem",
41
+ paddingTop: "0.75rem",
42
+ paddingBottom: "0.75rem",
43
+ focused: {
44
+ outline: "0.125rem solid #0072a9",
45
+ outlineOffset: "0",
46
+ backgroundColor: "inherit"
47
+ }
40
48
  },
41
- error: { border: "0.0625rem solid #b42a19" }
49
+ listBox: {
50
+ border: "0.0625rem solid #cccccc",
51
+ backgroundColor: "#ffffff",
52
+ shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
53
+ }
42
54
  },
43
- option: {
44
- paddingLeft: "1rem",
45
- paddingRight: "1rem",
46
- paddingTop: "0.75rem",
47
- paddingBottom: "0.75rem",
48
- focused: {
49
- outline: "0.125rem solid #0072a9",
50
- outlineOffset: "0",
51
- backgroundColor: "inherit"
55
+ sm: {
56
+ height: "2rem",
57
+ typography: {
58
+ font: "normal 460 0.875rem/1.3 Open Sans",
59
+ letterSpacing: "0rem",
60
+ fontWidth: 95
52
61
  }
53
62
  },
54
- listBox: {
63
+ md: {
64
+ height: "2.5rem",
55
65
  typography: {
56
66
  font: "normal 460 1rem/1.3 Open Sans",
57
67
  letterSpacing: "0rem",
58
68
  fontWidth: 95
59
- },
60
- border: "0.0625rem solid #cccccc",
61
- backgroundColor: "#ffffff",
62
- shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
69
+ }
63
70
  }
64
- } };
71
+ };
65
72
  //#endregion
66
73
  exports.componentSelect = componentSelect;
package/dist/styleD/build/typescript/component/select.d.cts CHANGED
@@ -22,15 +22,9 @@ declare const componentSelect: {
22
22
  backgroundColor: string;
23
23
  border: string;
24
24
  borderRadius: string;
25
- height: string;
26
25
  paddingLeft: string;
27
26
  paddingRight: string;
28
27
  color: string;
29
- typography: {
30
- font: string;
31
- letterSpacing: string;
32
- fontWidth: number;
33
- };
34
28
  focused: {
35
29
  outline: string;
36
30
  outlineOffset: string;
@@ -57,16 +51,27 @@ declare const componentSelect: {
57
51
  };
58
52
  };
59
53
  listBox: {
60
- typography: {
61
- font: string;
62
- letterSpacing: string;
63
- fontWidth: number;
64
- };
65
54
  border: string;
66
55
  backgroundColor: string;
67
56
  shadow: string;
68
57
  };
69
58
  };
59
+ sm: {
60
+ height: string;
61
+ typography: {
62
+ font: string;
63
+ letterSpacing: string;
64
+ fontWidth: number;
65
+ };
66
+ };
67
+ md: {
68
+ height: string;
69
+ typography: {
70
+ font: string;
71
+ letterSpacing: string;
72
+ fontWidth: number;
73
+ };
74
+ };
70
75
  };
71
76
  type ComponentSelect = typeof componentSelect;
72
77
  //#endregion
package/dist/styleD/build/typescript/component/select.d.ts CHANGED
@@ -22,15 +22,9 @@ declare const componentSelect: {
22
22
  backgroundColor: string;
23
23
  border: string;
24
24
  borderRadius: string;
25
- height: string;
26
25
  paddingLeft: string;
27
26
  paddingRight: string;
28
27
  color: string;
29
- typography: {
30
- font: string;
31
- letterSpacing: string;
32
- fontWidth: number;
33
- };
34
28
  focused: {
35
29
  outline: string;
36
30
  outlineOffset: string;
@@ -57,16 +51,27 @@ declare const componentSelect: {
57
51
  };
58
52
  };
59
53
  listBox: {
60
- typography: {
61
- font: string;
62
- letterSpacing: string;
63
- fontWidth: number;
64
- };
65
54
  border: string;
66
55
  backgroundColor: string;
67
56
  shadow: string;
68
57
  };
69
58
  };
59
+ sm: {
60
+ height: string;
61
+ typography: {
62
+ font: string;
63
+ letterSpacing: string;
64
+ fontWidth: number;
65
+ };
66
+ };
67
+ md: {
68
+ height: string;
69
+ typography: {
70
+ font: string;
71
+ letterSpacing: string;
72
+ fontWidth: number;
73
+ };
74
+ };
70
75
  };
71
76
  type ComponentSelect = typeof componentSelect;
72
77
  //#endregion
package/dist/styleD/build/typescript/component/select.js CHANGED
@@ -2,65 +2,72 @@
2
2
  /**
3
3
  * Do not edit directly, this file was auto-generated.
4
4
  */
5
- const componentSelect = { shared: {
6
- width: "100%",
7
- offset: 8,
8
- containerPadding: 0,
9
- hover: {
10
- backgroundColor: "#f6f6f6",
11
- outline: "none"
12
- },
13
- pressed: { backgroundColor: "#ededed" },
14
- button: {
15
- display: "flex",
16
- justifyContent: "space-between",
17
- alignItems: "center",
18
- marginTop: "0.25rem",
19
- backgroundColor: "#ffffff",
20
- border: "0.0625rem solid #545454",
21
- borderRadius: "0.25rem",
22
- height: "2.5rem",
23
- paddingLeft: "0.75rem",
24
- paddingRight: "0.25rem",
25
- color: "#545454",
26
- typography: {
27
- font: "normal 460 1rem/1.3 Open Sans",
28
- letterSpacing: "0rem",
29
- fontWidth: 95
5
+ const componentSelect = {
6
+ shared: {
7
+ width: "100%",
8
+ offset: 8,
9
+ containerPadding: 0,
10
+ hover: {
11
+ backgroundColor: "#f6f6f6",
12
+ outline: "none"
30
13
  },
31
- focused: {
32
- outline: "0.125rem solid #0072a9",
33
- outlineOffset: "0.125rem"
34
- },
35
- disabled: {
14
+ pressed: { backgroundColor: "#ededed" },
15
+ button: {
16
+ display: "flex",
17
+ justifyContent: "space-between",
18
+ alignItems: "center",
19
+ marginTop: "0.25rem",
36
20
  backgroundColor: "#ffffff",
37
- cursor: "not-allowed",
38
- color: "#999999",
39
- border: "0.0625rem solid #dcdcdc"
21
+ border: "0.0625rem solid #545454",
22
+ borderRadius: "0.25rem",
23
+ paddingLeft: "0.75rem",
24
+ paddingRight: "0.25rem",
25
+ color: "#000000",
26
+ focused: {
27
+ outline: "0.125rem solid #0072a9",
28
+ outlineOffset: "0.125rem"
29
+ },
30
+ disabled: {
31
+ backgroundColor: "#ffffff",
32
+ cursor: "not-allowed",
33
+ color: "#999999",
34
+ border: "0.0625rem solid #dcdcdc"
35
+ },
36
+ error: { border: "0.0625rem solid #b42a19" }
37
+ },
38
+ option: {
39
+ paddingLeft: "1rem",
40
+ paddingRight: "1rem",
41
+ paddingTop: "0.75rem",
42
+ paddingBottom: "0.75rem",
43
+ focused: {
44
+ outline: "0.125rem solid #0072a9",
45
+ outlineOffset: "0",
46
+ backgroundColor: "inherit"
47
+ }
40
48
  },
41
- error: { border: "0.0625rem solid #b42a19" }
49
+ listBox: {
50
+ border: "0.0625rem solid #cccccc",
51
+ backgroundColor: "#ffffff",
52
+ shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
53
+ }
42
54
  },
43
- option: {
44
- paddingLeft: "1rem",
45
- paddingRight: "1rem",
46
- paddingTop: "0.75rem",
47
- paddingBottom: "0.75rem",
48
- focused: {
49
- outline: "0.125rem solid #0072a9",
50
- outlineOffset: "0",
51
- backgroundColor: "inherit"
55
+ sm: {
56
+ height: "2rem",
57
+ typography: {
58
+ font: "normal 460 0.875rem/1.3 Open Sans",
59
+ letterSpacing: "0rem",
60
+ fontWidth: 95
52
61
  }
53
62
  },
54
- listBox: {
63
+ md: {
64
+ height: "2.5rem",
55
65
  typography: {
56
66
  font: "normal 460 1rem/1.3 Open Sans",
57
67
  letterSpacing: "0rem",
58
68
  fontWidth: 95
59
- },
60
- border: "0.0625rem solid #cccccc",
61
- backgroundColor: "#ffffff",
62
- shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
69
+ }
63
70
  }
64
- } };
71
+ };
65
72
  //#endregion
66
73
  export { componentSelect };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.64",
3
+ "version": "0.0.65",
4
4
  "repository": {
5
5
  "url": "https://github.com/guardian/stand"
6
6
  },