playbook_ui 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275 → 14.14.0.pre.alpha.play1852reacthookformsupportradio6318

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 (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_currency/_currency.tsx +32 -48
  3. data/app/pb_kits/playbook/pb_currency/currency.html.erb +8 -15
  4. data/app/pb_kits/playbook/pb_currency/currency.rb +0 -3
  5. data/app/pb_kits/playbook/pb_currency/docs/example.yml +0 -2
  6. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -2
  7. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +71 -0
  8. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
  9. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
  10. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +4 -0
  11. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
  12. data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx +39 -0
  13. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -2
  14. data/app/pb_kits/playbook/pb_radio/_radio.tsx +85 -74
  15. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
  16. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
  17. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
  18. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_radio/radio.test.js +16 -0
  20. data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
  21. data/dist/chunks/{_typeahead-PqkcDf1H.js → _typeahead-8okiJBmN.js} +1 -1
  22. data/dist/chunks/_weekday_stacked-DrKLZrfR.js +45 -0
  23. data/dist/chunks/vendor.js +1 -1
  24. data/dist/menu.yml +1 -1
  25. data/dist/playbook-doc.js +1 -1
  26. data/dist/playbook-rails-react-bindings.js +1 -1
  27. data/dist/playbook-rails.js +1 -1
  28. data/lib/playbook/version.rb +1 -1
  29. metadata +11 -6
  30. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +0 -20
  31. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +0 -34
  32. data/dist/chunks/_weekday_stacked-BhC8Xp9l.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4c6ef102f160200110b47477b34a9a06798b4ef4f1122151a12341775c20c9a5
4
- data.tar.gz: 14eb41101975901c5f557d1d8b6721fc9301e9b54a30ec0c335b8717dccbe508
3
+ metadata.gz: '08169588154946fcdb034524b646de6a050c504884a381f360f3a5470ea4917d'
4
+ data.tar.gz: d2794398a68601eeac259328439846e39816d671489e70cf35c9e9cc3669b76e
5
5
  SHA512:
6
- metadata.gz: 301d0b715331e1e388be9b554865dc59f79b88f5ef11f3a7f038554f215c7b72d6541465d027adcf0c8f9a0fea2dd4e9e1e6f608c6b0d9b9f5360fc52a70ffc8
7
- data.tar.gz: 6e1bc33d1fbe6b1bebe4b112b42c73107685786fbc7ddd01df4f95fe302d015e1225edcfbe042e2931728dcd655fe97a9d3629417c639392fa3753a7cb533ee6
6
+ metadata.gz: ca7b5000b148f3a0e8beac0926d11b05e36b9cc32cef3ccd72b8c53e04a4bdb6822e957ac82c85d50910dd4240d165c912e2b4eeb09566c8dbae3b70b28320de
7
+ data.tar.gz: fa1e9d28c2a166f674ac45c0c662262fb86fb69815409769be724bdba9a36b31bf24fe484053f17f97c691f9083759827b054f5a2a6652c7aab72bd8dc1c06f3
@@ -21,7 +21,6 @@ type CurrencyProps = {
21
21
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
22
22
  id?: string,
23
23
  label?: string,
24
- nullDisplay?: string,
25
24
  size?: 'sm' | 'md' | 'lg',
26
25
  symbol?: string,
27
26
  variant?: 'default' | 'light' | 'bold',
@@ -50,7 +49,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
50
49
  unit,
51
50
  className,
52
51
  label = '',
53
- nullDisplay = '',
54
52
  size = 'sm',
55
53
  symbol = '$',
56
54
  variant = 'default',
@@ -120,62 +118,48 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
120
118
  id={id}
121
119
  >
122
120
  <Caption dark={dark}>{label}</Caption>
123
-
121
+
124
122
  <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
125
123
  {unstyled ? (
126
- nullDisplay && !amount ? (
127
- <div>{nullDisplay}</div>
128
- ) : (
129
- <>
130
- <div>{handleNegative}{symbol}</div>
131
- <div>{getAmount}</div>
132
- <div>
133
- {getAbbreviation}
134
- {unit ? unit : getDecimalValue}
135
- </div>
136
- </>
137
- )
124
+ <>
125
+ <div>{handleNegative}{symbol}</div>
126
+ <div>{getAmount}</div>
127
+ <div>
128
+ {getAbbreviation}
129
+ {unit ? unit : getDecimalValue}
130
+ </div>
131
+ </>
138
132
  ) : (
139
- nullDisplay && !amount ? (
133
+ <>
134
+ <Body
135
+ className="dollar_sign"
136
+ color="light"
137
+ dark={dark}
138
+ >
139
+ {handleNegative}{symbol}
140
+ </Body>
141
+
140
142
  <Title
141
143
  className="pb_currency_value"
142
144
  dark={dark}
143
145
  size={sizes[size]}
144
- >
145
- {nullDisplay}
146
- </Title>
147
- ) : (
148
- <>
149
- <Body
150
- className="dollar_sign"
151
- color="light"
152
- dark={dark}
153
- >
154
- {handleNegative}{symbol}
155
- </Body>
156
-
157
- <Title
158
- className="pb_currency_value"
159
- dark={dark}
160
- size={sizes[size]}
161
- >
162
- {getAmount}
163
- </Title>
164
-
165
- <Body
166
- className="unit"
167
- color="light"
168
- dark={dark}
169
- >
170
- {getAbbreviation}
171
- {unit ? unit : getDecimalValue}
172
- </Body>
173
- </>
174
- )
146
+ >
147
+ {getAmount}
148
+ </Title>
149
+
150
+ <Body
151
+ className="unit"
152
+ color="light"
153
+ dark={dark}
154
+ >
155
+ {getAbbreviation}
156
+ {unit ? unit : getDecimalValue}
157
+ </Body>
158
+ </>
175
159
  )}
176
160
  </div>
177
161
  </div>
178
- );
162
+ )
179
163
  }
180
164
 
181
165
  export default Currency
@@ -1,24 +1,17 @@
1
1
  <%= pb_content_tag do %>
2
2
  <%= pb_rails("caption", props: object.caption_props) %>
3
+
3
4
  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
4
5
  <% if object.unstyled %>
5
- <% if object.null_display && object.amount.blank? %>
6
- <div><%= object.null_display %></div>
7
- <% else %>
8
- <div><%= object.negative_sign %><%= object.symbol %></div>
9
- <div><%= object.title_props[:text] %></div>
10
- <div><%= object.body_props[:text] %></div>
11
- <% end %>
6
+ <div><%= object.negative_sign %><%= object.symbol %></div>
7
+ <div><%= object.title_props[:text] %></div>
8
+ <div><%= object.body_props[:text] %></div>
12
9
  <% else %>
13
- <% if object.null_display && object.amount.blank? %>
14
- <%= pb_rails("title", props: {text: object.null_display}) %>
15
- <% else %>
16
- <%= pb_rails("body", props: object.currency_wrapper_props) do %>
17
- <%= object.negative_sign %><%= object.symbol %>
18
- <% end %>
19
- <%= pb_rails("title", props: object.title_props) %>
20
- <%= pb_rails("body", props: object.body_props) %>
10
+ <%= pb_rails("body", props: object.currency_wrapper_props) do %>
11
+ <%= object.negative_sign %><%= object.symbol %>
21
12
  <% end %>
13
+ <%= pb_rails("title", props: object.title_props) %>
14
+ <%= pb_rails("body", props: object.body_props) %>
22
15
  <% end %>
23
16
  </div>
24
17
  <% end %>
@@ -46,9 +46,6 @@ module Playbook
46
46
  prop :comma_separator, type: Playbook::Props::Boolean,
47
47
  default: false
48
48
 
49
- prop :null_display, type: Playbook::Props::String,
50
- required: false
51
-
52
49
  def classname
53
50
  generate_classname("pb_currency_kit", align, size, dark_class)
54
51
  end
@@ -10,7 +10,6 @@ examples:
10
10
  - currency_unstyled: Unstyled
11
11
  - currency_comma_separator: Comma Separator
12
12
  - currency_negative: Negative
13
- - currency_null_display: Null Display
14
13
 
15
14
  react:
16
15
  - currency_variants: Variants
@@ -22,7 +21,6 @@ examples:
22
21
  - currency_unstyled: Unstyled
23
22
  - currency_comma_separator: Comma Separator
24
23
  - currency_negative: Negative
25
- - currency_null_display: Null Display
26
24
 
27
25
  swift:
28
26
  - currency_size_swift: Size
@@ -6,5 +6,4 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
6
6
  export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
7
7
  export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
8
8
  export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
9
- export { default as CurrencyNegative } from './_currency_negative.jsx'
10
- export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
9
+ export { default as CurrencyNegative } from './_currency_negative.jsx'
@@ -0,0 +1,71 @@
1
+
2
+ import React from 'react'
3
+ import classnames from 'classnames'
4
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
+
7
+ import Button from '../pb_button/_button'
8
+ import Icon from '../pb_icon/_icon'
9
+ import { IconSizes } from "../pb_icon/_icon"
10
+
11
+ type IconButtonProps = {
12
+ aria?: { [key: string]: string },
13
+ className?: string,
14
+ data?: { [key: string]: string },
15
+ htmlType?: 'submit' | 'reset' | 'button' | undefined,
16
+ icon?: string,
17
+ id?: string,
18
+ link?: string,
19
+ newWindow?: boolean,
20
+ size?: IconSizes,
21
+ target?: string,
22
+ variant?: 'default' | 'link',
23
+ }
24
+
25
+ const IconButton = (props: IconButtonProps) => {
26
+ const {
27
+ aria = {},
28
+ className,
29
+ data = {},
30
+ htmlType = 'button',
31
+ icon = 'bars',
32
+ id,
33
+ link,
34
+ newWindow = false,
35
+ size = "2x",
36
+ target,
37
+ variant = "default",
38
+ } = props
39
+
40
+ const ariaProps = buildAriaProps(aria)
41
+ const dataProps = buildDataProps(data)
42
+ const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
43
+
44
+ return (
45
+ <div
46
+ {...ariaProps}
47
+ {...dataProps}
48
+ className={classes}
49
+ id={id}
50
+ >
51
+ <Button
52
+ borderRadius="lg"
53
+ htmlType={htmlType}
54
+ link={link}
55
+ newWindow={newWindow}
56
+ target={target}
57
+ >
58
+ <Icon
59
+ className="icon_button_icon"
60
+ fixedWidth
61
+ icon={icon}
62
+ paddingX="xxs"
63
+ paddingY="xs"
64
+ size={size}
65
+ />
66
+ </Button>
67
+ </div>
68
+ )
69
+ }
70
+
71
+ export default IconButton
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+ import { IconButton } from 'playbook-ui'
3
+
4
+ const IconButtonDefault = (props) => (
5
+ <div>
6
+ <IconButton
7
+ {...props}
8
+ />
9
+ <IconButton
10
+ {...props}
11
+ marginTop="md"
12
+ variant="link"
13
+ />
14
+ </div>
15
+ )
16
+
17
+ export default IconButtonDefault
@@ -0,0 +1,61 @@
1
+ import React from 'react'
2
+ import { IconButton, Flex } from 'playbook-ui'
3
+
4
+ const IconButtonSizes = (props) => (
5
+ <div>
6
+ <Flex align="center">
7
+ <IconButton
8
+ {...props}
9
+ size="lg"
10
+ />
11
+ <span>Large</span>
12
+ </Flex>
13
+ <Flex align="center">
14
+ <IconButton
15
+ {...props}
16
+ size="sm"
17
+ />
18
+ <span>Small</span>
19
+ </Flex>
20
+ <Flex align="center">
21
+ <IconButton
22
+ {...props}
23
+ size="xs"
24
+ />
25
+ <span>XSmall</span>
26
+ </Flex>
27
+ <Flex
28
+ align="center"
29
+ marginTop="md"
30
+ >
31
+ <IconButton
32
+ {...props}
33
+ size="1x"
34
+ />
35
+ <span>1x</span>
36
+ </Flex>
37
+ <Flex align="center">
38
+ <IconButton
39
+ {...props}
40
+ size="2x"
41
+ />
42
+ <span>2x</span>
43
+ </Flex>
44
+ <Flex align="center">
45
+ <IconButton
46
+ {...props}
47
+ size="3x"
48
+ />
49
+ <span>3x</span>
50
+ </Flex>
51
+ <Flex align="center">
52
+ <IconButton
53
+ {...props}
54
+ size="4x"
55
+ />
56
+ <span>4x</span>
57
+ </Flex>
58
+ </div>
59
+ )
60
+
61
+ export default IconButtonSizes
@@ -3,3 +3,7 @@ examples:
3
3
  rails:
4
4
  - icon_button_default: Default
5
5
  - icon_button_sizes: Sizes
6
+
7
+ react:
8
+ - icon_button_default: Default
9
+ - icon_button_sizes: Sizes
@@ -0,0 +1,2 @@
1
+ export { default as IconButtonDefault } from './_icon_button_default.jsx'
2
+ export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
@@ -0,0 +1,39 @@
1
+ import { ensureAccessible, renderKit } from '../utilities/test-utils'
2
+
3
+ import { IconButton } from 'playbook-ui'
4
+
5
+ const props = {
6
+ data: { testid: 'default', icon: 'plus' }
7
+ }
8
+
9
+ test('default test', () => {
10
+ const kit = renderKit(IconButton, props)
11
+
12
+ expect(kit).toBeInTheDocument()
13
+ expect(kit).toHaveClass('pb_icon_button_kit_default')
14
+
15
+ const iconElement = kit.querySelector('.icon_button_icon')
16
+ expect(iconElement).toBeInTheDocument()
17
+ })
18
+
19
+ it("should be accessible", async () => {
20
+ ensureAccessible(IconButton, props)
21
+ })
22
+
23
+ test('passes link variant prop', () => {
24
+ const kit = renderKit(IconButton, { ...props, variant: "link" })
25
+ expect(kit).toBeInTheDocument()
26
+ expect(kit).toHaveClass('pb_icon_button_kit_link')
27
+ })
28
+
29
+ test('should set button type to "submit" when htmlType prop is passed', () => {
30
+ const kit = renderKit(IconButton, { ...props, htmlType: 'submit' })
31
+ const buttonElement = kit.querySelector('button')
32
+ expect(buttonElement).toHaveAttribute('type', 'submit')
33
+ })
34
+
35
+ test('passes custom classname', () => {
36
+ const kit = renderKit(IconButton, { ...props, className: "extra_class" })
37
+ expect(kit).toBeInTheDocument()
38
+ expect(kit).toHaveClass('pb_icon_button_kit_default extra_class')
39
+ })
@@ -1,6 +1,6 @@
1
1
  <%= pb_content_tag(:li) do %>
2
- <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
3
- <div class="circle">
2
+ <div class="box" style="max-width: min-content;">
3
+ <div class="circle" id="<%= object.tooltip_trigger_class %>" >
4
4
  <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
5
5
  </div>
6
6
  <% if object.tooltip.present? %>
@@ -1,6 +1,4 @@
1
- /*eslint-disable react/no-multi-comp */
2
-
3
- import React, { forwardRef, useRef } from 'react'
1
+ import React, { useRef, forwardRef } from 'react'
4
2
  import Body from '../pb_body/_body'
5
3
  import Flex from '../pb_flex/_flex'
6
4
  import classnames from 'classnames'
@@ -10,7 +8,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
10
8
  type RadioProps = {
11
9
  aria?: { [key: string]: string },
12
10
  alignment?: string,
13
- checked?: boolean,
11
+ checked?: boolean, // removed default assignment here
14
12
  children?: React.ReactChild[] | React.ReactChild,
15
13
  customChildren?: boolean,
16
14
  className?: string,
@@ -24,10 +22,10 @@ type RadioProps = {
24
22
  name?: string,
25
23
  value?: string,
26
24
  text?: string,
27
- onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
25
+ onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
28
26
  } & GlobalProps
29
27
 
30
- const Radio = ({
28
+ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
31
29
  aria = {},
32
30
  alignment,
33
31
  children,
@@ -43,110 +41,123 @@ const Radio = ({
43
41
  name = 'radio_name',
44
42
  text = 'Radio Text',
45
43
  value = 'radio_text',
44
+ checked,
46
45
  onChange = () => { void 0 },
47
46
  ...props
48
- }: RadioProps, ref: any) => {
49
- const radioRef = useRef(null);
47
+ }, ref) => {
48
+ const internalRef = useRef<HTMLInputElement>(null)
49
+ const setRefs = (el: HTMLInputElement) => {
50
+ internalRef.current = el
51
+ if (typeof ref === 'function') {
52
+ ref(el)
53
+ } else if (ref) {
54
+ (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
55
+ }
56
+ }
57
+
58
+ const ariaProps = buildAriaProps(aria)
59
+ const dataProps = buildDataProps(data)
60
+ const htmlProps = buildHtmlProps(htmlOptions)
50
61
 
51
- const ariaProps = buildAriaProps(aria);
52
- const dataProps = buildDataProps(data);
53
- const htmlProps = buildHtmlProps(htmlOptions);
54
62
  const classes = classnames(
55
63
  buildCss('pb_radio_kit', alignment),
56
64
  dark ? 'dark' : null,
57
65
  error ? 'error' : null,
58
66
  globalProps(props),
59
67
  className
60
- );
68
+ )
61
69
 
62
70
  const classesCustom = classnames(
63
71
  dark ? 'dark' : null,
64
72
  error ? 'error' : null,
65
73
  globalProps(props),
66
74
  className
67
- );
75
+ )
76
+
77
+ const checkedProps = checked !== undefined ? { checked } : {}
68
78
 
69
- const displayRadio = (props: RadioProps & any) => {
70
- if (children && customChildren == false)
71
- return (children)
79
+ const displayRadio = (inputProps: any) => {
80
+ if (children && customChildren === false)
81
+ return children
72
82
  else
73
- return (
74
- <input
75
- disabled={disabled}
76
- id={id}
77
- name={name}
78
- onChange={onChange}
79
- ref={ref}
80
- text={text}
81
- type="radio"
82
- value={value}
83
- {...props}
84
- />
85
- )}
83
+ return (
84
+ <input
85
+ {...checkedProps}
86
+ disabled={disabled}
87
+ id={id}
88
+ name={name}
89
+ onChange={onChange}
90
+ ref={setRefs}
91
+ type="radio"
92
+ value={value}
93
+ {...inputProps}
94
+ />
95
+ )
96
+ }
86
97
 
87
98
  const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
88
99
  if (event) {
89
- const target = event.target as HTMLElement;
100
+ const target = event.target as HTMLElement
90
101
  if (
91
102
  target.id === 'pb-radio-children-wrapper' ||
92
103
  target.closest('#pb-radio-children-wrapper')
93
104
  ) {
94
- radioRef.current?.click();
105
+ internalRef.current?.click()
95
106
  }
96
107
  }
97
- };
108
+ }
98
109
 
99
- return (
100
- customChildren ? (
101
- <Flex
102
- {...ariaProps}
103
- {...dataProps}
104
- {...htmlProps}
105
- align='center'
106
- className={classesCustom}
107
- cursor='pointer'
108
- htmlFor={id}
109
- htmlOptions={{
110
- onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
111
- handleContainerClick(event);
112
- }) as unknown as () => void
113
- }}
114
- id="radio-container"
115
- >
116
- <label className={buildCss('pb_radio_kit', alignment)}>
110
+ return customChildren ? (
111
+ <Flex
112
+ {...ariaProps}
113
+ {...dataProps}
114
+ {...htmlProps}
115
+ align="center"
116
+ className={classesCustom}
117
+ cursor="pointer"
118
+ htmlFor={id}
119
+ htmlOptions={{
120
+ onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
121
+ handleContainerClick(event)
122
+ }) as unknown as () => void
123
+ }}
124
+ id="radio-container"
125
+ >
126
+ <label className={buildCss('pb_radio_kit', alignment)}>
117
127
  <input
128
+ {...checkedProps}
118
129
  disabled={disabled}
119
130
  id={id}
120
131
  name={name}
121
132
  onChange={onChange}
122
- ref={radioRef}
133
+ ref={setRefs}
123
134
  type="radio"
124
135
  value={value}
125
136
  {...props}
126
137
  />
127
- <span className="pb_radio_button" />
128
- </label>
129
- <div id="pb-radio-children-wrapper"> {children} </div>
130
- </Flex>
131
- ) : (
132
- <label
133
- {...ariaProps}
134
- {...dataProps}
135
- {...htmlProps}
136
- className={classes}
137
- htmlFor={id}
138
- >
139
- <>{displayRadio(props)}</>
140
138
  <span className="pb_radio_button" />
141
- <Body
142
- dark={dark}
143
- status={error ? 'negative' : null}
144
- text={label}
145
- variant={null}
146
- />
147
139
  </label>
148
- )
149
- );
150
- };
140
+ <div id="pb-radio-children-wrapper"> {children} </div>
141
+ </Flex>
142
+ ) : (
143
+ <label
144
+ {...ariaProps}
145
+ {...dataProps}
146
+ {...htmlProps}
147
+ className={classes}
148
+ htmlFor={id}
149
+ >
150
+ {displayRadio(props)}
151
+ <span className="pb_radio_button" />
152
+ <Body
153
+ dark={dark}
154
+ status={error ? 'negative' : null}
155
+ text={label}
156
+ variant={null}
157
+ />
158
+ </label>
159
+ )
160
+ })
151
161
 
152
- export default forwardRef(Radio);
162
+ Radio.displayName = "Radio"
163
+ export default Radio