@pega/cosmos-react-core 2.0.0-dev.9.4 → 2.0.0-rc.4

package/lib/components/RadioCheck/RadioCheck.js

@@ -127,10 +127,10 @@ export const StyledRadioCheck = styled.div(props => {
         font-size: ${fontSize.s};
         color: ${labelColor};
         margin: 0;
-        min-height: ${base.sizes['touch-mouse']};
+        min-height: ${base['hit-area']['mouse-min']};
 
         @media (pointer: coarse) {
-          min-height: ${base.sizes['touch-finger']};
+          min-height: ${base['hit-area']['finger-min']};
         }
       }
 
@@ -152,7 +152,7 @@ export const StyledRadioCheckCard = styled.label(({ disabled, readOnly, status,
       background-color: ${card.background};
       border-radius: ${card['border-radius']};
       border: 0.0625rem solid ${useBorderColor};
-      padding: calc(1.5 * ${spacing});
+      padding: ${spacing};
 
       ${disabled &&
         css `
@@ -194,11 +194,10 @@ const RadioCheck = forwardRef((props, ref) => {
             newRef.current.indeterminate = !!indeterminate;
         }
     }, [newRef, indeterminate, isRadio]);
-    return (_jsx(FormField, Object.assign({ as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly }, void 0),
-                label] }, void 0), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, inline: true }, { children: _jsx(StyledRadioCheckInput, Object.assign({}, restProps, { id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly, onClick: (e) => {
+    return (_jsx(FormField, { as: card ? StyledRadioCheckCard : StyledRadioCheck, label: _jsxs(_Fragment, { children: [_jsx(StyledPseudoRadioCheck, { status: status, isRadio: isRadio, as: StyledFormControl, required: required, disabled: disabled, readOnly: readOnly }, void 0), label] }, void 0), labelAs: card ? 'div' : undefined, id: id, required: required, disabled: disabled, readOnly: readOnly, status: status, inline: true, labelAfter: true, children: _jsx(StyledRadioCheckInput, { ...restProps, id: id, type: type, required: required, disabled: disabled, readOnly: readOnly, "aria-readonly": readOnly, onClick: (e) => {
                 if (readOnly)
                     e.preventDefault();
-                onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                onClick?.(e);
             }, onKeyDown: (e) => {
                 if (type === 'checkbox' && readOnly && e.key === ' ') {
                     e.preventDefault();
@@ -206,8 +205,8 @@ const RadioCheck = forwardRef((props, ref) => {
                 if (type === 'radio' && readOnly && e.key.includes('Arrow')) {
                     e.preventDefault();
                 }
-                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-            }, ref: newRef }), void 0) }), void 0));
+                onKeyDown?.(e);
+            }, ref: newRef }, void 0) }, void 0));
 });
 export default RadioCheck;
 //# sourceMappingURL=RadioCheck.js.map

package/lib/components/RadioCheck/RadioCheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Ref,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\n\nexport interface RadioCheckProps extends BaseProps {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n\n    ${!(props.disabled || props.readOnly) &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base.sizes['touch-mouse']};\n\n        @media (pointer: coarse) {\n          min-height: ${base.sizes['touch-finger']};\n        }\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      align-items: start;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: calc(1.5 * ${spacing});\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckProps>, ref: RadioCheckProps['ref']) => {\n    const uid = useUID();\n    const {\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      indeterminate = false,\n      readOnly = false,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      status,\n      ...restProps\n    } = props;\n\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const newRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (!isRadio && newRef.current) {\n        newRef.current.indeterminate = !!indeterminate;\n      }\n    }, [newRef, indeterminate, isRadio]);\n\n    return (\n      <FormField\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n            />\n            {label}\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        inline\n      >\n        <StyledRadioCheckInput\n          {...restProps}\n          id={id}\n          type={type}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-readonly={readOnly}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') {\n              e.preventDefault();\n            }\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n              e.preventDefault();\n            }\n\n            onKeyDown?.(e);\n          }}\n          ref={newRef}\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default RadioCheck;\n"]}
+{"version":3,"file":"RadioCheck.js","sourceRoot":"","sources":["../../../src/components/RadioCheck/RadioCheck.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FC,\n  Ref,\n  useEffect,\n  MouseEvent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  MouseEventHandler,\n  KeyboardEventHandler\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor, hideVisually, mix } from 'polished';\n\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport { StyledLabel } from '../Label';\nimport { calculateFontSize } from '../../styles';\n\nexport interface RadioCheckProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Sets the type of input. */\n  type: 'radio' | 'checkbox';\n  /** Sets checked prop via onChange when using as controlled component. */\n  checked?: boolean;\n  /** Initialize checked prop when using as uncontrolled component. */\n  defaultChecked?: boolean;\n  /**\n   * Sets control to an an indeterminate state.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /**\n   * Controls the styling of the RadioCheck.\n   * @default 'simple'\n   */\n  variant?: 'simple' | 'card';\n  /** Callback function for onClick events. */\n  onClick?: MouseEventHandler<HTMLInputElement>;\n  /** Callback function for onKeyDown events. */\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  /** Ref forwarded to the underlying input. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledPseudoRadioCheck = styled.div<Pick<RadioCheckProps, 'readOnly' | 'status'>>(\n  props => {\n    const {\n      theme: {\n        base: {\n          spacing,\n          palette: { 'primary-background': primaryBackground }\n        },\n        components: {\n          'form-field': formField,\n          'radio-check': {\n            size,\n            'touch-size': touchSize,\n            'background-color': backgroundColor,\n            'border-color': borderColor,\n            'border-width': borderWidth\n          }\n        }\n      },\n      status\n    } = props;\n\n    const useBorderColor = status === 'error' ? formField.error['status-color'] : borderColor;\n    const useBackgroundColor =\n      status && formField[status]\n        ? tryCatch(() => mix(0.8, primaryBackground, formField[status]['status-color']))\n        : backgroundColor;\n\n    return css`\n      display: flex;\n      flex-shrink: 0;\n      position: relative;\n      width: ${size};\n      height: ${size};\n      margin-inline-end: ${spacing};\n      border: ${borderWidth} solid ${useBorderColor};\n      background-color: ${useBackgroundColor};\n\n      @media (pointer: coarse) {\n        width: ${touchSize};\n        height: ${touchSize};\n      }\n\n      &::after {\n        content: '';\n        display: none;\n      }\n    `;\n  }\n);\n\nStyledPseudoRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckInput = styled.input(props => {\n  const {\n    theme: {\n      base: { 'border-radius': baseBorderRadius },\n      components: {\n        'form-control': {\n          ':focus': { 'box-shadow': shadow, 'border-color': focusBorderColor },\n          ':read-only': { 'background-color': readOnlyBackgroundColor }\n        },\n        'radio-check': {\n          ':checked': {\n            'background-color': checkedBackgroundColor,\n            'border-color': checkedBorderColor\n          }\n        },\n        checkbox: { 'border-radius': checkRadius },\n        'radio-button': { 'border-radius': radioRadius }\n      }\n    }\n  } = props;\n\n  const backgroundColor = props.readOnly ? readOnlyBackgroundColor : checkedBackgroundColor;\n  const foreground = tryCatch(() => readableColor(backgroundColor));\n\n  const prcSelector = `+ ${StyledLabel} ${StyledPseudoRadioCheck}`;\n  const { ltr } = useDirection();\n\n  return css`\n    ${hideVisually}\n\n    ${!(props.disabled || props.readOnly) &&\n    css`\n      &:focus ${prcSelector} {\n        box-shadow: ${shadow};\n        border-color: ${focusBorderColor};\n      }\n    `}\n\n    &:checked\n      ${prcSelector},\n      &:checked:disabled\n      ${prcSelector},\n      &[type='checkbox']:indeterminate\n      ${prcSelector},\n      &[type='checkbox']:indeterminate:disabled\n      ${prcSelector} {\n      border-color: ${props.readOnly ? 'inherit' : checkedBorderColor};\n      background-color: ${backgroundColor};\n\n      &::after {\n        display: block;\n      }\n    }\n\n    &[type='radio'] ${prcSelector}, &[type='radio'] ${prcSelector}::after {\n      border-radius: ${radioRadius};\n    }\n\n    &[type='radio'] ${prcSelector}::after {\n      margin: auto;\n      width: 100%;\n      height: 100%;\n      background-color: ${foreground};\n      transform: scale(0.4);\n    }\n\n    &[type='checkbox'] ${prcSelector} {\n      border-radius: min(calc(${baseBorderRadius} * ${checkRadius}), 0.25rem);\n    }\n\n    &[type='checkbox']:not(:indeterminate) ${prcSelector} {\n      &::after {\n        width: 40%;\n        height: 75%;\n        ${ltr\n          ? css`\n              transform: rotate(45deg) translate(50%, -30%);\n            `\n          : css`\n              transform: rotate(45deg) translate(-50%, 30%);\n            `}\n        border-right: 0.15em solid ${foreground};\n        border-bottom: 0.15em solid ${foreground};\n      }\n    }\n\n    &[type='checkbox']:indeterminate ${prcSelector} {\n      display: flex;\n      &::after {\n        width: 90%;\n        height: 0.15em;\n        margin: auto;\n        background-color: ${foreground};\n      }\n    }\n  `;\n});\n\nStyledRadioCheckInput.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheck = styled.div<Pick<RadioCheckProps, 'disabled' | 'readOnly'>>(\n  props => {\n    const {\n      disabled,\n      readOnly,\n      theme: {\n        base,\n        components: {\n          'radio-check': {\n            label: { color: labelColor, 'font-weight': labelFontWeight }\n          },\n          'form-control': {\n            ':hover': { 'border-color': hoverBorderColor }\n          }\n        }\n      }\n    } = props;\n\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n\n    return css`\n      > ${StyledLabel} {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        font-weight: ${labelFontWeight};\n        word-break: break-word;\n        font-size: ${fontSize.s};\n        color: ${labelColor};\n        margin: 0;\n        min-height: ${base['hit-area']['mouse-min']};\n\n        @media (pointer: coarse) {\n          min-height: ${base['hit-area']['finger-min']};\n        }\n      }\n\n      ${!(disabled || readOnly) &&\n      css`\n        &:not(:focus-within) > ${StyledLabel}:hover ${StyledPseudoRadioCheck} {\n          border-color: ${hoverBorderColor};\n        }\n      `}\n    `;\n  }\n);\n\nStyledRadioCheck.defaultProps = defaultThemeProp;\n\nexport const StyledRadioCheckCard = styled.label<\n  Pick<RadioCheckProps, 'disabled' | 'readOnly' | 'status'>\n>(\n  ({\n    disabled,\n    readOnly,\n    status,\n    theme: {\n      base: { palette, shadow, spacing },\n      components: {\n        card,\n        'form-field': formField,\n        'radio-check': { label },\n        'form-control': {\n          ':hover': { 'border-color': hoverBorderColor }\n        }\n      }\n    }\n  }) => {\n    const useBorderColor =\n      status === 'error' ? formField.error['status-color'] : palette['border-line'];\n\n    return css`\n      min-width: min-content;\n      align-items: start;\n      cursor: pointer;\n      background-color: ${card.background};\n      border-radius: ${card['border-radius']};\n      border: 0.0625rem solid ${useBorderColor};\n      padding: ${spacing};\n\n      ${disabled &&\n      css`\n        cursor: not-allowed;\n      `}\n\n      ${!(disabled || readOnly) &&\n      css`\n        :hover:not(:focus-within) {\n          border-color: ${hoverBorderColor};\n          ${StyledLabel} ${StyledPseudoRadioCheck} {\n            border-color: ${hoverBorderColor};\n          }\n        }\n\n        :focus-within {\n          box-shadow: ${shadow.focus};\n          border-color: transparent;\n        }\n      `}\n\n    > ${StyledLabel} {\n        display: grid;\n        grid-template-columns: auto 1fr;\n        color: ${label.color};\n        font-weight: ${label['font-weight']};\n      }\n    `;\n  }\n);\n\nStyledRadioCheckCard.defaultProps = defaultThemeProp;\n\nconst RadioCheck: FC<RadioCheckProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckProps>, ref: RadioCheckProps['ref']) => {\n    const uid = useUID();\n    const {\n      type,\n      id = uid,\n      label,\n      required = false,\n      disabled = false,\n      indeterminate = false,\n      readOnly = false,\n      variant = 'simple',\n      onClick,\n      onKeyDown,\n      status,\n      ...restProps\n    } = props;\n\n    const isRadio = type === 'radio';\n    const card = variant === 'card';\n    const newRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (!isRadio && newRef.current) {\n        newRef.current.indeterminate = !!indeterminate;\n      }\n    }, [newRef, indeterminate, isRadio]);\n\n    return (\n      <FormField\n        as={card ? StyledRadioCheckCard : StyledRadioCheck}\n        label={\n          <>\n            <StyledPseudoRadioCheck\n              status={status}\n              isRadio={isRadio}\n              as={StyledFormControl}\n              required={required}\n              disabled={disabled}\n              readOnly={readOnly}\n            />\n            {label}\n          </>\n        }\n        labelAs={card ? 'div' : undefined}\n        id={id}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        status={status}\n        inline\n        labelAfter\n      >\n        <StyledRadioCheckInput\n          {...restProps}\n          id={id}\n          type={type}\n          required={required}\n          disabled={disabled}\n          readOnly={readOnly}\n          aria-readonly={readOnly}\n          onClick={(e: MouseEvent<HTMLInputElement>) => {\n            if (readOnly) e.preventDefault();\n\n            onClick?.(e);\n          }}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (type === 'checkbox' && readOnly && e.key === ' ') {\n              e.preventDefault();\n            }\n            if (type === 'radio' && readOnly && e.key.includes('Arrow')) {\n              e.preventDefault();\n            }\n\n            onKeyDown?.(e);\n          }}\n          ref={newRef}\n        />\n      </FormField>\n    );\n  }\n);\n\nexport default RadioCheck;\n"]}

package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts

@@ -31,6 +31,10 @@ export interface RadioCheckGroupProps {
      * @default false
      */
     inline?: FormFieldProps['inline'];
+    /** Used to toggle the auto stacking feature of an inlined group.
+     * @default true
+     */
+    autoStack?: boolean;
     /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
     name?: FormControlProps['name'];
     /**

package/lib/components/RadioCheckGroup/RadioCheckGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAKH,YAAY,EACZ,WAAW,EAIZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAeD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG,YAAY,CAwF5D,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"RadioCheckGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EACF,GAAG,EAKH,YAAY,EACZ,WAAW,EAIZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAkB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIhD,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAeD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,GAAG,YAAY,CAyF5D,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/lib/components/RadioCheckGroup/RadioCheckGroup.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import FormField from '../FormField';
 import { StyledFormField } from '../FormField/FormField';
 import Grid from '../Grid';
-import { useElement } from '../../hooks';
+import { useElement, useUID } from '../../hooks';
 const defaultProps = {
     required: false,
     disabled: false
@@ -16,13 +16,15 @@ const StyledRadioCheckGroup = styled.fieldset `
     }
   }
 `;
-const RadioCheckGroup = forwardRef(({ children, name, disabled, onChange, readOnly, inline = false, variant = 'simple', ...restProps }, ref) => {
+const RadioCheckGroup = forwardRef((props, ref) => {
+    const uid = useUID();
+    const { children, name = uid, disabled, onChange, readOnly, inline = false, autoStack = true, variant = 'simple', ...restProps } = props;
     const [optionsEl, setOptionsEl] = useElement();
     const [renderInline, setRenderInline] = useState(inline);
     const renderInlineRef = useRef(inline);
     const minInlineWidth = useRef(0);
     useEffect(() => {
-        if (inline && optionsEl) {
+        if (inline && optionsEl && autoStack) {
             const intersectionObserver = new IntersectionObserver(entries => {
                 if (entries[0].intersectionRatio < 1) {
                     if (entries[0].rootBounds)
@@ -44,33 +46,32 @@ const RadioCheckGroup = forwardRef(({ children, name, disabled, onChange, readOn
                 resizeObserver.disconnect();
             };
         }
-    }, [optionsEl, inline]);
-    return (_jsx(FormField, Object.assign({}, {
-        as: StyledRadioCheckGroup,
-        labelAs: 'legend',
-        ref,
-        name,
-        disabled,
-        ...restProps
-    }, { children: _jsx(Grid, Object.assign({ ref: setOptionsEl, container: {
-                colGap: 2,
-                rowGap: variant === 'card' ? 2 : 0,
+    }, [optionsEl, inline, autoStack]);
+    return (_jsx(FormField, { ...{
+            as: StyledRadioCheckGroup,
+            labelAs: 'legend',
+            ref,
+            name,
+            disabled,
+            ...restProps
+        }, children: _jsx(Grid, { ref: setOptionsEl, container: {
+                colGap: 1,
+                rowGap: variant === 'card' ? 1 : 0,
                 cols: renderInline ? 'repeat(auto-fit, minmax(1ch, max-content))' : '1fr'
-            } }, { children: Children.map(children, child => cloneElement(child, {
+            }, children: Children.map(children, child => cloneElement(child, {
                 name,
                 disabled: disabled || child.props.disabled,
                 readOnly: readOnly || child.props.readOnly,
                 variant,
                 onChange: onChange
                     ? (e) => {
-                        var _a, _b;
                         if (!(readOnly || child.props.readOnly)) {
-                            (_b = (_a = child.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                            child.props.onChange?.(e);
                             onChange(e);
                         }
                     }
                     : child.props.onChange
-            })) }), void 0) }), void 0));
+            })) }, void 0) }, void 0));
 });
 RadioCheckGroup.defaultProps = defaultProps;
 export default RadioCheckGroup;

package/lib/components/RadioCheckGroup/RadioCheckGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  Children,\n  cloneElement,\n  ReactElement,\n  ChangeEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport { FormControlProps } from '../FormControl';\nimport { RadioCheckProps } from '../RadioCheck';\nimport Grid from '../Grid';\nimport { useElement } from '../../hooks';\n\nexport interface RadioCheckGroupProps {\n  /** Accepts Checkboxes or RadioButtons as children. */\n  children: ReactElement | ReactElement[];\n  /**\n   * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n   * Additionally, onChange can be passed to individual children.\n   * Both handlers will be called, child followed by group.\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: FormFieldProps['inline'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * Controls the styling of the child RadioChecks.\n   * @default 'simple'\n   */\n  variant?: RadioCheckProps['variant'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst defaultProps = {\n  required: false,\n  disabled: false\n};\n\nconst StyledRadioCheckGroup = styled.fieldset`\n  &[disabled] {\n    > ${StyledFormField} {\n      opacity: unset;\n    }\n  }\n`;\n\nconst RadioCheckGroup: FC<RadioCheckGroupProps & ForwardProps> = forwardRef(\n  (\n    {\n      children,\n      name,\n      disabled,\n      onChange,\n      readOnly,\n      inline = false,\n      variant = 'simple',\n      ...restProps\n    }: PropsWithoutRef<RadioCheckGroupProps>,\n    ref: RadioCheckGroupProps['ref']\n  ) => {\n    const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n    const [renderInline, setRenderInline] = useState(inline);\n    const renderInlineRef = useRef(inline);\n    const minInlineWidth = useRef(0);\n\n    useEffect(() => {\n      if (inline && optionsEl) {\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n              renderInlineRef.current = false;\n              setRenderInline(false);\n            }\n          },\n          { root: optionsEl, threshold: 1 }\n        );\n\n        const resizeObserver = new ResizeObserver(entries => {\n          if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n            renderInlineRef.current = true;\n            setRenderInline(true);\n          }\n        });\n\n        intersectionObserver.observe(optionsEl.lastChild as Element);\n        resizeObserver.observe(optionsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [optionsEl, inline]);\n\n    return (\n      <FormField\n        {...{\n          as: StyledRadioCheckGroup,\n          labelAs: 'legend',\n          ref,\n          name,\n          disabled,\n          ...restProps\n        }}\n      >\n        <Grid\n          ref={setOptionsEl}\n          container={{\n            colGap: 2,\n            rowGap: variant === 'card' ? 2 : 0,\n            cols: renderInline ? 'repeat(auto-fit, minmax(1ch, max-content))' : '1fr'\n          }}\n        >\n          {Children.map(children, child =>\n            cloneElement(child, {\n              name,\n              disabled: disabled || child.props.disabled,\n              readOnly: readOnly || child.props.readOnly,\n              variant,\n              onChange: onChange\n                ? (e: ChangeEvent<HTMLInputElement>) => {\n                    if (!(readOnly || child.props.readOnly)) {\n                      child.props.onChange?.(e);\n                      onChange(e);\n                    }\n                  }\n                : child.props.onChange\n            })\n          )}\n        </Grid>\n      </FormField>\n    );\n  }\n);\n\nRadioCheckGroup.defaultProps = defaultProps;\n\nexport default RadioCheckGroup;\n"]}
+{"version":3,"file":"RadioCheckGroup.js","sourceRoot":"","sources":["../../../src/components/RadioCheckGroup/RadioCheckGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  Children,\n  cloneElement,\n  ReactElement,\n  ChangeEvent,\n  useState,\n  useEffect,\n  useRef\n} from 'react';\nimport styled from 'styled-components';\n\nimport { ForwardProps } from '../../types';\nimport FormField, { FormFieldProps } from '../FormField';\nimport { StyledFormField } from '../FormField/FormField';\nimport { FormControlProps } from '../FormControl';\nimport { RadioCheckProps } from '../RadioCheck';\nimport Grid from '../Grid';\nimport { useElement, useUID } from '../../hooks';\n\nexport interface RadioCheckGroupProps {\n  /** Accepts Checkboxes or RadioButtons as children. */\n  children: ReactElement | ReactElement[];\n  /**\n   * Conveniently pass an onChange handler to the group to be notified when any of the inputs change.\n   * Additionally, onChange can be passed to individual children.\n   * Both handlers will be called, child followed by group.\n   */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /** Visually hides the label region. */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the input non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /**\n   * Layout field elements inline in a row.\n   * @default false\n   */\n  inline?: FormFieldProps['inline'];\n  /** Used to toggle the auto stacking feature of an inlined group.\n   * @default true\n   */\n  autoStack?: boolean;\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * Controls the styling of the child RadioChecks.\n   * @default 'simple'\n   */\n  variant?: RadioCheckProps['variant'];\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLElement>;\n}\n\nconst defaultProps = {\n  required: false,\n  disabled: false\n};\n\nconst StyledRadioCheckGroup = styled.fieldset`\n  &[disabled] {\n    > ${StyledFormField} {\n      opacity: unset;\n    }\n  }\n`;\n\nconst RadioCheckGroup: FC<RadioCheckGroupProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<RadioCheckGroupProps>, ref: RadioCheckGroupProps['ref']) => {\n    const uid = useUID();\n    const {\n      children,\n      name = uid,\n      disabled,\n      onChange,\n      readOnly,\n      inline = false,\n      autoStack = true,\n      variant = 'simple',\n      ...restProps\n    } = props;\n\n    const [optionsEl, setOptionsEl] = useElement<HTMLDivElement>();\n    const [renderInline, setRenderInline] = useState(inline);\n    const renderInlineRef = useRef(inline);\n    const minInlineWidth = useRef(0);\n\n    useEffect(() => {\n      if (inline && optionsEl && autoStack) {\n        const intersectionObserver = new IntersectionObserver(\n          entries => {\n            if (entries[0].intersectionRatio < 1) {\n              if (entries[0].rootBounds) minInlineWidth.current = entries[0].rootBounds.width + 1;\n              renderInlineRef.current = false;\n              setRenderInline(false);\n            }\n          },\n          { root: optionsEl, threshold: 1 }\n        );\n\n        const resizeObserver = new ResizeObserver(entries => {\n          if (!renderInlineRef.current && entries[0].contentRect.width > minInlineWidth.current) {\n            renderInlineRef.current = true;\n            setRenderInline(true);\n          }\n        });\n\n        intersectionObserver.observe(optionsEl.lastChild as Element);\n        resizeObserver.observe(optionsEl);\n\n        return () => {\n          intersectionObserver.disconnect();\n          resizeObserver.disconnect();\n        };\n      }\n    }, [optionsEl, inline, autoStack]);\n\n    return (\n      <FormField\n        {...{\n          as: StyledRadioCheckGroup,\n          labelAs: 'legend',\n          ref,\n          name,\n          disabled,\n          ...restProps\n        }}\n      >\n        <Grid\n          ref={setOptionsEl}\n          container={{\n            colGap: 1,\n            rowGap: variant === 'card' ? 1 : 0,\n            cols: renderInline ? 'repeat(auto-fit, minmax(1ch, max-content))' : '1fr'\n          }}\n        >\n          {Children.map(children, child =>\n            cloneElement(child, {\n              name,\n              disabled: disabled || child.props.disabled,\n              readOnly: readOnly || child.props.readOnly,\n              variant,\n              onChange: onChange\n                ? (e: ChangeEvent<HTMLInputElement>) => {\n                    if (!(readOnly || child.props.readOnly)) {\n                      child.props.onChange?.(e);\n                      onChange(e);\n                    }\n                  }\n                : child.props.onChange\n            })\n          )}\n        </Grid>\n      </FormField>\n    );\n  }\n);\n\nRadioCheckGroup.defaultProps = defaultProps;\n\nexport default RadioCheckGroup;\n"]}

package/lib/components/Rating/Rating.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-export interface RatingProps extends BaseProps {
+import type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';
+export interface RatingProps extends BaseProps, NoChildrenProp {
     /**
      * Sets the rating to read only.
      * @default false

package/lib/components/Rating/Rating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAItD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgCD,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,+HAU9B,CAAC;AAkCH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwBzD,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQ3E,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgCD,UAAU,wBAAwB;IAChC,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,+HAU9B,CAAC;AAkCH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAwBzD,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/lib/components/Rating/Rating.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '../../theme';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as starIcon from '../Icon/icons/star.icon';
+import * as starSolidIcon from '../Icon/icons/star-solid.icon';
+registerIcon(starIcon, starSolidIcon);
 const DEFAULT_MAX_RATING = 5;
 const defaultProps = {
     readOnly: false,
@@ -47,10 +50,7 @@ StyledRatingMetaInfo.defaultProps = defaultThemeProp;
 const RatingItem = (props) => {
     const { fill, ...restProps } = props;
     const fillPercentage = Math.round((100 / 1) * fill);
-    return (_jsxs(_Fragment, { children: [fillPercentage === 0 && _jsx(Icon, Object.assign({}, restProps, { name: 'star' }), void 0),
-            fillPercentage === 100 && _jsx(Icon, Object.assign({}, restProps, { name: 'star-solid' }), void 0),
-            fillPercentage > 0 && fillPercentage < 100 && (_jsxs(StyledPartialRatingContainer, { children: [_jsx(Icon, Object.assign({}, restProps, { name: 'star' }), void 0),
-                    _jsx(StyledPartialRating, Object.assign({ ratingPercentage: fillPercentage }, { children: _jsx(Icon, Object.assign({}, restProps, { name: 'star-solid' }), void 0) }), void 0)] }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [fillPercentage === 0 && _jsx(Icon, { ...restProps, name: 'star' }, void 0), fillPercentage === 100 && _jsx(Icon, { ...restProps, name: 'star-solid' }, void 0), fillPercentage > 0 && fillPercentage < 100 && (_jsxs(StyledPartialRatingContainer, { children: [_jsx(Icon, { ...restProps, name: 'star' }, void 0), _jsx(StyledPartialRating, { ratingPercentage: fillPercentage, children: _jsx(Icon, { ...restProps, name: 'star-solid' }, void 0) }, void 0)] }, void 0))] }, void 0));
 };
 const Rating = (props) => {
     const starsOutline = [];
@@ -67,8 +67,7 @@ const Rating = (props) => {
         }
         starsOutline.push(_jsx(RatingItem, { fill: fillValue }, `star-${i}`));
     }
-    return (_jsxs(StyledRating, Object.assign({ "aria-label": ariaLabel, title: ariaLabel, tabIndex: tabIndex }, restProps, { children: [_jsx(StyledRatingItemsContainer, { children: starsOutline }, void 0),
-            metaInfo && _jsxs(StyledRatingMetaInfo, { children: ["(", metaInfo, ")"] }, void 0), ' '] }), void 0));
+    return (_jsxs(StyledRating, { "aria-label": ariaLabel, tabIndex: tabIndex, ...restProps, children: [_jsx(StyledRatingItemsContainer, { children: starsOutline }, void 0), metaInfo && _jsxs(StyledRatingMetaInfo, { children: ["(", metaInfo, ")"] }, void 0), ' '] }, void 0));
 };
 Rating.defaultProps = defaultProps;
 export default Rating;

package/lib/components/Rating/Rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon from '../Icon';\n\nexport interface RatingProps extends BaseProps {\n  /**\n   * Sets the rating to read only.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * The maximum rating allowed. Must be an integer greater than 1.\n   * @default 5\n   */\n  maxRating?: number;\n  /** The value of the Rating. Could be a decimal or integer. */\n  value: number;\n  /** Text that is displayed in parentheses inline with the Rating stars. */\n  metaInfo?: string;\n  /** Aria label for screen readers. */\n  'aria-label'?: string;\n  /**\n   * The tabIndex to control focus.\n   * @default 0\n   */\n  tabIndex?: number;\n}\n\nconst DEFAULT_MAX_RATING = 5;\n\nconst defaultProps: Partial<RatingProps> = {\n  readOnly: false,\n  maxRating: DEFAULT_MAX_RATING,\n  tabIndex: 0\n};\n\nconst StyledRating = styled.div`\n  display: inline-block;\n  vertical-align: middle;\n`;\n\nconst StyledRatingItemsContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    color: ${theme.components.rating.color};\n    line-height: 1;\n    vertical-align: middle;\n    display: inline-block;\n  `;\n});\n\nStyledRatingItemsContainer.defaultProps = defaultThemeProp;\n\nconst StyledPartialRatingContainer = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\ninterface StyledPartialRatingProps {\n  ratingPercentage: number;\n}\n\nexport const StyledPartialRating = styled.div<StyledPartialRatingProps>(props => {\n  const { ratingPercentage } = props;\n  return css`\n    display: inline-block;\n    position: absolute;\n    inset-inline-start: 0;\n    width: ${ratingPercentage}%;\n    overflow: hidden;\n    white-space: nowrap;\n  `;\n});\n\nconst StyledRatingMetaInfo = styled.span(props => {\n  const { theme } = props;\n  return css`\n    margin-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledRatingMetaInfo.defaultProps = defaultThemeProp;\n\ninterface RatingItemProps {\n  fill: number;\n}\n\nconst RatingItem: FunctionComponent<RatingItemProps> = (props: RatingItemProps) => {\n  const { fill, ...restProps } = props;\n  const fillPercentage = Math.round((100 / 1) * fill);\n  return (\n    <>\n      {fillPercentage === 0 && <Icon {...restProps} name='star' />}\n      {fillPercentage === 100 && <Icon {...restProps} name='star-solid' />}\n      {fillPercentage > 0 && fillPercentage < 100 && (\n        <StyledPartialRatingContainer>\n          <Icon {...restProps} name='star' />\n          <StyledPartialRating ratingPercentage={fillPercentage}>\n            <Icon {...restProps} name='star-solid' />\n          </StyledPartialRating>\n        </StyledPartialRatingContainer>\n      )}\n    </>\n  );\n};\n\nconst Rating: FunctionComponent<RatingProps & ForwardProps> = (props: RatingProps) => {\n  const starsOutline = [];\n  const { 'aria-label': ariaLabel, metaInfo, tabIndex, readOnly, ...restProps } = props;\n\n  let { maxRating, value } = props;\n  maxRating = typeof maxRating !== 'number' ? DEFAULT_MAX_RATING : maxRating;\n  maxRating = Math.max(1, maxRating);\n  value = Math.min(maxRating, value);\n\n  const isDecimalValue = Math.round(value) !== value;\n  for (let i = 1; i <= maxRating; i += 1) {\n    let fillValue = i <= value ? 1 : 0;\n    if (isDecimalValue && Math.ceil(value) === i) {\n      fillValue = value - Math.floor(value);\n    }\n    starsOutline.push(<RatingItem key={`star-${i}`} fill={fillValue} />);\n  }\n\n  return (\n    <StyledRating aria-label={ariaLabel} title={ariaLabel} tabIndex={tabIndex} {...restProps}>\n      <StyledRatingItemsContainer>{starsOutline}</StyledRatingItemsContainer>\n      {metaInfo && <StyledRatingMetaInfo>({metaInfo})</StyledRatingMetaInfo>}{' '}\n    </StyledRating>\n  );\n};\n\nRating.defaultProps = defaultProps;\n\nexport default Rating;\n"]}
+{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Icon, { registerIcon } from '../Icon';\nimport * as starIcon from '../Icon/icons/star.icon';\nimport * as starSolidIcon from '../Icon/icons/star-solid.icon';\n\nregisterIcon(starIcon, starSolidIcon);\n\nexport interface RatingProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets the rating to read only.\n   * @default false\n   */\n  readOnly?: boolean;\n  /**\n   * The maximum rating allowed. Must be an integer greater than 1.\n   * @default 5\n   */\n  maxRating?: number;\n  /** The value of the Rating. Could be a decimal or integer. */\n  value: number;\n  /** Text that is displayed in parentheses inline with the Rating stars. */\n  metaInfo?: string;\n  /** Aria label for screen readers. */\n  'aria-label'?: string;\n  /**\n   * The tabIndex to control focus.\n   * @default 0\n   */\n  tabIndex?: number;\n}\n\nconst DEFAULT_MAX_RATING = 5;\n\nconst defaultProps: Partial<RatingProps> = {\n  readOnly: false,\n  maxRating: DEFAULT_MAX_RATING,\n  tabIndex: 0\n};\n\nconst StyledRating = styled.div`\n  display: inline-block;\n  vertical-align: middle;\n`;\n\nconst StyledRatingItemsContainer = styled.div(props => {\n  const { theme } = props;\n  return css`\n    color: ${theme.components.rating.color};\n    line-height: 1;\n    vertical-align: middle;\n    display: inline-block;\n  `;\n});\n\nStyledRatingItemsContainer.defaultProps = defaultThemeProp;\n\nconst StyledPartialRatingContainer = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\ninterface StyledPartialRatingProps {\n  ratingPercentage: number;\n}\n\nexport const StyledPartialRating = styled.div<StyledPartialRatingProps>(props => {\n  const { ratingPercentage } = props;\n  return css`\n    display: inline-block;\n    position: absolute;\n    inset-inline-start: 0;\n    width: ${ratingPercentage}%;\n    overflow: hidden;\n    white-space: nowrap;\n  `;\n});\n\nconst StyledRatingMetaInfo = styled.span(props => {\n  const { theme } = props;\n  return css`\n    margin-inline-start: ${theme.base.spacing};\n  `;\n});\n\nStyledRatingMetaInfo.defaultProps = defaultThemeProp;\n\ninterface RatingItemProps {\n  fill: number;\n}\n\nconst RatingItem: FunctionComponent<RatingItemProps> = (props: RatingItemProps) => {\n  const { fill, ...restProps } = props;\n  const fillPercentage = Math.round((100 / 1) * fill);\n  return (\n    <>\n      {fillPercentage === 0 && <Icon {...restProps} name='star' />}\n      {fillPercentage === 100 && <Icon {...restProps} name='star-solid' />}\n      {fillPercentage > 0 && fillPercentage < 100 && (\n        <StyledPartialRatingContainer>\n          <Icon {...restProps} name='star' />\n          <StyledPartialRating ratingPercentage={fillPercentage}>\n            <Icon {...restProps} name='star-solid' />\n          </StyledPartialRating>\n        </StyledPartialRatingContainer>\n      )}\n    </>\n  );\n};\n\nconst Rating: FunctionComponent<RatingProps & ForwardProps> = (props: RatingProps) => {\n  const starsOutline = [];\n  const { 'aria-label': ariaLabel, metaInfo, tabIndex, readOnly, ...restProps } = props;\n\n  let { maxRating, value } = props;\n  maxRating = typeof maxRating !== 'number' ? DEFAULT_MAX_RATING : maxRating;\n  maxRating = Math.max(1, maxRating);\n  value = Math.min(maxRating, value);\n\n  const isDecimalValue = Math.round(value) !== value;\n  for (let i = 1; i <= maxRating; i += 1) {\n    let fillValue = i <= value ? 1 : 0;\n    if (isDecimalValue && Math.ceil(value) === i) {\n      fillValue = value - Math.floor(value);\n    }\n    starsOutline.push(<RatingItem key={`star-${i}`} fill={fillValue} />);\n  }\n\n  return (\n    <StyledRating aria-label={ariaLabel} tabIndex={tabIndex} {...restProps}>\n      <StyledRatingItemsContainer>{starsOutline}</StyledRatingItemsContainer>\n      {metaInfo && <StyledRatingMetaInfo>({metaInfo})</StyledRatingMetaInfo>}{' '}\n    </StyledRating>\n  );\n};\n\nRating.defaultProps = defaultProps;\n\nexport default Rating;\n"]}

package/lib/components/SearchInput/SearchInput.d.ts

@@ -1,10 +1,10 @@
 import { FunctionComponent } from 'react';
-import { ForwardProps } from '../../types';
+import { ForwardProps, NoChildrenProp } from '../../types';
 import { FormControlProps } from '../FormControl';
-export interface SearchInputProps {
+export interface SearchInputProps extends NoChildrenProp {
     /**
-     * Placeholder text. The default value is a locale translation of 'Search...'
-     * @default "Search..."
+     * Placeholder text. The default value is a locale translation of 'Search…'
+     * @default "Search…"
      */
     placeholder?: FormControlProps['placeholder'];
     /**
@@ -27,7 +27,7 @@ export interface SearchInputProps {
     searchInputAriaLabel?: string;
 }
 export declare const StyledSearchIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").FC<import("../Input/Input").InputProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSearchTextInput: import("styled-components").StyledComponent<import("react").FC<import("../Input").InputProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSearchInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const SearchInput: FunctionComponent<SearchInputProps & ForwardProps>;
 export default SearchInput;

package/lib/components/SearchInput/SearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKlD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,yGAsB3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,0KA0BhC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAgB5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwEnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOlD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,yGAsB3B,CAAC;AAIH,eAAO,MAAM,qBAAqB,oKA0BhC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAgB5B,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwEnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SearchInput/SearchInput.js

@@ -4,10 +4,12 @@ import styled, { css } from 'styled-components';
 import { transparentize } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import Input from '../Input';
-import Icon from '../Icon';
+import Icon, { registerIcon } from '../Icon';
+import * as searchIcon from '../Icon/icons/search.icon';
 import { useAfterInitialEffect, useConsolidatedRef, useI18n } from '../../hooks';
 import Flex from '../Flex';
 import { tryCatch } from '../../utils';
+registerIcon(searchIcon);
 export const StyledSearchIcon = styled.div(props => {
     const { theme: { base, components: { 'search-input': searchInput, 'form-control': formControl } } } = props;
     const iconColor = tryCatch(() => transparentize(0.75, base.palette['foreground-color']));
@@ -16,8 +18,8 @@ export const StyledSearchIcon = styled.div(props => {
     z-index: 1;
     inset-inline-start: 0.0625rem;
     top: 0.0625rem;
-    width: calc(${base.sizes['touch-mouse']} - 0.125rem);
-    height: calc(${base.sizes['touch-mouse']} - 0.125rem);
+    width: calc(${base['hit-area']['mouse-min']} - 0.125rem);
+    height: calc(${base['hit-area']['mouse-min']} - 0.125rem);
     border-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});
     padding: 0;
     background: ${formControl['background-color']};
@@ -33,11 +35,11 @@ export const StyledSearchTextInput = styled(Input)(props => {
     return css `
     position: relative;
     width: 100%;
-    height: ${theme.base.sizes['touch-mouse']};
-    min-height: ${theme.base.sizes['touch-mouse']};
+    height: ${theme.base['hit-area']['mouse-min']};
+    min-height: ${theme.base['hit-area']['mouse-min']};
     padding-inline-start: 0;
-    padding-inline-end: calc(${theme.base.sizes['touch-mouse']} - 0.125rem);
-    text-indent: calc(${theme.base.sizes['touch-mouse']} - 0.125rem);
+    padding-inline-end: calc(${theme.base['hit-area']['mouse-min']} - 0.125rem);
+    text-indent: calc(${theme.base['hit-area']['mouse-min']} - 0.125rem);
     border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});
     &::-ms-clear {
       display: none;
@@ -59,7 +61,7 @@ export const StyledSearchInput = styled.div(({ theme: { base, components } }) =>
     const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));
     return css `
     position: relative;
-    height: ${base.sizes['touch-mouse']};
+    height: ${base['hit-area']['mouse-min']};
     border-radius: calc(${components['search-input']['border-radius']} * ${base['border-radius']});
 
     &:focus-within {
@@ -86,7 +88,7 @@ const SearchInput = forwardRef((props, ref) => {
         setValue(e.target.value);
     }, [searchInputValue]);
     const onSubmit = useCallback(() => {
-        onSearchSubmit === null || onSearchSubmit === void 0 ? void 0 : onSearchSubmit(searchInputValue);
+        onSearchSubmit?.(searchInputValue);
     }, [searchInputValue]);
     const onKeyDown = useCallback((e) => {
         if (e.key === 'Enter') {
@@ -97,11 +99,9 @@ const SearchInput = forwardRef((props, ref) => {
         if (onSearchChange)
             onSearchChange(searchInputValue);
     }, [searchInputValue]);
-    return (_jsxs(Flex, Object.assign({ container: true, as: StyledSearchInput }, { children: [_jsx(StyledSearchTextInput, Object.assign({ ref: innerRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder }, restProps, { value: searchInputValue, onChange: onChange, onKeyDown: onKeyDown }), void 0),
-            _jsx(Flex, Object.assign({ as: StyledSearchIcon, container: { justify: 'center', alignItems: 'center' }, onClick: () => {
-                    var _a;
-                    (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                } }, { children: _jsx(Icon, { name: 'search' }, void 0) }), void 0)] }), void 0));
+    return (_jsxs(Flex, { container: true, as: StyledSearchInput, children: [_jsx(StyledSearchTextInput, { ref: innerRef, type: 'search', "aria-label": searchInputAriaLabel, placeholder: placeholder, ...restProps, value: searchInputValue, onChange: onChange, onKeyDown: onKeyDown }, void 0), _jsx(Flex, { as: StyledSearchIcon, container: { justify: 'center', alignItems: 'center' }, onClick: () => {
+                    innerRef.current?.focus();
+                }, children: _jsx(Icon, { name: 'search' }, void 0) }, void 0)] }, void 0));
 });
 export default SearchInput;
 //# sourceMappingURL=SearchInput.js.map

package/lib/components/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  forwardRef,\n  useState,\n  ChangeEvent,\n  useCallback,\n  KeyboardEvent,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Input from '../Input';\nimport Icon from '../Icon';\nimport { FormControlProps } from '../FormControl';\nimport { useAfterInitialEffect, useConsolidatedRef, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport { tryCatch } from '../../utils';\n\nexport interface SearchInputProps {\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search...'\n   * @default \"Search...\"\n   */\n  placeholder?: FormControlProps['placeholder'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: FormControlProps['defaultValue'];\n  /** Called when the SearchInput value changes. */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n   * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n   */\n  onSearchSubmit?: (value: string) => void;\n  /** Aria label for search input, used by screen readers. */\n  searchInputAriaLabel?: string;\n}\n\nexport const StyledSearchIcon = styled.div(props => {\n  const {\n    theme: {\n      base,\n      components: { 'search-input': searchInput, 'form-control': formControl }\n    }\n  } = props;\n  const iconColor = tryCatch(() => transparentize(0.75, base.palette['foreground-color']));\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-inline-start: 0.0625rem;\n    top: 0.0625rem;\n    width: calc(${base.sizes['touch-mouse']} - 0.125rem);\n    height: calc(${base.sizes['touch-mouse']} - 0.125rem);\n    border-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n    padding: 0;\n    background: ${formControl['background-color']};\n    color: ${iconColor};\n    cursor: text;\n    line-height: 1;\n  `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(props => {\n  const { theme } = props;\n  const comp = theme.components['search-input'];\n  return css`\n    position: relative;\n    width: 100%;\n    height: ${theme.base.sizes['touch-mouse']};\n    min-height: ${theme.base.sizes['touch-mouse']};\n    padding-inline-start: 0;\n    padding-inline-end: calc(${theme.base.sizes['touch-mouse']} - 0.125rem);\n    text-indent: calc(${theme.base.sizes['touch-mouse']} - 0.125rem);\n    border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n    &::-ms-clear {\n      display: none;\n    }\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n    ::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &:focus:not([disabled]) {\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div(({ theme: { base, components } }) => {\n  const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n\n  return css`\n    position: relative;\n    height: ${base.sizes['touch-mouse']};\n    border-radius: calc(${components['search-input']['border-radius']} * ${base['border-radius']});\n\n    &:focus-within {\n      box-shadow: ${base.shadow.focus};\n\n      ${StyledSearchIcon} {\n        color: ${iconColor};\n      }\n    }\n  `;\n});\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n    const t = useI18n();\n\n    const {\n      defaultValue,\n      value,\n      placeholder = t('search_placeholder_default'),\n      onSearchChange,\n      onSearchSubmit,\n      searchInputAriaLabel,\n      ...restProps\n    } = props;\n\n    const [searchInputValue, setValue] = useState<string>(value || defaultValue || '');\n\n    const innerRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (typeof value === 'string' && value !== searchInputValue) {\n        setValue(value);\n      }\n    }, [value]);\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setValue(e.target.value);\n      },\n      [searchInputValue]\n    );\n\n    const onSubmit = useCallback(() => {\n      onSearchSubmit?.(searchInputValue);\n    }, [searchInputValue]);\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          onSubmit();\n        }\n      },\n      [searchInputValue]\n    );\n\n    useAfterInitialEffect(() => {\n      if (onSearchChange) onSearchChange(searchInputValue);\n    }, [searchInputValue]);\n\n    return (\n      <Flex container as={StyledSearchInput}>\n        <StyledSearchTextInput\n          ref={innerRef}\n          type='search'\n          aria-label={searchInputAriaLabel}\n          placeholder={placeholder}\n          {...restProps}\n          value={searchInputValue}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n        <Flex\n          as={StyledSearchIcon}\n          container={{ justify: 'center', alignItems: 'center' }}\n          onClick={() => {\n            innerRef.current?.focus();\n          }}\n        >\n          <Icon name='search' />\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default SearchInput;\n"]}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  forwardRef,\n  useState,\n  ChangeEvent,\n  useCallback,\n  KeyboardEvent,\n  useEffect\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Input from '../Input';\nimport Icon, { registerIcon } from '../Icon';\nimport * as searchIcon from '../Icon/icons/search.icon';\nimport { FormControlProps } from '../FormControl';\nimport { useAfterInitialEffect, useConsolidatedRef, useI18n } from '../../hooks';\nimport Flex from '../Flex';\nimport { tryCatch } from '../../utils';\n\nregisterIcon(searchIcon);\n\nexport interface SearchInputProps extends NoChildrenProp {\n  /**\n   * Placeholder text. The default value is a locale translation of 'Search…'\n   * @default \"Search…\"\n   */\n  placeholder?: FormControlProps['placeholder'];\n  /**\n   * Creates a controlled input and sets the value. Requires an onChange handler to update value.\n   * value + onChange is the recommended method per React team.\n   */\n  value?: FormControlProps['value'];\n  /**\n   * If you wish to use an [uncontrolled input](https://reactjs.org/docs/uncontrolled-components.html), pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.\n   */\n  defaultValue?: FormControlProps['defaultValue'];\n  /** Called when the SearchInput value changes. */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Called when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus.\n   * NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.\n   */\n  onSearchSubmit?: (value: string) => void;\n  /** Aria label for search input, used by screen readers. */\n  searchInputAriaLabel?: string;\n}\n\nexport const StyledSearchIcon = styled.div(props => {\n  const {\n    theme: {\n      base,\n      components: { 'search-input': searchInput, 'form-control': formControl }\n    }\n  } = props;\n  const iconColor = tryCatch(() => transparentize(0.75, base.palette['foreground-color']));\n  return css`\n    position: absolute;\n    z-index: 1;\n    inset-inline-start: 0.0625rem;\n    top: 0.0625rem;\n    width: calc(${base['hit-area']['mouse-min']} - 0.125rem);\n    height: calc(${base['hit-area']['mouse-min']} - 0.125rem);\n    border-radius: calc(${base['border-radius']} * ${searchInput['border-radius']});\n    padding: 0;\n    background: ${formControl['background-color']};\n    color: ${iconColor};\n    cursor: text;\n    line-height: 1;\n  `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(props => {\n  const { theme } = props;\n  const comp = theme.components['search-input'];\n  return css`\n    position: relative;\n    width: 100%;\n    height: ${theme.base['hit-area']['mouse-min']};\n    min-height: ${theme.base['hit-area']['mouse-min']};\n    padding-inline-start: 0;\n    padding-inline-end: calc(${theme.base['hit-area']['mouse-min']} - 0.125rem);\n    text-indent: calc(${theme.base['hit-area']['mouse-min']} - 0.125rem);\n    border-radius: calc(${comp['border-radius']} * ${theme.base['border-radius']});\n    &::-ms-clear {\n      display: none;\n    }\n    &::-webkit-search-cancel-button {\n      display: none;\n    }\n    ::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &:focus:not([disabled]) {\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div(({ theme: { base, components } }) => {\n  const iconColor = tryCatch(() => transparentize(0.3, base.palette['foreground-color']));\n\n  return css`\n    position: relative;\n    height: ${base['hit-area']['mouse-min']};\n    border-radius: calc(${components['search-input']['border-radius']} * ${base['border-radius']});\n\n    &:focus-within {\n      box-shadow: ${base.shadow.focus};\n\n      ${StyledSearchIcon} {\n        color: ${iconColor};\n      }\n    }\n  `;\n});\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nconst SearchInput: FunctionComponent<SearchInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SearchInputProps>, ref: Ref<HTMLInputElement>) => {\n    const t = useI18n();\n\n    const {\n      defaultValue,\n      value,\n      placeholder = t('search_placeholder_default'),\n      onSearchChange,\n      onSearchSubmit,\n      searchInputAriaLabel,\n      ...restProps\n    } = props;\n\n    const [searchInputValue, setValue] = useState<string>(value || defaultValue || '');\n\n    const innerRef = useConsolidatedRef(ref);\n\n    useEffect(() => {\n      if (typeof value === 'string' && value !== searchInputValue) {\n        setValue(value);\n      }\n    }, [value]);\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setValue(e.target.value);\n      },\n      [searchInputValue]\n    );\n\n    const onSubmit = useCallback(() => {\n      onSearchSubmit?.(searchInputValue);\n    }, [searchInputValue]);\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          onSubmit();\n        }\n      },\n      [searchInputValue]\n    );\n\n    useAfterInitialEffect(() => {\n      if (onSearchChange) onSearchChange(searchInputValue);\n    }, [searchInputValue]);\n\n    return (\n      <Flex container as={StyledSearchInput}>\n        <StyledSearchTextInput\n          ref={innerRef}\n          type='search'\n          aria-label={searchInputAriaLabel}\n          placeholder={placeholder}\n          {...restProps}\n          value={searchInputValue}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n        />\n        <Flex\n          as={StyledSearchIcon}\n          container={{ justify: 'center', alignItems: 'center' }}\n          onClick={() => {\n            innerRef.current?.focus();\n          }}\n        >\n          <Icon name='search' />\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default SearchInput;\n"]}

package/lib/components/Select/Option.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const defaultProps = {};
 const Option = (props) => {
     const { children, ...restProps } = props;
-    return _jsx("option", Object.assign({}, restProps, { children: children }), void 0);
+    return _jsx("option", { ...restProps, children: children }, void 0);
 };
 Option.defaultProps = defaultProps;
 export default Option;

package/lib/components/Select/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../src/components/Select/Option.tsx"],"names":[],"mappings":";AAWA,MAAM,YAAY,GAAyB,EAAE,CAAC;AAE9C,MAAM,MAAM,GAAkD,CAAC,KAAkB,EAAE,EAAE;IACnF,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,iCAAY,SAAS,cAAG,QAAQ,YAAU,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG,YAAY,CAAC;AAEnC,eAAe,MAAM,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface OptionProps extends BaseProps {\n  /** Text content for the Option. */\n  children: string;\n  /** Value associated with the Option. This value is passed to the Select onChange function. */\n  value?: string;\n}\n\nconst defaultProps: Partial<OptionProps> = {};\n\nconst Option: FunctionComponent<OptionProps & ForwardProps> = (props: OptionProps) => {\n  const { children, ...restProps } = props;\n  return <option {...restProps}>{children}</option>;\n};\n\nOption.defaultProps = defaultProps;\n\nexport default Option;\n"]}
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../src/components/Select/Option.tsx"],"names":[],"mappings":";AAWA,MAAM,YAAY,GAAyB,EAAE,CAAC;AAE9C,MAAM,MAAM,GAAkD,CAAC,KAAkB,EAAE,EAAE;IACnF,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACzC,OAAO,oBAAY,SAAS,YAAG,QAAQ,WAAU,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG,YAAY,CAAC;AAEnC,eAAe,MAAM,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport { BaseProps, ForwardProps } from '../../types';\n\nexport interface OptionProps extends BaseProps {\n  /** Text content for the Option. */\n  children: string;\n  /** Value associated with the Option. This value is passed to the Select onChange function. */\n  value?: string;\n}\n\nconst defaultProps: Partial<OptionProps> = {};\n\nconst Option: FunctionComponent<OptionProps & ForwardProps> = (props: OptionProps) => {\n  const { children, ...restProps } = props;\n  return <option {...restProps}>{children}</option>;\n};\n\nOption.defaultProps = defaultProps;\n\nexport default Option;\n"]}

package/lib/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EACT,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAqB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGrE,MAAM,WAAW,WAAW;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;YAA2B,OAAO;SA4CzD,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAqEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EACH,SAAS,EACT,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnD,OAAO,EAAqB,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGrE,MAAM,WAAW,WAAW;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;IACjD;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,qFAAqF;IACrF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY;YAA2B,OAAO;SA4CzD,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAoEzD,CAAC;AAEF,eAAe,MAAM,CAAC"}