@tapie-kr/inspire-react/dist/cjs/components/molecules/FormField/index.js

React Component Collection for INSPIRE

/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var styles_css = require('./styles.css.js');
var color_css = require('../../../lib/style/contract/color.css.js');
var component_css = require('../../../lib/style/contract/component.css.js');
var index$3 = require('../../atoms/Label/index.js');
var index = require('../../foundations/Typography/index.js');
var index$2 = require('../../miscellaneous/layout/Box/index.js');
var index$1 = require('../../miscellaneous/layout/VStack/index.js');
var types = require('../../../lib/layout/types.js');
var shared = require('./shared.js');

function FormField(props){const{label,isEssential,description,size=shared.FormFieldSize.LARGE,fitContent=false,children}=props;const spacing=size===shared.FormFieldSize.LARGE?component_css.spacingVars.micro:component_css.spacingVars.mini;const DescriptionText=size===shared.FormFieldSize.LARGE?index.Typography.Petite:index.Typography.Tiny;return jsxRuntime.jsxs(index$1.VStack,{fullWidth:!fitContent,tag:"label",spacing:spacing,align:types.StackAlign.START,children:[jsxRuntime.jsx(index$2.Box,{fullWidth:true,className:size===shared.FormFieldSize.LARGE?styles_css.largeLabelWrapper:styles_css.smallLabelWrapper,children:jsxRuntime.jsx(index$3.Label,{isEssential:isEssential,children:label})}),children,description&&jsxRuntime.jsx(index$2.Box,{fullWidth:true,className:styles_css.descriptionWrapper,children:jsxRuntime.jsx(DescriptionText,{color:color_css.colorVars.content.muted,children:description})})]})}

exports.FormField = FormField;