@pega/cosmos-react-core 3.0.0-dev.4.1 → 3.0.0-dev.6.0

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, 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: calc(${spacing} / 2);\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"]}
+{"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: calc(${spacing} / 2);\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.js

@@ -71,7 +71,7 @@ const RadioCheckGroup = forwardRef((props, ref) => {
                         }
                     }
                     : child.props.onChange
-            })) }, 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, 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: 2,\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"]}
+{"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: 2,\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.js

@@ -50,7 +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, { ...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));
+    return (_jsxs(_Fragment, { children: [fillPercentage === 0 && _jsx(Icon, { ...restProps, name: 'star' }), fillPercentage === 100 && _jsx(Icon, { ...restProps, name: 'star-solid' }), fillPercentage > 0 && fillPercentage < 100 && (_jsxs(StyledPartialRatingContainer, { children: [_jsx(Icon, { ...restProps, name: 'star' }), _jsx(StyledPartialRating, { ratingPercentage: fillPercentage, children: _jsx(Icon, { ...restProps, name: 'star-solid' }) })] }))] }));
 };
 const Rating = (props) => {
     const starsOutline = [];
@@ -67,7 +67,7 @@ const Rating = (props) => {
         }
         starsOutline.push(_jsx(RatingItem, { fill: fillValue }, `star-${i}`));
     }
-    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));
+    return (_jsxs(StyledRating, { "aria-label": ariaLabel, tabIndex: tabIndex, ...restProps, children: [_jsx(StyledRatingItemsContainer, { children: starsOutline }), metaInfo && _jsxs(StyledRatingMetaInfo, { children: ["(", metaInfo, ")"] }), ' '] }));
 };
 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 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"]}
+{"version":3,"file":"Rating.js","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,QAAQ,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAE/D,YAAY,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AA0BtC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAE7B,MAAM,YAAY,GAAyB;IACzC,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE,CAAC;CACZ,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG9B,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACpD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK;;;;GAIvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG9C,CAAC;AAMF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAA2B,KAAK,CAAC,EAAE;IAC9E,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,GAAG,CAAA;;;;aAIC,gBAAgB;;;GAG1B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;IAC/C,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAMrD,MAAM,UAAU,GAAuC,CAAC,KAAsB,EAAE,EAAE;IAChF,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IACpD,OAAO,CACL,8BACG,cAAc,KAAK,CAAC,IAAI,KAAC,IAAI,OAAK,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,EAC3D,cAAc,KAAK,GAAG,IAAI,KAAC,IAAI,OAAK,SAAS,EAAE,IAAI,EAAC,YAAY,GAAG,EACnE,cAAc,GAAG,CAAC,IAAI,cAAc,GAAG,GAAG,IAAI,CAC7C,MAAC,4BAA4B,eAC3B,KAAC,IAAI,OAAK,SAAS,EAAE,IAAI,EAAC,MAAM,GAAG,EACnC,KAAC,mBAAmB,IAAC,gBAAgB,EAAE,cAAc,YACnD,KAAC,IAAI,OAAK,SAAS,EAAE,IAAI,EAAC,YAAY,GAAG,GACrB,IACO,CAChC,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAkD,CAAC,KAAkB,EAAE,EAAE;IACnF,MAAM,YAAY,GAAG,EAAE,CAAC;IACxB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtF,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACjC,SAAS,GAAG,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3E,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;IACnC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAEnC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;IACnD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,SAAS,EAAE,CAAC,IAAI,CAAC,EAAE;QACtC,IAAI,SAAS,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACnC,IAAI,cAAc,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;YAC5C,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SACvC;QACD,YAAY,CAAC,IAAI,CAAC,KAAC,UAAU,IAAmB,IAAI,EAAE,SAAS,IAA5B,QAAQ,CAAC,EAAE,CAAqB,CAAC,CAAC;KACtE;IAED,OAAO,CACL,MAAC,YAAY,kBAAa,SAAS,EAAE,QAAQ,EAAE,QAAQ,KAAM,SAAS,aACpE,KAAC,0BAA0B,cAAE,YAAY,GAA8B,EACtE,QAAQ,IAAI,MAAC,oBAAoB,oBAAG,QAAQ,SAAyB,EAAE,GAAG,IAC9D,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,YAAY,GAAG,YAAY,CAAC;AAEnC,eAAe,MAAM,CAAC","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.js

@@ -99,9 +99,9 @@ const SearchInput = forwardRef((props, ref) => {
         if (onSearchChange)
             onSearchChange(searchInputValue);
     }, [searchInputValue]);
-    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: () => {
+    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 }), _jsx(Flex, { as: StyledSearchIcon, container: { justify: 'center', alignItems: 'center' }, onClick: () => {
                     innerRef.current?.focus();
-                }, children: _jsx(Icon, { name: 'search' }, void 0) }, void 0)] }, void 0));
+                }, children: _jsx(Icon, { name: 'search' }) })] }));
 });
 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, 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"]}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,UAAU,EACV,QAAQ,EAER,WAAW,EAEX,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,MAAM,UAAU,CAAC;AAC7B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,UAAU,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjF,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,YAAY,CAAC,UAAU,CAAC,CAAC;AA4BzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IACjD,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,EACzE,EACF,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IACzF,OAAO,GAAG,CAAA;;;;;kBAKM,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;mBAC5B,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;0BACtB,IAAI,CAAC,eAAe,CAAC,MAAM,WAAW,CAAC,eAAe,CAAC;;kBAE/D,WAAW,CAAC,kBAAkB,CAAC;aACpC,SAAS;;;GAGnB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE;IACzD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;IAC9C,OAAO,GAAG,CAAA;;;cAGE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;kBAC/B,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;;+BAEtB,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;wBAC1C,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;0BACjC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;GAc7E,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IAC9E,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAExF,OAAO,GAAG,CAAA;;cAEE,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;0BACjB,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC;;;oBAG5E,IAAI,CAAC,MAAM,CAAC,KAAK;;QAE7B,gBAAgB;iBACP,SAAS;;;GAGvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAuD,UAAU,CAChF,CAAC,KAAwC,EAAE,GAA0B,EAAE,EAAE;IACvE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,GAAG,CAAC,CAAC,4BAA4B,CAAC,EAC7C,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,IAAI,YAAY,IAAI,EAAE,CAAC,CAAC;IAEnF,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,gBAAgB,EAAE;YAC3D,QAAQ,CAAC,KAAK,CAAC,CAAC;SACjB;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAgC,EAAE,EAAE;QACnC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,cAAc,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAkC,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,cAAc;YAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,QAAC,EAAE,EAAE,iBAAiB,aACnC,KAAC,qBAAqB,IACpB,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,QAAQ,gBACD,oBAAoB,EAChC,WAAW,EAAE,WAAW,KACpB,SAAS,EACb,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,GACpB,EACF,KAAC,IAAI,IACH,EAAE,EAAE,gBAAgB,EACpB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC5B,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACjB,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","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", { ...restProps, children: children }, void 0);
+    return _jsx("option", { ...restProps, children: children });
 };
 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,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"]}
+{"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,GAAU,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.js

@@ -56,7 +56,7 @@ const Select = forwardRef((props, ref) => {
                 if (!['Escape', 'Tab'].includes(e.key))
                     e.preventDefault();
             }
-            : undefined, children: children }, void 0));
+            : undefined, children: children }));
     return label ? (_jsx(FormField, { ...{
             label,
             labelHidden,
@@ -67,7 +67,7 @@ const Select = forwardRef((props, ref) => {
             disabled,
             readOnly,
             actions
-        }, children: Comp }, void 0)) : (Comp);
+        }, children: Comp })) : (Comp);
 });
 export default Select;
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ChangeEventHandler,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl, FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\n\nexport interface SelectProps {\n  /** Pass Options components as children to render the options of the Select list. */\n  children: ReactNode;\n  /** Called when an Option is chosen within the list. */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\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  /** 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  /**\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  /** 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  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass an array of Action objects to append button(s) inline with the Select. */\n  actions?: Action[];\n  /** A ref to the select element. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean }>(props => {\n  const {\n    base,\n    components: {\n      'form-control': { 'foreground-color': fg },\n      select\n    }\n  } = props.theme;\n\n  const foreground = encodeURIComponent(fg);\n  const { rtl } = useDirection();\n\n  return css`\n    appearance: none;\n    -webkit-appearance: none;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    height: ${select.height};\n    min-height: ${base['hit-area']['mouse-min']};\n    padding-inline-start: ${select.padding};\n    padding-inline-end: calc(4 * ${base.spacing});\n\n    /* cSpell:disable-next-line */\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: calc(2 * ${base.spacing}) auto;\n    background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n    border-width: ${select['border-width']};\n    border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n    ${!props.status &&\n    css`\n      border-color: ${select['border-color']};\n    `}\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: FunctionComponent<SelectProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectProps>, ref: SelectProps['ref']) => {\n    const uid = useUID();\n    const {\n      children,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      actions,\n      ...restProps\n    } = props;\n\n    const Comp = (\n      <StyledFormControl\n        {...restProps}\n        as={StyledSelect}\n        id={id}\n        status={status}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        aria-readonly={readOnly ? 'true' : undefined}\n        ref={ref}\n        onMouseDown={\n          readOnly\n            ? (e: MouseEvent<HTMLSelectElement>) => {\n                e.preventDefault();\n              }\n            : undefined\n        }\n        onKeyDown={\n          readOnly\n            ? (e: KeyboardEvent) => {\n                // TODO: FOr future consider key modifiers at play e.g. \"ctrl p\"\n                if (!['Escape', 'Tab'].includes(e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n      >\n        {children}\n      </StyledFormControl>\n    );\n\n    return label ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          readOnly,\n          actions\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Select;\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  ReactNode,\n  ChangeEventHandler,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { Action, ForwardProps } from '../../types';\nimport FormField from '../FormField';\nimport { StyledFormControl, FormControlProps } from '../FormControl';\nimport { useDirection, useUID } from '../../hooks';\n\nexport interface SelectProps {\n  /** Pass Options components as children to render the options of the Select list. */\n  children: ReactNode;\n  /** Called when an Option is chosen within the list. */\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\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  /** 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  /**\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  /** 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  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Pass an array of Action objects to append button(s) inline with the Select. */\n  actions?: Action[];\n  /** A ref to the select element. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\nexport const StyledSelect = styled.select<{ status: boolean }>(props => {\n  const {\n    base,\n    components: {\n      'form-control': { 'foreground-color': fg },\n      select\n    }\n  } = props.theme;\n\n  const foreground = encodeURIComponent(fg);\n  const { rtl } = useDirection();\n\n  return css`\n    appearance: none;\n    -webkit-appearance: none;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    height: ${select.height};\n    min-height: ${base['hit-area']['mouse-min']};\n    padding-inline-start: ${select.padding};\n    padding-inline-end: calc(4 * ${base.spacing});\n\n    /* cSpell:disable-next-line */\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='${foreground}'%3E%3Cpath d='M12.1476563,16.5726562 C12.1476563,16.5726562 3.2875,9.72421875 3.2875,9.72421875 C3.2875,9.72421875 3.14375,9.58046875 3.14375,9.58046875 C3.04765625,9.3890625 3,9.19765625 3,9.00546875 C3,9.00546875 3,9.00546875 3,9.00546875 C3,8.33515625 3.33515625,8 3.9578125,8 C3.9578125,8 3.9578125,8 3.9578125,8 C4.1015625,8 4.29296875,8.09609375 4.628125,8.2390625 C4.628125,8.2390625 4.628125,8.2390625 4.628125,8.2390625 C4.628125,8.2390625 12.8179688,14.2257813 12.8179688,14.2257813 C12.8179688,14.2257813 21.103125,8.19140625 21.103125,8.19140625 C21.3421875,8.04765625 21.534375,8 21.678125,8 C21.678125,8 21.678125,8 21.678125,8 C22.3007813,8 22.6359375,8.33515625 22.6359375,9.00546875 C22.6359375,9.00546875 22.6359375,9.00546875 22.6359375,9.00546875 C22.6359375,9.196875 22.5882813,9.38828125 22.4921875,9.58046875 C22.4921875,9.58046875 22.4921875,9.58046875 22.4921875,9.58046875 C22.4921875,9.58046875 22.3484375,9.72421875 22.3484375,9.72421875 C22.3484375,9.72421875 13.4882812,16.525 13.4882812,16.525 C13.296875,16.7164063 13.0570312,16.8125 12.8179688,16.8125 C12.8179688,16.8125 12.8179688,16.8125 12.8179688,16.8125 C12.5789062,16.8125 12.3867188,16.7164062 12.1476563,16.5734375 C12.1476563,16.5734375 12.1476563,16.5734375 12.1476563,16.5734375 L12.1476563,16.5726562 Z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-size: calc(2 * ${base.spacing}) auto;\n    background-position: ${rtl ? base.spacing : `calc(100% - ${base.spacing}) `} 60%;\n    border-width: ${select['border-width']};\n    border-radius: calc(${base['border-radius']} * ${select['border-radius']});\n\n    ${!props.status &&\n    css`\n      border-color: ${select['border-color']};\n    `}\n\n    &::-ms-expand {\n      display: none;\n    }\n\n    @media (pointer: coarse) {\n      min-height: ${base['hit-area']['finger-min']};\n    }\n  `;\n});\n\nStyledSelect.defaultProps = defaultThemeProp;\n\nconst Select: FunctionComponent<SelectProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SelectProps>, ref: SelectProps['ref']) => {\n    const uid = useUID();\n    const {\n      children,\n      id = uid,\n      label,\n      labelHidden,\n      info,\n      status,\n      required = false,\n      disabled = false,\n      readOnly = false,\n      actions,\n      ...restProps\n    } = props;\n\n    const Comp = (\n      <StyledFormControl\n        {...restProps}\n        as={StyledSelect}\n        id={id}\n        status={status}\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        aria-readonly={readOnly ? 'true' : undefined}\n        ref={ref}\n        onMouseDown={\n          readOnly\n            ? (e: MouseEvent<HTMLSelectElement>) => {\n                e.preventDefault();\n              }\n            : undefined\n        }\n        onKeyDown={\n          readOnly\n            ? (e: KeyboardEvent) => {\n                // TODO: FOr future consider key modifiers at play e.g. \"ctrl p\"\n                if (!['Escape', 'Tab'].includes(e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n      >\n        {children}\n      </StyledFormControl>\n    );\n\n    return label ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          disabled,\n          readOnly,\n          actions\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Select;\n"]}

package/lib/components/Sentiment/Sentiment.js

@@ -27,7 +27,7 @@ const Sentiment = forwardRef((props, ref) => {
         neutral: t('sentiment_neutral')
     };
     const { 'aria-label': ariaLabel, variant, labelHidden = false, labels = {}, icons = {}, ...restProps } = props;
-    return (_jsxs(Flex, { "aria-label": ariaLabel, ref: ref, variant: variant, ...restProps, as: StyledSentiment, container: { gap: 1 }, children: [_jsx(Icon, { "aria-hidden": 'true', name: icons[variant] || defaultIcons[variant] }, void 0), !labelHidden && _jsx("span", { children: labels[variant] || defaultLabels[variant] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { "aria-label": ariaLabel, ref: ref, variant: variant, ...restProps, as: StyledSentiment, container: { gap: 1 }, children: [_jsx(Icon, { "aria-hidden": 'true', name: icons[variant] || defaultIcons[variant] }), !labelHidden && _jsx("span", { children: labels[variant] || defaultLabels[variant] })] }));
 });
 export default Sentiment;
 //# sourceMappingURL=Sentiment.js.map

package/lib/components/Sentiment/Sentiment.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sentiment.js","sourceRoot":"","sources":["../../../src/components/Sentiment/Sentiment.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAuB3C,MAAM,YAAY,GAA4B;IAC5C,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,YAAY;IACtB,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAiB,KAAK,CAAC,EAAE;IAChE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACjC,OAAO,GAAG,CAAA;QACJ,UAAU;eACH,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,SAAS,GAAqD,UAAU,CAC5E,CAAC,KAAsC,EAAE,GAA0B,EAAE,EAAE;IACrE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,aAAa,GAA6B;QAC9C,QAAQ,EAAE,CAAC,CAAC,oBAAoB,CAAC;QACjC,QAAQ,EAAE,CAAC,CAAC,oBAAoB,CAAC;QACjC,OAAO,EAAE,CAAC,CAAC,mBAAmB,CAAC;KAChC,CAAC;IAEF,MAAM,EACJ,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,IAAI,kBACS,SAAS,EACrB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,KACZ,SAAS,EACb,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aAErB,KAAC,IAAI,mBAAa,MAAM,EAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,YAAY,CAAC,OAAO,CAAE,WAAI,EAC1E,CAAC,WAAW,IAAI,yBAAO,MAAM,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,WAAQ,YACpE,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Icon, { StyledIcon } from '../Icon';\n\nexport interface SentimentProps extends BaseProps, NoChildrenProp {\n  /** Ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Variant of the sentiment */\n  variant: 'positive' | 'neutral' | 'negative';\n  /** Flag that indicates if label needs to be hidden\n   * @default false\n   */\n  labelHidden?: boolean;\n  /** Labels for different sentiment variants. If not supplied default labels will be shown */\n  labels?: {\n    [variant in SentimentProps['variant']]?: string;\n  };\n  /** Icons for different sentiment variants. If not supplied default icons will be shown */\n  icons?: {\n    [variant in SentimentProps['variant']]?: string;\n  };\n  /** Aria label for screen readers. */\n  'aria-label'?: string;\n}\n\nconst defaultIcons: SentimentProps['icons'] = {\n  negative: 'face-sad',\n  positive: 'face-happy',\n  neutral: 'face-blank'\n};\n\nexport const StyledSentiment = styled.div<SentimentProps>(props => {\n  const { theme, variant } = props;\n  return css`\n    > ${StyledIcon} {\n      color: ${theme.components.sentiment[variant].color};\n    }\n  `;\n});\n\nStyledSentiment.defaultProps = defaultThemeProp;\n\nconst Sentiment: FunctionComponent<SentimentProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SentimentProps>, ref: SentimentProps['ref']) => {\n    const t = useI18n();\n\n    const defaultLabels: SentimentProps['labels'] = {\n      negative: t('sentiment_negative'),\n      positive: t('sentiment_positive'),\n      neutral: t('sentiment_neutral')\n    };\n\n    const {\n      'aria-label': ariaLabel,\n      variant,\n      labelHidden = false,\n      labels = {},\n      icons = {},\n      ...restProps\n    } = props;\n\n    return (\n      <Flex\n        aria-label={ariaLabel}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n        as={StyledSentiment}\n        container={{ gap: 1 }}\n      >\n        <Icon aria-hidden='true' name={icons[variant] || defaultIcons[variant]!} />\n        {!labelHidden && <span>{labels[variant] || defaultLabels[variant]}</span>}\n      </Flex>\n    );\n  }\n);\n\nexport default Sentiment;\n"]}
+{"version":3,"file":"Sentiment.js","sourceRoot":"","sources":["../../../src/components/Sentiment/Sentiment.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAuB3C,MAAM,YAAY,GAA4B;IAC5C,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,YAAY;IACtB,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAiB,KAAK,CAAC,EAAE;IAChE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACjC,OAAO,GAAG,CAAA;QACJ,UAAU;eACH,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK;;GAErD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,SAAS,GAAqD,UAAU,CAC5E,CAAC,KAAsC,EAAE,GAA0B,EAAE,EAAE;IACrE,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,aAAa,GAA6B;QAC9C,QAAQ,EAAE,CAAC,CAAC,oBAAoB,CAAC;QACjC,QAAQ,EAAE,CAAC,CAAC,oBAAoB,CAAC;QACjC,OAAO,EAAE,CAAC,CAAC,mBAAmB,CAAC;KAChC,CAAC;IAEF,MAAM,EACJ,YAAY,EAAE,SAAS,EACvB,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,MAAM,GAAG,EAAE,EACX,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,MAAC,IAAI,kBACS,SAAS,EACrB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,KACZ,SAAS,EACb,EAAE,EAAE,eAAe,EACnB,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aAErB,KAAC,IAAI,mBAAa,MAAM,EAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,YAAY,CAAC,OAAO,CAAE,GAAI,EAC1E,CAAC,WAAW,IAAI,yBAAO,MAAM,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,GAAQ,IACpE,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Flex from '../Flex';\nimport { useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Icon, { StyledIcon } from '../Icon';\n\nexport interface SentimentProps extends BaseProps, NoChildrenProp {\n  /** Ref to the element */\n  ref?: Ref<HTMLDivElement>;\n  /** Variant of the sentiment */\n  variant: 'positive' | 'neutral' | 'negative';\n  /** Flag that indicates if label needs to be hidden\n   * @default false\n   */\n  labelHidden?: boolean;\n  /** Labels for different sentiment variants. If not supplied default labels will be shown */\n  labels?: {\n    [variant in SentimentProps['variant']]?: string;\n  };\n  /** Icons for different sentiment variants. If not supplied default icons will be shown */\n  icons?: {\n    [variant in SentimentProps['variant']]?: string;\n  };\n  /** Aria label for screen readers. */\n  'aria-label'?: string;\n}\n\nconst defaultIcons: SentimentProps['icons'] = {\n  negative: 'face-sad',\n  positive: 'face-happy',\n  neutral: 'face-blank'\n};\n\nexport const StyledSentiment = styled.div<SentimentProps>(props => {\n  const { theme, variant } = props;\n  return css`\n    > ${StyledIcon} {\n      color: ${theme.components.sentiment[variant].color};\n    }\n  `;\n});\n\nStyledSentiment.defaultProps = defaultThemeProp;\n\nconst Sentiment: FunctionComponent<SentimentProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SentimentProps>, ref: SentimentProps['ref']) => {\n    const t = useI18n();\n\n    const defaultLabels: SentimentProps['labels'] = {\n      negative: t('sentiment_negative'),\n      positive: t('sentiment_positive'),\n      neutral: t('sentiment_neutral')\n    };\n\n    const {\n      'aria-label': ariaLabel,\n      variant,\n      labelHidden = false,\n      labels = {},\n      icons = {},\n      ...restProps\n    } = props;\n\n    return (\n      <Flex\n        aria-label={ariaLabel}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n        as={StyledSentiment}\n        container={{ gap: 1 }}\n      >\n        <Icon aria-hidden='true' name={icons[variant] || defaultIcons[variant]!} />\n        {!labelHidden && <span>{labels[variant] || defaultLabels[variant]}</span>}\n      </Flex>\n    );\n  }\n);\n\nexport default Sentiment;\n"]}

package/lib/components/Skeleton/LineSkeleton.js

@@ -28,7 +28,7 @@ export const StyledLineSkeleton = styled.div(props => {
 });
 StyledLineSkeleton.defaultProps = defaultThemeProp;
 const LineSkeleton = (props) => {
-    return _jsx(StyledLineSkeleton, { ...props, "aria-disabled": 'true' }, void 0);
+    return _jsx(StyledLineSkeleton, { ...props, "aria-disabled": 'true' });
 };
 LineSkeleton.defaultProps = defaultProps;
 export default LineSkeleton;

package/lib/components/Skeleton/LineSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/LineSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAe/C,MAAM,YAAY,GAA+B;IAC/C,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,MAAM;IACf,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAA6B,KAAK,CAAC,EAAE;IAC/E,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAClE,MAAM,aAAa,GAAG,eAAe,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,sBAAsB,CAAC;IAC/C,OAAO,GAAG,CAAA;;;;aAIC,aAAa;MACpB,OAAO,KAAK,SAAS;QACrB,CAAC,CAAC,qBAAqB,kBAAkB,EAAE;QAC3C,CAAC,CAAC,qBAAqB,eAAe,EAAE;GAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,CACxE,KAAwB,EACxB,EAAE;IACF,OAAO,KAAC,kBAAkB,OAAK,KAAK,mBAAgB,MAAM,WAAG,CAAC;AAChE,CAAC,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,YAAY,CAAC;AAEzC,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface LineSkeletonProps extends BaseProps {\n  /**\n   * Width of the skeleton.\n   * @default \"default\"\n   */\n  width?: 'default' | 'l' | 'm' | 's';\n  /**\n   * Variant of the skeleton.\n   * @default \"default\"\n   */\n  variant?: 'default' | 'link';\n}\n\nconst defaultProps: Partial<LineSkeletonProps> = {\n  width: 'default',\n  variant: 'default'\n};\n\nconst lengthToPercent = {\n  default: 'auto',\n  l: '80%',\n  m: '50%',\n  s: '30%'\n};\n\nexport const StyledLineSkeleton = styled.div<Partial<LineSkeletonProps>>(props => {\n  const { width, variant } = props;\n  const { skeleton: skeletonBackground } = props.theme.base.palette;\n  const lengthPercent = lengthToPercent[width || 'default'];\n  const LinkHeaderColor = 'rgb(135,206,235,0.5)';\n  return css`\n    flex-grow: 1;\n    margin: 0.25rem;\n    height: 0.875rem;\n    width: ${lengthPercent};\n    ${variant === 'default'\n      ? `background-color: ${skeletonBackground}`\n      : `background-color: ${LinkHeaderColor}`}\n  `;\n});\n\nStyledLineSkeleton.defaultProps = defaultThemeProp;\n\nconst LineSkeleton: FunctionComponent<LineSkeletonProps & ForwardProps> = (\n  props: LineSkeletonProps\n) => {\n  return <StyledLineSkeleton {...props} aria-disabled='true' />;\n};\n\nLineSkeleton.defaultProps = defaultProps;\n\nexport default LineSkeleton;\n"]}
+{"version":3,"file":"LineSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/LineSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAe/C,MAAM,YAAY,GAA+B;IAC/C,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,eAAe,GAAG;IACtB,OAAO,EAAE,MAAM;IACf,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;IACR,CAAC,EAAE,KAAK;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAA6B,KAAK,CAAC,EAAE;IAC/E,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACjC,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAClE,MAAM,aAAa,GAAG,eAAe,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,sBAAsB,CAAC;IAC/C,OAAO,GAAG,CAAA;;;;aAIC,aAAa;MACpB,OAAO,KAAK,SAAS;QACrB,CAAC,CAAC,qBAAqB,kBAAkB,EAAE;QAC3C,CAAC,CAAC,qBAAqB,eAAe,EAAE;GAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,CACxE,KAAwB,EACxB,EAAE;IACF,OAAO,KAAC,kBAAkB,OAAK,KAAK,mBAAgB,MAAM,GAAG,CAAC;AAChE,CAAC,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,YAAY,CAAC;AAEzC,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface LineSkeletonProps extends BaseProps {\n  /**\n   * Width of the skeleton.\n   * @default \"default\"\n   */\n  width?: 'default' | 'l' | 'm' | 's';\n  /**\n   * Variant of the skeleton.\n   * @default \"default\"\n   */\n  variant?: 'default' | 'link';\n}\n\nconst defaultProps: Partial<LineSkeletonProps> = {\n  width: 'default',\n  variant: 'default'\n};\n\nconst lengthToPercent = {\n  default: 'auto',\n  l: '80%',\n  m: '50%',\n  s: '30%'\n};\n\nexport const StyledLineSkeleton = styled.div<Partial<LineSkeletonProps>>(props => {\n  const { width, variant } = props;\n  const { skeleton: skeletonBackground } = props.theme.base.palette;\n  const lengthPercent = lengthToPercent[width || 'default'];\n  const LinkHeaderColor = 'rgb(135,206,235,0.5)';\n  return css`\n    flex-grow: 1;\n    margin: 0.25rem;\n    height: 0.875rem;\n    width: ${lengthPercent};\n    ${variant === 'default'\n      ? `background-color: ${skeletonBackground}`\n      : `background-color: ${LinkHeaderColor}`}\n  `;\n});\n\nStyledLineSkeleton.defaultProps = defaultThemeProp;\n\nconst LineSkeleton: FunctionComponent<LineSkeletonProps & ForwardProps> = (\n  props: LineSkeletonProps\n) => {\n  return <StyledLineSkeleton {...props} aria-disabled='true' />;\n};\n\nLineSkeleton.defaultProps = defaultProps;\n\nexport default LineSkeleton;\n"]}

package/lib/components/Skeleton/ParagraphSkeleton.js

@@ -7,7 +7,7 @@ const StyledParagraphSkeleton = styled.div `
 `;
 StyledParagraphSkeleton.defaultProps = defaultThemeProp;
 const ParagraphSkeleton = (props) => {
-    return (_jsx(StyledParagraphSkeleton, { ...props, "aria-disabled": 'true', children: props.children }, void 0));
+    return (_jsx(StyledParagraphSkeleton, { ...props, "aria-disabled": 'true', children: props.children }));
 };
 ParagraphSkeleton.defaultProps = defaultProps;
 export default ParagraphSkeleton;

package/lib/components/Skeleton/ParagraphSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParagraphSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/ParagraphSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,YAAY,GAAoC,EAAE,CAAC;AAEzD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAwB;;CAEjE,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,CAClF,KAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,uBAAuB,OAAK,KAAK,mBAAgB,MAAM,YACrD,KAAK,CAAC,QAAQ,WACS,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface ParagraphSkeletonProps extends BaseProps {\n  /** Children for the skeleton. These should be Line and Rectangle Skeletons. */\n  children: ReactNode;\n}\n\nconst defaultProps: Partial<ParagraphSkeletonProps> = {};\n\nconst StyledParagraphSkeleton = styled.div<ParagraphSkeletonProps>`\n  margin: 0.25rem 0;\n`;\n\nStyledParagraphSkeleton.defaultProps = defaultThemeProp;\n\nconst ParagraphSkeleton: FunctionComponent<ParagraphSkeletonProps & ForwardProps> = (\n  props: ParagraphSkeletonProps\n) => {\n  return (\n    <StyledParagraphSkeleton {...props} aria-disabled='true'>\n      {props.children}\n    </StyledParagraphSkeleton>\n  );\n};\n\nParagraphSkeleton.defaultProps = defaultProps;\n\nexport default ParagraphSkeleton;\n"]}
+{"version":3,"file":"ParagraphSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/ParagraphSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAO/C,MAAM,YAAY,GAAoC,EAAE,CAAC;AAEzD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAwB;;CAEjE,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,CAClF,KAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,uBAAuB,OAAK,KAAK,mBAAgB,MAAM,YACrD,KAAK,CAAC,QAAQ,GACS,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface ParagraphSkeletonProps extends BaseProps {\n  /** Children for the skeleton. These should be Line and Rectangle Skeletons. */\n  children: ReactNode;\n}\n\nconst defaultProps: Partial<ParagraphSkeletonProps> = {};\n\nconst StyledParagraphSkeleton = styled.div<ParagraphSkeletonProps>`\n  margin: 0.25rem 0;\n`;\n\nStyledParagraphSkeleton.defaultProps = defaultThemeProp;\n\nconst ParagraphSkeleton: FunctionComponent<ParagraphSkeletonProps & ForwardProps> = (\n  props: ParagraphSkeletonProps\n) => {\n  return (\n    <StyledParagraphSkeleton {...props} aria-disabled='true'>\n      {props.children}\n    </StyledParagraphSkeleton>\n  );\n};\n\nParagraphSkeleton.defaultProps = defaultProps;\n\nexport default ParagraphSkeleton;\n"]}

package/lib/components/Skeleton/RectangleSkeleton.js

@@ -23,7 +23,7 @@ export const StyledRectangleSkeleton = styled.div(props => {
 });
 StyledRectangleSkeleton.defaultProps = defaultThemeProp;
 const RectangleSkeleton = (props) => {
-    return _jsx(StyledRectangleSkeleton, { ...props, "aria-disabled": 'true' }, void 0);
+    return _jsx(StyledRectangleSkeleton, { ...props, "aria-disabled": 'true' });
 };
 RectangleSkeleton.defaultProps = defaultProps;
 export default RectangleSkeleton;

package/lib/components/Skeleton/RectangleSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RectangleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/RectangleSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAoB/C,MAAM,YAAY,GAAoC;IACpD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAkC,KAAK,CAAC,EAAE;IACzF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACzC,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAClE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3D,OAAO,GAAG,CAAA;;wBAEY,kBAAkB;MACpC,OAAO,KAAK,QAAQ;QACpB,CAAC,CAAC,2BAA2B,YAAY;;mBAE5B;QACb,CAAC,CAAC,UAAU,KAAK;gBACP,MAAM,EAAE;GACrB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,CAClF,KAA6B,EAC7B,EAAE;IACF,OAAO,KAAC,uBAAuB,OAAK,KAAK,mBAAgB,MAAM,WAAG,CAAC;AACrE,CAAC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface RectangleSkeletonProps extends BaseProps {\n  /**\n   * Width of the skeleton.\n   * @default \"auto\"\n   */\n  width?: string | number;\n  /**\n   * Height of the skeleton.\n   * @default \"auto\"\n   */\n  height?: string | number;\n  /**\n   * Variant of the skeleton.\n   * @default \"default\"\n   */\n  variant?: 'default' | 'button';\n}\n\nconst defaultProps: Partial<RectangleSkeletonProps> = {\n  width: 'auto',\n  height: 'auto',\n  variant: 'default'\n};\n\nexport const StyledRectangleSkeleton = styled.div<Partial<RectangleSkeletonProps>>(props => {\n  const { width, height, variant } = props;\n  const { skeleton: skeletonBackground } = props.theme.base.palette;\n  const { 'border-radius': borderRadius } = props.theme.base;\n  return css`\n    margin: 0.25rem;\n    background-color: ${skeletonBackground};\n    ${variant === 'button'\n      ? `border-radius: calc(2 * ${borderRadius});\n      width: 6.875rem;\n      height: 2rem`\n      : `width: ${width};\n      height: ${height}`}\n  `;\n});\n\nStyledRectangleSkeleton.defaultProps = defaultThemeProp;\n\nconst RectangleSkeleton: FunctionComponent<RectangleSkeletonProps & ForwardProps> = (\n  props: RectangleSkeletonProps\n) => {\n  return <StyledRectangleSkeleton {...props} aria-disabled='true' />;\n};\n\nRectangleSkeleton.defaultProps = defaultProps;\n\nexport default RectangleSkeleton;\n"]}
+{"version":3,"file":"RectangleSkeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/RectangleSkeleton.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAoB/C,MAAM,YAAY,GAAoC;IACpD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAkC,KAAK,CAAC,EAAE;IACzF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACzC,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAClE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3D,OAAO,GAAG,CAAA;;wBAEY,kBAAkB;MACpC,OAAO,KAAK,QAAQ;QACpB,CAAC,CAAC,2BAA2B,YAAY;;mBAE5B;QACb,CAAC,CAAC,UAAU,KAAK;gBACP,MAAM,EAAE;GACrB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,CAClF,KAA6B,EAC7B,EAAE;IACF,OAAO,KAAC,uBAAuB,OAAK,KAAK,mBAAgB,MAAM,GAAG,CAAC;AACrE,CAAC,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAAC;AAE9C,eAAe,iBAAiB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BaseProps, ForwardProps } from '../../types';\nimport { defaultThemeProp } from '../../theme';\n\nexport interface RectangleSkeletonProps extends BaseProps {\n  /**\n   * Width of the skeleton.\n   * @default \"auto\"\n   */\n  width?: string | number;\n  /**\n   * Height of the skeleton.\n   * @default \"auto\"\n   */\n  height?: string | number;\n  /**\n   * Variant of the skeleton.\n   * @default \"default\"\n   */\n  variant?: 'default' | 'button';\n}\n\nconst defaultProps: Partial<RectangleSkeletonProps> = {\n  width: 'auto',\n  height: 'auto',\n  variant: 'default'\n};\n\nexport const StyledRectangleSkeleton = styled.div<Partial<RectangleSkeletonProps>>(props => {\n  const { width, height, variant } = props;\n  const { skeleton: skeletonBackground } = props.theme.base.palette;\n  const { 'border-radius': borderRadius } = props.theme.base;\n  return css`\n    margin: 0.25rem;\n    background-color: ${skeletonBackground};\n    ${variant === 'button'\n      ? `border-radius: calc(2 * ${borderRadius});\n      width: 6.875rem;\n      height: 2rem`\n      : `width: ${width};\n      height: ${height}`}\n  `;\n});\n\nStyledRectangleSkeleton.defaultProps = defaultThemeProp;\n\nconst RectangleSkeleton: FunctionComponent<RectangleSkeletonProps & ForwardProps> = (\n  props: RectangleSkeletonProps\n) => {\n  return <StyledRectangleSkeleton {...props} aria-disabled='true' />;\n};\n\nRectangleSkeleton.defaultProps = defaultProps;\n\nexport default RectangleSkeleton;\n"]}

package/lib/components/Slider/Slider.js

@@ -106,15 +106,15 @@ const Slider = forwardRef((props, ref) => {
         }, orientation: orientation, ...{ status, disabled, readOnly }, style: {
             '--slider-value': `${percentage}%`,
             userSelect: inDrag ? 'none' : 'auto'
-        }, children: [_jsxs(Grid, { as: StyledSliderTrackWrapper, container: true, children: [_jsxs(Flex, { as: StyledTrack, ref: trackRef, onMouseDown: moveThumb, container: { alignItems: 'center', justify: 'center' }, children: [_jsx(StyledBar, { showProgress: showProgress }, void 0), _jsx(StyledThumb, { ref: thumbRef, role: 'slider', tabIndex: 0, onKeyDown: onThumbKeyDown, onMouseDown: () => {
+        }, children: [_jsxs(Grid, { as: StyledSliderTrackWrapper, container: true, children: [_jsxs(Flex, { as: StyledTrack, ref: trackRef, onMouseDown: moveThumb, container: { alignItems: 'center', justify: 'center' }, children: [_jsx(StyledBar, { showProgress: showProgress }), _jsx(StyledThumb, { ref: thumbRef, role: 'slider', tabIndex: 0, onKeyDown: onThumbKeyDown, onMouseDown: () => {
                                     setInDrag(true);
                                     onDragStart?.();
                                 }, onTouchStart: (e) => {
                                     setInDrag(true);
                                     e.preventDefault(); // Prevent dispatching mouse events as some browser may do that
                                     onDragStart?.();
-                                }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label?.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` }, void 0)] }, void 0), Object.keys(ticks).length > 0 && (_jsx(SliderTicks, { ticks: ticks, min: min, max: max, step: step, orientation: orientation, onClick: setValue }, void 0))] }, void 0), showInput && !preview && (_jsx(NumberInput, { id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, onChange: setInputValue, onBlur: v => setValue(getNearestValue(Number(v), min, max, step)), size: calculateValueLength(min, max, step), readOnly: readOnly, disabled: disabled, "aria-label": label?.toString() }, void 0)), preview && (_jsx(StyledPreview, { id: `${id}-value`, value: value.toString(), size: calculateValueLength(min, max, step) }, void 0))] }, void 0));
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp }, void 0)) : (Comp);
+                                }, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-orientation": orientation, "aria-readonly": readOnly || undefined, "aria-disabled": disabled || undefined, id: id, "aria-label": label?.toString(), "aria-describedby": `${id}-info`, "aria-controls": `${id}-value` })] }), Object.keys(ticks).length > 0 && (_jsx(SliderTicks, { ticks: ticks, min: min, max: max, step: step, orientation: orientation, onClick: setValue }))] }), showInput && !preview && (_jsx(NumberInput, { id: `${id}-value`, status: status, min: min, max: max, step: step, value: inputValue, onChange: setInputValue, onBlur: v => setValue(getNearestValue(Number(v), min, max, step)), size: calculateValueLength(min, max, step), readOnly: readOnly, disabled: disabled, "aria-label": label?.toString() })), preview && (_jsx(StyledPreview, { id: `${id}-value`, value: value.toString(), size: calculateValueLength(min, max, step) }))] }));
+    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
 });
 export default Slider;
 //# sourceMappingURL=Slider.js.map

package/lib/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  KeyboardEvent,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  CSSProperties,\n  forwardRef,\n  Ref,\n  TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport SliderProps from './Slider.types';\nimport {\n  StyledSlider,\n  StyledTrack,\n  StyledThumb,\n  StyledSliderTrackWrapper,\n  StyledBar,\n  StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SliderProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      required,\n      status,\n      info,\n      label,\n      labelHidden,\n      min = 0,\n      max = 100,\n      step = 1,\n      value = min,\n      orientation = 'horizontal',\n      preview,\n      disabled = false,\n      readOnly = false,\n      showInput = true,\n      showProgress,\n      ticks = {},\n      onChange,\n      autoFocus,\n      onDragStart,\n      onDragEnd: onDragEndProp,\n      ...restProps\n    } = props;\n\n    const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const trackRef = useRef<HTMLDivElement>(null);\n    const [inDrag, setInDrag] = useState(false);\n    const [inputValue, setInputValue] = useState(value.toString());\n\n    const setValue = useCallback(\n      (newValue: number) => {\n        if (disabled || readOnly) return;\n        const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n        setInputValue(normalizedValue.toString());\n        onChange(normalizedValue);\n      },\n      [disabled, readOnly, onChange]\n    );\n\n    const { start, end } = useDirection();\n\n    const moveThumb = useCallback(\n      (e: MouseEvent | TouchEvent) => {\n        if (disabled || readOnly) return;\n        if (trackRef.current) {\n          const track = trackRef.current.getBoundingClientRect();\n          const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n          const newPosition =\n            orientation === 'horizontal'\n              ? (clientX - track[start]) / (track[end] - track[start])\n              : (clientY - track.bottom) / (track.top - track.bottom);\n\n          const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n          setValue(getNearestValue(normalizedValue, min, max, step));\n        }\n        thumbRef.current?.focus();\n      },\n      [disabled, readOnly, step, min, max, setValue, start, end]\n    );\n\n    const onThumbKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (\n          [\n            'ArrowDown',\n            'ArrowUp',\n            'ArrowLeft',\n            'ArrowRight',\n            'PageUp',\n            'PageDown',\n            'Home',\n            'End'\n          ].includes(e.key)\n        )\n          e.preventDefault();\n\n        switch (e.key) {\n          case 'ArrowDown':\n          case `Arrow${cap(start)}`:\n            setValue(value - step);\n            break;\n          case 'ArrowUp':\n          case `Arrow${cap(end)}`:\n            setValue(value + step);\n            break;\n          case 'PageUp':\n            setValue(value + 10 * step);\n            break;\n          case 'PageDown':\n            setValue(value - 10 * step);\n            break;\n          case 'Home':\n            setValue(min);\n            break;\n          case 'End':\n            setValue(max);\n            break;\n          default:\n        }\n      },\n      [setValue, value, step, start, end]\n    );\n\n    useEffect(() => {\n      const onDragEnd = () => {\n        setInDrag(false);\n        if (inDrag) onDragEndProp?.();\n      };\n\n      document.addEventListener('mouseup', onDragEnd);\n      document.addEventListener('touchend', onDragEnd);\n      document.addEventListener('touchcancel', onDragEnd);\n      if (inDrag) {\n        document.addEventListener('mousemove', moveThumb);\n        document.addEventListener('touchmove', moveThumb);\n      }\n\n      return () => {\n        document.removeEventListener('mouseup', onDragEnd);\n        document.removeEventListener('touchend', onDragEnd);\n        document.removeEventListener('touchcancel', onDragEnd);\n        document.removeEventListener('mousemove', moveThumb);\n        document.removeEventListener('touchmove', moveThumb);\n      };\n    }, [inDrag, moveThumb, onDragEndProp]);\n\n    useEffect(() => {\n      if (autoFocus) thumbRef.current?.focus();\n    }, [autoFocus]);\n\n    const percentage = ((Number(value) - min) / (max - min)) * 100;\n\n    const Comp = (\n      <Flex\n        {...restProps}\n        as={StyledSlider}\n        container={{\n          alignItems: 'start',\n          direction: orientation === 'horizontal' ? 'row' : 'column'\n        }}\n        orientation={orientation}\n        {...{ status, disabled, readOnly }}\n        style={\n          {\n            '--slider-value': `${percentage}%`,\n            userSelect: inDrag ? 'none' : 'auto'\n          } as CSSProperties\n        }\n      >\n        <Grid as={StyledSliderTrackWrapper} container>\n          <Flex\n            as={StyledTrack}\n            ref={trackRef}\n            onMouseDown={moveThumb}\n            container={{ alignItems: 'center', justify: 'center' }}\n          >\n            <StyledBar showProgress={showProgress} />\n            <StyledThumb\n              ref={thumbRef}\n              role='slider'\n              tabIndex={0}\n              onKeyDown={onThumbKeyDown}\n              onMouseDown={() => {\n                setInDrag(true);\n                onDragStart?.();\n              }}\n              onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n                setInDrag(true);\n                e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n                onDragStart?.();\n              }}\n              aria-valuemin={min}\n              aria-valuemax={max}\n              aria-valuenow={value}\n              aria-orientation={orientation}\n              aria-readonly={readOnly || undefined}\n              aria-disabled={disabled || undefined}\n              id={id}\n              aria-label={label?.toString()}\n              aria-describedby={`${id}-info`}\n              aria-controls={`${id}-value`}\n            />\n          </Flex>\n          {Object.keys(ticks).length > 0 && (\n            <SliderTicks\n              ticks={ticks}\n              min={min}\n              max={max}\n              step={step}\n              orientation={orientation}\n              onClick={setValue}\n            />\n          )}\n        </Grid>\n        {showInput && !preview && (\n          <NumberInput\n            id={`${id}-value`}\n            status={status}\n            min={min}\n            max={max}\n            step={step}\n            value={inputValue}\n            onChange={setInputValue}\n            onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n            size={calculateValueLength(min, max, step)}\n            readOnly={readOnly}\n            disabled={disabled}\n            aria-label={label?.toString()}\n          />\n        )}\n        {preview && (\n          <StyledPreview\n            id={`${id}-value`}\n            value={value.toString()}\n            size={calculateValueLength(min, max, step)}\n          />\n        )}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Slider;\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAIL,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EAER,UAAU,EAGX,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACvE,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EACL,YAAY,EACZ,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,SAAS,EACT,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,MAAM,MAAM,GAAkD,UAAU,CACtE,CAAC,KAAmC,EAAE,GAAwB,EAAE,EAAE;IAChE,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,KAAK,EACL,WAAW,EACX,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,IAAI,GAAG,CAAC,EACR,KAAK,GAAG,GAAG,EACX,WAAW,GAAG,YAAY,EAC1B,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,IAAI,EAChB,YAAY,EACZ,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,kBAAkB,CAAiB,GAAG,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE/D,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;QAE/D,aAAa,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC1C,QAAQ,CAAC,eAAe,CAAC,CAAC;IAC5B,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAC/B,CAAC;IAEF,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAA0B,EAAE,EAAE;QAC7B,IAAI,QAAQ,IAAI,QAAQ;YAAE,OAAO;QACjC,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;YACvD,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/D,MAAM,WAAW,GACf,WAAW,KAAK,YAAY;gBAC1B,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;gBACxD,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;YAE5D,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,WAAW,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;YACtF,QAAQ,CAAC,eAAe,CAAC,eAAe,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;SAC5D;QACD,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,CAC3D,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,CAAgC,EAAE,EAAE;QACnC,IACE;YACE,WAAW;YACX,SAAS;YACT,WAAW;YACX,YAAY;YACZ,QAAQ;YACR,UAAU;YACV,MAAM;YACN,KAAK;SACN,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAEjB,CAAC,CAAC,cAAc,EAAE,CAAC;QAErB,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,WAAW,CAAC;YACjB,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE;gBACvB,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;gBACvB,MAAM;YACR,KAAK,SAAS,CAAC;YACf,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;gBACrB,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;gBACvB,MAAM;YACR,KAAK,QAAQ;gBACX,QAAQ,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;gBAC5B,MAAM;YACR,KAAK,UAAU;gBACb,QAAQ,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;gBAC5B,MAAM;YACR,KAAK,MAAM;gBACT,QAAQ,CAAC,GAAG,CAAC,CAAC;gBACd,MAAM;YACR,KAAK,KAAK;gBACR,QAAQ,CAAC,GAAG,CAAC,CAAC;gBACd,MAAM;YACR,QAAQ;SACT;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CACpC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,SAAS,CAAC,KAAK,CAAC,CAAC;YACjB,IAAI,MAAM;gBAAE,aAAa,EAAE,EAAE,CAAC;QAChC,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QACjD,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QACpD,IAAI,MAAM,EAAE;YACV,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;YAClD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;SACnD;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;YACpD,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;YACrD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS;YAAE,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IAC3C,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;IAE/D,MAAM,IAAI,GAAG,CACX,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,YAAY,EAChB,SAAS,EAAE;YACT,UAAU,EAAE,OAAO;YACnB,SAAS,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;SAC3D,EACD,WAAW,EAAE,WAAW,KACpB,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAClC,KAAK,EACH;YACE,gBAAgB,EAAE,GAAG,UAAU,GAAG;YAClC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACpB,aAGpB,MAAC,IAAI,IAAC,EAAE,EAAE,wBAAwB,EAAE,SAAS,mBAC3C,MAAC,IAAI,IACH,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,aAEtD,KAAC,SAAS,IAAC,YAAY,EAAE,YAAY,GAAI,EACzC,KAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,cAAc,EACzB,WAAW,EAAE,GAAG,EAAE;oCAChB,SAAS,CAAC,IAAI,CAAC,CAAC;oCAChB,WAAW,EAAE,EAAE,CAAC;gCAClB,CAAC,EACD,YAAY,EAAE,CAAC,CAAkC,EAAE,EAAE;oCACnD,SAAS,CAAC,IAAI,CAAC,CAAC;oCAChB,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,+DAA+D;oCACnF,WAAW,EAAE,EAAE,CAAC;gCAClB,CAAC,mBACc,GAAG,mBACH,GAAG,mBACH,KAAK,sBACF,WAAW,mBACd,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,EAAE,gBACM,KAAK,EAAE,QAAQ,EAAE,sBACX,GAAG,EAAE,OAAO,mBACf,GAAG,EAAE,QAAQ,GAC5B,IACG,EACN,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,QAAQ,GACjB,CACH,IACI,EACN,SAAS,IAAI,CAAC,OAAO,IAAI,CACxB,KAAC,WAAW,IACV,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,EACjE,IAAI,EAAE,oBAAoB,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAC1C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,gBACN,KAAK,EAAE,QAAQ,EAAE,GAC7B,CACH,EACA,OAAO,IAAI,CACV,KAAC,aAAa,IACZ,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EACvB,IAAI,EAAE,oBAAoB,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAC1C,CACH,IACI,CACR,CAAC;IAEF,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,KAAC,SAAS,OAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YACxE,IAAI,GACK,CACb,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n  KeyboardEvent,\n  FunctionComponent,\n  PropsWithoutRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  CSSProperties,\n  forwardRef,\n  Ref,\n  TouchEvent as ReactTouchEvent\n} from 'react';\n\nimport { NumberInput } from '../Number';\nimport { useConsolidatedRef, useDirection, useUID } from '../../hooks';\nimport FormField from '../FormField';\nimport Flex from '../Flex';\nimport Grid from '../Grid';\nimport { ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport SliderProps from './Slider.types';\nimport {\n  StyledSlider,\n  StyledTrack,\n  StyledThumb,\n  StyledSliderTrackWrapper,\n  StyledBar,\n  StyledPreview\n} from './Slider.styles';\nimport { calculateValueLength, getNearestValue } from './utils';\nimport SliderTicks from './SliderTicks';\n\nconst Slider: FunctionComponent<SliderProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<SliderProps>, ref: Ref<HTMLDivElement>) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      required,\n      status,\n      info,\n      label,\n      labelHidden,\n      min = 0,\n      max = 100,\n      step = 1,\n      value = min,\n      orientation = 'horizontal',\n      preview,\n      disabled = false,\n      readOnly = false,\n      showInput = true,\n      showProgress,\n      ticks = {},\n      onChange,\n      autoFocus,\n      onDragStart,\n      onDragEnd: onDragEndProp,\n      ...restProps\n    } = props;\n\n    const thumbRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const trackRef = useRef<HTMLDivElement>(null);\n    const [inDrag, setInDrag] = useState(false);\n    const [inputValue, setInputValue] = useState(value.toString());\n\n    const setValue = useCallback(\n      (newValue: number) => {\n        if (disabled || readOnly) return;\n        const normalizedValue = Math.min(Math.max(newValue, min), max);\n\n        setInputValue(normalizedValue.toString());\n        onChange(normalizedValue);\n      },\n      [disabled, readOnly, onChange]\n    );\n\n    const { start, end } = useDirection();\n\n    const moveThumb = useCallback(\n      (e: MouseEvent | TouchEvent) => {\n        if (disabled || readOnly) return;\n        if (trackRef.current) {\n          const track = trackRef.current.getBoundingClientRect();\n          const { clientX, clientY } = 'touches' in e ? e.touches[0] : e;\n          const newPosition =\n            orientation === 'horizontal'\n              ? (clientX - track[start]) / (track[end] - track[start])\n              : (clientY - track.bottom) / (track.top - track.bottom);\n\n          const normalizedValue = Math.min(Math.max(min + (max - min) * newPosition, min), max);\n          setValue(getNearestValue(normalizedValue, min, max, step));\n        }\n        thumbRef.current?.focus();\n      },\n      [disabled, readOnly, step, min, max, setValue, start, end]\n    );\n\n    const onThumbKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLDivElement>) => {\n        if (\n          [\n            'ArrowDown',\n            'ArrowUp',\n            'ArrowLeft',\n            'ArrowRight',\n            'PageUp',\n            'PageDown',\n            'Home',\n            'End'\n          ].includes(e.key)\n        )\n          e.preventDefault();\n\n        switch (e.key) {\n          case 'ArrowDown':\n          case `Arrow${cap(start)}`:\n            setValue(value - step);\n            break;\n          case 'ArrowUp':\n          case `Arrow${cap(end)}`:\n            setValue(value + step);\n            break;\n          case 'PageUp':\n            setValue(value + 10 * step);\n            break;\n          case 'PageDown':\n            setValue(value - 10 * step);\n            break;\n          case 'Home':\n            setValue(min);\n            break;\n          case 'End':\n            setValue(max);\n            break;\n          default:\n        }\n      },\n      [setValue, value, step, start, end]\n    );\n\n    useEffect(() => {\n      const onDragEnd = () => {\n        setInDrag(false);\n        if (inDrag) onDragEndProp?.();\n      };\n\n      document.addEventListener('mouseup', onDragEnd);\n      document.addEventListener('touchend', onDragEnd);\n      document.addEventListener('touchcancel', onDragEnd);\n      if (inDrag) {\n        document.addEventListener('mousemove', moveThumb);\n        document.addEventListener('touchmove', moveThumb);\n      }\n\n      return () => {\n        document.removeEventListener('mouseup', onDragEnd);\n        document.removeEventListener('touchend', onDragEnd);\n        document.removeEventListener('touchcancel', onDragEnd);\n        document.removeEventListener('mousemove', moveThumb);\n        document.removeEventListener('touchmove', moveThumb);\n      };\n    }, [inDrag, moveThumb, onDragEndProp]);\n\n    useEffect(() => {\n      if (autoFocus) thumbRef.current?.focus();\n    }, [autoFocus]);\n\n    const percentage = ((Number(value) - min) / (max - min)) * 100;\n\n    const Comp = (\n      <Flex\n        {...restProps}\n        as={StyledSlider}\n        container={{\n          alignItems: 'start',\n          direction: orientation === 'horizontal' ? 'row' : 'column'\n        }}\n        orientation={orientation}\n        {...{ status, disabled, readOnly }}\n        style={\n          {\n            '--slider-value': `${percentage}%`,\n            userSelect: inDrag ? 'none' : 'auto'\n          } as CSSProperties\n        }\n      >\n        <Grid as={StyledSliderTrackWrapper} container>\n          <Flex\n            as={StyledTrack}\n            ref={trackRef}\n            onMouseDown={moveThumb}\n            container={{ alignItems: 'center', justify: 'center' }}\n          >\n            <StyledBar showProgress={showProgress} />\n            <StyledThumb\n              ref={thumbRef}\n              role='slider'\n              tabIndex={0}\n              onKeyDown={onThumbKeyDown}\n              onMouseDown={() => {\n                setInDrag(true);\n                onDragStart?.();\n              }}\n              onTouchStart={(e: ReactTouchEvent<HTMLDivElement>) => {\n                setInDrag(true);\n                e.preventDefault(); // Prevent dispatching mouse events as some browser may do that\n                onDragStart?.();\n              }}\n              aria-valuemin={min}\n              aria-valuemax={max}\n              aria-valuenow={value}\n              aria-orientation={orientation}\n              aria-readonly={readOnly || undefined}\n              aria-disabled={disabled || undefined}\n              id={id}\n              aria-label={label?.toString()}\n              aria-describedby={`${id}-info`}\n              aria-controls={`${id}-value`}\n            />\n          </Flex>\n          {Object.keys(ticks).length > 0 && (\n            <SliderTicks\n              ticks={ticks}\n              min={min}\n              max={max}\n              step={step}\n              orientation={orientation}\n              onClick={setValue}\n            />\n          )}\n        </Grid>\n        {showInput && !preview && (\n          <NumberInput\n            id={`${id}-value`}\n            status={status}\n            min={min}\n            max={max}\n            step={step}\n            value={inputValue}\n            onChange={setInputValue}\n            onBlur={v => setValue(getNearestValue(Number(v), min, max, step))}\n            size={calculateValueLength(min, max, step)}\n            readOnly={readOnly}\n            disabled={disabled}\n            aria-label={label?.toString()}\n          />\n        )}\n        {preview && (\n          <StyledPreview\n            id={`${id}-value`}\n            value={value.toString()}\n            size={calculateValueLength(min, max, step)}\n          />\n        )}\n      </Flex>\n    );\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default Slider;\n"]}

package/lib/components/Slider/SliderTicks.js

@@ -25,8 +25,8 @@ const SliderTicks = ({ ticks, min, max, step, orientation, onClick }) => {
                     }
                     : {
                         rowStartEnd: `${-tick.start} / ${-tick.end}`
-                    }, orientation: orientation, lowerBoundaryItem: tick.value === min, upperBoundaryItem: tick.value === max, children: _jsx(StyledTickButton, { tabIndex: -1, role: 'button', "aria-hidden": true, onClick: () => onClick(tick.value), children: tick.label }, void 0) }, tick.label ?? tick.value));
-        }) }, void 0));
+                    }, orientation: orientation, lowerBoundaryItem: tick.value === min, upperBoundaryItem: tick.value === max, children: _jsx(StyledTickButton, { tabIndex: -1, role: 'button', "aria-hidden": true, onClick: () => onClick(tick.value), children: tick.label }) }, tick.label ?? tick.value));
+        }) }));
 };
 export default SliderTicks;
 //# sourceMappingURL=SliderTicks.js.map