@intlayer/design-system 3.3.4 → 3.3.5

package/dist/components/Auth/SignInForm/SignInForm.cjs

@@ -57,6 +57,7 @@ const SignInForm = ({
               variant: "link",
               label: signInContent.forgotPasswordLink.ariaLabel,
               color: "text",
+              size: "sm",
               onClick: onClickForgotPassword,
               children: signInContent.forgotPasswordLink.text
             }
@@ -80,6 +81,7 @@ const SignInForm = ({
                 variant: "link",
                 label: signInContent.signUpLink.ariaLabel,
                 color: "text",
+                size: "sm",
                 onClick: onClickSignUp,
                 children: signInContent.signUpLink.text
               }

package/dist/components/Auth/SignInForm/SignInForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SignInForm.cjs","sources":["../../../../src/components/Auth/SignInForm/SignInForm.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Form, useForm } from '../../Form';\nimport { ExternalsLoginButtons } from '../ExternalsLoginButtons';\nimport { getSignInContent } from './index.content';\nimport { getSignInSchema, type SignIn } from './SignInSchema';\n\ntype SignInFormProps = {\n  onSubmitSuccess: (data: SignIn) => Promise<void>;\n  onClickForgotPassword: () => void;\n  onClickSignUp: () => void;\n  onSubmitError?: (error: Error) => void;\n};\n\nexport const SignInForm: FC<SignInFormProps> = ({\n  onSubmitSuccess,\n  onSubmitError,\n  onClickForgotPassword,\n  onClickSignUp,\n}) => {\n  const SignInSchema = getSignInSchema();\n  const { form, isSubmitting } = useForm(SignInSchema);\n  const signInContent = getSignInContent();\n\n  return (\n    <>\n      <Form\n        schema={SignInSchema}\n        onSubmitSuccess={onSubmitSuccess}\n        onSubmitError={onSubmitError}\n        autoComplete\n        className=\"gap-y-0\"\n        {...form}\n      >\n        <div className=\"flex flex-col gap-y-6\">\n          <Form.Input\n            name=\"email\"\n            label={signInContent.emailInput.label}\n            placeholder={signInContent.emailInput.placeholder}\n            isRequired\n            autoComplete=\"email\"\n          />\n\n          <Form.InputPassword\n            name=\"password\"\n            label={signInContent.passwordInput.label}\n            placeholder={signInContent.passwordInput.placeholder}\n            isRequired\n            autoComplete=\"current-password\"\n          />\n        </div>\n\n        <Form.Button\n          className=\"ml-auto mt-2 block\"\n          variant=\"link\"\n          label={signInContent.forgotPasswordLink.ariaLabel}\n          color=\"text\"\n          onClick={onClickForgotPassword}\n        >\n          {signInContent.forgotPasswordLink.text}\n        </Form.Button>\n\n        <Form.Button\n          className=\"mt-12 w-full\"\n          type=\"submit\"\n          color=\"text\"\n          isLoading={isSubmitting}\n          label={signInContent.loginButton.ariaLabel}\n        >\n          {signInContent.loginButton.text}\n        </Form.Button>\n\n        <span className=\"text-neutral dark:text-neutral-dark m-auto mt-3 flex w-full items-center justify-center text-xs\">\n          {signInContent.signUpLink.message}\n          <Form.Button\n            variant=\"link\"\n            label={signInContent.signUpLink.ariaLabel}\n            color=\"text\"\n            onClick={onClickSignUp}\n          >\n            {signInContent.signUpLink.text}\n          </Form.Button>\n        </span>\n      </Form>\n      <ExternalsLoginButtons />\n    </>\n  );\n};\n"],"names":["getSignInSchema","useForm","getSignInContent","jsxs","Fragment","Form","jsx","ExternalsLoginButtons"],"mappings":";;;;;;;;;;AAeO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAeA,wCAAAA;AACrB,QAAM,EAAE,MAAM,aAAa,IAAIC,iCAAQ,YAAY;AACnD,QAAM,gBAAgBC,yCAAAA;AAEtB,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAD,2BAAA,kBAAA;AAAA,MAACE,sCAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAACF,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,YAAAG,2BAAA,kBAAA;AAAA,cAACD,sCAAAA,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,cAAc,WAAW;AAAA,gBAChC,aAAa,cAAc,WAAW;AAAA,gBACtC,YAAU;AAAA,gBACV,cAAa;AAAA,cAAA;AAAA,YACf;AAAA,YAEAC,2BAAA,kBAAA;AAAA,cAACD,sCAAAA,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,cAAc,cAAc;AAAA,gBACnC,aAAa,cAAc,cAAc;AAAA,gBACzC,YAAU;AAAA,gBACV,cAAa;AAAA,cAAA;AAAA,YACf;AAAA,UAAA,GACF;AAAA,UAEAC,2BAAA,kBAAA;AAAA,YAACD,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,OAAO,cAAc,mBAAmB;AAAA,cACxC,OAAM;AAAA,cACN,SAAS;AAAA,cAER,wBAAc,mBAAmB;AAAA,YAAA;AAAA,UACpC;AAAA,UAEAC,2BAAA,kBAAA;AAAA,YAACD,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAW;AAAA,cACX,OAAO,cAAc,YAAY;AAAA,cAEhC,wBAAc,YAAY;AAAA,YAAA;AAAA,UAC7B;AAAA,UAEAF,2BAAAA,kBAAAA,KAAC,QAAK,EAAA,WAAU,mGACb,UAAA;AAAA,YAAA,cAAc,WAAW;AAAA,YAC1BG,2BAAA,kBAAA;AAAA,cAACD,sCAAAA,KAAK;AAAA,cAAL;AAAA,gBACC,SAAQ;AAAA,gBACR,OAAO,cAAc,WAAW;AAAA,gBAChC,OAAM;AAAA,gBACN,SAAS;AAAA,gBAER,wBAAc,WAAW;AAAA,cAAA;AAAA,YAC5B;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,qDACCE,4DAAsB,uBAAA,EAAA;AAAA,EACzB,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"SignInForm.cjs","sources":["../../../../src/components/Auth/SignInForm/SignInForm.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Form, useForm } from '../../Form';\nimport { ExternalsLoginButtons } from '../ExternalsLoginButtons';\nimport { getSignInContent } from './index.content';\nimport { getSignInSchema, type SignIn } from './SignInSchema';\n\ntype SignInFormProps = {\n  onSubmitSuccess: (data: SignIn) => Promise<void>;\n  onClickForgotPassword: () => void;\n  onClickSignUp: () => void;\n  onSubmitError?: (error: Error) => void;\n};\n\nexport const SignInForm: FC<SignInFormProps> = ({\n  onSubmitSuccess,\n  onSubmitError,\n  onClickForgotPassword,\n  onClickSignUp,\n}) => {\n  const SignInSchema = getSignInSchema();\n  const { form, isSubmitting } = useForm(SignInSchema);\n  const signInContent = getSignInContent();\n\n  return (\n    <>\n      <Form\n        schema={SignInSchema}\n        onSubmitSuccess={onSubmitSuccess}\n        onSubmitError={onSubmitError}\n        autoComplete\n        className=\"gap-y-0\"\n        {...form}\n      >\n        <div className=\"flex flex-col gap-y-6\">\n          <Form.Input\n            name=\"email\"\n            label={signInContent.emailInput.label}\n            placeholder={signInContent.emailInput.placeholder}\n            isRequired\n            autoComplete=\"email\"\n          />\n\n          <Form.InputPassword\n            name=\"password\"\n            label={signInContent.passwordInput.label}\n            placeholder={signInContent.passwordInput.placeholder}\n            isRequired\n            autoComplete=\"current-password\"\n          />\n        </div>\n\n        <Form.Button\n          className=\"ml-auto mt-2 block\"\n          variant=\"link\"\n          label={signInContent.forgotPasswordLink.ariaLabel}\n          color=\"text\"\n          size=\"sm\"\n          onClick={onClickForgotPassword}\n        >\n          {signInContent.forgotPasswordLink.text}\n        </Form.Button>\n\n        <Form.Button\n          className=\"mt-12 w-full\"\n          type=\"submit\"\n          color=\"text\"\n          isLoading={isSubmitting}\n          label={signInContent.loginButton.ariaLabel}\n        >\n          {signInContent.loginButton.text}\n        </Form.Button>\n\n        <span className=\"text-neutral dark:text-neutral-dark m-auto mt-3 flex w-full items-center justify-center text-xs\">\n          {signInContent.signUpLink.message}\n          <Form.Button\n            variant=\"link\"\n            label={signInContent.signUpLink.ariaLabel}\n            color=\"text\"\n            size=\"sm\"\n            onClick={onClickSignUp}\n          >\n            {signInContent.signUpLink.text}\n          </Form.Button>\n        </span>\n      </Form>\n      <ExternalsLoginButtons />\n    </>\n  );\n};\n"],"names":["getSignInSchema","useForm","getSignInContent","jsxs","Fragment","Form","jsx","ExternalsLoginButtons"],"mappings":";;;;;;;;;;AAeO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAeA,wCAAAA;AACrB,QAAM,EAAE,MAAM,aAAa,IAAIC,iCAAQ,YAAY;AACnD,QAAM,gBAAgBC,yCAAAA;AAEtB,SAEIC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAAD,2BAAA,kBAAA;AAAA,MAACE,sCAAA;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAACF,2BAAAA,kBAAAA,KAAA,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,YAAAG,2BAAA,kBAAA;AAAA,cAACD,sCAAAA,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,cAAc,WAAW;AAAA,gBAChC,aAAa,cAAc,WAAW;AAAA,gBACtC,YAAU;AAAA,gBACV,cAAa;AAAA,cAAA;AAAA,YACf;AAAA,YAEAC,2BAAA,kBAAA;AAAA,cAACD,sCAAAA,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,cAAc,cAAc;AAAA,gBACnC,aAAa,cAAc,cAAc;AAAA,gBACzC,YAAU;AAAA,gBACV,cAAa;AAAA,cAAA;AAAA,YACf;AAAA,UAAA,GACF;AAAA,UAEAC,2BAAA,kBAAA;AAAA,YAACD,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,OAAO,cAAc,mBAAmB;AAAA,cACxC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,SAAS;AAAA,cAER,wBAAc,mBAAmB;AAAA,YAAA;AAAA,UACpC;AAAA,UAEAC,2BAAA,kBAAA;AAAA,YAACD,sCAAAA,KAAK;AAAA,YAAL;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAW;AAAA,cACX,OAAO,cAAc,YAAY;AAAA,cAEhC,wBAAc,YAAY;AAAA,YAAA;AAAA,UAC7B;AAAA,UAEAF,2BAAAA,kBAAAA,KAAC,QAAK,EAAA,WAAU,mGACb,UAAA;AAAA,YAAA,cAAc,WAAW;AAAA,YAC1BG,2BAAA,kBAAA;AAAA,cAACD,sCAAAA,KAAK;AAAA,cAAL;AAAA,gBACC,SAAQ;AAAA,gBACR,OAAO,cAAc,WAAW;AAAA,gBAChC,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,SAAS;AAAA,gBAER,wBAAc,WAAW;AAAA,cAAA;AAAA,YAC5B;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,qDACCE,4DAAsB,uBAAA,EAAA;AAAA,EACzB,EAAA,CAAA;AAEJ;;"}

package/dist/components/Auth/SignInForm/SignInForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignInForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Auth/SignInForm/SignInForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,EAAmB,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE9D,KAAK,eAAe,GAAG;IACrB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAyE1C,CAAC"}
+{"version":3,"file":"SignInForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Auth/SignInForm/SignInForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,EAAmB,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE9D,KAAK,eAAe,GAAG;IACrB,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjD,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA2E1C,CAAC"}

package/dist/components/Auth/SignInForm/SignInForm.mjs

@@ -55,6 +55,7 @@ const SignInForm = ({
               variant: "link",
               label: signInContent.forgotPasswordLink.ariaLabel,
               color: "text",
+              size: "sm",
               onClick: onClickForgotPassword,
               children: signInContent.forgotPasswordLink.text
             }
@@ -78,6 +79,7 @@ const SignInForm = ({
                 variant: "link",
                 label: signInContent.signUpLink.ariaLabel,
                 color: "text",
+                size: "sm",
                 onClick: onClickSignUp,
                 children: signInContent.signUpLink.text
               }

package/dist/components/Auth/SignInForm/SignInForm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SignInForm.mjs","sources":["../../../../src/components/Auth/SignInForm/SignInForm.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Form, useForm } from '../../Form';\nimport { ExternalsLoginButtons } from '../ExternalsLoginButtons';\nimport { getSignInContent } from './index.content';\nimport { getSignInSchema, type SignIn } from './SignInSchema';\n\ntype SignInFormProps = {\n  onSubmitSuccess: (data: SignIn) => Promise<void>;\n  onClickForgotPassword: () => void;\n  onClickSignUp: () => void;\n  onSubmitError?: (error: Error) => void;\n};\n\nexport const SignInForm: FC<SignInFormProps> = ({\n  onSubmitSuccess,\n  onSubmitError,\n  onClickForgotPassword,\n  onClickSignUp,\n}) => {\n  const SignInSchema = getSignInSchema();\n  const { form, isSubmitting } = useForm(SignInSchema);\n  const signInContent = getSignInContent();\n\n  return (\n    <>\n      <Form\n        schema={SignInSchema}\n        onSubmitSuccess={onSubmitSuccess}\n        onSubmitError={onSubmitError}\n        autoComplete\n        className=\"gap-y-0\"\n        {...form}\n      >\n        <div className=\"flex flex-col gap-y-6\">\n          <Form.Input\n            name=\"email\"\n            label={signInContent.emailInput.label}\n            placeholder={signInContent.emailInput.placeholder}\n            isRequired\n            autoComplete=\"email\"\n          />\n\n          <Form.InputPassword\n            name=\"password\"\n            label={signInContent.passwordInput.label}\n            placeholder={signInContent.passwordInput.placeholder}\n            isRequired\n            autoComplete=\"current-password\"\n          />\n        </div>\n\n        <Form.Button\n          className=\"ml-auto mt-2 block\"\n          variant=\"link\"\n          label={signInContent.forgotPasswordLink.ariaLabel}\n          color=\"text\"\n          onClick={onClickForgotPassword}\n        >\n          {signInContent.forgotPasswordLink.text}\n        </Form.Button>\n\n        <Form.Button\n          className=\"mt-12 w-full\"\n          type=\"submit\"\n          color=\"text\"\n          isLoading={isSubmitting}\n          label={signInContent.loginButton.ariaLabel}\n        >\n          {signInContent.loginButton.text}\n        </Form.Button>\n\n        <span className=\"text-neutral dark:text-neutral-dark m-auto mt-3 flex w-full items-center justify-center text-xs\">\n          {signInContent.signUpLink.message}\n          <Form.Button\n            variant=\"link\"\n            label={signInContent.signUpLink.ariaLabel}\n            color=\"text\"\n            onClick={onClickSignUp}\n          >\n            {signInContent.signUpLink.text}\n          </Form.Button>\n        </span>\n      </Form>\n      <ExternalsLoginButtons />\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;AAeO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe;AACrB,QAAM,EAAE,MAAM,aAAa,IAAI,QAAQ,YAAY;AACnD,QAAM,gBAAgB;AAEtB,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAD,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,YAAAE,kCAAA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,cAAc,WAAW;AAAA,gBAChC,aAAa,cAAc,WAAW;AAAA,gBACtC,YAAU;AAAA,gBACV,cAAa;AAAA,cAAA;AAAA,YACf;AAAA,YAEAA,kCAAA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,cAAc,cAAc;AAAA,gBACnC,aAAa,cAAc,cAAc;AAAA,gBACzC,YAAU;AAAA,gBACV,cAAa;AAAA,cAAA;AAAA,YACf;AAAA,UAAA,GACF;AAAA,UAEAA,kCAAA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,OAAO,cAAc,mBAAmB;AAAA,cACxC,OAAM;AAAA,cACN,SAAS;AAAA,cAER,wBAAc,mBAAmB;AAAA,YAAA;AAAA,UACpC;AAAA,UAEAA,kCAAA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAW;AAAA,cACX,OAAO,cAAc,YAAY;AAAA,cAEhC,wBAAc,YAAY;AAAA,YAAA;AAAA,UAC7B;AAAA,UAEAF,kCAAAA,KAAC,QAAK,EAAA,WAAU,mGACb,UAAA;AAAA,YAAA,cAAc,WAAW;AAAA,YAC1BE,kCAAA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,SAAQ;AAAA,gBACR,OAAO,cAAc,WAAW;AAAA,gBAChC,OAAM;AAAA,gBACN,SAAS;AAAA,gBAER,wBAAc,WAAW;AAAA,cAAA;AAAA,YAC5B;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,0CACC,uBAAsB,EAAA;AAAA,EACzB,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SignInForm.mjs","sources":["../../../../src/components/Auth/SignInForm/SignInForm.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Form, useForm } from '../../Form';\nimport { ExternalsLoginButtons } from '../ExternalsLoginButtons';\nimport { getSignInContent } from './index.content';\nimport { getSignInSchema, type SignIn } from './SignInSchema';\n\ntype SignInFormProps = {\n  onSubmitSuccess: (data: SignIn) => Promise<void>;\n  onClickForgotPassword: () => void;\n  onClickSignUp: () => void;\n  onSubmitError?: (error: Error) => void;\n};\n\nexport const SignInForm: FC<SignInFormProps> = ({\n  onSubmitSuccess,\n  onSubmitError,\n  onClickForgotPassword,\n  onClickSignUp,\n}) => {\n  const SignInSchema = getSignInSchema();\n  const { form, isSubmitting } = useForm(SignInSchema);\n  const signInContent = getSignInContent();\n\n  return (\n    <>\n      <Form\n        schema={SignInSchema}\n        onSubmitSuccess={onSubmitSuccess}\n        onSubmitError={onSubmitError}\n        autoComplete\n        className=\"gap-y-0\"\n        {...form}\n      >\n        <div className=\"flex flex-col gap-y-6\">\n          <Form.Input\n            name=\"email\"\n            label={signInContent.emailInput.label}\n            placeholder={signInContent.emailInput.placeholder}\n            isRequired\n            autoComplete=\"email\"\n          />\n\n          <Form.InputPassword\n            name=\"password\"\n            label={signInContent.passwordInput.label}\n            placeholder={signInContent.passwordInput.placeholder}\n            isRequired\n            autoComplete=\"current-password\"\n          />\n        </div>\n\n        <Form.Button\n          className=\"ml-auto mt-2 block\"\n          variant=\"link\"\n          label={signInContent.forgotPasswordLink.ariaLabel}\n          color=\"text\"\n          size=\"sm\"\n          onClick={onClickForgotPassword}\n        >\n          {signInContent.forgotPasswordLink.text}\n        </Form.Button>\n\n        <Form.Button\n          className=\"mt-12 w-full\"\n          type=\"submit\"\n          color=\"text\"\n          isLoading={isSubmitting}\n          label={signInContent.loginButton.ariaLabel}\n        >\n          {signInContent.loginButton.text}\n        </Form.Button>\n\n        <span className=\"text-neutral dark:text-neutral-dark m-auto mt-3 flex w-full items-center justify-center text-xs\">\n          {signInContent.signUpLink.message}\n          <Form.Button\n            variant=\"link\"\n            label={signInContent.signUpLink.ariaLabel}\n            color=\"text\"\n            size=\"sm\"\n            onClick={onClickSignUp}\n          >\n            {signInContent.signUpLink.text}\n          </Form.Button>\n        </span>\n      </Form>\n      <ExternalsLoginButtons />\n    </>\n  );\n};\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;;;;AAeO,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe;AACrB,QAAM,EAAE,MAAM,aAAa,IAAI,QAAQ,YAAY;AACnD,QAAM,gBAAgB;AAEtB,SAEIA,kCAAA,KAAAC,4BAAA,EAAA,UAAA;AAAA,IAAAD,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA;AAAA,UAACA,kCAAAA,KAAA,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,YAAAE,kCAAA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,cAAc,WAAW;AAAA,gBAChC,aAAa,cAAc,WAAW;AAAA,gBACtC,YAAU;AAAA,gBACV,cAAa;AAAA,cAAA;AAAA,YACf;AAAA,YAEAA,kCAAA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,cAAc,cAAc;AAAA,gBACnC,aAAa,cAAc,cAAc;AAAA,gBACzC,YAAU;AAAA,gBACV,cAAa;AAAA,cAAA;AAAA,YACf;AAAA,UAAA,GACF;AAAA,UAEAA,kCAAA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,WAAU;AAAA,cACV,SAAQ;AAAA,cACR,OAAO,cAAc,mBAAmB;AAAA,cACxC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,SAAS;AAAA,cAER,wBAAc,mBAAmB;AAAA,YAAA;AAAA,UACpC;AAAA,UAEAA,kCAAA;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAW;AAAA,cACX,OAAO,cAAc,YAAY;AAAA,cAEhC,wBAAc,YAAY;AAAA,YAAA;AAAA,UAC7B;AAAA,UAEAF,kCAAAA,KAAC,QAAK,EAAA,WAAU,mGACb,UAAA;AAAA,YAAA,cAAc,WAAW;AAAA,YAC1BE,kCAAA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,SAAQ;AAAA,gBACR,OAAO,cAAc,WAAW;AAAA,gBAChC,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,SAAS;AAAA,gBAER,wBAAc,WAAW;AAAA,cAAA;AAAA,YAC5B;AAAA,UAAA,GACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,0CACC,uBAAsB,EAAA;AAAA,EACzB,EAAA,CAAA;AAEJ;"}

package/dist/components/Button/Button.cjs

@@ -27,10 +27,10 @@ const buttonVariants = classVarianceAuthority.cva(
   {
     variants: {
       size: {
-        sm: "min-h-8 px-3 text-xs",
-        md: "min-h-9 px-6 text-base",
-        lg: "min-h-10 px-8 text-lg",
-        xl: "min-h-11 px-10 text-xl",
+        sm: "min-h-7 px-3 max-md:py-1 text-xs",
+        md: "min-h-8 px-6 max-md:py-2 text-sm",
+        lg: "min-h-10 px-8 max-md:py-3 text-base",
+        xl: "min-h-11 px-10 max-md:py-4 text-lg",
         "icon-sm": "p-0",
         "icon-md": "p-0",
         "icon-lg": "p-0",
@@ -84,9 +84,9 @@ const buttonVariants = classVarianceAuthority.cva(
 );
 const Button = require$$0.forwardRef(
   ({
-    variant = "default",
-    size = "sm",
-    color = "primary",
+    variant,
+    size,
+    color,
     children,
     Icon,
     IconRight,

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('size-4', {\n  variants: {\n    size: {\n      sm: 'w-4',\n      md: 'w-6',\n      lg: 'w-7',\n      xl: 'w-9',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-8 px-3 text-xs',\n        md: 'min-h-9 px-6 text-base',\n        lg: 'min-h-10 px-8 text-lg',\n        xl: 'min-h-11 px-10 text-xl',\n        'icon-sm': 'p-0',\n        'icon-md': 'p-0',\n        'icon-lg': 'p-0',\n        'icon-xl': 'p-0',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'default',\n      size = 'sm',\n      color = 'primary',\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading = false,\n      isActive,\n      isFullWidth = false,\n      textAlign = IconRight ? 'left' : 'center',\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive}\n        aria-selected={isActive}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign,\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              'float-start'\n            )}\n          />\n        )}\n\n        <Loader\n          className={cn(\n            buttonIconVariants({ size, className: iconClassName }),\n            'float-start'\n          )}\n          isLoading={isLoading}\n        />\n\n        {typeof children !== 'undefined' && (\n          <div className=\"flex-1\">{children}</div>\n        )}\n\n        {IconRight && (\n          <IconRight\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              ''\n            )}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["cva","forwardRef","jsxs","jsx","cn","Loader"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('size-4', {\n  variants: {\n    size: {\n      sm: 'w-4',\n      md: 'w-6',\n      lg: 'w-7',\n      xl: 'w-9',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-base',\n        xl: 'min-h-11 px-10 max-md:py-4 text-lg',\n        'icon-sm': 'p-0',\n        'icon-md': 'p-0',\n        'icon-lg': 'p-0',\n        'icon-xl': 'p-0',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      color,\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading = false,\n      isActive,\n      isFullWidth = false,\n      textAlign = IconRight ? 'left' : 'center',\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive}\n        aria-selected={isActive}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign,\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              'float-start'\n            )}\n          />\n        )}\n\n        <Loader\n          className={cn(\n            buttonIconVariants({ size, className: iconClassName }),\n            'float-start'\n          )}\n          isLoading={isLoading}\n        />\n\n        {typeof children !== 'undefined' && (\n          <div className=\"flex-1\">{children}</div>\n        )}\n\n        {IconRight && (\n          <IconRight\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              ''\n            )}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["cva","forwardRef","jsxs","jsx","cn","Loader"],"mappings":";;;;;;;AAWA,MAAM,qBAAqBA,2BAAI,UAAU;AAAA,EACvC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAED,MAAM,iBAAiBA,uBAAA;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MACA,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SACE;AAAA,QACF,MAAM;AAAA,QACN,kBACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,gBACE;AAAA,QACF,OACE;AAAA,QACF,SACE;AAAA,QACF,QAAQ;AAAA,MACV;AAAA,MAEA,WAAW;AAAA,QACT,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,aAAa;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAmBO,MAAM,SAASC,WAAA;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,IACd,YAAY,YAAY,SAAS;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,KAEL,QACG;AACG,UAAA,SAAS,YAAY,UAAU,YAAY;AAG/C,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU,aAAa;AAAA,QACvB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,cAAY;AAAA,QACZ,aAAW;AAAA,QACX,MAAM,SAAS,SAAS;AAAA,QACxB;AAAA,QACA,WAAW,eAAe;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,QAAQ,CAAC,aACRC,2BAAA,kBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,SAAA;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,UAGFD,2BAAA,kBAAA;AAAA,YAACE,wBAAA;AAAA,YAAA;AAAA,cACC,WAAWD,SAAA;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cACF;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,UAEC,OAAO,aAAa,gEAClB,OAAI,EAAA,WAAU,UAAU,UAAS;AAAA,UAGnC,aACCD,2BAAA,kBAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,SAAA;AAAA,gBACT,mBAAmB,EAAE,MAAM,WAAW,eAAe;AAAA,gBACrD;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,OAAO,cAAc;;"}

package/dist/components/Button/Button.mjs

@@ -25,10 +25,10 @@ const buttonVariants = cva(
   {
     variants: {
       size: {
-        sm: "min-h-8 px-3 text-xs",
-        md: "min-h-9 px-6 text-base",
-        lg: "min-h-10 px-8 text-lg",
-        xl: "min-h-11 px-10 text-xl",
+        sm: "min-h-7 px-3 max-md:py-1 text-xs",
+        md: "min-h-8 px-6 max-md:py-2 text-sm",
+        lg: "min-h-10 px-8 max-md:py-3 text-base",
+        xl: "min-h-11 px-10 max-md:py-4 text-lg",
         "icon-sm": "p-0",
         "icon-md": "p-0",
         "icon-lg": "p-0",
@@ -82,9 +82,9 @@ const buttonVariants = cva(
 );
 const Button = forwardRef(
   ({
-    variant = "default",
-    size = "sm",
-    color = "primary",
+    variant,
+    size,
+    color,
     children,
     Icon,
     IconRight,

package/dist/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('size-4', {\n  variants: {\n    size: {\n      sm: 'w-4',\n      md: 'w-6',\n      lg: 'w-7',\n      xl: 'w-9',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-8 px-3 text-xs',\n        md: 'min-h-9 px-6 text-base',\n        lg: 'min-h-10 px-8 text-lg',\n        xl: 'min-h-11 px-10 text-xl',\n        'icon-sm': 'p-0',\n        'icon-md': 'p-0',\n        'icon-lg': 'p-0',\n        'icon-xl': 'p-0',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'default',\n      size = 'sm',\n      color = 'primary',\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading = false,\n      isActive,\n      isFullWidth = false,\n      textAlign = IconRight ? 'left' : 'center',\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive}\n        aria-selected={isActive}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign,\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              'float-start'\n            )}\n          />\n        )}\n\n        <Loader\n          className={cn(\n            buttonIconVariants({ size, className: iconClassName }),\n            'float-start'\n          )}\n          isLoading={isLoading}\n        />\n\n        {typeof children !== 'undefined' && (\n          <div className=\"flex-1\">{children}</div>\n        )}\n\n        {IconRight && (\n          <IconRight\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              ''\n            )}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Loader } from '../Loader';\n\nconst buttonIconVariants = cva('size-4', {\n  variants: {\n    size: {\n      sm: 'w-4',\n      md: 'w-6',\n      lg: 'w-7',\n      xl: 'w-9',\n      'icon-sm': 'size-6 p-1',\n      'icon-md': 'size-7 p-1',\n      'icon-lg': 'size-9 p-1',\n      'icon-xl': 'size-10 p-1',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst buttonVariants = cva(\n  'flex items-center gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-7 px-3 max-md:py-1 text-xs',\n        md: 'min-h-8 px-6 max-md:py-2 text-sm',\n        lg: 'min-h-10 px-8 max-md:py-3 text-base',\n        xl: 'min-h-11 px-10 max-md:py-4 text-lg',\n        'icon-sm': 'p-0',\n        'icon-md': 'p-0',\n        'icon-lg': 'p-0',\n        'icon-xl': 'p-0',\n      },\n      variant: {\n        default: 'rounded-lg text-text-opposite dark:text-text-opposite-dark',\n        none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0 dark:bg-opacity-0 dark:text-inherit dark:hover:bg-opacity-0',\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        link: 'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n        input: [\n          'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n          'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n          'disabled:opacity-50',\n        ],\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        'text-inverse':\n          'border-text-dark dark:border-text bg-text-dark dark:bg-text text-text-dark dark:text-text hover:opacity-80',\n        error:\n          'border-error bg-error text-error hover:bg-error-500 dark:border-error-dark dark:bg-error-dark dark:text-error-dark hover:dark:bg-error-300',\n        success:\n          'border-success bg-success text-success hover:bg-success-500 dark:border-success-dark dark:bg-success-dark dark:text-success-dark hover:dark:bg-success-300',\n        custom: '',\n      },\n\n      textAlign: {\n        left: 'text-left',\n        center: 'text-center',\n        right: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      color: 'primary',\n      textAlign: 'center',\n      isFullWidth: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant,\n      size,\n      color,\n      children,\n      Icon,\n      IconRight,\n      iconClassName,\n      isLoading = false,\n      isActive,\n      isFullWidth = false,\n      textAlign = IconRight ? 'left' : 'center',\n      disabled,\n      label,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const isLink = variant === 'link' || variant === 'invisible-link';\n\n    return (\n      <button\n        ref={ref}\n        disabled={isLoading || disabled}\n        aria-current={isActive}\n        aria-selected={isActive}\n        aria-label={label}\n        aria-busy={isLoading}\n        role={isLink ? 'link' : undefined}\n        type={type}\n        className={buttonVariants({\n          variant,\n          size,\n          color,\n          isFullWidth,\n          textAlign,\n          className,\n        })}\n        {...props}\n      >\n        {Icon && !isLoading && (\n          <Icon\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              'float-start'\n            )}\n          />\n        )}\n\n        <Loader\n          className={cn(\n            buttonIconVariants({ size, className: iconClassName }),\n            'float-start'\n          )}\n          isLoading={isLoading}\n        />\n\n        {typeof children !== 'undefined' && (\n          <div className=\"flex-1\">{children}</div>\n        )}\n\n        {IconRight && (\n          <IconRight\n            className={cn(\n              buttonIconVariants({ size, className: iconClassName }),\n              ''\n            )}\n          />\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["jsxs","jsx"],"mappings":"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"}

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs

@@ -59,7 +59,11 @@ const NavigationViewNode = ({
     [focusedContent?.keyPath]
   );
   if (isEditableSection) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "-" });
+  if (!section) return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "-" });
   if (typeof section === "object") {
+    if (nodeType === core.NodeType.ReactNode) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: "React Node" });
+    }
     if (nodeType === core.NodeType.Translation) {
       return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: locales.map((translationKey) => {
         const childKeyPath = [

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    (s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    })\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["getConfiguration","getDictionaryValueByKeyPath","useEditedContentStore","useEditionPanelStore","useDictionary","navigationViewContent","getSectionType","getIsEditableSection","useCallback","keyPath","isSameKeyPath","jsx","Fragment","NodeType","Button","ChevronRight","Accordion","jsxs","Plus","camelCaseToSentence"],"mappings":"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"}
+{"version":3,"file":"NavigationViewNode.cjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    (s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    })\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (!section) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["getConfiguration","getDictionaryValueByKeyPath","useEditedContentStore","useEditionPanelStore","useDictionary","navigationViewContent","getSectionType","getIsEditableSection","useCallback","keyPath","isSameKeyPath","jsx","Fragment","NodeType","Button","ChevronRight","Accordion","jsxs","Plus","camelCaseToSentence"],"mappings":"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"}

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAe,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAiB7C,eAAO,MAAM,SAAS,EAAE,MAAM,EAAmC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CAoTnD,CAAC"}
+{"version":3,"file":"NavigationViewNode.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAe,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAiB7C,eAAO,MAAM,SAAS,EAAE,MAAM,EAAmC,CAAC;AAElE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,gBAAgB,CA0TnD,CAAC"}

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs

@@ -57,7 +57,11 @@ const NavigationViewNode = ({
     [focusedContent?.keyPath]
   );
   if (isEditableSection) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "-" });
+  if (!section) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "-" });
   if (typeof section === "object") {
+    if (nodeType === NodeType.ReactNode) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "React Node" });
+    }
     if (nodeType === NodeType.Translation) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col justify-between gap-2", children: locales.map((translationKey) => {
         const childKeyPath = [

package/dist/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationViewNode.mjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    (s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    })\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["keyPath","jsx","Fragment","jsxs"],"mappings":"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"}
+{"version":3,"file":"NavigationViewNode.mjs","sources":["../../../../src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx"],"sourcesContent":["import { getConfiguration } from '@intlayer/config/client';\nimport {\n  type EnumerationContent,\n  NodeType,\n  type KeyPath,\n  type DictionaryValue,\n  isSameKeyPath,\n} from '@intlayer/core';\nimport { ChevronRight, Plus } from 'lucide-react';\nimport { useCallback, type FC } from 'react';\n// @ts-ignore react-intlayer not build yet\nimport { useDictionary } from 'react-intlayer';\nimport { camelCaseToSentence } from '../../../utils/camelCase';\nimport {\n  getDictionaryValueByKeyPath,\n  getSectionType,\n} from '../../../utils/dictionary';\nimport { Accordion } from '../../Accordion';\nimport { Button } from '../../Button';\nimport {\n  useEditedContentStore,\n  useEditionPanelStore,\n} from '../../DictionaryEditor';\nimport { getIsEditableSection } from '../getIsEditableSection';\nimport { navigationViewContent } from './navigationViewNode.content';\n\nexport const traceKeys: string[] = ['filePath', 'id', 'nodeType'];\n\nexport type NodeWrapperProps = {\n  dictionaryKey: string;\n  keyPath: KeyPath[];\n  section: DictionaryValue;\n};\n\nexport const NavigationViewNode: FC<NodeWrapperProps> = ({\n  section: sectionProp,\n  keyPath,\n  dictionaryKey,\n}) => {\n  const { locales } = getConfiguration().internationalization;\n  const section = getDictionaryValueByKeyPath(sectionProp, keyPath);\n  const addEditedContent = useEditedContentStore((s) => s.addEditedContent);\n  const { setFocusedContentKeyPath, focusedContent } = useEditionPanelStore(\n    (s) => ({\n      setFocusedContentKeyPath: s.setFocusedContentKeyPath,\n      focusedContent: s.focusedContent,\n    })\n  );\n  const {\n    addNewElement,\n    addNewField,\n    goToElement,\n    goToField,\n    goToEnumeration,\n    goToTranslation,\n  } = useDictionary(navigationViewContent);\n  const nodeType = getSectionType(section);\n  const isEditableSection = getIsEditableSection(section);\n  const getIsSelected = useCallback(\n    (keyPath: KeyPath[]) =>\n      (focusedContent?.keyPath?.length ?? 0) > 0 &&\n      isSameKeyPath(keyPath, focusedContent?.keyPath ?? []),\n    [focusedContent?.keyPath]\n  );\n\n  if (isEditableSection) return <>-</>;\n\n  if (!section) return <>-</>;\n\n  if (typeof section === 'object') {\n    if (nodeType === NodeType.ReactNode) {\n      return <>React Node</>;\n    }\n\n    if (nodeType === NodeType.Translation) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {locales.map((translationKey) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Translation, key: translationKey },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToTranslation.label.value} ${translationKey}`}\n                  key={translationKey}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {translationKey}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={translationKey}\n                identifier={translationKey}\n                label={`${goToTranslation.label.value} ${translationKey}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={translationKey}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Enumeration) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {Object.keys(\n            (section as EnumerationContent<DictionaryValue>)[\n              NodeType.Enumeration\n            ]\n          ).map((key) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Enumeration, key },\n            ];\n            const subSection = getDictionaryValueByKeyPath(\n              sectionProp,\n              childKeyPath\n            );\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToEnumeration.label.value} ${key}`}\n                  key={key}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {key}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={key}\n                identifier={key}\n                label={`${goToEnumeration.label.value} ${key}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={key}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (nodeType === NodeType.Array) {\n      return (\n        <div className=\"flex flex-col justify-between gap-2\">\n          {(section as DictionaryValue[]).map((subSection, index) => {\n            const childKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Array, key: index },\n            ];\n\n            const isEditableSubSection = getIsEditableSection(subSection);\n\n            if (isEditableSubSection) {\n              return (\n                <Button\n                  label={`${goToElement.label.value} ${index}`}\n                  key={`${index}`}\n                  isActive={getIsSelected(childKeyPath)}\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  className=\"w-full\"\n                  onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                  IconRight={ChevronRight}\n                >\n                  {index}\n                </Button>\n              );\n            }\n\n            return (\n              <Accordion\n                key={`${index}`}\n                identifier={`${index}`}\n                label={`${goToElement.label.value} ${index}`}\n                isActive={getIsSelected(childKeyPath)}\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                header={index}\n              >\n                <div className=\"flex w-full max-w-full\">\n                  <div className=\"flex-1 pl-10\">\n                    <NavigationViewNode\n                      keyPath={childKeyPath}\n                      section={sectionProp}\n                      dictionaryKey={dictionaryKey}\n                    />\n                  </div>\n                </div>\n              </Accordion>\n            );\n          })}\n\n          <Button\n            label={addNewElement.label.value}\n            variant=\"hoverable\"\n            color=\"neutral\"\n            textAlign=\"left\"\n            onClick={() => {\n              const newKeyPath: KeyPath[] = [\n                ...keyPath,\n                {\n                  type: NodeType.Array,\n                  key: (section as DictionaryValue[]).length,\n                },\n              ];\n              addEditedContent(dictionaryKey, {}, newKeyPath, false);\n              setFocusedContentKeyPath(newKeyPath);\n            }}\n            Icon={Plus}\n          >\n            {addNewElement.text}\n          </Button>\n        </div>\n      );\n    }\n\n    const sectionArray = Object.keys(section);\n    return (\n      <div className=\"flex w-full max-w-full flex-col justify-between gap-2\">\n        {sectionArray.map((key) => {\n          const childKeyPath: KeyPath[] = [\n            ...keyPath,\n            { type: NodeType.Object, key },\n          ];\n          const subSection = getDictionaryValueByKeyPath(\n            sectionProp,\n            childKeyPath\n          );\n          const isEditableSubSection = getIsEditableSection(subSection);\n\n          if (isEditableSubSection) {\n            return (\n              <Button\n                label={`${goToField.label.value} ${key}`}\n                key={key}\n                isActive={getIsSelected(childKeyPath)}\n                variant=\"hoverable\"\n                color=\"text\"\n                className=\"w-full\"\n                onClick={() => setFocusedContentKeyPath(childKeyPath)}\n                IconRight={ChevronRight}\n              >\n                {camelCaseToSentence(key)}\n              </Button>\n            );\n          }\n\n          return (\n            <Accordion\n              key={key}\n              identifier={key}\n              label={`${goToField.label.value} ${key}`}\n              isActive={getIsSelected(childKeyPath)}\n              onClick={() => setFocusedContentKeyPath(childKeyPath)}\n              header={camelCaseToSentence(key)}\n            >\n              <div className=\"flex w-full max-w-full\">\n                <div className=\"flex-1 pl-10\">\n                  <NavigationViewNode\n                    keyPath={childKeyPath}\n                    section={sectionProp}\n                    dictionaryKey={dictionaryKey}\n                  />\n                </div>\n              </div>\n            </Accordion>\n          );\n        })}\n\n        <Button\n          label={addNewField.label.value}\n          variant=\"hoverable\"\n          color=\"neutral\"\n          textAlign=\"left\"\n          onClick={() => {\n            const newKeyPath: KeyPath[] = [\n              ...keyPath,\n              { type: NodeType.Object, key: 'newField' },\n            ];\n            addEditedContent(dictionaryKey, {}, newKeyPath, false);\n            setFocusedContentKeyPath(newKeyPath);\n          }}\n          Icon={Plus}\n        >\n          {addNewField.text}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      Error loading section --\n      {nodeType}\n      --\n      {JSON.stringify(section)}\n      --\n      {JSON.stringify(keyPath)}\n    </>\n  );\n};\n"],"names":["keyPath","jsx","Fragment","jsxs"],"mappings":"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"}

package/dist/components/Input/Input.cjs

@@ -17,8 +17,8 @@ const inputVariants = classVarianceAuthority.cva("", {
       ]
     },
     size: {
-      md: "px-2 py-1",
-      lg: "px-4 py-2"
+      md: "px-2 py-1 max-md:py-3",
+      lg: "px-4 py-2 max-md:py-4"
     },
     validationStyleEnabled: {
       disabled: "",

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1',\n      lg: 'px-4 py-2',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    { validationStyleEnabled = false, variant, size, className, ...props },\n    ref\n  ) => (\n    <input\n      ref={ref}\n      className={inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })}\n      {...props}\n    />\n  )\n);\n\nInput.displayName = 'Input';\n"],"names":["cva","forwardRef","jsx"],"mappings":";;;;;AAOa,MAAA,gBAAgBA,2BAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAC1B;AACF,CAAC;AASM,MAAM,QAAQC,WAAA;AAAA,EACnB,CACE,EAAE,yBAAyB,OAAO,SAAS,MAAM,WAAW,GAAG,SAC/D,QAEAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,cAAc;AAAA,QACvB;AAAA,QACA;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;;;"}
+{"version":3,"file":"Input.cjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    { validationStyleEnabled = false, variant, size, className, ...props },\n    ref\n  ) => (\n    <input\n      ref={ref}\n      className={inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })}\n      {...props}\n    />\n  )\n);\n\nInput.displayName = 'Input';\n"],"names":["cva","forwardRef","jsx"],"mappings":";;;;;AAOa,MAAA,gBAAgBA,2BAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAC1B;AACF,CAAC;AASM,MAAM,QAAQC,WAAA;AAAA,EACnB,CACE,EAAE,yBAAyB,OAAO,SAAS,MAAM,WAAW,GAAG,SAC/D,QAEAC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,cAAc;AAAA,QACvB;AAAA,QACA;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;;;"}

package/dist/components/Input/Input.mjs

@@ -15,8 +15,8 @@ const inputVariants = cva("", {
       ]
     },
     size: {
-      md: "px-2 py-1",
-      lg: "px-4 py-2"
+      md: "px-2 py-1 max-md:py-3",
+      lg: "px-4 py-2 max-md:py-4"
     },
     validationStyleEnabled: {
       disabled: "",

package/dist/components/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1',\n      lg: 'px-4 py-2',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    { validationStyleEnabled = false, variant, size, className, ...props },\n    ref\n  ) => (\n    <input\n      ref={ref}\n      className={inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })}\n      {...props}\n    />\n  )\n);\n\nInput.displayName = 'Input';\n"],"names":["jsx"],"mappings":";;;AAOa,MAAA,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAC1B;AACF,CAAC;AASM,MAAM,QAAQ;AAAA,EACnB,CACE,EAAE,yBAAyB,OAAO,SAAS,MAAM,WAAW,GAAG,SAC/D,QAEAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,cAAc;AAAA,QACvB;AAAA,QACA;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;"}
+{"version":3,"file":"Input.mjs","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type InputHTMLAttributes,\n} from 'react';\n\nexport const inputVariants = cva('', {\n  variants: {\n    variant: {\n      default: [\n        'w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all dark:bg-input-background-dark dark:text-input-text-dark',\n        'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none] dark:border-input-border-dark dark:hover:border-input-border-hover-dark dark:focus:border-input-border-focus',\n        'aria-[invalid=true]:border-error dark:aria-[invalid=true]:border-error-dark',\n        'disabled:opacity-50',\n      ],\n      invisible: [\n        'w-full border-none bg-inherit text-inherit outline-none ring-0',\n      ],\n    },\n    size: {\n      md: 'px-2 py-1 max-md:py-3',\n      lg: 'px-4 py-2 max-md:py-4',\n    },\n    validationStyleEnabled: {\n      disabled: '',\n      enabled:\n        'valid:border-success invalid:border-error dark:valid:border-success-dark dark:invalid:border-error-dark',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n    size: 'md',\n    validationStyleEnabled: 'disabled',\n  },\n});\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled'>;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    { validationStyleEnabled = false, variant, size, className, ...props },\n    ref\n  ) => (\n    <input\n      ref={ref}\n      className={inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })}\n      {...props}\n    />\n  )\n);\n\nInput.displayName = 'Input';\n"],"names":["jsx"],"mappings":";;;AAOa,MAAA,gBAAgB,IAAI,IAAI;AAAA,EACnC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SACE;AAAA,IACJ;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,wBAAwB;AAAA,EAC1B;AACF,CAAC;AASM,MAAM,QAAQ;AAAA,EACnB,CACE,EAAE,yBAAyB,OAAO,SAAS,MAAM,WAAW,GAAG,SAC/D,QAEAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,cAAc;AAAA,QACvB;AAAA,QACA;AAAA,QACA,wBAAwB,yBAAyB,YAAY;AAAA,QAC7D;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ;AAEA,MAAM,cAAc;"}

package/dist/components/Link/Link.cjs

@@ -12,7 +12,7 @@ const linkVariants = classVarianceAuthority.cva(
         outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
         default: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent",
         "invisible-link": "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent",
-        button: "rounded-lg text-text-opposite dark:text-text-opposite-dark disabled:opacity-50 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9",
+        button: "rounded-lg text-text-opposite dark:text-text-opposite-dark max-md:py-2 px-2 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9",
         hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10"
       },
       color: {

package/dist/components/Link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type AnchorHTMLAttributes,\n} from 'react';\n\nconst linkVariants = cva(\n  'gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        default:\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n\n        button:\n          'rounded-lg text-text-opposite dark:text-text-opposite-dark disabled:opacity-50 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        custom: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isActive?: boolean;\n  };\n\nconst isExternal = (href = ''): boolean => /^https?:\\/\\//.test(href);\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      children,\n      label,\n      className,\n      isActive,\n      isExternalLink: isExternalLinkProp,\n      ...props\n    },\n    ref\n  ) => {\n    const isChildrenString = typeof children === 'string';\n    const isExternalLink =\n      isExternalLinkProp === true ||\n      (typeof isExternalLinkProp === 'undefined' &&\n        isChildrenString &&\n        isExternal(props.href));\n\n    return (\n      <a\n        ref={ref}\n        aria-label={label}\n        aria-current={isActive}\n        aria-selected={isActive}\n        className={linkVariants({\n          variant,\n          color,\n          className,\n        })}\n        {...props}\n      >\n        {children}\n        {isExternalLink && <ExternalLink className=\"size-4\" />}\n      </a>\n    );\n  }\n);\n\nLink.displayName = 'Link';\n"],"names":["cva","forwardRef","jsxs","jsx","ExternalLink"],"mappings":";;;;;;AAQA,MAAM,eAAeA,uBAAA;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,kBACE;AAAA,QAEF,QACE;AAAA,QACF,WACE;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAYA,MAAM,aAAa,CAAC,OAAO,OAAgB,eAAe,KAAK,IAAI;AAE5D,MAAM,OAAOC,WAAA;AAAA,EAClB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,KAEL,QACG;AACG,UAAA,mBAAmB,OAAO,aAAa;AACvC,UAAA,iBACJ,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,oBACA,WAAW,MAAM,IAAI;AAGvB,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,WAAW,aAAa;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,kBAAkBC,2BAAAA,kBAAAA,IAACC,YAAAA,cAAa,EAAA,WAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1D;AACF;AAEA,KAAK,cAAc;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  forwardRef,\n  type DetailedHTMLProps,\n  type AnchorHTMLAttributes,\n} from 'react';\n\nconst linkVariants = cva(\n  'gap-3 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        outline:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0',\n        default:\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent',\n        'invisible-link':\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent',\n\n        button:\n          'rounded-lg text-text-opposite dark:text-text-opposite-dark max-md:py-2 px-2 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9',\n        hoverable:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10',\n      },\n      color: {\n        primary:\n          'border-primary bg-primary text-primary hover:bg-primary-500 dark:border-primary-dark dark:bg-primary-dark dark:text-primary-dark hover:dark:bg-primary-300',\n        secondary:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300 dark:border-secondary-dark dark:bg-secondary-dark dark:text-secondary-dark hover:dark:bg-secondary-100',\n        destructive:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500 dark:border-destructive-dark dark:bg-destructive-dark hover:dark:bg-destructive-200',\n        neutral:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600 dark:border-neutral-dark dark:bg-neutral-dark dark:text-neutral-dark hover:dark:bg-neutral-400',\n        light: 'border-white bg-white text-white hover:bg-neutral-500',\n        dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900 dark:hover:bg-neutral-700',\n        text: 'border-text bg-text text-text hover:opacity-80 dark:border-text-dark dark:bg-text-dark dark:text-text-dark',\n        custom: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'primary',\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isActive?: boolean;\n  };\n\nconst isExternal = (href = ''): boolean => /^https?:\\/\\//.test(href);\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      children,\n      label,\n      className,\n      isActive,\n      isExternalLink: isExternalLinkProp,\n      ...props\n    },\n    ref\n  ) => {\n    const isChildrenString = typeof children === 'string';\n    const isExternalLink =\n      isExternalLinkProp === true ||\n      (typeof isExternalLinkProp === 'undefined' &&\n        isChildrenString &&\n        isExternal(props.href));\n\n    return (\n      <a\n        ref={ref}\n        aria-label={label}\n        aria-current={isActive}\n        aria-selected={isActive}\n        className={linkVariants({\n          variant,\n          color,\n          className,\n        })}\n        {...props}\n      >\n        {children}\n        {isExternalLink && <ExternalLink className=\"size-4\" />}\n      </a>\n    );\n  }\n);\n\nLink.displayName = 'Link';\n"],"names":["cva","forwardRef","jsxs","jsx","ExternalLink"],"mappings":";;;;;;AAQA,MAAM,eAAeA,uBAAA;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,SACE;AAAA,QACF,kBACE;AAAA,QAEF,QACE;AAAA,QACF,WACE;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACL,SACE;AAAA,QACF,WACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AACF;AAYA,MAAM,aAAa,CAAC,OAAO,OAAgB,eAAe,KAAK,IAAI;AAE5D,MAAM,OAAOC,WAAA;AAAA,EAClB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,GAAG;AAAA,KAEL,QACG;AACG,UAAA,mBAAmB,OAAO,aAAa;AACvC,UAAA,iBACJ,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,oBACA,WAAW,MAAM,IAAI;AAGvB,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,WAAW,aAAa;AAAA,UACtB;AAAA,UACA;AAAA,UACA;AAAA,QAAA,CACD;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,kBAAkBC,2BAAAA,kBAAAA,IAACC,YAAAA,cAAa,EAAA,WAAU,SAAS,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1D;AACF;AAEA,KAAK,cAAc;;"}

package/dist/components/Link/Link.mjs

@@ -10,7 +10,7 @@ const linkVariants = cva(
         outline: "rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30 dark:bg-opacity-0",
         default: "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline dark:bg-transparent hover:dark:bg-transparent",
         "invisible-link": "h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent dark:bg-transparent hover:dark:bg-transparent",
-        button: "rounded-lg text-text-opposite dark:text-text-opposite-dark disabled:opacity-50 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9",
+        button: "rounded-lg text-text-opposite dark:text-text-opposite-dark max-md:py-2 px-2 flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 leading-9",
         hoverable: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10 aria-[current=true]:bg-opacity-5 dark:border-none dark:bg-opacity-0 dark:hover:bg-opacity-10"
       },
       color: {