react-base-guide/lib/components/label/Fieldset.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const FieldsetRoot = styled_components_1.default.fieldset `
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  height: ${p => p.$height};
  min-height: ${p => p.$minHeight ? (+p.$minHeight.replace("px", "") + 7.5) + "px" : "0px"};
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  inset: -5.5px 0 0;
  border-radius: ${p => p.theme.radius.element};
  transition: border 0.3s;
`;
const Legend = styled_components_1.default.legend `
  display: block;
  float: unset;
  overflow: hidden;
  white-space: nowrap;
  visibility: hidden;
  height: 12px;
  width: auto;
  max-width: ${p => (p.$hidden || p.$variant === "text") ? "0px" : "100%"};
  padding: ${p => (p.$hidden || p.$variant === "text") ? "0px" : "0 6px"};
  margin-left: 9px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  text-align: start;
  transition: max-width 0.3s;
`;
const Fieldset = (props) => ((0, jsx_runtime_1.jsx)(FieldsetRoot, Object.assign({ "$error": props.error, "$warning": props.warning, "$success": props.success, "$height": props.height, "$minHeight": props.minHeight }, { children: (0, jsx_runtime_1.jsx)(Legend, Object.assign({ "$variant": props.variant, "$hidden": !props.label }, { children: props.label })) })));
exports.default = Fieldset;
//# sourceMappingURL=Fieldset.js.map