@hypothesis/frontend-shared/lib/components/input/InputGroup.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/input/InputGroup.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';

// These styles may be applied to input components to adapt them when in
// an InputGroup
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export const inputGroupStyles = classnames(
// All inputs within an InputGroup should have a border. Turn off border-radius
'input-group:border input-group:rounded-none',
// Restore border-radius on the leftmost and rightmost components in the group
'input-group:first:rounded-l input-group:last:rounded-r',
// "Collapse" borders between input components
'input-group:ml-[-1px] input-group:first:ml-0',
// Make sure focused element appears on top, preventing a cropped focus ring
'focus:z-1');
/**
 * Render a container that lays out a group of input components
 */
export default function InputGroup({
  children,
  classes,
  elementRef,
  ...htmlAttributes
}) {
  return _jsxDEV("div", {
    "data-component": "InputGroup",
    ...htmlAttributes,
    ref: downcastRef(elementRef),
    className: classnames(
    // Set the `.input-group` class so that children may
    // use the `input-group:` variant in their styles
    'input-group', 'flex items-stretch w-full justify-center', classes),
    children: children
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 34,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=InputGroup.js.map