pcm-shared-components 2.1.403 → 2.1.405

package/dist/components/Reservation/AnimalVehicleDetailsEditor/AnimalFieldsOnceBlock.js

@@ -0,0 +1,262 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Paper, Button, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import { ThemeProvider } from '@mui/system';
+import { createTheme, useTheme } from '@mui/material/styles';
+import * as i18nextLocal from 'i18next';
+import { renderFieldTypeControl } from './fieldTypeControl';
+
+// Collapsed height for a notice block before it needs a "View full ..." link. A handful of lines
+// of admin-entered text/markup fits inside this without ever showing the link at all; anything
+// longer gets clipped here and offered in full through the dialog below.
+const NOTICE_COLLAPSED_MAX_HEIGHT = 160;
+
+// Field-type controls this block ever renders inline (everything else -- 'notice' -- gets its own
+// read-only display, not a live input control).
+const INPUT_FIELD_TYPES = ['text', 'select', 'select_multiple', 'number', 'textarea', 'yes_no', 'date'];
+
+// Full-width field types, same rule AnimalVehicleDetailsEditor's per-item grid uses for its
+// non-orphan fields (a dropdown/textarea/multi-select reads badly squeezed into a half column).
+// This block skips that component's further wrapped-label-promotion pass (labelRefs/wrappedKeys in
+// index.jsx) -- once-per-reservation fields are typically a handful at most, so the extra
+// measurement machinery needed to keep a large tab-per-animal grid's columns aligned isn't worth
+// carrying here too.
+const isFullWidthField = field => ['select', 'textarea', 'select_multiple'].includes(field.type);
+
+// `once_per_reservation`/`content_html` are read from the field object itself first (the flat,
+// "normalized" shape this block's `fields` prop expects -- the same convention
+// AnimalVehicleDetailsEditor's `fieldConfig` already uses for label/options/unit/placeholder: the
+// caller resolves the raw lot_animal_fields.meta payload into flat props before handing fields to
+// either component). A `field.meta.<key>` fallback is also accepted so a caller who instead passes
+// the meta object through unflattened still works.
+const readFieldProp = (field, key) => field[key] !== undefined ? field[key] : field.meta?.[key];
+
+/**
+ * One read-only "View full {label}" notice block: renders `field`'s sanitized content_html inside
+ * a bounded-height container, and only if that content actually overflows the bound does it show a
+ * link that opens the full content in a Dialog. Not exported -- internal to AnimalFieldsOnceBlock,
+ * which is the only place a `type: 'notice'` field ever gets rendered.
+ */
+const NoticeFieldBlock = ({
+  field,
+  i18next
+}) => {
+  const contentRef = useRef(null);
+  const [overflowing, setOverflowing] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  // Already HTML-sanitized server-side before this ever reaches the client -- safe to render as-is.
+  const contentHtml = readFieldProp(field, 'content_html') || '';
+
+  // Measured after mount/paint (useLayoutEffect, not useEffect) so the "View full ..." link never
+  // flashes in for a heartbeat on content that turns out to fit -- same reasoning
+  // AnimalVehicleDetailsEditor's own label-wrap measurement (wrappedKeys, index.jsx) already uses.
+  // Re-checked on window resize too: the height bound is fixed in CSS, but at a narrower viewport
+  // the same HTML can wrap onto more lines and start overflowing where it didn't before.
+  useLayoutEffect(() => {
+    const checkOverflow = () => {
+      const el = contentRef.current;
+      if (!el) return;
+      setOverflowing(el.scrollHeight > el.clientHeight);
+    };
+    checkOverflow();
+    window.addEventListener('resize', checkOverflow);
+    return () => window.removeEventListener('resize', checkOverflow);
+  }, [contentHtml]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col",
+    style: {
+      gap: 4
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    sx: {
+      fontWeight: 500
+    }
+  }, field.label), /*#__PURE__*/React.createElement(Paper, {
+    variant: "outlined",
+    sx: {
+      p: 1.5,
+      borderRadius: 1,
+      bgcolor: 'action.hover',
+      maxHeight: NOTICE_COLLAPSED_MAX_HEIGHT,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    dangerouslySetInnerHTML: {
+      __html: contentHtml
+    }
+  })), overflowing && /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: () => setDialogOpen(true),
+    sx: {
+      alignSelf: 'flex-start',
+      textTransform: 'none',
+      minWidth: 0,
+      p: 0
+    }
+  }, i18next.t('animal.view_full_field', {
+    label: field.label
+  })), /*#__PURE__*/React.createElement(Dialog, {
+    open: dialogOpen,
+    onClose: () => setDialogOpen(false),
+    maxWidth: "sm",
+    fullWidth: true,
+    scroll: "paper"
+  }, /*#__PURE__*/React.createElement(DialogTitle, null, field.label), /*#__PURE__*/React.createElement(DialogContent, {
+    dividers: true
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: contentHtml
+    }
+  })), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setDialogOpen(false)
+  }, i18next.t('common.app.close')))));
+};
+NoticeFieldBlock.propTypes = {
+  field: PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    content_html: PropTypes.string,
+    meta: PropTypes.object
+  }).isRequired,
+  i18next: PropTypes.any.isRequired
+};
+
+/**
+ * Flat, non-tabbed block for a lot's "once per reservation" animal fields: no tabs, no per-animal
+ * chrome, no add/remove -- these are single shared values/notices for the whole reservation, not
+ * one row per animal. Renders two kinds of entries, in whatever order `fields` gives them:
+ *
+ *  - Any input-type field (text/select/number/textarea/yes_no/date/select_multiple) whose config
+ *    opts into `once_per_reservation` -- reuses the exact same `renderFieldTypeControl` that
+ *    AnimalVehicleDetailsEditor's tab-per-animal grid uses (see fieldTypeControl.jsx, this
+ *    directory), so a once-per-reservation field looks and behaves identically to its per-animal
+ *    counterpart.
+ *  - Any `field_type === 'notice'` field -- a read-only sanitized-HTML display, never an input.
+ *    `once_per_reservation` doesn't apply to notices (they're never per-animal to begin with) and
+ *    is ignored for this type.
+ *
+ * `fields` does NOT need to be pre-filtered: this component filters internally (any field that is
+ * neither a notice nor once_per_reservation is silently skipped), so it's safe to pass the lot's
+ * whole field list straight through. Passing an already-filtered subset works identically, since
+ * the filter is idempotent.
+ *
+ * Two usage modes, both through this one component:
+ *  - Editable (staff/guest edit flow): pass `onChange`. Inputs render live and call
+ *    `onChange(field.key, newValue)`.
+ *  - Read-only (review screen): omit `onChange` entirely. Every input control renders disabled
+ *    (MUI's own disabled/read-only appearance) instead of interactive -- there is no second
+ *    "read-only variant" component to import, this is the same export either way. The notice
+ *    block's "View full ..." link/dialog behaves identically in both modes, since it was never an
+ *    input.
+ *
+ * ## Importing the component in your project
+ *
+ ```js
+
+ import {AnimalFieldsOnceBlock} from 'pcm-shared-components';
+
+ ```
+ *
+ */
+export const AnimalFieldsOnceBlock = props => {
+  const {
+    fields,
+    values,
+    onChange,
+    className,
+    theme,
+    i18next
+  } = props;
+  const compTheme = theme || useTheme();
+  const defaultTheme = createTheme(compTheme);
+  const relevantFields = fields.filter(field => field.type === 'notice' || INPUT_FIELD_TYPES.includes(field.type) && readFieldProp(field, 'once_per_reservation') === true);
+  if (relevantFields.length === 0) return null;
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid grid-cols-2",
+    style: {
+      columnGap: 12,
+      rowGap: 16,
+      gridAutoFlow: 'row dense'
+    }
+  }, relevantFields.map(field => {
+    if (field.type === 'notice') {
+      return /*#__PURE__*/React.createElement("div", {
+        key: field.key,
+        className: "col-span-full"
+      }, /*#__PURE__*/React.createElement(NoticeFieldBlock, {
+        field: field,
+        i18next: i18next
+      }));
+    }
+    const rawValue = values?.[field.key] ?? (field.type === 'select_multiple' ? [] : '');
+    const labelText = field.required ? `${field.label} *` : field.label;
+    return /*#__PURE__*/React.createElement("div", {
+      key: field.key,
+      className: isFullWidthField(field) ? 'col-span-full' : undefined
+    }, /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      sx: {
+        fontWeight: 500,
+        mb: 0.5
+      }
+    }, labelText), renderFieldTypeControl({
+      field,
+      value: rawValue,
+      // Read-only mode (no onChange prop): the control renders disabled, so this
+      // handler is unreachable -- still a no-op rather than undefined, in case a
+      // consumer's own event wiring calls it directly in a test.
+      onChange: onChange ? newValue => onChange(field.key, newValue) : () => {},
+      disabled: !onChange,
+      error: false,
+      helperText: '',
+      i18next
+    }));
+  }))));
+};
+AnimalFieldsOnceBlock.defaultProps = {
+  fields: [],
+  values: {},
+  onChange: undefined,
+  className: 'w-full',
+  theme: undefined,
+  i18next: i18nextLocal
+};
+AnimalFieldsOnceBlock.propTypes = {
+  /** The lot's field configs -- does not need to be pre-filtered, see the component doc above.
+   * Normalized to the same flat shape AnimalVehicleDetailsEditor's `fieldConfig` already uses
+   * (label/options/unit/placeholder resolved by the caller), plus this feature's two additions:
+   * `once_per_reservation` (input types) and `content_html` (type 'notice'). Both are also read
+   * from `field.meta.<key>` as a fallback if a caller passes the meta object through unflattened. */
+  fields: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['text', 'number', 'select', 'select_multiple', 'textarea', 'yes_no', 'date', 'notice']).isRequired,
+    required: PropTypes.bool,
+    options: PropTypes.arrayOf(PropTypes.string),
+    unit: PropTypes.string,
+    placeholder: PropTypes.string,
+    maxLength: PropTypes.number,
+    once_per_reservation: PropTypes.bool,
+    content_html: PropTypes.string,
+    meta: PropTypes.object
+  })),
+  /** One animal's `field_values`, keyed by field.key -- safe to read from any single animal row
+   * since once-per-reservation values are kept synced identically across every animal. */
+  values: PropTypes.object,
+  /** (fieldKey, value) => void. Omit entirely to render every input control disabled/read-only
+   * (review-screen usage) -- see the component doc above. */
+  onChange: PropTypes.func,
+  /** Classes applied to the component's own wrapper div. */
+  className: PropTypes.string,
+  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used. */
+  theme: PropTypes.object,
+  /** The i18next instance to translate with -- pass your own if the default singleton import isn't the one your app initialized. */
+  i18next: PropTypes.any
+};
+export default AnimalFieldsOnceBlock;

package/dist/components/Reservation/AnimalVehicleDetailsEditor/fieldTypeControl.js

@@ -0,0 +1,189 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { TextField, InputAdornment, MenuItem, ToggleButton, ToggleButtonGroup, Checkbox, ListItemText, Chip } from '@mui/material';
+
+// A native <input type="date"> only opens its calendar popup on its own when the browser's tiny
+// built-in icon is clicked -- clicking anywhere else in the field just places the text caret
+// (still lets someone type the year/month/day directly, which showPicker() doesn't change). Most
+// people expect clicking anywhere in the box to open the calendar. showPicker() is Chrome/Edge/
+// Firefox only as of this writing (not Safari) and throws if called on a disabled/read-only input
+// or outside a user gesture, so this fails silently rather than breaking the click -- on an
+// unsupported browser, the field just falls back to manual typing and the browser's own
+// icon-click affordance, exactly as before.
+export const openNativeDatePicker = e => {
+  try {
+    e.target.showPicker?.();
+  } catch {
+    // ignore -- unsupported browser or transient DOM state, typing/icon-click still work
+  }
+};
+
+/**
+ * Renders the single form control for one {field, value, onChange} triple across every field type
+ * this feature knows about: text / number / select / select_multiple / textarea / yes_no / date
+ * (unknown/legacy types fall back to plain text, same as before). Pulled out of the per-item field
+ * grid in `index.jsx` (AnimalVehicleDetailsEditor's tab-per-animal editor) so
+ * `AnimalFieldsOnceBlock`'s flat once-per-reservation layout, in the same directory, can render the
+ * exact same controls without a second copy of this switch. Both call sites feed it the same shape
+ * and get back one MUI element (`<TextField>` / `<ToggleButtonGroup>`).
+ *
+ * Deliberately NOT responsible for:
+ *  - The "drifted value" read-only display (a stored value that no longer matches the field's
+ *    current type/options) -- that's a meta-concern about which control to show at all, decided by
+ *    the caller before it ever gets here, not part of "how do I render a control of this type".
+ *  - The required-field error caption under a `yes_no` control -- both call sites render that
+ *    themselves right after this control, since its spacing differs slightly between the tab grid
+ *    and the flat once-block layout.
+ *
+ * @param {object} params
+ * @param {object} params.field - `{ key, type, label, options?, unit?, placeholder?, maxLength? }`.
+ *   Only `key`/`type` and the type-specific extras are read here; `label`/`required` are the
+ *   caller's concern (rendered outside this function).
+ * @param {*} params.value - Current value, already shaped for `field.type` (string for
+ *   text/select/number/date, array for select_multiple, boolean|null for yes_no).
+ * @param {(value: *) => void} params.onChange - Called with the new value in that same shape.
+ *   Callers needing an (itemId, key, value) or (key, value) signature wrap it, e.g.
+ *   `(v) => onFieldChange(item.id, field.key, v)`.
+ * @param {boolean} [params.disabled] - Renders the control disabled (read-only review usage).
+ * @param {boolean} [params.error] - Error/invalid styling.
+ * @param {string} [params.helperText] - Helper/error text under the control. Caller decides
+ *   whether that's a required-field message or blank -- this function doesn't compute it.
+ * @param {object} params.i18next - i18next instance, for this function's own small vocabulary
+ *   (the select placeholder, Yes/No toggle labels).
+ * @returns {JSX.Element}
+ */
+export const renderFieldTypeControl = ({
+  field,
+  value,
+  onChange,
+  disabled,
+  error,
+  helperText,
+  i18next
+}) => {
+  const commonProps = {
+    name: field.key,
+    variant: 'outlined',
+    size: 'small',
+    error,
+    helperText,
+    fullWidth: true,
+    disabled
+  };
+  switch (field.type) {
+    case 'number':
+      return /*#__PURE__*/React.createElement(TextField, _extends({}, commonProps, {
+        value: value,
+        onChange: e => onChange(e.target.value),
+        onKeyDown: e => {
+          if (e.key === 'e' || e.key === 'E') e.preventDefault();
+        },
+        inputProps: {
+          maxLength: field.maxLength || 45
+        },
+        type: "number",
+        placeholder: field.placeholder,
+        InputProps: {
+          endAdornment: field.unit ? /*#__PURE__*/React.createElement(InputAdornment, {
+            position: "end"
+          }, field.unit) : undefined
+        }
+      }));
+    case 'select':
+      return /*#__PURE__*/React.createElement(TextField, _extends({
+        select: true
+      }, commonProps, {
+        value: value,
+        onChange: e => onChange(e.target.value)
+      }), /*#__PURE__*/React.createElement(MenuItem, {
+        value: ""
+      }, /*#__PURE__*/React.createElement("em", null, field.placeholder || i18next.t('common.app.select'))), (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
+        key: opt,
+        value: opt
+      }, opt)));
+    case 'textarea':
+      return /*#__PURE__*/React.createElement(TextField, _extends({}, commonProps, {
+        value: value,
+        onChange: e => onChange(e.target.value),
+        inputProps: {
+          maxLength: field.maxLength || 45
+        },
+        placeholder: field.placeholder,
+        multiline: true,
+        rows: 3
+      }));
+    case 'select_multiple':
+      {
+        const selectedValues = Array.isArray(value) ? value : [];
+        return /*#__PURE__*/React.createElement(TextField, _extends({
+          select: true
+        }, commonProps, {
+          value: selectedValues,
+          onChange: e => onChange(e.target.value),
+          SelectProps: {
+            multiple: true,
+            renderValue: selected => /*#__PURE__*/React.createElement("div", {
+              className: "flex flex-wrap gap-4"
+            }, selected.map(opt => /*#__PURE__*/React.createElement(Chip, {
+              key: opt,
+              label: opt,
+              size: "small"
+            })))
+          }
+        }), (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
+          key: opt,
+          value: opt
+        }, /*#__PURE__*/React.createElement(Checkbox, {
+          checked: selectedValues.indexOf(opt) > -1
+        }), /*#__PURE__*/React.createElement(ListItemText, {
+          primary: opt
+        }))));
+      }
+    case 'yes_no':
+      {
+        const toggleValue = value === true ? 'yes' : value === false ? 'no' : null;
+        return /*#__PURE__*/React.createElement(ToggleButtonGroup, {
+          value: toggleValue,
+          exclusive: true,
+          onChange: (_, val) => {
+            if (!disabled && val !== null) onChange(val === 'yes');
+          },
+          fullWidth: true,
+          size: "small",
+          color: error ? 'error' : 'standard',
+          disabled: disabled
+        }, /*#__PURE__*/React.createElement(ToggleButton, {
+          value: "yes"
+        }, i18next.t('common.app.yes')), /*#__PURE__*/React.createElement(ToggleButton, {
+          value: "no"
+        }, i18next.t('common.app.no')));
+      }
+    case 'date':
+      // Native date input, not each host app's own local DateTimeField wrapper -- this component
+      // can't depend on either app's app-local component tree. Value is a plain 'YYYY-MM-DD'
+      // string in and out, same convention both apps already use for this field type.
+      return /*#__PURE__*/React.createElement(TextField, _extends({}, commonProps, {
+        type: "date",
+        value: value,
+        onChange: e => onChange(e.target.value),
+        InputLabelProps: {
+          shrink: true
+        },
+        inputProps: {
+          onClick: openNativeDatePicker
+        }
+      }));
+    default:
+      // 'text' (default/unknown type too, for backward compat).
+      return /*#__PURE__*/React.createElement(TextField, _extends({}, commonProps, {
+        value: value,
+        onChange: e => onChange(e.target.value),
+        inputProps: {
+          maxLength: field.maxLength || 45
+        },
+        type: "text",
+        placeholder: field.placeholder
+      }));
+  }
+};
+export default renderFieldTypeControl;

package/dist/components/Reservation/AnimalVehicleDetailsEditor/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { TextField, Icon, IconButton, Button, Paper, Typography, InputAdornment, MenuItem, ToggleButton, ToggleButtonGroup, Checkbox, ListItemText, Chip, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
+import { Icon, IconButton, Button, Paper, Typography, Chip, Alert, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
 import { ThemeProvider } from '@mui/system';
 import { createTheme, useTheme, alpha } from '@mui/material/styles';
 import AddIcon from '@mui/icons-material/Add';
@@ -9,6 +9,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import * as i18nextLocal from 'i18next';
 import { classifyAnimalFieldValue } from '../animalFieldDrift';
+import { renderFieldTypeControl } from './fieldTypeControl';
 
 // Every visible string this component owns lives under these two pre-existing i18next namespaces
 // (already shared across both PitchCamp apps via pcm-shared-components' translations.json). Keyed
@@ -54,22 +55,6 @@ const REQUIRED_ERROR_KEY_BY_TYPE = {
   yes_no: 'animal.required_error_yes_no'
 };
 
-// A native <input type="date"> only opens its calendar popup on its own when the browser's tiny
-// built-in icon is clicked -- clicking anywhere else in the field just places the text caret
-// (still lets someone type the year/month/day directly, which showPicker() doesn't change). Most
-// people expect clicking anywhere in the box to open the calendar. showPicker() is Chrome/Edge/
-// Firefox only as of this writing (not Safari) and throws if called on a disabled/read-only input
-// or outside a user gesture, so this fails silently rather than breaking the click -- on an
-// unsupported browser, the field just falls back to manual typing and the browser's own
-// icon-click affordance, exactly as before.
-const openNativeDatePicker = e => {
-  try {
-    e.target.showPicker?.();
-  } catch {
-    // ignore -- unsupported browser or transient DOM state, typing/icon-click still work
-  }
-};
-
 /**
  * Tab-per-item editor for a lot's animal or vehicle detail fields: one tab per item (green
  * check when every required field is answered, amber warning triangle otherwise), an "Add"
@@ -419,148 +404,19 @@ export const AnimalVehicleDetailsEditor = props => {
             p: 0
           }
         }, i18next.t('animal.field_drifted_replace'))));
-      } else if (field.type === 'number') {
-        control = /*#__PURE__*/React.createElement(TextField, {
-          name: field.key,
-          value: value,
-          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-          onKeyDown: e => {
-            if (e.key === 'e' || e.key === 'E') e.preventDefault();
-          },
-          variant: "outlined",
-          size: "small",
-          error: showError,
-          helperText: showError ? requiredErrorText(field.type) : '',
-          inputProps: {
-            maxLength: field.maxLength || 45
-          },
-          type: "number",
-          placeholder: field.placeholder,
-          fullWidth: true,
-          InputProps: {
-            endAdornment: field.unit ? /*#__PURE__*/React.createElement(InputAdornment, {
-              position: "end"
-            }, field.unit) : undefined
-          }
-        });
-      } else if (field.type === 'select') {
-        control = /*#__PURE__*/React.createElement(TextField, {
-          select: true,
-          name: field.key,
-          value: value,
-          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-          variant: "outlined",
-          size: "small",
-          error: showError,
-          helperText: showError ? requiredErrorText(field.type) : '',
-          fullWidth: true
-        }, /*#__PURE__*/React.createElement(MenuItem, {
-          value: ""
-        }, /*#__PURE__*/React.createElement("em", null, field.placeholder || i18next.t('common.app.select'))), (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
-          key: opt,
-          value: opt
-        }, opt)));
-      } else if (field.type === 'textarea') {
-        control = /*#__PURE__*/React.createElement(TextField, {
-          name: field.key,
-          value: value,
-          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-          variant: "outlined",
-          size: "small",
-          error: showError,
-          helperText: showError ? requiredErrorText(field.type) : '',
-          inputProps: {
-            maxLength: field.maxLength || 45
-          },
-          placeholder: field.placeholder,
-          multiline: true,
-          rows: 3,
-          fullWidth: true
-        });
-      } else if (field.type === 'select_multiple') {
-        const selectedValues = Array.isArray(value) ? value : [];
-        control = /*#__PURE__*/React.createElement(TextField, {
-          select: true,
-          name: field.key,
-          value: selectedValues,
-          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-          variant: "outlined",
-          size: "small",
-          error: showError,
-          helperText: showError ? requiredErrorText(field.type) : '',
-          fullWidth: true,
-          SelectProps: {
-            multiple: true,
-            renderValue: selected => /*#__PURE__*/React.createElement("div", {
-              className: "flex flex-wrap gap-4"
-            }, selected.map(opt => /*#__PURE__*/React.createElement(Chip, {
-              key: opt,
-              label: opt,
-              size: "small"
-            })))
-          }
-        }, (field.options || []).map(opt => /*#__PURE__*/React.createElement(MenuItem, {
-          key: opt,
-          value: opt
-        }, /*#__PURE__*/React.createElement(Checkbox, {
-          checked: selectedValues.indexOf(opt) > -1
-        }), /*#__PURE__*/React.createElement(ListItemText, {
-          primary: opt
-        }))));
-      } else if (field.type === 'yes_no') {
-        const toggleValue = value === true ? 'yes' : value === false ? 'no' : null;
-        control = /*#__PURE__*/React.createElement(ToggleButtonGroup, {
-          value: toggleValue,
-          exclusive: true,
-          onChange: (_, val) => {
-            if (val !== null) onFieldChange(selectedItem.id, field.key, val === 'yes');
-          },
-          fullWidth: true,
-          size: "small",
-          color: showError ? 'error' : 'standard'
-        }, /*#__PURE__*/React.createElement(ToggleButton, {
-          value: "yes"
-        }, i18next.t('common.app.yes')), /*#__PURE__*/React.createElement(ToggleButton, {
-          value: "no"
-        }, i18next.t('common.app.no')));
-      } else if (field.type === 'date') {
-        // Native date input, not each host app's own local DateTimeField wrapper --
-        // this component can't depend on either app's app-local component tree.
-        // Value is a plain 'YYYY-MM-DD' string in and out, same convention both apps
-        // already use for this field type.
-        control = /*#__PURE__*/React.createElement(TextField, {
-          name: field.key,
-          type: "date",
-          value: value,
-          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-          variant: "outlined",
-          size: "small",
-          error: showError,
-          helperText: showError ? requiredErrorText(field.type) : '',
-          fullWidth: true,
-          InputLabelProps: {
-            shrink: true
-          },
-          inputProps: {
-            onClick: openNativeDatePicker
-          }
-        });
       } else {
-        // 'text' (default/unknown type too, for backward compat)
-        control = /*#__PURE__*/React.createElement(TextField, {
-          name: field.key,
-          value: value,
-          onChange: e => onFieldChange(selectedItem.id, field.key, e.target.value),
-          variant: "outlined",
-          size: "small",
+        // Every live (non-drifted) control, for every field type this component
+        // knows about, is one call into the extracted, reusable renderer -- see
+        // fieldTypeControl.jsx in this same directory. AnimalFieldsOnceBlock (also
+        // in this directory) calls the exact same function for its once-per-
+        // reservation fields, so the two never carry separate copies of this switch.
+        control = renderFieldTypeControl({
+          field,
+          value,
+          onChange: newValue => onFieldChange(selectedItem.id, field.key, newValue),
           error: showError,
           helperText: showError ? requiredErrorText(field.type) : '',
-          inputProps: {
-            maxLength: field.maxLength || 45
-          },
-          type: "text",
-          placeholder: field.placeholder,
-          fullWidth: true
+          i18next
         });
       }
       return /*#__PURE__*/React.createElement("div", {

package/dist/components/Reservation/animalFieldDrift.js

@@ -38,6 +38,16 @@ export const classifyAnimalFieldValue = (fieldConfig, rawValue) => {
     type,
     options
   } = fieldConfig;
+
+  // notice fields are never per-animal and never have a value to hold in the first place (see the
+  // shared lot_animal_fields.meta contract) -- always 'unanswered' regardless of any stray content
+  // that might still be sitting in field_values under this key (e.g. left over from before the
+  // field was retyped to 'notice'), so a caller filtering on `!== 'unanswered'` never shows a
+  // spurious 'drifted' warning for a field that was never answerable to begin with. Every consumer
+  // in the app/ repo already excludes 'notice' from this call entirely (see DetailsSummary.jsx /
+  // Occupant.js's per-animal vs. once-per-reservation field split), so this is a defensive fallback
+  // for any other/future caller that passes one through unfiltered.
+  if (type === 'notice') return 'unanswered';
   if (type === 'yes_no') {
     if (typeof rawValue === 'boolean') return 'answered';
     return hasWrongShapeContent(rawValue) ? 'drifted' : 'unanswered';

package/dist/index.js

@@ -37,5 +37,6 @@ import VerticalImageTile from './components/Images/VerticalImageTile';
 import EventCard from './components/Cards/EventCard';
 import ImageAssets from './components/Icons/ImageAssets';
 import AnimalVehicleDetailsEditor from './components/Reservation/AnimalVehicleDetailsEditor';
+import { AnimalFieldsOnceBlock } from './components/Reservation/AnimalVehicleDetailsEditor/AnimalFieldsOnceBlock';
 import { classifyAnimalFieldValue } from './components/Reservation/animalFieldDrift';
-export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, ProductItemButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, DateCalendar, SimpleLabel, CurrencyTextInput, ImageStack, PlatformPaymentPlans, PlatformPlanTitles, PlatformPlanPrices, LoadingBackdrop, SimpleAccordion, PricingCalendar, FancyDate, HorizontalImageTile, VerticalImageTile, EventCard, ImageAssets, AnimalVehicleDetailsEditor, classifyAnimalFieldValue };
+export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, ProductItemButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, DateCalendar, SimpleLabel, CurrencyTextInput, ImageStack, PlatformPaymentPlans, PlatformPlanTitles, PlatformPlanPrices, LoadingBackdrop, SimpleAccordion, PricingCalendar, FancyDate, HorizontalImageTile, VerticalImageTile, EventCard, ImageAssets, AnimalVehicleDetailsEditor, AnimalFieldsOnceBlock, classifyAnimalFieldValue };

package/dist/languages/en/translations.json

@@ -41,7 +41,8 @@
     "field_drifted_replace": "Enter a new answer",
     "field_removed": "This question no longer exists in this lot's setup.",
     "historical_answers_title": "Historical Answers",
-    "historical_answers_hint": "These questions are no longer part of this lot's setup and can't be edited."
+    "historical_answers_hint": "These questions are no longer part of this lot's setup and can't be edited.",
+    "view_full_field": "View full {{label}}"
   },
   "app": {
     "common": {
@@ -2464,6 +2465,11 @@
         "field_type_yes_no": "Yes / No",
         "field_type_date": "Date",
         "field_type_select_multiple": "Dropdown (Select Multiple)",
+        "field_type_notice": "Notice",
+        "ask_once_per_reservation": "Ask once per reservation",
+        "once_per_reservation_helper": "Shown once for the whole reservation instead of once per animal.",
+        "notice_content_label": "Notice content",
+        "notice_preview_label": "Preview",
         "options_label": "Options",
         "add_option": "Add Option",
         "unit_label": "Unit",

package/dist/languages/es/translations.json

@@ -41,7 +41,8 @@
     "field_drifted_replace": "Ingrese una nueva respuesta",
     "field_removed": "Esta pregunta ya no existe en la configuración de este lote.",
     "historical_answers_title": "Respuestas Históricas",
-    "historical_answers_hint": "Estas preguntas ya no forman parte de la configuración de este lote y no se pueden editar."
+    "historical_answers_hint": "Estas preguntas ya no forman parte de la configuración de este lote y no se pueden editar.",
+    "view_full_field": "Ver {{label}} completo"
   },
   "app": {
     "common": {
@@ -2464,6 +2465,11 @@
         "field_type_yes_no": "Sí / No",
         "field_type_date": "Fecha",
         "field_type_select_multiple": "Desplegable (Seleccionar varios)",
+        "field_type_notice": "Aviso",
+        "ask_once_per_reservation": "Preguntar una sola vez por reserva",
+        "once_per_reservation_helper": "Se muestra una sola vez para toda la reserva, en lugar de una vez por animal.",
+        "notice_content_label": "Contenido del aviso",
+        "notice_preview_label": "Vista previa",
         "options_label": "Opciones",
         "add_option": "Agregar opción",
         "unit_label": "Unidad",

package/dist/languages/fr/translations.json

@@ -41,7 +41,8 @@
     "field_drifted_replace": "Entrez une nouvelle réponse",
     "field_removed": "Cette question n'existe plus dans la configuration de ce terrain.",
     "historical_answers_title": "Réponses Historiques",
-    "historical_answers_hint": "Ces questions ne font plus partie de la configuration de ce terrain et ne peuvent pas être modifiées."
+    "historical_answers_hint": "Ces questions ne font plus partie de la configuration de ce terrain et ne peuvent pas être modifiées.",
+    "view_full_field": "Voir {{label}} en entier"
   },
   "app": {
     "common": {
@@ -2464,6 +2465,11 @@
         "field_type_yes_no": "Oui / Non",
         "field_type_date": "Date",
         "field_type_select_multiple": "Liste déroulante (Sélectionner plusieurs)",
+        "field_type_notice": "Avis",
+        "ask_once_per_reservation": "Demander une seule fois par réservation",
+        "once_per_reservation_helper": "Affiché une seule fois pour toute la réservation, plutôt que pour chaque animal.",
+        "notice_content_label": "Contenu de l'avis",
+        "notice_preview_label": "Aperçu",
         "options_label": "Options",
         "add_option": "Ajouter une option",
         "unit_label": "Unité",

package/dist/styles/tailwind.css

@@ -1 +1 @@
-*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-top-2{top:-.2rem}.-top-6{top:-.6rem}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.top-20{top:2rem}.top-64{top:6.4rem}.z-10{z-index:10}.z-99{z-index:99}.col-span-full{grid-column:1/-1}.m-10{margin:1rem}.m-12{margin:1.2rem}.m-24{margin:2.4rem}.m-4{margin:.4rem}.m-6{margin:.6rem}.m-auto{margin:auto}.mx-0{margin-left:0;margin-right:0}.mx-12{margin-left:1.2rem;margin-right:1.2rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.mx-4{margin-left:.4rem;margin-right:.4rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-24{margin-top:2.4rem;margin-bottom:2.4rem}.my-4{margin-top:.4rem;margin-bottom:.4rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.-ml-10{margin-left:-1rem}.mb-0{margin-bottom:0}.mb-12{margin-bottom:1.2rem}.mb-2{margin-bottom:.2rem}.mb-24{margin-bottom:2.4rem}.mb-6{margin-bottom:.6rem}.mb-8{margin-bottom:.8rem}.ml-0{margin-left:0}.ml-1{margin-left:.1rem}.ml-12{margin-left:1.2rem}.ml-24{margin-left:2.4rem}.ml-6{margin-left:.6rem}.ml-8{margin-left:.8rem}.mr-0{margin-right:0}.mr-12{margin-right:1.2rem}.mr-24{margin-right:2.4rem}.mr-6{margin-right:.6rem}.mt-0{margin-top:0}.mt-12{margin-top:1.2rem}.mt-24{margin-top:2.4rem}.mt-4{margin-top:.4rem}.mt-6{margin-top:.6rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-136{height:13.6rem}.h-200{height:20rem}.h-24{height:2.4rem}.h-400{height:40rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-32{max-height:3.2rem}.max-h-512{max-height:51.2rem}.min-h-160{min-height:16rem}.min-h-224{min-height:22.4rem}.min-h-256{min-height:25.6rem}.w-1\/2{width:50%}.w-2\/5{width:40%}.w-24{width:2.4rem}.w-3\/4{width:75%}.w-auto{width:auto}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-min{max-width:-moz-min-content;max-width:min-content}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:.4rem}.gap-6{gap:.6rem}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.4rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.8rem}.rounded-md{border-radius:.6rem}.rounded-t-md{border-top-left-radius:.6rem;border-top-right-radius:.6rem}.rounded-bl-lg{border-bottom-left-radius:.8rem}.rounded-br-lg{border-bottom-right-radius:.8rem}.rounded-tl-lg{border-top-left-radius:.8rem}.rounded-tr-lg{border-top-right-radius:.8rem}.border{border-width:1px}.border-2{border-width:2px}.border-t-8{border-top-width:8px}.border-transparent{border-color:#0000}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity,1))}.bg-blue{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(66 66 66/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity,1))}.bg-grey-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-grey-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100\/50{background-color:#fff9c480}.bg-cover{background-size:cover}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:1rem}.p-12{padding:1.2rem}.p-24{padding:2.4rem}.p-6{padding:.6rem}.px-2{padding-left:.2rem;padding-right:.2rem}.px-4{padding-left:.4rem;padding-right:.4rem}.px-6{padding-left:.6rem;padding-right:.6rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-4{padding-left:.4rem}.pl-8{padding-left:.8rem}.pr-0{padding-right:0}.pr-6{padding-right:.6rem}.pt-0{padding-top:0}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.font-serif{font-family:Georgia,Cambria,Times New Roman,Times,serif}.text-14{font-size:1.4rem}.text-16{font-size:1.6rem}.text-17{font-size:1.7rem}.text-24,.text-2xl{font-size:2.4rem}.text-2xl{line-height:3.2rem}.text-32{font-size:3.2rem}.text-4xl{font-size:3.6rem;line-height:4rem}.text-5xl{font-size:4.8rem;line-height:1}.text-6xl{font-size:6rem;line-height:1}.text-base{font-size:1.6rem;line-height:2.4rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.font-500{font-weight:500}.font-600{font-weight:600}.font-800{font-weight:800}.font-900{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.text-gray-300{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(67 160 71/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(56 142 60/var(--tw-text-opacity,1))}.text-grey-800{--tw-text-opacity:1;color:rgb(66 66 66/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(251 140 0/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.decoration-gray-500{text-decoration-color:#9e9e9e}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-1{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-1{--tw-shadow:0px 2px 1px -1px #0003,0px 1px 1px 0px #00000024,0px 1px 3px 0px #0000001f;--tw-shadow-colored:0px 2px 1px -1px var(--tw-shadow-color),0px 1px 1px 0px var(--tw-shadow-color),0px 1px 3px 0px var(--tw-shadow-color)}.shadow-2{--tw-shadow:0px 3px 1px -2px #0003,0px 2px 2px 0px #00000024,0px 1px 5px 0px #0000001f;--tw-shadow-colored:0px 3px 1px -2px var(--tw-shadow-color),0px 2px 2px 0px var(--tw-shadow-color),0px 1px 5px 0px var(--tw-shadow-color)}.shadow-2,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -1px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.contrast-0{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.contrast-0{--tw-contrast:contrast(0)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.drop-shadow,.drop-shadow-none{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:translate-y-1:hover{--tw-translate-y:0.1rem}.hover\:rotate-3:hover,.hover\:translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-3:hover{--tw-rotate:3deg}.hover\:skew-y-3:hover{--tw-skew-y:3deg}.hover\:scale-105:hover,.hover\:skew-y-3:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:list-disc:hover{list-style-type:disc}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity,1))}.hover\:bg-grey-300:hover{--tw-bg-opacity:1;background-color:rgb(224 224 224/var(--tw-bg-opacity,1))}.hover\:bg-indigo-100\/25:hover{background-color:#c5cae940}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-75:hover{--tw-brightness:brightness(.75)}.hover\:brightness-75:hover,.hover\:drop-shadow-2xl:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:drop-shadow-2xl:hover{--tw-drop-shadow:drop-shadow(0 25px 25px #00000026)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:600px){.sm\:p-8{padding:.8rem}}@media (min-width:960px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:ml-12{margin-left:1.2rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:max-w-288{max-width:28.8rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:pt-0{padding-top:0}}@media (prefers-color-scheme:dark){.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity,1))}.dark\:text-green-500{--tw-text-opacity:1;color:rgb(76 175 80/var(--tw-text-opacity,1))}.dark\:text-orange-500{--tw-text-opacity:1;color:rgb(255 152 0/var(--tw-text-opacity,1))}}
+*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-top-2{top:-.2rem}.-top-6{top:-.6rem}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.top-20{top:2rem}.top-64{top:6.4rem}.z-10{z-index:10}.z-99{z-index:99}.col-span-full{grid-column:1/-1}.m-10{margin:1rem}.m-12{margin:1.2rem}.m-24{margin:2.4rem}.m-4{margin:.4rem}.m-6{margin:.6rem}.m-auto{margin:auto}.mx-0{margin-left:0;margin-right:0}.mx-12{margin-left:1.2rem;margin-right:1.2rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.mx-4{margin-left:.4rem;margin-right:.4rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-24{margin-top:2.4rem;margin-bottom:2.4rem}.my-4{margin-top:.4rem;margin-bottom:.4rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.-ml-10{margin-left:-1rem}.mb-0{margin-bottom:0}.mb-12{margin-bottom:1.2rem}.mb-2{margin-bottom:.2rem}.mb-24{margin-bottom:2.4rem}.mb-6{margin-bottom:.6rem}.mb-8{margin-bottom:.8rem}.ml-0{margin-left:0}.ml-1{margin-left:.1rem}.ml-12{margin-left:1.2rem}.ml-24{margin-left:2.4rem}.ml-6{margin-left:.6rem}.ml-8{margin-left:.8rem}.mr-0{margin-right:0}.mr-12{margin-right:1.2rem}.mr-24{margin-right:2.4rem}.mr-6{margin-right:.6rem}.mt-0{margin-top:0}.mt-12{margin-top:1.2rem}.mt-24{margin-top:2.4rem}.mt-4{margin-top:.4rem}.mt-6{margin-top:.6rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-136{height:13.6rem}.h-200{height:20rem}.h-24{height:2.4rem}.h-400{height:40rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-32{max-height:3.2rem}.max-h-512{max-height:51.2rem}.min-h-160{min-height:16rem}.min-h-224{min-height:22.4rem}.min-h-256{min-height:25.6rem}.w-1\/2{width:50%}.w-2\/5{width:40%}.w-24{width:2.4rem}.w-3\/4{width:75%}.w-auto{width:auto}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-min{max-width:-moz-min-content;max-width:min-content}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-4{gap:.4rem}.gap-6{gap:.6rem}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.4rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.8rem}.rounded-md{border-radius:.6rem}.rounded-t-md{border-top-left-radius:.6rem;border-top-right-radius:.6rem}.rounded-bl-lg{border-bottom-left-radius:.8rem}.rounded-br-lg{border-bottom-right-radius:.8rem}.rounded-tl-lg{border-top-left-radius:.8rem}.rounded-tr-lg{border-top-right-radius:.8rem}.border{border-width:1px}.border-2{border-width:2px}.border-t-8{border-top-width:8px}.border-transparent{border-color:#0000}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity,1))}.bg-blue{--tw-bg-opacity:1;background-color:rgb(33 150 243/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(66 66 66/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity,1))}.bg-grey-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-grey-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-yellow-100\/50{background-color:#fff9c480}.bg-cover{background-size:cover}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:1rem}.p-12{padding:1.2rem}.p-24{padding:2.4rem}.p-6{padding:.6rem}.px-2{padding-left:.2rem;padding-right:.2rem}.px-4{padding-left:.4rem;padding-right:.4rem}.px-6{padding-left:.6rem;padding-right:.6rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.py-4{padding-top:.4rem;padding-bottom:.4rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-4{padding-left:.4rem}.pl-8{padding-left:.8rem}.pr-0{padding-right:0}.pr-6{padding-right:.6rem}.pt-0{padding-top:0}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.text-left{text-align:left}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.font-serif{font-family:Georgia,Cambria,Times New Roman,Times,serif}.text-14{font-size:1.4rem}.text-16{font-size:1.6rem}.text-17{font-size:1.7rem}.text-24,.text-2xl{font-size:2.4rem}.text-2xl{line-height:3.2rem}.text-32{font-size:3.2rem}.text-4xl{font-size:3.6rem;line-height:4rem}.text-5xl{font-size:4.8rem;line-height:1}.text-6xl{font-size:6rem;line-height:1}.text-base{font-size:1.6rem;line-height:2.4rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.font-500{font-weight:500}.font-600{font-weight:600}.font-800{font-weight:800}.font-900{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.text-gray-300{--tw-text-opacity:1;color:rgb(224 224 224/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(67 160 71/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(56 142 60/var(--tw-text-opacity,1))}.text-grey-800{--tw-text-opacity:1;color:rgb(66 66 66/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(251 140 0/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.decoration-gray-500{text-decoration-color:#9e9e9e}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-1{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-1{--tw-shadow:0px 2px 1px -1px #0003,0px 1px 1px 0px #00000024,0px 1px 3px 0px #0000001f;--tw-shadow-colored:0px 2px 1px -1px var(--tw-shadow-color),0px 1px 1px 0px var(--tw-shadow-color),0px 1px 3px 0px var(--tw-shadow-color)}.shadow-2{--tw-shadow:0px 3px 1px -2px #0003,0px 2px 2px 0px #00000024,0px 1px 5px 0px #0000001f;--tw-shadow-colored:0px 3px 1px -2px var(--tw-shadow-color),0px 2px 2px 0px var(--tw-shadow-color),0px 1px 5px 0px var(--tw-shadow-color)}.shadow-2,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -1px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.contrast-0{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.contrast-0{--tw-contrast:contrast(0)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.drop-shadow,.drop-shadow-none{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:translate-y-1:hover{--tw-translate-y:0.1rem}.hover\:rotate-3:hover,.hover\:translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:rotate-3:hover{--tw-rotate:3deg}.hover\:skew-y-3:hover{--tw-skew-y:3deg}.hover\:scale-105:hover,.hover\:skew-y-3:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:list-disc:hover{list-style-type:disc}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity,1))}.hover\:bg-grey-300:hover{--tw-bg-opacity:1;background-color:rgb(224 224 224/var(--tw-bg-opacity,1))}.hover\:bg-indigo-100\/25:hover{background-color:#c5cae940}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:brightness-75:hover{--tw-brightness:brightness(.75)}.hover\:brightness-75:hover,.hover\:drop-shadow-2xl:hover{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:drop-shadow-2xl:hover{--tw-drop-shadow:drop-shadow(0 25px 25px #00000026)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity,1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:600px){.sm\:p-8{padding:.8rem}}@media (min-width:960px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:ml-12{margin-left:1.2rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:max-w-288{max-width:28.8rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:pt-0{padding-top:0}}@media (prefers-color-scheme:dark){.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity,1))}.dark\:text-green-500{--tw-text-opacity:1;color:rgb(76 175 80/var(--tw-text-opacity,1))}.dark\:text-orange-500{--tw-text-opacity:1;color:rgb(255 152 0/var(--tw-text-opacity,1))}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "2.1.403",
+  "version": "2.1.405",
   "private": false,
   "main": "dist/index.js",
   "babel": {