@razorpay/blade/build/lib/web/production/components/InputGroup/StyledInputGroup.js

The Design System that powers Razorpay

import styled from 'styled-components';
import '../Box/BaseBox/index.js';
import '../../utils/index.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeBorderSize } from '../../utils/makeBorderSize/makeBorderSize.js';

var StyledInputGroup = /*#__PURE__*/styled(BaseBox).withConfig({
  displayName: "StyledInputGroup",
  componentId: "sc-11o2n6c-0"
})(["", ""], function (_ref) {
  var theme = _ref.theme;
  var radius = makeBorderSize(theme.border.radius.small);
  return "\n      /* Reset all inputs and their focus ring wrappers */\n      & .__blade-input-row .__blade-base-input-wrapper,\n      & .__blade-input-row .focus-ring-wrapper {\n        border-radius: 0;\n      }\n\n      /* Row stacking: elevate entire row on hover/focus to prevent shadow clipping between rows */\n      & .__blade-input-row {\n        position: relative;\n        z-index: 0;\n      }\n\n      & .__blade-input-row:hover,\n      & .__blade-input-row:focus-within {\n        z-index: 1;\n      }\n\n      /* Within-row stacking: elevate hovered/focused input above siblings */\n      & .__blade-input-row .__blade-base-input-wrapper {\n        z-index: 0;\n      }\n\n      & .__blade-input-row .__blade-base-input-wrapper:hover,\n      & .__blade-input-row .__blade-base-input-wrapper:focus-within {\n        z-index: 1;\n      }\n\n      /* Multi-row: First row, first column */\n      & .__blade-input-row:first-child > div:first-child .__blade-base-input-wrapper,\n      & .__blade-input-row:first-child > div:first-child .focus-ring-wrapper {\n        border-top-left-radius: ".concat(radius, ";\n      }\n\n      /* Multi-row: First row, last column */\n      & .__blade-input-row:first-child > div:last-child .__blade-base-input-wrapper,\n      & .__blade-input-row:first-child > div:last-child .focus-ring-wrapper {\n        border-top-right-radius: ").concat(radius, ";\n      }\n\n      /* Multi-row: Last row, first column */\n      & .__blade-input-row:last-child > div:first-child .__blade-base-input-wrapper,\n      & .__blade-input-row:last-child > div:first-child .focus-ring-wrapper {\n        border-bottom-left-radius: ").concat(radius, ";\n      }\n\n      /* Multi-row: Last row, last column */\n      & .__blade-input-row:last-child > div:last-child .__blade-base-input-wrapper,\n      & .__blade-input-row:last-child > div:last-child .focus-ring-wrapper {\n        border-bottom-right-radius: ").concat(radius, ";\n      }\n\n      /* Multi-row: First row with only one column */\n      & .__blade-input-row:first-child > div:only-child .__blade-base-input-wrapper,\n      & .__blade-input-row:first-child > div:only-child .focus-ring-wrapper {\n        border-top-left-radius: ").concat(radius, ";\n        border-top-right-radius: ").concat(radius, ";\n      }\n\n      /* Multi-row: Last row with only one column */\n      & .__blade-input-row:last-child > div:only-child .__blade-base-input-wrapper,\n      & .__blade-input-row:last-child > div:only-child .focus-ring-wrapper {\n        border-bottom-left-radius: ").concat(radius, ";\n        border-bottom-right-radius: ").concat(radius, ";\n      }\n\n      /* Single row: Single column */\n      & .__blade-input-row:only-child > div:only-child .__blade-base-input-wrapper,\n      & .__blade-input-row:only-child > div:only-child .focus-ring-wrapper {\n        border-radius: ").concat(radius, ";\n      }\n\n      /* Single row: First column */\n      & .__blade-input-row:only-child > div:first-child:not(:only-child) .__blade-base-input-wrapper,\n      & .__blade-input-row:only-child > div:first-child:not(:only-child) .focus-ring-wrapper {\n        border-top-left-radius: ").concat(radius, ";\n        border-bottom-left-radius: ").concat(radius, ";\n      }\n\n      /* Single row: Last column */\n      & .__blade-input-row:only-child > div:last-child:not(:only-child) .__blade-base-input-wrapper,\n      & .__blade-input-row:only-child > div:last-child:not(:only-child) .focus-ring-wrapper {\n        border-top-right-radius: ").concat(radius, ";\n        border-bottom-right-radius: ").concat(radius, ";\n      }\n\n      /* Single row: Middle columns */\n      & .__blade-input-row:only-child > div:not(:first-child):not(:last-child) .__blade-base-input-wrapper,\n      & .__blade-input-row:only-child > div:not(:first-child):not(:last-child) .focus-ring-wrapper {\n        border-radius: 0;\n      }\n    ");
});

export { StyledInputGroup };
//# sourceMappingURL=StyledInputGroup.js.map