@ruya.sa/ui 3.71.3

package/dist/fields/Blocks/index.scss

@@ -0,0 +1,137 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .blocks-field {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+
+    &__header {
+      h3 {
+        margin: 0;
+      }
+    }
+
+    &__header-wrap {
+      display: flex;
+      align-items: flex-end;
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    &__heading-with-error {
+      display: flex;
+      align-items: center;
+      gap: base(0.5);
+    }
+
+    &--has-no-error {
+      > .array-field__header .array-field__heading-with-error {
+        color: var(--theme-text);
+      }
+    }
+
+    &--has-error {
+      > .array-field__header {
+        color: var(--theme-error-500);
+      }
+    }
+
+    &__error-pill {
+      align-self: center;
+    }
+
+    &__header-actions {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+    }
+
+    &__header-action {
+      @extend %btn-reset;
+      cursor: pointer;
+      margin-left: base(0.5);
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+
+    &__block-header {
+      display: inline-flex;
+      max-width: 100%;
+      width: 100%;
+      overflow: hidden;
+      gap: base(0.375);
+    }
+
+    &__block-number {
+      flex-shrink: 0;
+    }
+
+    &__block-pill {
+      flex-shrink: 0;
+      display: block;
+      line-height: unset;
+    }
+
+    &__rows {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+    }
+
+    &__drawer-toggler {
+      background-color: transparent;
+      margin: 0;
+      padding: 0;
+      border: none;
+      align-self: flex-start;
+
+      .btn {
+        color: var(--theme-elevation-400);
+        margin: 0;
+
+        &:hover {
+          color: var(--theme-elevation-800);
+        }
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-750);
+      }
+
+      .blocks-field__row--no-errors,
+      .blocks-field--has-no-error {
+        .section-title__input,
+        .blocks-field__heading-with-error {
+          color: var(--theme-text);
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .blocks-field--has-error {
+      .section-title__input,
+      .blocks-field__heading-with-error {
+        color: var(--theme-error-500);
+      }
+
+      .blocks-field__row--no-errors,
+      .blocks-field--has-no-error {
+        .section-title__input,
+        .blocks-field__heading-with-error {
+          color: var(--theme-text);
+        }
+      }
+    }
+  }
+}

package/dist/fields/Checkbox/Input.d.ts

@@ -0,0 +1,21 @@
+import type { StaticLabel } from '@ruya.sa/payload';
+import React from 'react';
+export type CheckboxInputProps = {
+    readonly AfterInput?: React.ReactNode;
+    readonly BeforeInput?: React.ReactNode;
+    readonly checked?: boolean;
+    readonly className?: string;
+    readonly id?: string;
+    readonly inputRef?: React.RefObject<HTMLInputElement | null>;
+    readonly Label?: React.ReactNode;
+    readonly label?: StaticLabel;
+    readonly localized?: boolean;
+    readonly name?: string;
+    readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    readonly partialChecked?: boolean;
+    readonly readOnly?: boolean;
+    readonly required?: boolean;
+};
+export declare const inputBaseClass = "checkbox-input";
+export declare const CheckboxInput: React.FC<CheckboxInputProps>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/fields/Checkbox/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/fields/Checkbox/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAgB,MAAM,OAAO,CAAA;AAOpC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IAC5D,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACvE,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,cAAc,mBAAmB,CAAA;AAE9C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8DtD,CAAA"}

package/dist/fields/Checkbox/Input.js

@@ -0,0 +1,108 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { CheckIcon } from '../../icons/Check/index.js';
+import { LineIcon } from '../../icons/Line/index.js';
+export const inputBaseClass = 'checkbox-input';
+export const CheckboxInput = t0 => {
+  const $ = _c(22);
+  const {
+    id: idFromProps,
+    name,
+    AfterInput,
+    BeforeInput,
+    checked,
+    className,
+    inputRef,
+    Label,
+    label,
+    localized,
+    onToggle,
+    partialChecked,
+    readOnly,
+    required
+  } = t0;
+  const fallbackID = useId();
+  const id = idFromProps || fallbackID;
+  const t1 = checked && `${inputBaseClass}--checked`;
+  const t2 = readOnly && `${inputBaseClass}--read-only`;
+  let t3;
+  if ($[0] !== className || $[1] !== t1 || $[2] !== t2) {
+    t3 = [className, inputBaseClass, t1, t2].filter(Boolean);
+    $[0] = className;
+    $[1] = t1;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = t3.join(" ");
+  const t5 = Boolean(checked);
+  let t6;
+  if ($[4] !== AfterInput || $[5] !== BeforeInput || $[6] !== Label || $[7] !== checked || $[8] !== id || $[9] !== inputRef || $[10] !== label || $[11] !== localized || $[12] !== name || $[13] !== onToggle || $[14] !== partialChecked || $[15] !== readOnly || $[16] !== required || $[17] !== t4 || $[18] !== t5) {
+    const t7 = _jsx("input", {
+      "aria-label": "",
+      "aria-labelledby": name,
+      defaultChecked: t5,
+      disabled: readOnly,
+      id,
+      name,
+      onInput: onToggle,
+      ref: inputRef,
+      required,
+      title: name,
+      type: "checkbox"
+    });
+    const t8 = !checked && partialChecked ? "partial" : "check";
+    let t9;
+    if ($[20] !== t8) {
+      t9 = [`${inputBaseClass}__icon`, t8].filter(Boolean);
+      $[20] = t8;
+      $[21] = t9;
+    } else {
+      t9 = $[21];
+    }
+    t6 = _jsxs("div", {
+      className: t4,
+      children: [_jsxs("div", {
+        className: `${inputBaseClass}__input`,
+        children: [BeforeInput, t7, _jsxs("span", {
+          className: t9.join(" "),
+          children: [checked && _jsx(CheckIcon, {}), !checked && partialChecked && _jsx(LineIcon, {})]
+        }), AfterInput]
+      }), _jsx(RenderCustomComponent, {
+        CustomComponent: Label,
+        Fallback: _jsx(FieldLabel, {
+          htmlFor: id,
+          label,
+          localized,
+          required
+        })
+      })]
+    });
+    $[4] = AfterInput;
+    $[5] = BeforeInput;
+    $[6] = Label;
+    $[7] = checked;
+    $[8] = id;
+    $[9] = inputRef;
+    $[10] = label;
+    $[11] = localized;
+    $[12] = name;
+    $[13] = onToggle;
+    $[14] = partialChecked;
+    $[15] = readOnly;
+    $[16] = required;
+    $[17] = t4;
+    $[18] = t5;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  return t6;
+};
+//# sourceMappingURL=Input.js.map

package/dist/fields/Checkbox/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["c","_c","React","useId","RenderCustomComponent","FieldLabel","CheckIcon","LineIcon","inputBaseClass","CheckboxInput","t0","$","id","idFromProps","name","AfterInput","BeforeInput","checked","className","inputRef","Label","label","localized","onToggle","partialChecked","readOnly","required","fallbackID","t1","t2","t3","filter","Boolean","t4","join","t5","t6","t7","_jsx","defaultChecked","disabled","onInput","ref","title","type","t8","t9","_jsxs","children","CustomComponent","Fallback","htmlFor"],"sources":["../../../src/fields/Checkbox/Input.tsx"],"sourcesContent":["'use client'\nimport type { StaticLabel } from '@ruya.sa/payload'\n\nimport React, { useId } from 'react'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { LineIcon } from '../../icons/Line/index.js'\n\nexport type CheckboxInputProps = {\n  readonly AfterInput?: React.ReactNode\n  readonly BeforeInput?: React.ReactNode\n  readonly checked?: boolean\n  readonly className?: string\n  readonly id?: string\n  readonly inputRef?: React.RefObject<HTMLInputElement | null>\n  readonly Label?: React.ReactNode\n  readonly label?: StaticLabel\n  readonly localized?: boolean\n  readonly name?: string\n  readonly onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void\n  readonly partialChecked?: boolean\n  readonly readOnly?: boolean\n  readonly required?: boolean\n}\n\nexport const inputBaseClass = 'checkbox-input'\n\nexport const CheckboxInput: React.FC<CheckboxInputProps> = ({\n  id: idFromProps,\n  name,\n  AfterInput,\n  BeforeInput,\n  checked,\n  className,\n  inputRef,\n  Label,\n  label,\n  localized,\n  onToggle,\n  partialChecked,\n  readOnly,\n  required,\n}) => {\n  const fallbackID = useId()\n  const id = idFromProps || fallbackID\n  return (\n    <div\n      className={[\n        className,\n        inputBaseClass,\n        checked && `${inputBaseClass}--checked`,\n        readOnly && `${inputBaseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${inputBaseClass}__input`}>\n        {BeforeInput}\n        <input\n          aria-label=\"\"\n          aria-labelledby={name}\n          defaultChecked={Boolean(checked)}\n          disabled={readOnly}\n          id={id}\n          name={name}\n          onInput={onToggle}\n          ref={inputRef}\n          required={required}\n          title={name}\n          type=\"checkbox\"\n        />\n        <span\n          className={[`${inputBaseClass}__icon`, !checked && partialChecked ? 'partial' : 'check']\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {checked && <CheckIcon />}\n          {!checked && partialChecked && <LineIcon />}\n        </span>\n        {AfterInput}\n      </div>\n      <RenderCustomComponent\n        CustomComponent={Label}\n        Fallback={\n          <FieldLabel htmlFor={id} label={label} localized={localized} required={required} />\n        }\n      />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Checkbox/index.d.ts

@@ -0,0 +1,18 @@
+import type { CheckboxFieldClientProps, CheckboxFieldValidation } from '@ruya.sa/payload';
+import React from 'react';
+import type { CheckboxInputProps } from './Input.js';
+import { CheckboxInput } from './Input.js';
+import './index.scss';
+export { CheckboxFieldClientProps, CheckboxInput, type CheckboxInputProps };
+export declare const CheckboxField: React.FC<{
+    readonly checked?: boolean;
+    readonly disableFormData?: boolean;
+    readonly id?: string;
+    readonly onChange?: (value: boolean) => void;
+    readonly partialChecked?: boolean;
+    readonly path: string;
+    readonly validate?: CheckboxFieldValidation;
+} & {
+    readonly field: Omit<import("@ruya.sa/payload").CheckboxFieldClient, "type"> & Partial<Pick<import("@ruya.sa/payload").CheckboxFieldClient, "type">>;
+} & Omit<import("@ruya.sa/payload").ClientComponentProps, "customComponents" | "field">>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,kBAAkB,CAAA;AAGzB,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAapD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,cAAc,CAAA;AAIrB,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,CAAA;AA4G3E,eAAO,MAAM,aAAa;;;;;;;;;;wFAAwC,CAAA"}

package/dist/fields/Checkbox/index.js

@@ -0,0 +1,121 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { rtlLanguages } from '@ruya.sa/translations';
+import React, { useCallback, useMemo } from 'react';
+import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
+import { FieldDescription } from '../../fields/FieldDescription/index.js';
+import { FieldError } from '../../fields/FieldError/index.js';
+import { useForm } from '../../forms/Form/context.js';
+import { useField } from '../../forms/useField/index.js';
+import { withCondition } from '../../forms/withCondition/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { generateFieldID } from '../../utilities/generateFieldID.js';
+import { mergeFieldStyles } from '../mergeFieldStyles.js';
+import { fieldBaseClass } from '../shared/index.js';
+import { CheckboxInput } from './Input.js';
+import './index.scss';
+const baseClass = 'checkbox';
+export { CheckboxInput };
+const CheckboxFieldComponent = props => {
+  const {
+    id,
+    checked: checkedFromProps,
+    disableFormData,
+    field,
+    field: {
+      admin: {
+        className,
+        description
+      } = {},
+      label,
+      required
+    } = {},
+    onChange: onChangeFromProps,
+    partialChecked,
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const {
+    uuid
+  } = useForm();
+  const editDepth = useEditDepth();
+  const {
+    i18n: {
+      language
+    }
+  } = useTranslation();
+  const isRTL = rtlLanguages.includes(language);
+  const memoizedValidate = useCallback((value, options) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...options,
+        required
+      });
+    }
+  }, [validate, required]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    path,
+    setValue,
+    showError,
+    value: value_0
+  } = useField({
+    disableFormData,
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const onToggle = useCallback(() => {
+    if (!readOnly) {
+      setValue(!value_0);
+      if (typeof onChangeFromProps === 'function') {
+        onChangeFromProps(!value_0);
+      }
+    }
+  }, [onChangeFromProps, readOnly, setValue, value_0]);
+  const checked = checkedFromProps || Boolean(value_0);
+  const fieldID = id || generateFieldID(path, editDepth, uuid);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, showError && 'error', className, value_0 && `${baseClass}--checked`, (readOnly || disabled) && `${baseClass}--read-only`].filter(Boolean).join(' '),
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Error,
+      Fallback: /*#__PURE__*/_jsx(FieldError, {
+        alignCaret: isRTL ? 'right' : 'left',
+        path: path,
+        showError: showError
+      })
+    }), /*#__PURE__*/_jsx(CheckboxInput, {
+      AfterInput: AfterInput,
+      BeforeInput: BeforeInput,
+      checked: checked,
+      id: fieldID,
+      inputRef: null,
+      Label: Label,
+      label: label,
+      name: path,
+      onToggle: onToggle,
+      partialChecked: partialChecked,
+      readOnly: readOnly || disabled,
+      required: required
+    }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Description,
+      Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+        description: description,
+        path: path
+      })
+    })]
+  });
+};
+export const CheckboxField = withCondition(CheckboxFieldComponent);
+//# sourceMappingURL=index.js.map

package/dist/fields/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["rtlLanguages","React","useCallback","useMemo","RenderCustomComponent","FieldDescription","FieldError","useForm","useField","withCondition","useEditDepth","useTranslation","generateFieldID","mergeFieldStyles","fieldBaseClass","CheckboxInput","baseClass","CheckboxFieldComponent","props","id","checked","checkedFromProps","disableFormData","field","admin","className","description","label","required","onChange","onChangeFromProps","partialChecked","path","pathFromProps","readOnly","validate","uuid","editDepth","i18n","language","isRTL","includes","memoizedValidate","value","options","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","setValue","showError","potentiallyStalePath","onToggle","Boolean","fieldID","styles","_jsxs","filter","join","style","_jsx","CustomComponent","Fallback","alignCaret","inputRef","name","CheckboxField"],"sources":["../../../src/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  CheckboxFieldClientComponent,\n  CheckboxFieldClientProps,\n  CheckboxFieldValidation,\n} from '@ruya.sa/payload'\n\nimport { rtlLanguages } from '@ruya.sa/translations'\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { CheckboxInputProps } from './Input.js'\n\nimport { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js'\nimport { FieldDescription } from '../../fields/FieldDescription/index.js'\nimport { FieldError } from '../../fields/FieldError/index.js'\nimport { useForm } from '../../forms/Form/context.js'\nimport { useField } from '../../forms/useField/index.js'\nimport { withCondition } from '../../forms/withCondition/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { generateFieldID } from '../../utilities/generateFieldID.js'\nimport { mergeFieldStyles } from '../mergeFieldStyles.js'\nimport { fieldBaseClass } from '../shared/index.js'\nimport { CheckboxInput } from './Input.js'\nimport './index.scss'\n\nconst baseClass = 'checkbox'\n\nexport { CheckboxFieldClientProps, CheckboxInput, type CheckboxInputProps }\n\nconst CheckboxFieldComponent: CheckboxFieldClientComponent = (props) => {\n  const {\n    id,\n    checked: checkedFromProps,\n    disableFormData,\n    field,\n    field: {\n      admin: { className, description } = {} as CheckboxFieldClientProps['field']['admin'],\n      label,\n      required,\n    } = {} as CheckboxFieldClientProps['field'],\n    onChange: onChangeFromProps,\n    partialChecked,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n\n  const { uuid } = useForm()\n\n  const editDepth = useEditDepth()\n\n  const {\n    i18n: { language },\n  } = useTranslation()\n  const isRTL = (rtlLanguages as readonly string[]).includes(language)\n\n  const memoizedValidate: CheckboxFieldValidation = useCallback(\n    (value, options) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...options, required })\n      }\n    },\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    disableFormData,\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const onToggle = useCallback(() => {\n    if (!readOnly) {\n      setValue(!value)\n      if (typeof onChangeFromProps === 'function') {\n        onChangeFromProps(!value)\n      }\n    }\n  }, [onChangeFromProps, readOnly, setValue, value])\n\n  const checked = checkedFromProps || Boolean(value)\n\n  const fieldID = id || generateFieldID(path, editDepth, uuid)\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div\n      className={[\n        fieldBaseClass,\n        baseClass,\n        showError && 'error',\n        className,\n        value && `${baseClass}--checked`,\n        (readOnly || disabled) && `${baseClass}--read-only`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={styles}\n    >\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={\n          <FieldError alignCaret={isRTL ? 'right' : 'left'} path={path} showError={showError} />\n        }\n      />\n      <CheckboxInput\n        AfterInput={AfterInput}\n        BeforeInput={BeforeInput}\n        checked={checked}\n        id={fieldID}\n        inputRef={null}\n        Label={Label}\n        label={label}\n        name={path}\n        onToggle={onToggle}\n        partialChecked={partialChecked}\n        readOnly={readOnly || disabled}\n        required={required}\n      />\n      <RenderCustomComponent\n        CustomComponent={Description}\n        Fallback={<FieldDescription description={description} path={path} />}\n      />\n    </div>\n  )\n}\n\nexport const CheckboxField = withCondition(CheckboxFieldComponent)\n"],"mappings":"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","ignoreList":[]}

package/dist/fields/Checkbox/index.scss

@@ -0,0 +1,149 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .checkbox {
+    position: relative;
+    margin-bottom: $baseline;
+
+    .tooltip:not([aria-hidden='true']) {
+      right: auto;
+      position: static;
+      transform: translateY(calc(var(--caret-size) * -1));
+      margin-bottom: 0.2em;
+      max-width: fit-content;
+    }
+  }
+
+  .checkbox-input {
+    display: inline-flex;
+    &:hover:not(&--read-only) {
+      label,
+      input {
+        cursor: pointer;
+      }
+    }
+
+    label.field-label {
+      padding-bottom: 0;
+      padding-left: base(0.5);
+    }
+
+    [dir='rtl'] &__input {
+      margin-right: 0;
+      margin-left: base(0.5);
+    }
+
+    &__input {
+      @include formInput;
+      display: flex;
+      padding: 0;
+      line-height: 0;
+      position: relative;
+      width: $baseline;
+      height: $baseline;
+
+      & input[type='checkbox'] {
+        position: absolute;
+        // Without the extra 4px, there is an uncheckable area due to the border of the parent element
+        width: calc(100% + 4px);
+        height: calc(100% + 4px);
+        padding: 0;
+        margin: 0;
+        margin-left: -2px;
+        margin-top: -2px;
+        opacity: 0;
+        border-radius: 0;
+        z-index: 1;
+      }
+    }
+
+    &__icon {
+      position: absolute;
+
+      svg {
+        opacity: 0;
+      }
+    }
+
+    &:not(&--read-only) {
+      &:active,
+      &:focus-within,
+      &:focus {
+        .checkbox-input__input,
+        & input[type='checkbox'] {
+          outline: 0;
+          box-shadow: 0 0 3px 3px var(--theme-success-400) !important;
+          border: 1px solid var(--theme-elevation-150);
+        }
+      }
+
+      &:hover {
+        .checkbox-input__input,
+        & input[type='checkbox'] {
+          border-color: var(--theme-elevation-250);
+        }
+      }
+    }
+
+    &:not(&--read-only):not(&--checked) {
+      &:hover {
+        cursor: pointer;
+
+        svg {
+          opacity: 0.2;
+        }
+      }
+    }
+
+    &--checked {
+      .checkbox-input__icon {
+        svg {
+          opacity: 1;
+        }
+      }
+    }
+
+    .checkbox-input__icon {
+      .icon--line {
+        width: 1.4rem;
+        height: 1.4rem;
+      }
+
+      &.partial {
+        svg {
+          opacity: 1;
+        }
+      }
+    }
+
+    &--read-only {
+      .checkbox-input__input {
+        @include readOnly;
+      }
+
+      label {
+        color: var(--theme-elevation-400);
+      }
+    }
+  }
+
+  html[data-theme='light'] {
+    .checkbox {
+      &.error {
+        .checkbox-input__input {
+          @include lightInputError;
+        }
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .checkbox {
+      &.error {
+        .checkbox-input__input {
+          @include darkInputError;
+        }
+      }
+    }
+  }
+}

package/dist/fields/Code/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.scss';
+export declare const CodeField: React.FC<{
+    readonly autoComplete?: string;
+    readonly onMount?: import("@monaco-editor/react").EditorProps["onMount"];
+    readonly path: string;
+    readonly validate?: import("@ruya.sa/payload").CodeFieldValidation;
+} & {
+    readonly field: Omit<import("@ruya.sa/payload").CodeFieldClient, "type"> & Partial<Pick<import("@ruya.sa/payload").CodeFieldClient, "type">>;
+} & Omit<import("@ruya.sa/payload").ClientComponentProps, "customComponents" | "field">>;
+//# sourceMappingURL=index.d.ts.map

package/dist/fields/Code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fields/Code/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAWxE,OAAO,cAAc,CAAA;AAoIrB,eAAO,MAAM,SAAS;;;;;;;wFAAoC,CAAA"}