@crewlethq/ui 0.9.0 → 0.11.0

package/dist/FactList/FactList.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+/** One read-only fact: what it is, its value, and why it cannot be changed here. */
+export interface FactListItem {
+    /** Stable identity within the list. */
+    key: string;
+    /** What the fact is: "Handle", "Placement". */
+    label: ReactNode;
+    /** Its value, as text or a short node (a link, a tag). */
+    value: ReactNode;
+    /**
+     * Why it cannot be changed here, in one sentence. Shown as a tooltip when
+     * the pointer rests on the row, and read by a screen reader after the value;
+     * with one, the row is drawn with a lock.
+     */
+    reason?: string | undefined;
+}
+export interface FactListProps {
+    items: readonly FactListItem[];
+    /** Names the list for a screen reader, where nothing above it does. */
+    label?: string | undefined;
+    className?: string | undefined;
+}
+/**
+ * Facts a form shows and does not edit, as rows in one bordered box: the label
+ * on the left, the value on the right, 32px a row.
+ *
+ * ONE LINE A FACT. A read-only value used to be drawn as a label, the value
+ * and a sentence under it, three lines each, so a form's locked facts
+ * outweighed its fields. The sentence is the row's tooltip now, and the lock
+ * says there is one. It is a description list, so a screen reader reads each
+ * label with its value.
+ */
+export declare function FactList({ items, label, className }: FactListProps): import("react").JSX.Element;

package/dist/FactList/index.d.ts

@@ -0,0 +1,3 @@
+import './FactList.css';
+export { FactList } from './FactList.js';
+export type { FactListItem, FactListProps } from './FactList.js';

package/dist/FactList/index.js

@@ -0,0 +1,6 @@
+export { FactList } from '../chunk-URYDN2KA.js';
+import '../chunk-CQY5NTRS.js';
+import '../chunk-7RPGY3JE.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/FactList-G2H73NFR.css

@@ -0,0 +1,57 @@
+/*
+ * Read-only facts in one bordered box, a 32px row each: label and lock on the
+ * left, the value on the right. The rows share the box's hairline between
+ * them, so a list of six reads as one object rather than six cards.
+ */
+.crewlet-fact-list {
+  display: grid;
+  margin: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.crewlet-fact-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: 32px;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-fact-list__row + .crewlet-fact-list__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-fact-list__row.is-locked {
+  cursor: help;
+}
+
+.crewlet-fact-list__label {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__lock {
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-fact-list__value {
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-secondary);
+  text-align: right;
+  overflow-wrap: anywhere;
+}

package/dist/HuePicker/index.js

@@ -1,7 +1,8 @@
-export { HuePicker } from '../chunk-26TXVHN2.js';
+import '../chunk-EXHQ2QVW.js';
+export { HuePicker } from '../chunk-K5Q2DK3P.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-LPHHDCN3.js';
-import '../chunk-HEOVQZL7.js';
+import '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ImageUpload/index.js

@@ -1,4 +1,4 @@
-export { ImageUpload } from '../chunk-E3HDS4F7.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
+export { ImageUpload } from '../chunk-LAQK4V3Z.js';
+import '../chunk-3UK4VFSK.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Input/FormField.d.ts

@@ -19,6 +19,13 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
     requiredNews?: boolean | undefined;
     /** Where the value comes from, or what shape it takes. */
     helper?: ReactNode;
+    /**
+     * Show the helper only while the field has focus. For a dense form whose
+     * every field carries a sentence: at rest the form is labels and values,
+     * and the sentence appears under the field the reader is in. It stays in
+     * `aria-describedby` either way, so a screen reader hears it on entry.
+     */
+    helperOnFocus?: boolean | undefined;
     /** Why the last value was refused. */
     error?: ReactNode;
     /** A control rendered beside the label, such as an Add button. */
@@ -58,4 +65,4 @@ export interface FormFieldProps extends Omit<HTMLAttributes<HTMLElement>, 'child
  * instant, the only line that said what right looks like disappeared. Both
  * lines are joined into `aria-describedby` in reading order, help first.
  */
-export declare const FormField: ({ label, required, optional, requiredNews, helper, error, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;
+export declare const FormField: ({ label, required, optional, requiredNews, helper, helperOnFocus, error, labelAction, as, describedBy, htmlFor, className, children, ...rest }: FormFieldProps) => import("react").JSX.Element;

package/dist/Input/index.js

@@ -1,4 +1,4 @@
-export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-ZGX2DP7F.js';
+export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Input-DRFNI26F.css → Input-RAKNQJCV.css}

@@ -502,6 +502,13 @@
   color: var(--color-text-tertiary);
 }
 
+/* SHOWN ONLY WHILE THE FIELD HAS FOCUS (`helperOnFocus`): a dense form reads as
+   labels and values at rest, and the sentence appears under the field the
+   reader is in. Still described, so a screen reader hears it on entry. */
+.crewlet-form-field--helper-on-focus:not(:focus-within) .crewlet-form-field__helper {
+  display: none;
+}
+
 /*
  * The error line, on the danger INK. It stays BESIDE the help rather than
  * replacing it: a reader told they are wrong needs the line that says what

package/dist/ListInput/ListInput.d.ts

@@ -10,6 +10,8 @@ export interface ListInputProps {
     multiline?: boolean | undefined;
     /** Where the values come from, or what shape they take. */
     helper?: ReactNode | undefined;
+    /** Show the helper only while the list has focus, as `FormField`'s `helperOnFocus`. */
+    helperOnFocus?: boolean | undefined;
     /** Why the last value was refused. */
     error?: ReactNode | undefined;
     /** Shown in the new-item box. */
@@ -65,4 +67,4 @@ export interface ListInputProps {
  *
  * Ported from the engine dashboard's `ui/ListField.tsx`.
  */
-export declare function ListInput({ label, itemName, value, onChange, multiline, helper, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;
+export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-6HXH57BL.js';
+export { ListInput } from '../chunk-LZP7FGT7.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-ZGX2DP7F.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-LSB3EHBW.js';
+export { Menu } from '../chunk-TFH6SYWB.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-BTHX2FS3.js';
+export { ConfirmModal, Modal } from '../chunk-TEEJSTFG.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgLabel/index.js

@@ -1,4 +1,4 @@
-export { OrgLabel } from '../chunk-J3IS2TOA.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
+export { OrgLabel } from '../chunk-6OF2DBKY.js';
+import '../chunk-3UK4VFSK.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgNode/index.js

@@ -1,5 +1,5 @@
-export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-K7OS4O2U.js';
-import '../chunk-J3IS2TOA.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
+export { OrgNodeDisclosure, OrgNodeLabel, OrgNodeLead } from '../chunk-IHGKPEEV.js';
+import '../chunk-6OF2DBKY.js';
+import '../chunk-3UK4VFSK.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,13 +1,13 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-JB6AN4ZC.js';
-import '../chunk-SX2DFTQV.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-ZMJHK7DR.js';
+import '../chunk-MCPKHYMC.js';
 import '../chunk-S3BCVWTU.js';
-import '../chunk-J3IS2TOA.js';
+import '../chunk-6OF2DBKY.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-74WGARJE.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-3UK4VFSK.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OAH4IEQJ.js';
-import '../chunk-UDW3DAP5.js';
 import '../chunk-BZFWDIV6.js';
+import '../chunk-HI6Q2UXQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl/index.js

@@ -1,6 +1,6 @@
-import '../chunk-UI6HWAWE.js';
-export { SegmentedControl } from '../chunk-LPHHDCN3.js';
-import '../chunk-HEOVQZL7.js';
+import '../chunk-UAQIUSSK.js';
+export { SegmentedControl } from '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Tabs/Tabs.d.ts

@@ -10,10 +10,28 @@ export interface TabsItem {
     icon?: ReactNode;
     /** How many things are behind this tab. Drawn as a Count beside the label. */
     count?: number | null;
+    /**
+     * What needs the reader behind this tab, drawn after the label: problems
+     * as a danger count, a warning or an unsaved change as a 6px dot. It
+     * replaces the count while it is set. `label` is what a screen reader hears.
+     */
+    marker?: TabsMarker | undefined;
     disabled?: boolean;
     /** Any extra props the consumer's renderItem needs to read. */
     [key: string]: unknown;
 }
+/**
+ * A tab's marker. ONE PER TAB, the most urgent: a problem, then a warning,
+ * then a change, so a row of tabs reads as "where is something wrong" first.
+ */
+export type TabsMarker = {
+    tone: 'danger';
+    count: number;
+    label: string;
+} | {
+    tone: 'warning' | 'changed';
+    label: string;
+};
 export interface TabsRenderItemProps {
     item: TabsItem;
     /**

package/dist/Tabs/index.d.ts

@@ -1,3 +1,3 @@
 import './Tabs.css';
 export { TabPanel, Tabs, tabId } from './Tabs.js';
-export type { TabPanelProps, TabsItem, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';
+export type { TabPanelProps, TabsItem, TabsMarker, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-HEOVQZL7.js';
+export { TabPanel, Tabs, tabId } from '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{Tabs-BWFQSWY3.css → Tabs-5I5Q5KKM.css}

@@ -337,3 +337,36 @@
     transition: none;
   }
 }
+
+/* ── markers ──────────────────────────────────────────────────────────────
+   What needs the reader behind a tab: a danger count for problems, a 6px
+   dot for a warning or an unsaved change. One per tab, the most urgent. */
+.crewlet-tabs__marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.crewlet-tabs__marker--danger {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-circle);
+  background: var(--color-feedback-danger-soft);
+  color: var(--color-feedback-danger-ink);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+}
+.crewlet-tabs__marker--warning,
+.crewlet-tabs__marker--changed {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--radius-circle);
+}
+.crewlet-tabs__marker--warning {
+  background: var(--color-feedback-warning);
+}
+.crewlet-tabs__marker--changed {
+  background: var(--color-brand-accent);
+}

package/dist/TagsInput/index.js

@@ -1,10 +1,10 @@
-export { TagsInput } from '../chunk-MPXI6FM6.js';
+export { TagsInput } from '../chunk-7JGWSOLM.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-6MU7HNB4.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,8 +1,8 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-X6K6OZ47.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-WEIINZPA.js';
 export { applyDensity, applyStoredPreferences, applyTheme, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-K3OWD7BJ.js';
-import '../chunk-UI6HWAWE.js';
-import '../chunk-LPHHDCN3.js';
-import '../chunk-HEOVQZL7.js';
+import '../chunk-UAQIUSSK.js';
+import '../chunk-EBBAAQDY.js';
+import '../chunk-JHQUT4WJ.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/TimeWindowPicker/index.js

@@ -1,13 +1,13 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-IZHN5I3H.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-HLBRPES3.js';
 import '../chunk-SEFMO2EV.js';
+import '../chunk-FTEJPHBI.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-ZGX2DP7F.js';
-import '../chunk-PDUZO35I.js';
 import '../chunk-GXQ3B46I.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-PDUZO35I.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-L7THQMFB.js';
+export { TreeCanvas } from '../chunk-5WEVLIB6.js';
 import '../chunk-S3BCVWTU.js';
-import '../chunk-VE6LD3KM.js';
+import '../chunk-2PZBIHRV.js';
 import '../chunk-53DVJCVW.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeGrid/index.js

@@ -1,8 +1,8 @@
-export { TreeGrid } from '../chunk-SX2DFTQV.js';
+export { TreeGrid } from '../chunk-MCPKHYMC.js';
 import '../chunk-S3BCVWTU.js';
 import '../chunk-53DVJCVW.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/chunk-3L5NHASN.js

@@ -0,0 +1 @@
+import './CharacterPicker-ZEYIKUNQ.css';

package/dist/{chunk-OAH4IEQJ.js → chunk-3UK4VFSK.js}

@@ -1,6 +1,6 @@
-import { AVATAR_SIZES, Avatar } from './chunk-UDW3DAP5.js';
+import { AVATAR_SIZES, Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Avatar-JAU77SHZ.css';
+import './Avatar-QHYOFID3.css';
 import './AvatarStack-GEJBNV7E.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -48,7 +48,6 @@ function AvatarStack({
             name: member.name,
             kind: member.kind,
             src: member.src,
-            ring: member.ring,
             character: member.character,
             hue: member.hue,
             size,

package/dist/{chunk-L7THQMFB.js → chunk-5WEVLIB6.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-S3BCVWTU.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-VE6LD3KM.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-2PZBIHRV.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-J3IS2TOA.js → chunk-6OF2DBKY.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-UDW3DAP5.js';
+import { Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OrgLabel-6WSKJQOT.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-IGWPZZIB.js → chunk-6SDGRKQ7.js}

@@ -1,7 +1,7 @@
 import { Kbd } from './chunk-SMBKXWML.js';
+import { Input } from './chunk-FTEJPHBI.js';
 import { useListbox } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-ZGX2DP7F.js';
-import { Modal } from './chunk-BTHX2FS3.js';
+import { Modal } from './chunk-TEEJSTFG.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-EUT7VBQG.js → chunk-CIOKUMVC.js}

@@ -1,16 +1,16 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
+import { DateTimePicker } from './chunk-JCNUQ3US.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { Input } from './chunk-FTEJPHBI.js';
 import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-ZGX2DP7F.js';
-import { DataTable } from './chunk-CVB7O3SZ.js';
-import { Menu } from './chunk-LSB3EHBW.js';
-import { DateTimePicker } from './chunk-5I56UXBJ.js';
+import { DataTable } from './chunk-R4ZJB5YX.js';
+import { Menu } from './chunk-TFH6SYWB.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Popover } from './chunk-PDUZO35I.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataView-N6JX464S.css';

package/dist/{chunk-Y2V3TSQC.js → chunk-DDTDN5L2.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-UDW3DAP5.js';
+import { Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EntityChip-LUCPZBBG.css';
 import { Children, isValidElement, cloneElement } from 'react';

package/dist/{chunk-LPHHDCN3.js → chunk-EBBAAQDY.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-HEOVQZL7.js';
+import { tabId } from './chunk-JHQUT4WJ.js';
 import { useRoving, tabStop } from './chunk-CBOICT64.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-UYK72NOS.js → chunk-ELZKOVEC.js}

@@ -1,5 +1,5 @@
+import { Input } from './chunk-FTEJPHBI.js';
 import { useListbox } from './chunk-6MU7HNB4.js';
-import { Input } from './chunk-ZGX2DP7F.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';

package/dist/chunk-EXHQ2QVW.js

@@ -0,0 +1 @@
+import './HuePicker-5QIUR6L7.css';

package/dist/{chunk-ZGX2DP7F.js → chunk-FTEJPHBI.js}

@@ -2,7 +2,7 @@ import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } f
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Input-DRFNI26F.css';
+import './Input-RAKNQJCV.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -162,6 +162,7 @@ var FormField = ({
   optional,
   requiredNews,
   helper,
+  helperOnFocus = false,
   error,
   labelAction,
   as = "div",
@@ -188,7 +189,12 @@ var FormField = ({
     helper ? /* @__PURE__ */ jsx("div", { id: helperId, className: "crewlet-form-field__helper", children: helper }) : null,
     error ? /* @__PURE__ */ jsx("div", { id: errorId, className: "crewlet-form-field__error", role: "alert", children: error }) : null
   ] });
-  const classes = cx("crewlet-form-field", Boolean(error) && "is-error", className);
+  const classes = cx(
+    "crewlet-form-field",
+    Boolean(error) && "is-error",
+    helperOnFocus && helper ? "crewlet-form-field--helper-on-focus" : null,
+    className
+  );
   if (as === "fieldset") {
     return (
       /*

package/dist/{chunk-RIAZM6L3.js → chunk-G2AVKPSL.js}

@@ -1,4 +1,4 @@
-import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
+import { DisclosureAnatomy } from './chunk-ENJUPIND.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Disclosure-VKBJJIZ7.css';