@foxford/ui 2.21.3 → 2.22.0

package/components/FormLabel/FormLabel.js

@@ -1,2 +1,2 @@
-import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as s,cloneElement as o}from'react';import{withMergedProps as i}from'../../hocs/withMergedProps.js';import{Text as t}from'../Text/Text.js';import{Root as a}from'./style.js';import{SIZES as l}from'./constants.js';import{jsxs as c,jsx as p}from'react/jsx-runtime';var m=["size","textProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","error","success","checked","onColored","children","control","label"];var n='FormLabel';var z=i(s(((s,i)=>{var{size:l="m",textProps:n={},sizeXXS:z,sizeXS:d,sizeS:b,sizeM:f,sizeL:h,sizeXL:S,disabled:X,error:j,success:u,checked:L,onColored:x,children:v,control:M,label:y}=s,P=r(s,m);var C={size:l,sizeXXS:z,sizeXS:d,sizeS:b,sizeM:f,sizeL:h,sizeXL:S};var E={disabled:X,error:j,success:u,checked:L,onColored:x};var N='object'==typeof M&&'object'==typeof M.props&&null!==M.props?M.props:{};return c(a,e(e(e(e({},P),C),E),{},{ref:i,children:['function'==typeof M?M(e(e({},C),E)):o(M,e(e(e({},C),E),N)),p(t,e(e({as:"span",appearance:"body",size:"inherit",color:"inherit",marginLeft:8},n),{},{children:null!=y?y:v}))]}))})),{displayName:"FormLabel",sizes:l});export{n as COMPONENT_NAME,z as FormLabel};
+import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as o,cloneElement as r}from'react';import{withMergedProps as t}from'../../hocs/withMergedProps.js';import{Text as i}from'../Text/Text.js';import{Icon as a}from'../Icon/Icon.js';import'../Icon/icons.js';import{Root as n,Content as l,HintButton as p}from'./style.js';import{SIZES as c}from'./constants.js';import d from'./images/hint.module.svg.js';import{jsxs as m,jsx as z}from'react/jsx-runtime';var b=["size","textProps","hint","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","error","success","checked","onColored","children","control","label","palette"];var h='FormLabel';var f=t(o(((o,t)=>{var c;var{size:h="m",textProps:f={},hint:u={},sizeXXS:j,sizeXS:x,sizeS:S,sizeM:X,sizeL:v,sizeXL:P,disabled:L,error:y,success:M,checked:g,onColored:C,children:I,control:T,label:E,palette:N}=o,k=s(o,b);var w={size:h,sizeXXS:j,sizeXS:x,sizeS:S,sizeM:X,sizeL:v,sizeXL:P};var F={disabled:L,error:y,success:M,checked:g,onColored:C};var O='object'==typeof T&&'object'==typeof T.props&&null!==T.props?T.props:{};var{textProps:R={},iconProps:A={}}=u;return m(n,e(e(e(e({},k),w),F),{},{palette:N,ref:t,children:['function'==typeof T?T(e(e({},w),F)):r(T,e(e(e({},w),F),O)),m(l,{children:[z(i,e(e({as:"span",appearance:"body",size:"inherit",color:"inherit"},f),{},{children:null!=E?E:I})),u.text&&z(i,e(e({as:"span",appearance:"caption",color:F.disabled?'content-disabled':'content-onmain-secondary',size:.8,sizeUnits:"em",marginTop:2},R),{},{children:u.text}))]}),u.buttonProps&&z(p,e(e({},u.buttonProps),{},{disabled:F.disabled||u.buttonProps.disabled,palette:N,children:z(a,e({as:"span",icon:null!==(c=u.icon)&&void 0!==c?c:z(d,{}),size:20},A))}))]}))})),{displayName:"FormLabel",sizes:c});export{h as COMPONENT_NAME,f as FormLabel};
 //# sourceMappingURL=FormLabel.js.map

package/components/FormLabel/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["import { forwardRef, cloneElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport * as Styled from './style'\nimport { SIZES } from './constants'\nimport type { FormLabelProps } from './types'\n\nconst COMPONENT_NAME = 'FormLabel'\n\n/**\n *\n * Component accepts all \\<label\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [FormLabelProps](https://github.com/foxford/ui/blob/master/src/components/FormLabel/types.ts)\n */\nconst FormLabel: React.ForwardRefExoticComponent<FormLabelProps> = withMergedProps<FormLabelProps, HTMLLabelElement>(\n  forwardRef(\n    (\n      {\n        size = 'm',\n        textProps = {},\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        disabled,\n        error,\n        success,\n        checked,\n        onColored,\n        children,\n        control,\n        label,\n        ...props\n      },\n      ref\n    ) => {\n      const sizeProps = {\n        size,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n      }\n\n      const stateProps = {\n        disabled,\n        error,\n        success,\n        checked,\n        onColored,\n      }\n\n      const elementProps =\n        typeof control === 'object' && typeof control.props === 'object' && control.props !== null ? control.props : {}\n\n      return (\n        <Styled.Root {...props} {...sizeProps} {...stateProps} ref={ref}>\n          {typeof control === 'function'\n            ? control({\n                ...sizeProps,\n                ...stateProps,\n              })\n            : cloneElement(control, {\n                ...sizeProps,\n                ...stateProps,\n                ...elementProps,\n              })}\n          <Text as='span' appearance='body' size='inherit' color='inherit' marginLeft={8} {...textProps}>\n            {label ?? children}\n          </Text>\n        </Styled.Root>\n      )\n    }\n  ),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { FormLabel, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","FormLabel","withMergedProps","forwardRef","_ref","ref","size","textProps","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","error","success","checked","onColored","children","control","label","props","_objectWithoutProperties","_excluded","sizeProps","stateProps","elementProps","_jsxs","Styled.Root","cloneElement","_jsx","Text","_objectSpread","as","appearance","color","marginLeft","displayName","sizes","SIZES"],"mappings":"wiBAOMA,IAAAA,EAAiB,YAYjBC,IAAAA,EAA6DC,EACjEC,GAAAA,CACEC,EAoBEC,KACG,IApBHC,KACEA,EAAO,IADTC,UAEEA,EAAY,GAFdC,QAGEA,EAHFC,OAIEA,EAJFC,MAKEA,EALFC,MAMEA,EANFC,MAOEA,EAPFC,OAQEA,EARFC,SASEA,EATFC,MAUEA,EAVFC,QAWEA,EAXFC,QAYEA,EAZFC,UAaEA,EAbFC,SAcEA,EAdFC,QAeEA,EAfFC,MAgBEA,GAICjB,EAHEkB,EAGFC,EAAAnB,EAAAoB,GACH,IAAMC,EAAY,CAChBnB,KAAAA,EACAE,QAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,OAAAA,GAGF,IAAMa,EAAa,CACjBZ,SAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,UAAAA,GAGF,IAAMS,EACe,iBAAZP,GAAiD,iBAAlBA,EAAQE,OAAwC,OAAlBF,EAAQE,MAAiBF,EAAQE,MAAQ,GAE/G,OACEM,EAACC,aAAgBP,GAAWG,GAAeC,GAA3C,GAAA,CAAuDrB,IAAKA,EAA5Dc,SACG,CAAmB,mBAAZC,EACJA,EACKK,EAAAA,EAAAA,GAAAA,GACAC,IAELI,EAAaV,EACRK,EAAAA,EAAAA,EAAAA,GAAAA,GACAC,GACAC,IAETI,EAACC,EAADC,EAAAA,EAAA,CAAMC,GAAG,OAAOC,WAAW,OAAO7B,KAAK,UAAU8B,MAAM,UAAUC,WAAY,GAAO9B,GAApF,GAAA,CAAAY,SACGE,MAAAA,EAAAA,EAASF,YAMpB,CACEmB,YA7EmB,YA8EnBC,MAAOC"}
+{"version":3,"file":"FormLabel.js","sources":["../../../../src/components/FormLabel/FormLabel.tsx"],"sourcesContent":["import { forwardRef, cloneElement } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport * as Styled from './style'\nimport { SIZES } from './constants'\nimport Hint from './images/hint.module.svg'\nimport type { FormLabelProps } from './types'\n\nconst COMPONENT_NAME = 'FormLabel'\n\n/**\n *\n * Component accepts all \\<label\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [FormLabelProps](https://github.com/foxford/ui/blob/master/src/components/FormLabel/types.ts)\n */\nconst FormLabel: React.ForwardRefExoticComponent<FormLabelProps> = withMergedProps<FormLabelProps, HTMLLabelElement>(\n  forwardRef(\n    (\n      {\n        size = 'm',\n        textProps = {},\n        hint = {},\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n        disabled,\n        error,\n        success,\n        checked,\n        onColored,\n        children,\n        control,\n        label,\n        palette,\n        ...props\n      },\n      ref\n    ) => {\n      const sizeProps = {\n        size,\n        sizeXXS,\n        sizeXS,\n        sizeS,\n        sizeM,\n        sizeL,\n        sizeXL,\n      }\n\n      const stateProps = {\n        disabled,\n        error,\n        success,\n        checked,\n        onColored,\n      }\n\n      const elementProps =\n        typeof control === 'object' && typeof control.props === 'object' && control.props !== null ? control.props : {}\n\n      const { textProps: hintTextProps = {}, iconProps: hintIconProps = {} } = hint\n\n      return (\n        <Styled.Root {...props} {...sizeProps} {...stateProps} palette={palette} ref={ref}>\n          {typeof control === 'function'\n            ? control({\n                ...sizeProps,\n                ...stateProps,\n              })\n            : cloneElement(control, {\n                ...sizeProps,\n                ...stateProps,\n                ...elementProps,\n              })}\n          <Styled.Content>\n            <Text as='span' appearance='body' size='inherit' color='inherit' {...textProps}>\n              {label ?? children}\n            </Text>\n            {hint.text && (\n              <Text\n                as='span'\n                appearance='caption'\n                color={stateProps.disabled ? 'content-disabled' : 'content-onmain-secondary'}\n                size={0.8}\n                sizeUnits='em'\n                marginTop={2}\n                {...hintTextProps}\n              >\n                {hint.text}\n              </Text>\n            )}\n          </Styled.Content>\n          {hint.buttonProps && (\n            <Styled.HintButton\n              {...hint.buttonProps}\n              disabled={stateProps.disabled || hint.buttonProps.disabled}\n              palette={palette}\n            >\n              <Icon as='span' icon={hint.icon ?? <Hint />} size={20} {...hintIconProps} />\n            </Styled.HintButton>\n          )}\n        </Styled.Root>\n      )\n    }\n  ),\n  {\n    displayName: COMPONENT_NAME,\n    sizes: SIZES,\n  }\n)\n\nexport { FormLabel, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","FormLabel","withMergedProps","forwardRef","_ref","ref","_hint$icon","size","textProps","hint","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","disabled","error","success","checked","onColored","children","control","label","palette","props","_objectWithoutProperties","_excluded","sizeProps","stateProps","elementProps","hintTextProps","iconProps","hintIconProps","_jsxs","Styled.Root","_objectSpread","cloneElement","Styled.Content","_jsx","Text","as","appearance","color","text","sizeUnits","marginTop","buttonProps","Styled.HintButton","Icon","icon","Hint","displayName","sizes","SIZES"],"mappings":"isBASMA,IAAAA,EAAiB,YAYjBC,IAAAA,EAA6DC,EACjEC,GAAAA,CACEC,EAsBEC,KACG,IAAAC,EAAA,IAtBHC,KACEA,EAAO,IADTC,UAEEA,EAAY,GAFdC,KAGEA,EAAO,GAHTC,QAIEA,EAJFC,OAKEA,EALFC,MAMEA,EANFC,MAOEA,EAPFC,MAQEA,EARFC,OASEA,EATFC,SAUEA,EAVFC,MAWEA,EAXFC,QAYEA,EAZFC,QAaEA,EAbFC,UAcEA,EAdFC,SAeEA,EAfFC,QAgBEA,EAhBFC,MAiBEA,EAjBFC,QAkBEA,GAICpB,EAHEqB,EAGFC,EAAAtB,EAAAuB,GACH,IAAMC,EAAY,CAChBrB,KAAAA,EACAG,QAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,MAAAA,EACAC,OAAAA,GAGF,IAAMc,EAAa,CACjBb,SAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,UAAAA,GAGF,IAAMU,EACe,iBAAZR,GAAiD,iBAAlBA,EAAQG,OAAwC,OAAlBH,EAAQG,MAAiBH,EAAQG,MAAQ,GAE/G,IAAQjB,UAAWuB,EAAgB,GAAIC,UAAWC,EAAgB,IAAOxB,EAEzE,OACEyB,EAACC,aAAgBV,GAAWG,GAAeC,GAA3C,GAAA,CAAuDL,QAASA,EAASnB,IAAKA,EAA9EgB,SACG,CAAmB,mBAAZC,EACJA,EAAOc,EAAAA,EAAA,GACFR,GACAC,IAELQ,EAAaf,EAADc,EAAAA,EAAAA,EAAA,GACPR,GACAC,GACAC,IAETI,EAACI,EAAD,CAAAjB,SAAA,CACEkB,EAACC,EAADJ,EAAAA,EAAA,CAAMK,GAAG,OAAOC,WAAW,OAAOnC,KAAK,UAAUoC,MAAM,WAAcnC,GAArE,GAAA,CAAAa,SACGE,MAAAA,EAAAA,EAASF,KAEXZ,EAAKmC,MACJL,EAACC,EAADJ,EAAAA,EAAA,CACEK,GAAG,OACHC,WAAW,UACXC,MAAOd,EAAWb,SAAW,mBAAqB,2BAClDT,KAAM,GACNsC,UAAU,KACVC,UAAW,GACPf,GAPN,GAAA,CAAAV,SASGZ,EAAKmC,WAIXnC,EAAKsC,aACJR,EAACS,EAADZ,EAAAA,EAAA,GACM3B,EAAKsC,aADX,GAAA,CAEE/B,SAAUa,EAAWb,UAAYP,EAAKsC,YAAY/B,SAClDQ,QAASA,EAHXH,SAKEkB,EAACU,EAADb,EAAA,CAAMK,GAAG,OAAOS,KAAmB,UAAbzC,EAAKyC,YAAQ,IAAA5C,EAAAA,EAAAiC,EAACY,EAApC,IAA6C5C,KAAM,IAAQ0B,cAOvE,CACEmB,YAzGmB,YA0GnBC,MAAOC"}

package/components/FormLabel/images/hint.module.svg.js

@@ -0,0 +1,2 @@
+import*as a from'react';var e;function r(){return r=Object.assign||function(a){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)({}).hasOwnProperty.call(r,t)&&(a[t]=r[t])}return a},r.apply(this,arguments)}var t=t=>a.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",fill:"currentcolor",viewBox:"0 0 20 20"},t),e||(e=a.createElement("path",{fillRule:"evenodd",d:"M10 3.125a6.875 6.875 0 1 0 0 13.75 6.875 6.875 0 0 0 0-13.75M1.875 10a8.125 8.125 0 1 1 16.25 0 8.125 8.125 0 0 1-16.25 0m8.28-2.69a1.25 1.25 0 0 0-1.388.816.625.625 0 0 1-1.18-.415 2.499 2.499 0 0 1 4.856.832c0 .957-.709 1.588-1.215 1.925a5 5 0 0 1-1.053.53l-.022.008-.007.002-.002.001h-.001l-.198-.592.198.592a.626.626 0 0 1-.396-1.185l.01-.004.046-.017q.064-.023.18-.075a3.71 3.71 0 0 0 .552-.3c.43-.287.658-.592.658-.885a1.25 1.25 0 0 0-1.037-1.233m-.813 5.607c0-.345.28-.625.625-.625h.009a.625.625 0 1 1 0 1.25h-.009a.625.625 0 0 1-.625-.625",clipRule:"evenodd"})));export{t as default};
+//# sourceMappingURL=hint.module.svg.js.map

package/components/FormLabel/images/hint.module.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hint.module.svg.js","sources":["../../../../../src/components/FormLabel/images/hint.module.svg"],"sourcesContent":["<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentcolor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 3.125a6.875 6.875 0 1 0 0 13.75 6.875 6.875 0 0 0 0-13.75M1.875 10a8.125 8.125 0 1 1 16.25 0 8.125 8.125 0 0 1-16.25 0m8.28-2.69a1.25 1.25 0 0 0-1.388.816.625.625 0 0 1-1.18-.415 2.499 2.499 0 0 1 4.856.832c0 .957-.709 1.588-1.215 1.925a5 5 0 0 1-1.053.53l-.022.008-.007.002-.002.001h-.001l-.198-.592.198.592a.626.626 0 0 1-.396-1.185l.01-.004.046-.017q.064-.023.18-.075c.155-.068.355-.169.552-.3.43-.287.658-.592.658-.885a1.25 1.25 0 0 0-1.037-1.233m-.813 5.607c0-.345.28-.625.625-.625h.009a.625.625 0 1 1 0 1.25h-.009a.625.625 0 0 1-.625-.625\" clip-rule=\"evenodd\"/></svg>"],"names":["_path","_extends","Object","assign","target","i","arguments","length","source","key","hasOwnProperty","call","apply","this","SvgHintmodule","props","React","createElement","xmlns","fill","viewBox","fillRule","d","clipRule"],"mappings":"wBAAA,IAAIA,EAEJ,SAASC,IAA2Q,OAA9PA,EAAWC,OAAOC,QAAU,SAAUC,GAAU,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IAAK,CAAE,IAAIG,EAASF,UAAUD,GAAI,IAAK,IAAII,KAAOD,GAAcN,IAAiBQ,eAAeC,KAAKH,EAAQC,KAAQL,EAAOK,GAAOD,EAAOC,IAAY,OAAOL,GAAkBH,EAASW,MAAMC,KAAMP,WAI7S,IAACQ,EAAuCC,GACrBC,EAAMC,cAAc,MAAOhB,EAAS,CACtDiB,MAAO,6BACPC,KAAM,eACNC,QAAS,aACRL,GAAQf,IAAUA,EAAqBgB,EAAMC,cAAc,OAAQ,CACpEI,SAAU,UACVC,EAAG,siBACHC,SAAU"}

package/components/FormLabel/style.js

@@ -1,2 +1,2 @@
-import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import l from'tinycolor2';import{createShouldForwardProp as n}from'../../shared/utils/style.js';import{responsiveSize as c}from'../../mixins/responsive-size.js';import{responsiveMargin as t}from'../../mixins/responsive-margin.js';var a=n((o=>!['inline','clear','disabled','error','success','checked','onColored'].includes(o)));var s=o=>"\n  color: ".concat(o.color,";\n  background-color: ").concat(o.backgroundColor,";\n  border-color: ").concat(o.borderColor,";\n  &:hover {\n    color: ").concat(o.colorHover,";\n    background-color: ").concat(o.backgroundColorHover,";\n    border-color: ").concat(o.borderColorHover,";\n  }\n");var d={default:{disabled:e(["",""],(r=>s(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors['border-disabled'],colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors['border-disabled']},r.palette)))),error:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-success'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-success']},r.palette)))),checked:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100'],borderColor:r.theme.colors['border-brand-primary-active'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['bg-brand-primary-100'],borderColorHover:r.theme.colors['border-brand-primary-active']},r.palette)))),default:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:l(r.theme.colors['bg-onmain-secondary']).darken(3).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},onColored:{disabled:e(["",""],(r=>s(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-onmain-secondary'],borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette)))),error:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-error-200'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-error-200'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-success-200'],borderColor:r.theme.colors['alert-success'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-success-200'],borderColorHover:r.theme.colors['alert-success']},r.palette)))),checked:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['bg-onmain-primary'],borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette)))),default:e(["",""],(r=>s(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:l(r.theme.colors['bg-onmain-secondary']).darken(3).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))}};var m=r.label.withConfig({shouldForwardProp:a}).withConfig({componentId:"fox-ui__sc-mry1kz-0"})([""," "," "," ",""],(o=>"\n    box-sizing: border-box;\n    isolation: isolate;\n    display: ".concat(o.inline?'inline-flex':'flex',";\n    cursor: ").concat(o.disabled?'not-allowed':'pointer',";\n    align-items: center;\n    border-radius: 8px;\n    padding: 12px 16px 12px 12px;\n    border: 1px solid transparent;\n    background-color: transparent;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n  ")),(o=>{if(o.clear)return'';var r=o.onColored?d.onColored:d.default;return o.disabled?r.disabled:o.error?r.error:o.success?r.success:o.checked?r.checked:r.default}),c,t);export{m as Root};
+import o from'@babel/runtime/helpers/objectSpread2';import r,{css as e}from'styled-components';import n from'tinycolor2';import{createShouldForwardProp as t}from'../../shared/utils/style.js';import{responsiveSize as l}from'../../mixins/responsive-size.js';import{responsiveMargin as c}from'../../mixins/responsive-margin.js';import{focus as a}from'../../mixins/focus.js';var s=t((o=>!['inline','clear','disabled','error','success','checked','onColored'].includes(o)));var i=o=>"\n  color: ".concat(o.color,";\n  background-color: ").concat(o.backgroundColor,";\n  border-color: ").concat(o.borderColor,";\n  &:hover {\n    color: ").concat(o.colorHover,";\n    background-color: ").concat(o.backgroundColorHover,";\n    border-color: ").concat(o.borderColorHover,";\n  }\n");var d={default:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-disabled-large'],borderColor:r.theme.colors['border-disabled'],colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-disabled-large'],borderColorHover:r.theme.colors['border-disabled']},r.palette)))),error:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-error-100'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-error-100'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-success-100'],borderColor:r.theme.colors['alert-success'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-success-100'],borderColorHover:r.theme.colors['alert-success']},r.palette)))),checked:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-brand-primary-100'],borderColor:r.theme.colors['border-brand-primary-active'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:n(r.theme.colors['bg-brand-primary-100']).darken(3).toString(),borderColorHover:r.theme.colors['border-brand-primary-active']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:n(r.theme.colors['bg-onmain-secondary']).darken(3).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))},onColored:{disabled:e(["",""],(r=>i(o({color:r.theme.colors['content-disabled'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-disabled'],backgroundColorHover:r.theme.colors['bg-onmain-secondary'],borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette)))),error:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-error-200'],borderColor:r.theme.colors['alert-bg-error-500'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-error-200'],borderColorHover:r.theme.colors['alert-bg-error-500']},r.palette)))),success:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['alert-bg-success-200'],borderColor:r.theme.colors['alert-success'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:r.theme.colors['alert-bg-success-200'],borderColorHover:r.theme.colors['alert-success']},r.palette)))),checked:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-primary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:n(r.theme.colors['bg-onmain-primary']).darken(3).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette)))),default:e(["",""],(r=>i(o({color:r.theme.colors['content-onmain-primary'],backgroundColor:r.theme.colors['bg-onmain-secondary'],borderColor:r.theme.colors['border-onmain-default-large'],colorHover:r.theme.colors['content-onmain-primary'],backgroundColorHover:n(r.theme.colors['bg-onmain-secondary']).darken(3).toString(),borderColorHover:r.theme.colors['border-onmain-default-large']},r.palette))))}};var m=r.label.withConfig({shouldForwardProp:s}).withConfig({componentId:"fox-ui__sc-mry1kz-0"})([""," "," "," ",""],(o=>"\n    box-sizing: border-box;\n    isolation: isolate;\n    display: ".concat(o.inline?'inline-flex':'flex',";\n    cursor: ").concat(o.disabled?'not-allowed':'pointer',";\n    border-radius: 8px;\n    padding: 12px;\n    min-width: min-content;\n    border: 1px solid transparent;\n    background-color: transparent;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n  ")),(o=>{if(o.clear)return'';var r=o.onColored?d.onColored:d.default;return o.disabled?r.disabled:o.error?r.error:o.success?r.success:o.checked?r.checked:r.default}),l,c);var b=r.span.withConfig({componentId:"fox-ui__sc-mry1kz-1"})(["box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;margin-left:12px;"]);var h=r.button.withConfig({shouldForwardProp:o=>!['palette'].includes(o)}).withConfig({componentId:"fox-ui__sc-mry1kz-2"})(["box-sizing:border-box;appearance:none;padding:2px;margin:0;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:start;border-radius:50%;background-color:transparent;margin-left:6px;cursor:",";"," ",""],(o=>o.disabled?'not-allowed':'pointer'),(r=>{return e=o({hintColor:r.theme.colors['content-onmain-tertiary'],hintBackgroundColor:r.theme.colors.transparent,hintColorHover:r.theme.colors['content-onmain-primary'],hintBackgroundColorHover:n(r.theme.colors['bg-oncolor-hover']).lighten(20).toString(),hintColorActive:r.theme.colors['content-onmain-primary'],hintBackgroundColorActive:r.theme.colors['bg-oncolor-hover'],hintColorDisabled:r.theme.colors['content-disabled'],hintBackgroundColorDisabled:r.theme.colors.transparent},r.palette),"\n  color: ".concat(e.hintColor,";\n  background-color: ").concat(e.hintBackgroundColor,";\n  &:hover {\n    color: ").concat(e.hintColorHover,";\n    background-color: ").concat(e.hintBackgroundColorHover,";\n  }\n  &:active {\n    color: ").concat(e.hintColorActive,";\n    background-color: ").concat(e.hintBackgroundColorActive,";\n  }\n  &:disabled {\n    color: ").concat(e.hintColorDisabled,";\n    background-color: ").concat(e.hintBackgroundColorDisabled,";\n  }\n");var e}),a);export{b as Content,h as HintButton,m as Root};
 //# sourceMappingURL=style.js.map

package/components/FormLabel/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sources":["../../../../src/components/FormLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormLabelProps, FormLabelPalette } from './types'\n\nconst shouldForwardFormLabelProp = createShouldForwardProp(\n  (propKey) => !['inline', 'clear', 'disabled', 'error', 'success', 'checked', 'onColored'].includes(propKey)\n)\n\nconst template = (palette: FormLabelPalette) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n  &:hover {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: {\n    disabled: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-disabled-large'],\n          borderColor: props.theme.colors['border-disabled'],\n          colorHover: props.theme.colors['content-disabled'],\n          backgroundColorHover: props.theme.colors['bg-disabled-large'],\n          borderColorHover: props.theme.colors['border-disabled'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['alert-bg-error-100'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n          borderColorHover: props.theme.colors['alert-bg-error-500'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['alert-bg-success-100'],\n          borderColor: props.theme.colors['alert-success'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n          borderColorHover: props.theme.colors['alert-success'],\n          ...props.palette,\n        })}\n    `,\n    checked: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-brand-primary-100'],\n          borderColor: props.theme.colors['border-brand-primary-active'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['bg-brand-primary-100'],\n          borderColorHover: props.theme.colors['border-brand-primary-active'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-secondary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(3).toString() as CSSColor,\n          borderColorHover: props.theme.colors['border-onmain-default-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n  onColored: {\n    disabled: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-onmain-secondary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          colorHover: props.theme.colors['content-disabled'],\n          backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n          borderColorHover: props.theme.colors['border-onmain-default-large'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['alert-bg-error-200'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n          borderColorHover: props.theme.colors['alert-bg-error-500'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['alert-bg-success-200'],\n          borderColor: props.theme.colors['alert-success'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n          borderColorHover: props.theme.colors['alert-success'],\n          ...props.palette,\n        })}\n    `,\n    checked: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-primary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['bg-onmain-primary'],\n          borderColorHover: props.theme.colors['border-onmain-default-large'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-secondary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(3).toString() as CSSColor,\n          borderColorHover: props.theme.colors['border-onmain-default-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Root = styled.label.withConfig<StyledFormLabelProps>({\n  shouldForwardProp: shouldForwardFormLabelProp,\n})`\n  ${(props) => `\n    box-sizing: border-box;\n    isolation: isolate;\n    display: ${props.inline ? 'inline-flex' : 'flex'};\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n    align-items: center;\n    border-radius: 8px;\n    padding: 12px 16px 12px 12px;\n    border: 1px solid transparent;\n    background-color: transparent;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n  `}\n  ${(props) => {\n    if (props.clear) return ''\n\n    const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n    if (props.disabled) return schema.disabled\n    if (props.error) return schema.error\n    if (props.success) return schema.success\n    if (props.checked) return schema.checked\n\n    return schema.default\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n"],"names":["shouldForwardFormLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","default","disabled","css","props","_objectSpread","theme","colors","error","success","checked","tinycolor","darken","toString","onColored","Root","styled","label","withConfig","shouldForwardProp","componentId","inline","concat","clear","schema","responsiveSize","responsiveMargin"],"mappings":"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"}
+{"version":3,"file":"style.js","sources":["../../../../src/components/FormLabel/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { responsiveSize } from 'mixins/responsive-size'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport { focus } from 'mixins/focus'\nimport type { CSSColor } from 'shared/types'\nimport type { StyledFormLabelProps, FormLabelPalette, StyledFormLabelHintProps } from './types'\n\nconst shouldForwardFormLabelProp = createShouldForwardProp(\n  (propKey) => !['inline', 'clear', 'disabled', 'error', 'success', 'checked', 'onColored'].includes(propKey)\n)\n\nconst template = (\n  palette: Pick<\n    FormLabelPalette,\n    'color' | 'backgroundColor' | 'borderColor' | 'colorHover' | 'backgroundColorHover' | 'borderColorHover'\n  >\n) => `\n  color: ${palette.color};\n  background-color: ${palette.backgroundColor};\n  border-color: ${palette.borderColor};\n  &:hover {\n    color: ${palette.colorHover};\n    background-color: ${palette.backgroundColorHover};\n    border-color: ${palette.borderColorHover};\n  }\n`\n\nconst hintTemplate = (\n  palette: Pick<\n    FormLabelPalette,\n    | 'hintColor'\n    | 'hintBackgroundColor'\n    | 'hintColorHover'\n    | 'hintBackgroundColorHover'\n    | 'hintColorActive'\n    | 'hintBackgroundColorActive'\n    | 'hintColorDisabled'\n    | 'hintBackgroundColorDisabled'\n  >\n) => `\n  color: ${palette.hintColor};\n  background-color: ${palette.hintBackgroundColor};\n  &:hover {\n    color: ${palette.hintColorHover};\n    background-color: ${palette.hintBackgroundColorHover};\n  }\n  &:active {\n    color: ${palette.hintColorActive};\n    background-color: ${palette.hintBackgroundColorActive};\n  }\n  &:disabled {\n    color: ${palette.hintColorDisabled};\n    background-color: ${palette.hintBackgroundColorDisabled};\n  }\n`\n\nconst COLOR_SCHEMA = {\n  default: {\n    disabled: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-disabled-large'],\n          borderColor: props.theme.colors['border-disabled'],\n          colorHover: props.theme.colors['content-disabled'],\n          backgroundColorHover: props.theme.colors['bg-disabled-large'],\n          borderColorHover: props.theme.colors['border-disabled'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['alert-bg-error-100'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-100'],\n          borderColorHover: props.theme.colors['alert-bg-error-500'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['alert-bg-success-100'],\n          borderColor: props.theme.colors['alert-success'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-100'],\n          borderColorHover: props.theme.colors['alert-success'],\n          ...props.palette,\n        })}\n    `,\n    checked: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-brand-primary-100'],\n          borderColor: props.theme.colors['border-brand-primary-active'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-brand-primary-100']).darken(3).toString() as CSSColor,\n          borderColorHover: props.theme.colors['border-brand-primary-active'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-secondary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(3).toString() as CSSColor,\n          borderColorHover: props.theme.colors['border-onmain-default-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n  onColored: {\n    disabled: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-disabled'],\n          backgroundColor: props.theme.colors['bg-onmain-secondary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          colorHover: props.theme.colors['content-disabled'],\n          backgroundColorHover: props.theme.colors['bg-onmain-secondary'],\n          borderColorHover: props.theme.colors['border-onmain-default-large'],\n          ...props.palette,\n        })}\n    `,\n    error: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['alert-bg-error-200'],\n          borderColor: props.theme.colors['alert-bg-error-500'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['alert-bg-error-200'],\n          borderColorHover: props.theme.colors['alert-bg-error-500'],\n          ...props.palette,\n        })}\n    `,\n    success: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['alert-bg-success-200'],\n          borderColor: props.theme.colors['alert-success'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: props.theme.colors['alert-bg-success-200'],\n          borderColorHover: props.theme.colors['alert-success'],\n          ...props.palette,\n        })}\n    `,\n    checked: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-primary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-primary']).darken(3).toString() as CSSColor,\n          borderColorHover: props.theme.colors['border-onmain-default-large'],\n          ...props.palette,\n        })}\n    `,\n    default: css<StyledFormLabelProps>`\n      ${(props) =>\n        template({\n          color: props.theme.colors['content-onmain-primary'],\n          backgroundColor: props.theme.colors['bg-onmain-secondary'],\n          borderColor: props.theme.colors['border-onmain-default-large'],\n          colorHover: props.theme.colors['content-onmain-primary'],\n          backgroundColorHover: tinycolor(props.theme.colors['bg-onmain-secondary']).darken(3).toString() as CSSColor,\n          borderColorHover: props.theme.colors['border-onmain-default-large'],\n          ...props.palette,\n        })}\n    `,\n  },\n}\n\nexport const Root = styled.label.withConfig<StyledFormLabelProps>({\n  shouldForwardProp: shouldForwardFormLabelProp,\n})`\n  ${(props) => `\n    box-sizing: border-box;\n    isolation: isolate;\n    display: ${props.inline ? 'inline-flex' : 'flex'};\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n    border-radius: 8px;\n    padding: 12px;\n    min-width: min-content;\n    border: 1px solid transparent;\n    background-color: transparent;\n    transition-property: background-color;\n    transition-duration: 150ms;\n    transition-timing-function: ease-in;\n  `}\n  ${(props) => {\n    if (props.clear) return ''\n\n    const schema = props.onColored ? COLOR_SCHEMA.onColored : COLOR_SCHEMA.default\n\n    if (props.disabled) return schema.disabled\n    if (props.error) return schema.error\n    if (props.success) return schema.success\n    if (props.checked) return schema.checked\n\n    return schema.default\n  }}\n\n  ${responsiveSize}\n  ${responsiveMargin}\n`\n\nexport const Content = styled.span`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-left: 12px;\n`\n\nexport const HintButton = styled.button.withConfig<StyledFormLabelHintProps>({\n  shouldForwardProp: (propKey) => !['palette'].includes(propKey),\n})`\n  box-sizing: border-box;\n  appearance: none;\n  padding: 2px;\n  margin: 0;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  align-self: start;\n  border-radius: 50%;\n  background-color: transparent;\n  margin-left: 6px;\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\n  ${(props) =>\n    hintTemplate({\n      hintColor: props.theme.colors['content-onmain-tertiary'],\n      hintBackgroundColor: props.theme.colors.transparent,\n      hintColorHover: props.theme.colors['content-onmain-primary'],\n      hintBackgroundColorHover: tinycolor(props.theme.colors['bg-oncolor-hover']).lighten(20).toString() as CSSColor,\n      hintColorActive: props.theme.colors['content-onmain-primary'],\n      hintBackgroundColorActive: props.theme.colors['bg-oncolor-hover'],\n      hintColorDisabled: props.theme.colors['content-disabled'],\n      hintBackgroundColorDisabled: props.theme.colors.transparent,\n      ...props.palette,\n    })}\n\n  ${focus}\n`\n"],"names":["shouldForwardFormLabelProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","borderColor","colorHover","backgroundColorHover","borderColorHover","COLOR_SCHEMA","default","disabled","css","props","_objectSpread","theme","colors","error","success","checked","tinycolor","darken","toString","onColored","Root","styled","label","withConfig","shouldForwardProp","componentId","inline","concat","clear","schema","responsiveSize","responsiveMargin","Content","span","HintButton","button","hintTemplate","hintColor","hintBackgroundColor","transparent","hintColorHover","hintBackgroundColorHover","lighten","hintColorActive","hintBackgroundColorActive","hintColorDisabled","hintBackgroundColorDisabled","focus"],"mappings":"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"}

package/dts/index.d.ts

@@ -3543,6 +3543,14 @@ declare type FormLabelPalette = {
     colorHover: CSSColor;
     backgroundColorHover: CSSColor;
     borderColorHover: CSSColor;
+    hintColor: CSSColor;
+    hintBackgroundColor: CSSColor;
+    hintColorHover: CSSColor;
+    hintBackgroundColorHover: CSSColor;
+    hintColorActive: CSSColor;
+    hintBackgroundColorActive: CSSColor;
+    hintColorDisabled: CSSColor;
+    hintBackgroundColorDisabled: CSSColor;
 };
 interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, React.ComponentPropsWithRef<'label'> {
     /** Custom colors */
@@ -3567,6 +3575,14 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
     checked?: boolean;
     /** Appearance variant */
     onColored?: boolean;
+    /** Additional elements */
+    hint?: {
+        text?: React.ReactNode;
+        textProps?: TextProps;
+        icon?: JSX.Element;
+        iconProps?: IconProps;
+        buttonProps?: React.ComponentPropsWithoutRef<'button'>;
+    };
 }
 
 /**