'use client'; "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function _export(target, all) { for(var name in all)Object.defineProperty(target, name, { enumerable: true, get: all[name] }); } _export(exports, { fieldClassNames: function() { return fieldClassNames; }, useFieldStyles_unstable: function() { return useFieldStyles_unstable; } }); const _react = require("@griffel/react"); const fieldClassNames = { root: `fui-Field`, label: `fui-Field__label`, validationMessage: `fui-Field__validationMessage`, validationMessageIcon: `fui-Field__validationMessageIcon`, hint: `fui-Field__hint` }; // Size of the icon in the validation message const iconSize = '12px'; /** * Styles for the root slot */ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({ base: { mc9l5x: "f13qh94s" }, horizontal: { Budl1dq: "f2wwaib", wkccdc: "f1645dqt" }, horizontalNoLabel: { uwmqm3: [ "f15jqgz8", "fggqkej" ], Budl1dq: "f1c2z91y" } }, { d: [ ".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}" ] }); const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({ base: { B2u0y6b: "f6nezus", Bxyxcbc: "f1iqmcbn" }, vertical: { z8tnut: "fclwglc", Byoj8tv: "fywfov9", jrapky: "fyacil5" }, verticalLarge: { z8tnut: "f1sl3k7w", Byoj8tv: "f1brlhvm", jrapky: "f8l5zjj" }, horizontal: { z8tnut: "fp2oml8", Byoj8tv: "f1tdddsa", t21cq0: [ "fkujibs", "f199hnxi" ], Ijaq50: "f16hsg94", nk6f5a: "f1nzqi2z" }, horizontalSmall: { z8tnut: "f1ywm7hm", Byoj8tv: "f14wxoun" }, horizontalLarge: { z8tnut: "f1hqyr95", Byoj8tv: "fm4hlj0" } }, { d: [ ".f6nezus{max-width:max-content;}", ".f1iqmcbn{max-height:max-content;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1hqyr95{padding-top:9px;}", ".fm4hlj0{padding-bottom:9px;}" ] }); const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r5c4z9l", null, [ ".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}" ]); const useSecondaryTextStyles = /*#__PURE__*/ (0, _react.__styles)({ error: { sj55zd: "f1hcrxcs" }, withIcon: { uwmqm3: [ "frawy03", "fg4c52" ] } }, { d: [ ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}" ] }); const useValidationMessageIconBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("ra7h1uk", "r1rh6bd7", [ ".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}", ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}" ]); const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react.__styles)({ error: { sj55zd: "f1hcrxcs" }, warning: { sj55zd: "f1k5f75o" }, success: { sj55zd: "ffmvakt" } }, { d: [ ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}" ] }); const useFieldStyles_unstable = (state)=>{ 'use no memo'; const { validationState, size } = state; const horizontal = state.orientation === 'horizontal'; const rootStyles = useRootStyles(); state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className); const labelStyles = useLabelStyles(); if (state.label) { state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className); } const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName(); const validationMessageIconStyles = useValidationMessageIconStyles(); if (state.validationMessageIcon) { state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className); } const secondaryTextBaseClassName = useSecondaryTextBaseClassName(); const secondaryTextStyles = useSecondaryTextStyles(); if (state.validationMessage) { state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className); } if (state.hint) { state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className); } return state; };