@ruya.sa/ui 3.71.3

package/dist/elements/EditUpload/index.scss

@@ -0,0 +1,228 @@
+@import '../../scss/styles.scss';
+
+$header-height: base(5);
+
+@layer payload-default {
+  .edit-upload {
+    --edit-upload-cell-spacing: calc(var(--base) * 1.5);
+    --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
+    height: 100%;
+    margin-right: calc(var(--gutter-h) * -1);
+    margin-left: calc(var(--gutter-h) * -1);
+
+    &__header {
+      height: $header-height;
+      border-bottom: 1px solid var(--theme-elevation-150);
+      padding: 0 var(--gutter-h);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & h2 {
+        margin: 0;
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    [dir='rtl'] &__actions {
+      margin-right: auto;
+      margin-left: unset;
+    }
+
+    &__actions {
+      min-width: 350px;
+      margin-left: auto;
+      padding: base(0.5) 0 base(0.5) base(1.5);
+      justify-content: flex-end;
+      display: flex;
+      gap: base(1);
+      text-wrap: nowrap;
+    }
+
+    &__toolWrap {
+      display: flex;
+      justify-content: flex-end;
+      height: (calc(100% - #{$header-height}));
+    }
+
+    .ReactCrop__selection-addon,
+    &__crop-window {
+      height: 100%;
+      width: 100%;
+    }
+
+    &__focal-wrapper {
+      position: relative;
+      display: inline-flex;
+      max-height: 100%;
+    }
+
+    &__draggable-container {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      pointer-events: none;
+
+      &--dragging {
+        pointer-events: all;
+
+        .edit-upload__focalPoint {
+          cursor: grabbing;
+        }
+      }
+    }
+
+    &__draggable {
+      @include btn-reset;
+      position: absolute;
+    }
+
+    &__focalPoint {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: grab;
+      width: 50px;
+      height: 50px;
+      transform: translate3d(-50%, -50%, 0);
+      pointer-events: all;
+
+      svg {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 100%;
+        width: base(2);
+        height: base(2);
+        color: white;
+      }
+    }
+
+    &__crop,
+    &__focalOnly {
+      padding: base(1.5) base(1.5) base(1.5) 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__crop {
+      padding: var(--edit-upload-cell-spacing);
+      padding-left: var(--gutter-h);
+      display: flex;
+      align-items: flex-start;
+      height: 100%;
+    }
+
+    &__imageWrap {
+      position: relative;
+    }
+
+    &__point {
+      cursor: move;
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 100%;
+
+      & svg {
+        width: base(2);
+        height: base(2);
+      }
+    }
+
+    &__sidebar {
+      border-left: 1px solid var(--theme-elevation-150);
+      padding-top: var(--edit-upload-cell-spacing);
+      min-width: var(--edit-upload-sidebar-width);
+
+      & > div:first-child {
+        margin-bottom: base(1);
+      }
+    }
+
+    &__groupWrap {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.5);
+      padding-right: var(--gutter-h);
+      padding-left: var(--edit-upload-cell-spacing);
+      width: 100%;
+
+      + .edit-upload__groupWrap {
+        padding-top: var(--edit-upload-cell-spacing);
+        margin-top: var(--edit-upload-cell-spacing);
+        border-top: 1px solid var(--theme-elevation-150);
+      }
+    }
+
+    &__inputsWrap,
+    &__titleWrap {
+      display: flex;
+      gap: base(1);
+    }
+
+    &__titleWrap {
+      justify-content: space-between;
+      align-items: center;
+
+      & h3 {
+        margin: 0;
+      }
+    }
+
+    &__reset {
+      height: fit-content;
+      border-radius: var(--style-radius-s);
+      background-color: var(--theme-elevation-150);
+      padding: 0 base(0.4);
+    }
+
+    &__input {
+      flex: 1;
+      & input {
+        @include formInput;
+      }
+    }
+
+    @include mid-break {
+      --edit-upload-cell-spacing: var(--gutter-h);
+      &__sidebar {
+        padding-left: 0;
+        border-left: 0;
+        width: 100%;
+      }
+      &__toolWrap {
+        flex-direction: column-reverse;
+      }
+    }
+
+    @include small-break {
+      flex-direction: column;
+
+      &__focalPoint {
+        border-right: none;
+        padding: base(1) 0;
+      }
+
+      &__inputsWrap {
+        flex-direction: column;
+        gap: base(1);
+      }
+
+      &__sidebar {
+        min-width: 0;
+      }
+    }
+  }
+}

package/dist/elements/EmailAndUsername/index.d.ts

@@ -0,0 +1,17 @@
+import type { TFunction } from '@ruya.sa/translations';
+import type { LoginWithUsernameOptions, SanitizedFieldPermissions } from '@ruya.sa/payload';
+import React from 'react';
+import './index.scss';
+type RenderEmailAndUsernameFieldsProps = {
+    className?: string;
+    loginWithUsername?: false | LoginWithUsernameOptions;
+    operation?: 'create' | 'update';
+    permissions?: {
+        [fieldName: string]: SanitizedFieldPermissions;
+    } | true;
+    readOnly: boolean;
+    t: TFunction;
+};
+export declare function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/EmailAndUsername/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EmailAndUsername/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,KAAK,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAA;AAG3F,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAIrB,KAAK,iCAAiC,GAAG;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,KAAK,GAAG,wBAAwB,CAAA;IACpD,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC/B,WAAW,CAAC,EACR;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,IAAI,CAAA;IACR,QAAQ,EAAE,OAAO,CAAA;IACjB,CAAC,EAAE,SAAS,CAAA;CACb,CAAA;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iCAAiC,qBA8F9E"}

package/dist/elements/EmailAndUsername/index.js

@@ -0,0 +1,89 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { email, getFieldPermissions, username } from '@ruya.sa/payload/shared';
+import React from 'react';
+import { EmailField } from '../../fields/Email/index.js';
+import { TextField } from '../../fields/Text/index.js';
+import './index.scss';
+import { FieldPathContext } from '../../forms/RenderFields/context.js';
+const baseClass = 'login-fields';
+export function EmailAndUsernameFields(props) {
+  const {
+    className,
+    loginWithUsername,
+    operation: operationFromProps,
+    permissions,
+    readOnly,
+    t
+  } = props;
+  function getAuthFieldPermission(fieldName, operation) {
+    const permissionsResult = getFieldPermissions({
+      field: {
+        name: fieldName,
+        type: 'text'
+      },
+      operation: operationFromProps === 'create' ? 'create' : operation,
+      parentName: '',
+      permissions
+    });
+    return permissionsResult.operation;
+  }
+  const hasEmailFieldOverride = typeof permissions === 'object' && 'email' in permissions && permissions.email;
+  const hasUsernameFieldOverride = typeof permissions === 'object' && 'username' in permissions && permissions.username;
+  const emailPermissions = hasEmailFieldOverride ? {
+    read: getAuthFieldPermission('email', 'read'),
+    update: getAuthFieldPermission('email', 'update')
+  } : {
+    read: true,
+    update: true
+  };
+  const usernamePermissions = hasUsernameFieldOverride ? {
+    read: getAuthFieldPermission('username', 'read'),
+    update: getAuthFieldPermission('username', 'update')
+  } : {
+    read: true,
+    update: true
+  };
+  const showEmailField = (!loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin) && emailPermissions.read;
+  const showUsernameField = Boolean(loginWithUsername) && usernamePermissions.read;
+  if (showEmailField || showUsernameField) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: [baseClass, className && className].filter(Boolean).join(' '),
+      children: [showEmailField ? /*#__PURE__*/_jsx(FieldPathContext, {
+        value: "email",
+        children: /*#__PURE__*/_jsx(EmailField, {
+          field: {
+            name: 'email',
+            admin: {
+              autoComplete: 'off'
+            },
+            label: t('general:email'),
+            required: !loginWithUsername || loginWithUsername && loginWithUsername.requireEmail
+          },
+          path: "email",
+          readOnly: readOnly || !emailPermissions.update,
+          schemaPath: "email",
+          validate: email
+        })
+      }) : null, showUsernameField && /*#__PURE__*/_jsx(FieldPathContext, {
+        value: "username",
+        children: /*#__PURE__*/_jsx(TextField, {
+          field: {
+            name: 'username',
+            admin: {
+              autoComplete: 'off'
+            },
+            label: t('authentication:username'),
+            required: loginWithUsername && loginWithUsername.requireUsername
+          },
+          path: "username",
+          readOnly: readOnly || !usernamePermissions.update,
+          schemaPath: "username",
+          validate: username
+        })
+      })]
+    });
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/EmailAndUsername/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["email","getFieldPermissions","username","React","EmailField","TextField","FieldPathContext","baseClass","EmailAndUsernameFields","props","className","loginWithUsername","operation","operationFromProps","permissions","readOnly","t","getAuthFieldPermission","fieldName","permissionsResult","field","name","type","parentName","hasEmailFieldOverride","hasUsernameFieldOverride","emailPermissions","read","update","usernamePermissions","showEmailField","requireEmail","allowEmailLogin","showUsernameField","Boolean","_jsxs","filter","join","_jsx","value","admin","autoComplete","label","required","path","schemaPath","validate","requireUsername"],"sources":["../../../src/elements/EmailAndUsername/index.tsx"],"sourcesContent":["'use client'\n\nimport type { TFunction } from '@ruya.sa/translations'\nimport type { LoginWithUsernameOptions, SanitizedFieldPermissions } from '@ruya.sa/payload'\n\nimport { email, getFieldPermissions, username } from '@ruya.sa/payload/shared'\nimport React from 'react'\n\nimport { EmailField } from '../../fields/Email/index.js'\nimport { TextField } from '../../fields/Text/index.js'\nimport './index.scss'\nimport { FieldPathContext } from '../../forms/RenderFields/context.js'\n\nconst baseClass = 'login-fields'\ntype RenderEmailAndUsernameFieldsProps = {\n  className?: string\n  loginWithUsername?: false | LoginWithUsernameOptions\n  operation?: 'create' | 'update'\n  permissions?:\n    | {\n        [fieldName: string]: SanitizedFieldPermissions\n      }\n    | true\n  readOnly: boolean\n  t: TFunction\n}\n\nexport function EmailAndUsernameFields(props: RenderEmailAndUsernameFieldsProps) {\n  const {\n    className,\n    loginWithUsername,\n    operation: operationFromProps,\n    permissions,\n    readOnly,\n    t,\n  } = props\n\n  function getAuthFieldPermission(fieldName: string, operation: 'read' | 'update') {\n    const permissionsResult = getFieldPermissions({\n      field: { name: fieldName, type: 'text' },\n      operation: operationFromProps === 'create' ? 'create' : operation,\n      parentName: '',\n      permissions,\n    })\n    return permissionsResult.operation\n  }\n\n  const hasEmailFieldOverride =\n    typeof permissions === 'object' && 'email' in permissions && permissions.email\n  const hasUsernameFieldOverride =\n    typeof permissions === 'object' && 'username' in permissions && permissions.username\n\n  const emailPermissions = hasEmailFieldOverride\n    ? {\n        read: getAuthFieldPermission('email', 'read'),\n        update: getAuthFieldPermission('email', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const usernamePermissions = hasUsernameFieldOverride\n    ? {\n        read: getAuthFieldPermission('username', 'read'),\n        update: getAuthFieldPermission('username', 'update'),\n      }\n    : {\n        read: true,\n        update: true,\n      }\n\n  const showEmailField =\n    (!loginWithUsername || loginWithUsername?.requireEmail || loginWithUsername?.allowEmailLogin) &&\n    emailPermissions.read\n\n  const showUsernameField = Boolean(loginWithUsername) && usernamePermissions.read\n\n  if (showEmailField || showUsernameField) {\n    return (\n      <div className={[baseClass, className && className].filter(Boolean).join(' ')}>\n        {showEmailField ? (\n          <FieldPathContext value=\"email\">\n            <EmailField\n              field={{\n                name: 'email',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('general:email'),\n                required:\n                  !loginWithUsername || (loginWithUsername && loginWithUsername.requireEmail),\n              }}\n              path=\"email\"\n              readOnly={readOnly || !emailPermissions.update}\n              schemaPath=\"email\"\n              validate={email}\n            />\n          </FieldPathContext>\n        ) : null}\n        {showUsernameField && (\n          <FieldPathContext value=\"username\">\n            <TextField\n              field={{\n                name: 'username',\n                admin: {\n                  autoComplete: 'off',\n                },\n                label: t('authentication:username'),\n                required: loginWithUsername && loginWithUsername.requireUsername,\n              }}\n              path=\"username\"\n              readOnly={readOnly || !usernamePermissions.update}\n              schemaPath=\"username\"\n              validate={username}\n            />\n          </FieldPathContext>\n        )}\n      </div>\n    )\n  }\n}\n"],"mappings":"AAAA;;;AAKA,SAASA,KAAK,EAAEC,mBAAmB,EAAEC,QAAQ,QAAQ;AACrD,OAAOC,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,SAAS,QAAQ;AAC1B,OAAO;AACP,SAASC,gBAAgB,QAAQ;AAEjC,MAAMC,SAAA,GAAY;AAclB,OAAO,SAASC,uBAAuBC,KAAwC;EAC7E,MAAM;IACJC,SAAS;IACTC,iBAAiB;IACjBC,SAAA,EAAWC,kBAAkB;IAC7BC,WAAW;IACXC,QAAQ;IACRC;EAAC,CACF,GAAGP,KAAA;EAEJ,SAASQ,uBAAuBC,SAAiB,EAAEN,SAA4B;IAC7E,MAAMO,iBAAA,GAAoBlB,mBAAA,CAAoB;MAC5CmB,KAAA,EAAO;QAAEC,IAAA,EAAMH,SAAA;QAAWI,IAAA,EAAM;MAAO;MACvCV,SAAA,EAAWC,kBAAA,KAAuB,WAAW,WAAWD,SAAA;MACxDW,UAAA,EAAY;MACZT;IACF;IACA,OAAOK,iBAAA,CAAkBP,SAAS;EACpC;EAEA,MAAMY,qBAAA,GACJ,OAAOV,WAAA,KAAgB,YAAY,WAAWA,WAAA,IAAeA,WAAA,CAAYd,KAAK;EAChF,MAAMyB,wBAAA,GACJ,OAAOX,WAAA,KAAgB,YAAY,cAAcA,WAAA,IAAeA,WAAA,CAAYZ,QAAQ;EAEtF,MAAMwB,gBAAA,GAAmBF,qBAAA,GACrB;IACEG,IAAA,EAAMV,sBAAA,CAAuB,SAAS;IACtCW,MAAA,EAAQX,sBAAA,CAAuB,SAAS;EAC1C,IACA;IACEU,IAAA,EAAM;IACNC,MAAA,EAAQ;EACV;EAEJ,MAAMC,mBAAA,GAAsBJ,wBAAA,GACxB;IACEE,IAAA,EAAMV,sBAAA,CAAuB,YAAY;IACzCW,MAAA,EAAQX,sBAAA,CAAuB,YAAY;EAC7C,IACA;IACEU,IAAA,EAAM;IACNC,MAAA,EAAQ;EACV;EAEJ,MAAME,cAAA,GACJ,CAAC,CAACnB,iBAAA,IAAqBA,iBAAA,EAAmBoB,YAAA,IAAgBpB,iBAAA,EAAmBqB,eAAc,KAC3FN,gBAAA,CAAiBC,IAAI;EAEvB,MAAMM,iBAAA,GAAoBC,OAAA,CAAQvB,iBAAA,KAAsBkB,mBAAA,CAAoBF,IAAI;EAEhF,IAAIG,cAAA,IAAkBG,iBAAA,EAAmB;IACvC,oBACEE,KAAA,CAAC;MAAIzB,SAAA,EAAW,CAACH,SAAA,EAAWG,SAAA,IAAaA,SAAA,CAAU,CAAC0B,MAAM,CAACF,OAAA,EAASG,IAAI,CAAC;iBACtEP,cAAA,gBACCQ,IAAA,CAAChC,gBAAA;QAAiBiC,KAAA,EAAM;kBACtB,aAAAD,IAAA,CAAClC,UAAA;UACCgB,KAAA,EAAO;YACLC,IAAA,EAAM;YACNmB,KAAA,EAAO;cACLC,YAAA,EAAc;YAChB;YACAC,KAAA,EAAO1B,CAAA,CAAE;YACT2B,QAAA,EACE,CAAChC,iBAAA,IAAsBA,iBAAA,IAAqBA,iBAAA,CAAkBoB;UAClE;UACAa,IAAA,EAAK;UACL7B,QAAA,EAAUA,QAAA,IAAY,CAACW,gBAAA,CAAiBE,MAAM;UAC9CiB,UAAA,EAAW;UACXC,QAAA,EAAU9C;;WAGZ,MACHiC,iBAAA,iBACCK,IAAA,CAAChC,gBAAA;QAAiBiC,KAAA,EAAM;kBACtB,aAAAD,IAAA,CAACjC,SAAA;UACCe,KAAA,EAAO;YACLC,IAAA,EAAM;YACNmB,KAAA,EAAO;cACLC,YAAA,EAAc;YAChB;YACAC,KAAA,EAAO1B,CAAA,CAAE;YACT2B,QAAA,EAAUhC,iBAAA,IAAqBA,iBAAA,CAAkBoC;UACnD;UACAH,IAAA,EAAK;UACL7B,QAAA,EAAUA,QAAA,IAAY,CAACc,mBAAA,CAAoBD,MAAM;UACjDiB,UAAA,EAAW;UACXC,QAAA,EAAU5C;;;;EAMtB;AACF","ignoreList":[]}

package/dist/elements/EmailAndUsername/index.scss

@@ -0,0 +1,9 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .login-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+  }
+}

package/dist/elements/ErrorPill/index.d.ts

@@ -0,0 +1,11 @@
+import type { I18nClient } from '@ruya.sa/translations';
+import React from 'react';
+import './index.scss';
+export type ErrorPillProps = {
+    className?: string;
+    count: number;
+    i18n: I18nClient;
+    withMessage?: boolean;
+};
+export declare const ErrorPill: React.FC<ErrorPillProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/ErrorPill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,UAAU,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoB9C,CAAA"}

package/dist/elements/ErrorPill/index.js

@@ -0,0 +1,30 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'error-pill';
+export const ErrorPill = props => {
+  const {
+    className,
+    count,
+    i18n,
+    withMessage
+  } = props;
+  const lessThan3Chars = !withMessage && count < 99;
+  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className].filter(Boolean).join(' ');
+  if (count === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__count`,
+        children: count
+      }), withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`]
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/ErrorPill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","ErrorPill","props","className","count","i18n","withMessage","lessThan3Chars","classes","filter","Boolean","join","_jsx","_jsxs","t"],"sources":["../../../src/elements/ErrorPill/index.tsx"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@ruya.sa/translations'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'error-pill'\n\nexport type ErrorPillProps = {\n  className?: string\n  count: number\n  i18n: I18nClient\n  withMessage?: boolean\n}\n\nexport const ErrorPill: React.FC<ErrorPillProps> = (props) => {\n  const { className, count, i18n, withMessage } = props\n  const lessThan3Chars = !withMessage && count < 99\n\n  const classes = [baseClass, lessThan3Chars && `${baseClass}--fixed-width`, className && className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (count === 0) {\n    return null\n  }\n\n  return (\n    <div className={classes}>\n      <div className={`${baseClass}__content`}>\n        <span className={`${baseClass}__count`}>{count}</span>\n        {withMessage && ` ${count > 1 ? i18n.t('general:errors') : i18n.t('general:error')}`}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,SAAA,GAAuCC,KAAA;EAClD,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAEC;EAAW,CAAE,GAAGJ,KAAA;EAChD,MAAMK,cAAA,GAAiB,CAACD,WAAA,IAAeF,KAAA,GAAQ;EAE/C,MAAMI,OAAA,GAAU,CAACR,SAAA,EAAWO,cAAA,IAAkB,GAAGP,SAAA,eAAwB,EAAEG,SAAA,IAAaA,SAAA,CAAU,CAC/FM,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIP,KAAA,KAAU,GAAG;IACf,OAAO;EACT;EAEA,oBACEQ,IAAA,CAAC;IAAIT,SAAA,EAAWK,OAAA;cACd,aAAAK,KAAA,CAAC;MAAIV,SAAA,EAAW,GAAGH,SAAA,WAAoB;8BACrCY,IAAA,CAAC;QAAKT,SAAA,EAAW,GAAGH,SAAA,SAAkB;kBAAGI;UACxCE,WAAA,IAAe,IAAIF,KAAA,GAAQ,IAAIC,IAAA,CAAKS,CAAC,CAAC,oBAAoBT,IAAA,CAAKS,CAAC,CAAC,kBAAkB;;;AAI5F","ignoreList":[]}

package/dist/elements/ErrorPill/index.scss

@@ -0,0 +1,33 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .error-pill {
+    align-self: center;
+    align-items: center;
+    border: 0;
+    padding: 0 base(0.25);
+    flex-shrink: 0;
+    border-radius: var(--style-radius-l);
+    line-height: 18px;
+    font-size: 11px;
+    text-align: center;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--theme-error-300);
+    color: var(--theme-error-950);
+
+    &--fixed-width {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      position: relative;
+    }
+
+    &__count {
+      letter-spacing: 0.5px;
+      margin-left: 0.5px;
+    }
+  }
+}

package/dist/elements/FieldDiffContainer/index.d.ts

@@ -0,0 +1,15 @@
+import type { LabelFunction, StaticLabel } from '@ruya.sa/payload';
+import './index.scss';
+import { type I18nClient } from '@ruya.sa/translations';
+export declare const FieldDiffContainer: React.FC<{
+    className?: string;
+    From: React.ReactNode;
+    i18n: I18nClient;
+    label: {
+        label?: false | LabelFunction | StaticLabel;
+        locale?: string;
+    };
+    nestingLevel?: number;
+    To: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FieldDiffContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAElE,OAAO,cAAc,CAAA;AAErB,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAMvE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,EAAE;QACL,KAAK,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,WAAW,CAAA;QAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,EAAE,KAAK,CAAC,SAAS,CAAA;CACpB,CA2CA,CAAA"}

package/dist/elements/FieldDiffContainer/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
+import { getTranslation } from '@ruya.sa/translations';
+import { FieldDiffLabel } from '../FieldDiffLabel/index.js';
+const baseClass = 'field-diff';
+export const FieldDiffContainer = args => {
+  const {
+    className,
+    From,
+    i18n,
+    label: {
+      label,
+      locale
+    },
+    nestingLevel = 0,
+    To
+  } = args;
+  return /*#__PURE__*/_jsxs("div", {
+    className: `${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`,
+    style: nestingLevel ? {
+      // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns
+      '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`
+    } : {
+      '--left-offset': '50%'
+    },
+    children: [/*#__PURE__*/_jsxs(FieldDiffLabel, {
+      children: [locale && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__locale-label`,
+        children: locale
+      }), typeof label !== 'function' && getTranslation(label || '', i18n)]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}-content`,
+      style: nestingLevel ? {
+        gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`
+      } : undefined,
+      children: [From, To]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/FieldDiffContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","FieldDiffLabel","baseClass","FieldDiffContainer","args","className","From","i18n","label","locale","nestingLevel","To","_jsxs","style","_jsx","gridTemplateColumns","undefined"],"sources":["../../../src/elements/FieldDiffContainer/index.tsx"],"sourcesContent":["import type { LabelFunction, StaticLabel } from '@ruya.sa/payload'\n\nimport './index.scss'\n\nimport { getTranslation, type I18nClient } from '@ruya.sa/translations'\n\nimport { FieldDiffLabel } from '../FieldDiffLabel/index.js'\n\nconst baseClass = 'field-diff'\n\nexport const FieldDiffContainer: React.FC<{\n  className?: string\n  From: React.ReactNode\n  i18n: I18nClient\n  label: {\n    label?: false | LabelFunction | StaticLabel\n    locale?: string\n  }\n  nestingLevel?: number\n  To: React.ReactNode\n}> = (args) => {\n  const {\n    className,\n    From,\n    i18n,\n    label: { label, locale },\n    nestingLevel = 0,\n    To,\n  } = args\n\n  return (\n    <div\n      className={`${baseClass}-container${className ? ` ${className}` : ''} nested-level-${nestingLevel}`}\n      style={\n        nestingLevel\n          ? ({\n              // Need to use % instead of fr, as calc() doesn't work with fr when this is used in gridTemplateColumns\n              '--left-offset': `calc(50%  - (${nestingLevel} * calc( calc(var(--base)* 0.5) - 2.5px  )))`,\n            } as React.CSSProperties)\n          : ({\n              '--left-offset': '50%',\n            } as React.CSSProperties)\n      }\n    >\n      <FieldDiffLabel>\n        {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}\n        {typeof label !== 'function' && getTranslation(label || '', i18n)}\n      </FieldDiffLabel>\n      <div\n        className={`${baseClass}-content`}\n        style={\n          nestingLevel\n            ? {\n                gridTemplateColumns: `calc(var(--left-offset) - calc(var(--base)*0.5) )     calc(50% - calc(var(--base)*0.5) + calc(50% - var(--left-offset)))`,\n              }\n            : undefined\n        }\n      >\n        {From}\n        {To}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAEA,OAAO;AAEP,SAASA,cAAc,QAAyB;AAEhD,SAASC,cAAc,QAAQ;AAE/B,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAUPC,IAAA;EACJ,MAAM;IACJC,SAAS;IACTC,IAAI;IACJC,IAAI;IACJC,KAAA,EAAO;MAAEA,KAAK;MAAEC;IAAM,CAAE;IACxBC,YAAA,GAAe,CAAC;IAChBC;EAAE,CACH,GAAGP,IAAA;EAEJ,oBACEQ,KAAA,CAAC;IACCP,SAAA,EAAW,GAAGH,SAAA,aAAsBG,SAAA,GAAY,IAAIA,SAAA,EAAW,GAAG,mBAAmBK,YAAA,EAAc;IACnGG,KAAA,EACEH,YAAA,GACK;MACC;MACA,iBAAiB,gBAAgBA,YAAA;IACnC,IACC;MACC,iBAAiB;IACnB;4BAGNE,KAAA,CAACX,cAAA;iBACEQ,MAAA,iBAAUK,IAAA,CAAC;QAAKT,SAAA,EAAW,GAAGH,SAAA,gBAAyB;kBAAGO;UAC1D,OAAOD,KAAA,KAAU,cAAcR,cAAA,CAAeQ,KAAA,IAAS,IAAID,IAAA;qBAE9DK,KAAA,CAAC;MACCP,SAAA,EAAW,GAAGH,SAAA,UAAmB;MACjCW,KAAA,EACEH,YAAA,GACI;QACEK,mBAAA,EAAqB;MACvB,IACAC,SAAA;iBAGLV,IAAA,EACAK,EAAA;;;AAIT","ignoreList":[]}

package/dist/elements/FieldDiffContainer/index.scss

@@ -0,0 +1,45 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .field-diff {
+    &__locale-label {
+      background: var(--theme-elevation-100);
+      border-radius: var(--style-radius-s);
+      padding: calc(var(--base) * 0.2);
+      // border-radius: $style-radius-m;
+      [dir='ltr'] & {
+        margin-right: calc(var(--base) * 0.25);
+      }
+      [dir='rtl'] & {
+        margin-left: calc(var(--base) * 0.25);
+      }
+    }
+
+    &-container {
+      position: relative;
+
+      // Vertical separator line - not needed anymore, as the parent version view container adds a vertical line that spans the entire height of the container.
+      /*
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: var(--left-offset);
+      width: 1px;
+      background-color: var(--theme-elevation-100);
+      transform: translateX(-50%); // Center the line
+    }*/
+    }
+
+    &-content {
+      display: grid;
+      // Need to use 50% 50% so that we can apply overflow-x without the column shrinking to the content width.
+      // Need -base(0.5) to enure the gap is center aligned - this is required when using 50% over 1fr.
+      grid-template-columns: calc(50% - base(0.5)) calc(50% - base(0.5));
+      gap: base(1);
+      background: var(--theme-elevation-50);
+      padding: base(0.5);
+    }
+  }
+}

package/dist/elements/FieldDiffLabel/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+export declare const FieldDiffLabel: React.FC<{
+    children?: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FieldDiffLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldDiffLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEnE,CAAA"}

package/dist/elements/FieldDiffLabel/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.scss';
+const baseClass = 'field-diff-label';
+export const FieldDiffLabel = ({
+  children
+}) => /*#__PURE__*/_jsx("div", {
+  className: baseClass,
+  children: children
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/FieldDiffLabel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","FieldDiffLabel","children","_jsx","className"],"sources":["../../../src/elements/FieldDiffLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'field-diff-label'\n\nexport const FieldDiffLabel: React.FC<{ children?: React.ReactNode }> = ({ children }) => (\n  <div className={baseClass}>{children}</div>\n)\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAA2DA,CAAC;EAAEC;AAAQ,CAAE,kBACnFC,IAAA,CAAC;EAAIC,SAAA,EAAWJ,SAAA;YAAYE","ignoreList":[]}

package/dist/elements/FieldDiffLabel/index.scss

@@ -0,0 +1,11 @@
+@layer payload-default {
+  .field-diff-label {
+    margin-bottom: calc(var(--base) * 0.35);
+    font-weight: 600;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    line-height: normal;
+  }
+}

package/dist/elements/FieldSelect/index.d.ts

@@ -0,0 +1,19 @@
+import type { ClientField, FormState, SanitizedFieldPermissions } from '@ruya.sa/payload';
+import React from 'react';
+import type { FieldAction } from '../../forms/Form/types.js';
+import type { FieldOption } from './reduceFieldOptions.js';
+import './index.scss';
+export type OnFieldSelect = ({ dispatchFields, formState, selected, }: {
+    dispatchFields: React.Dispatch<FieldAction>;
+    formState: FormState;
+    selected: FieldOption[];
+}) => void;
+export type FieldSelectProps = {
+    readonly fields: ClientField[];
+    readonly onChange: OnFieldSelect;
+    readonly permissions: {
+        [fieldName: string]: SanitizedFieldPermissions;
+    } | SanitizedFieldPermissions;
+};
+export declare const FieldSelect: React.FC<FieldSelectProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FieldSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAA;AAEzF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAQ1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,aAAa,GAAG,CAAC,EAC3B,cAAc,EACd,SAAS,EACT,QAAQ,GACT,EAAE;IACD,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAA;IAC3C,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB,KAAK,IAAI,CAAA;AAEV,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAA;IAChC,QAAQ,CAAC,WAAW,EAChB;QACE,CAAC,SAAS,EAAE,MAAM,GAAG,yBAAyB,CAAA;KAC/C,GACD,yBAAyB,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8BlD,CAAA"}