@atom-learning/components 11.6.0 → 12.0.0-beta.2

package/dist/components/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    appearance?: 'standard' | 'modern'\n    theme?: 'white' | 'grey'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = ({\n  ref,\n  initialDate,\n  dateFormat = DEFAULT_DATE_FORMAT,\n  firstDayOfWeek = 1,\n  disabled,\n  monthNames,\n  weekdayNames,\n  size = 'md',\n  appearance,\n  theme,\n  labels,\n  revalidate,\n  onChange,\n  minDate,\n  maxDate,\n  ...rest\n}: DateInputProps) => {\n  const [date, setDate] = React.useState(\n    initialDate ? dayjs(initialDate).toDate() : undefined\n  )\n\n  const [inputElRef, setInputElRef] = useCallbackRefState()\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\n\n  const dateString = formatDateToString(date, dateFormat)\n\n  const handleInputChange = React.useCallback(\n    (event) => {\n      const newDateString = event.target.value\n      const parsedInputDate = dayjs(newDateString, dateFormat)\n      const newDate = parsedInputDate.isValid()\n        ? parsedInputDate.toDate()\n        : undefined\n      setDate(newDate)\n      onChange?.(newDate)\n    },\n    [dateFormat, onChange]\n  )\n\n  const handleCalendarChange = React.useCallback(\n    (newDate) => {\n      setDate(newDate)\n\n      const mirrorChangeToInputElement = () => {\n        if (!inputElRef) return\n\n        // Call the `set` function on the input value directly to mirror the change.\n        // Props to: https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call(\n          inputElRef,\n          formatDateToString(newDate, dateFormat)\n        )\n        const event = new Event('input', { bubbles: true })\n        inputElRef.dispatchEvent(event)\n      }\n      mirrorChangeToInputElement()\n    },\n    [dateFormat, inputElRef]\n  )\n\n  const updatedLabels = {\n    ...DEFAULT_LABELS,\n    ...labels\n  }\n\n  const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n  const refDateToday = React.useRef<HTMLButtonElement>(null)\n  const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n  const iconSize = getFieldIconSize(size)\n\n  return (\n    <div className=\"relative h-max\">\n      <Input\n        name=\"date\"\n        disabled={disabled}\n        size={size}\n        appearance={appearance}\n        theme={theme}\n        {...(rest as React.ComponentProps<typeof Input>)}\n        onChange={handleInputChange}\n        ref={composedInputRef}\n        defaultValue={dateString}\n      />\n      <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n        <Popover.Trigger asChild>\n          <ActionIcon\n            disabled={disabled}\n            label={updatedLabels.open}\n            size={iconSize}\n            theme=\"neutral\"\n            hasTooltip={false}\n            className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n          >\n            <Icon is={CalendarEvent} />\n          </ActionIcon>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            side=\"bottom\"\n            align=\"end\"\n            showCloseButton={false}\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              if (date) {\n                refDateSelected.current?.focus()\n              } else {\n                refDateToday.current?.focus()\n              }\n            }}\n            className=\"z-1147483646 pr-6\"\n          >\n            <Calendar\n              date={\n                // The calendar only mounts inside the opened popover (a\n                // client-only interaction), so this `new Date()` fallback never\n                // renders on the server and can't cause a hydration mismatch.\n                // eslint-disable-next-line react-doctor/rendering-hydration-mismatch-time\n                date || new Date()\n              }\n              selected={date}\n              onDateSelected={async (date) => {\n                setCalendarOpen(false)\n                await handleCalendarChange(date.date)\n                if (revalidate) revalidate()\n              }}\n              setYear={async (date) => {\n                await handleCalendarChange(date)\n                if (revalidate) revalidate()\n              }}\n              minDate={minDate}\n              maxDate={maxDate}\n              refDateToday={refDateToday}\n              refDateSelected={refDateSelected}\n              firstDayOfWeek={firstDayOfWeek}\n              monthNames={monthNames}\n              weekdayNames={weekdayNames}\n              labels={updatedLabels}\n            />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,iBAAiB;AAe9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,aAAa,EACxB,KACA,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,OACA,QACA,YACA,UACA,SACA,SACA,GAAG,WACiB;CACpB,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACL;GACP,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,OAAM;KACN,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,MAKE,wBAAQ,IAAI,KAAK;KAEnB,UAAU;KACV,gBAAgB,OAAO,SAAS;MAC9B,gBAAgB,KAAK;MACrB,MAAM,qBAAqB,KAAK,IAAI;MACpC,IAAI,YAAY,WAAW;KAC7B;KACA,SAAS,OAAO,SAAS;MACvB,MAAM,qBAAqB,IAAI;MAC/B,IAAI,YAAY,WAAW;KAC7B;KACS;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;IACT,CAAA;GACc,CAAA,EACH,CAAA,CACT;IACN;;AAET"}
+{"version":3,"file":"DateInput.js","names":[],"sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat.js'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Calendar, type CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\n\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    appearance?: 'standard' | 'modern'\n    fill?: 'surface' | 'subtle'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = ({\n  ref,\n  initialDate,\n  dateFormat = DEFAULT_DATE_FORMAT,\n  firstDayOfWeek = 1,\n  disabled,\n  monthNames,\n  weekdayNames,\n  size = 'md',\n  appearance,\n  fill,\n  labels,\n  revalidate,\n  onChange,\n  minDate,\n  maxDate,\n  ...rest\n}: DateInputProps) => {\n  const [date, setDate] = React.useState(\n    initialDate ? dayjs(initialDate).toDate() : undefined\n  )\n\n  const [inputElRef, setInputElRef] = useCallbackRefState()\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\n\n  const dateString = formatDateToString(date, dateFormat)\n\n  const handleInputChange = React.useCallback(\n    (event) => {\n      const newDateString = event.target.value\n      const parsedInputDate = dayjs(newDateString, dateFormat)\n      const newDate = parsedInputDate.isValid()\n        ? parsedInputDate.toDate()\n        : undefined\n      setDate(newDate)\n      onChange?.(newDate)\n    },\n    [dateFormat, onChange]\n  )\n\n  const handleCalendarChange = React.useCallback(\n    (newDate) => {\n      setDate(newDate)\n\n      const mirrorChangeToInputElement = () => {\n        if (!inputElRef) return\n\n        // Call the `set` function on the input value directly to mirror the change.\n        // Props to: https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call(\n          inputElRef,\n          formatDateToString(newDate, dateFormat)\n        )\n        const event = new Event('input', { bubbles: true })\n        inputElRef.dispatchEvent(event)\n      }\n      mirrorChangeToInputElement()\n    },\n    [dateFormat, inputElRef]\n  )\n\n  const updatedLabels = {\n    ...DEFAULT_LABELS,\n    ...labels\n  }\n\n  const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n  const refDateToday = React.useRef<HTMLButtonElement>(null)\n  const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n  const iconSize = getFieldIconSize(size)\n\n  return (\n    <div className=\"relative h-max\">\n      <Input\n        name=\"date\"\n        disabled={disabled}\n        size={size}\n        appearance={appearance}\n        fill={fill}\n        {...(rest as React.ComponentProps<typeof Input>)}\n        onChange={handleInputChange}\n        ref={composedInputRef}\n        defaultValue={dateString}\n      />\n      <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n        <Popover.Trigger asChild>\n          <ActionIcon\n            disabled={disabled}\n            label={updatedLabels.open}\n            size={iconSize}\n            tone=\"neutral\"\n            hasTooltip={false}\n            className=\"absolute top-1/2 right-0 -translate-y-1/2\"\n          >\n            <Icon is={CalendarEvent} />\n          </ActionIcon>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            side=\"bottom\"\n            align=\"end\"\n            showCloseButton={false}\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              if (date) {\n                refDateSelected.current?.focus()\n              } else {\n                refDateToday.current?.focus()\n              }\n            }}\n            className=\"z-1147483646 pr-6\"\n          >\n            <Calendar\n              date={\n                // The calendar only mounts inside the opened popover (a\n                // client-only interaction), so this `new Date()` fallback never\n                // renders on the server and can't cause a hydration mismatch.\n                // eslint-disable-next-line react-doctor/rendering-hydration-mismatch-time\n                date || new Date()\n              }\n              selected={date}\n              onDateSelected={async (date) => {\n                setCalendarOpen(false)\n                await handleCalendarChange(date.date)\n                if (revalidate) revalidate()\n              }}\n              setYear={async (date) => {\n                await handleCalendarChange(date)\n                if (revalidate) revalidate()\n              }}\n              minDate={minDate}\n              maxDate={maxDate}\n              refDateToday={refDateToday}\n              refDateSelected={refDateSelected}\n              firstDayOfWeek={firstDayOfWeek}\n              monthNames={monthNames}\n              weekdayNames={weekdayNames}\n              labels={updatedLabels}\n            />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,OAAO,iBAAiB;AAe9B,IAAM,sBAAsB,MAAa,aAAa,wBACpD,OAAO,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,IAAI;AAE1C,IAAa,aAAa,EACxB,KACA,aACA,aAAa,qBACb,iBAAiB,GACjB,UACA,YACA,cACA,OAAO,MACP,YACA,MACA,QACA,YACA,UACA,SACA,SACA,GAAG,WACiB;CACpB,MAAM,CAAC,MAAM,WAAW,QAAM,SAC5B,cAAc,MAAM,WAAW,CAAC,CAAC,OAAO,IAAI,KAAA,CAC9C;CAEA,MAAM,CAAC,YAAY,iBAAiB,oBAAoB;CACxD,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,aAAa,mBAAmB,MAAM,UAAU;CAEtD,MAAM,oBAAoB,QAAM,aAC7B,UAAU;EACT,MAAM,gBAAgB,MAAM,OAAO;EACnC,MAAM,kBAAkB,MAAM,eAAe,UAAU;EACvD,MAAM,UAAU,gBAAgB,QAAQ,IACpC,gBAAgB,OAAO,IACvB,KAAA;EACJ,QAAQ,OAAO;EACf,WAAW,OAAO;CACpB,GACA,CAAC,YAAY,QAAQ,CACvB;CAEA,MAAM,uBAAuB,QAAM,aAChC,YAAY;EACX,QAAQ,OAAO;EAEf,MAAM,mCAAmC;GACvC,IAAI,CAAC,YAAY;GAQjB,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,KACtB,YACA,mBAAmB,SAAS,UAAU,CACxC;GACA,MAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC;GAClD,WAAW,cAAc,KAAK;EAChC;EACA,2BAA2B;CAC7B,GACA,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAS,KAAK;CAE5D,MAAM,eAAe,QAAM,OAA0B,IAAI;CACzD,MAAM,kBAAkB,QAAM,OAA0B,IAAI;CAE5D,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAK;GACK;GACJ;GACM;GACN;GACN,GAAK;GACL,UAAU;GACV,KAAK;GACL,cAAc;EACf,CAAA,GACD,qBAAC,SAAD;GAAS,OAAA;GAAM,MAAM;GAAc,cAAc;aAAjD,CACE,oBAAC,QAAQ,SAAT;IAAiB,SAAA;cACf,oBAAC,YAAD;KACY;KACV,OAAO,cAAc;KACrB,MAAM;KACN,MAAK;KACL,YAAY;KACZ,WAAU;eAEV,oBAAC,MAAD,EAAM,IAAI,cAAgB,CAAA;IAChB,CAAA;GACG,CAAA,GACjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;IACE,MAAK;IACL,OAAM;IACN,iBAAiB;IACjB,kBAAkB,MAAM;KACtB,EAAE,eAAe;KACjB,IAAI,MACF,gBAAgB,SAAS,MAAM;UAE/B,aAAa,SAAS,MAAM;IAEhC;IACA,WAAU;cAEV,oBAAC,UAAD;KACE,MAKE,wBAAQ,IAAI,KAAK;KAEnB,UAAU;KACV,gBAAgB,OAAO,SAAS;MAC9B,gBAAgB,KAAK;MACrB,MAAM,qBAAqB,KAAK,IAAI;MACpC,IAAI,YAAY,WAAW;KAC7B;KACA,SAAS,OAAO,SAAS;MACvB,MAAM,qBAAqB,IAAI;MAC/B,IAAI,YAAY,WAAW;KAC7B;KACS;KACA;KACK;KACG;KACD;KACJ;KACE;KACd,QAAQ;IACT,CAAA;GACc,CAAA,EACH,CAAA,CACT;IACN;;AAET"}

package/dist/components/dialog/DialogActionBar.js

@@ -2,11 +2,11 @@ import { styled } from "../../styled.js";
 //#region src/components/dialog/DialogActionBar.tsx
 var DialogActionBar = styled("div", { base: [
 	"border-t",
-	"border-grey-300",
+	"border-default",
 	"p-4",
 	"flex",
 	"gap-4",
-	"shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]"
+	"shadow-(--shadow-edge-top)"
 ] });
 //#endregion
 export { DialogActionBar };

package/dist/components/dialog/DialogActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogActionBar.js","names":[],"sources":["../../../src/components/dialog/DialogActionBar.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const DialogActionBar = styled('div', {\n  base: [\n    'border-t',\n    'border-grey-300',\n    'p-4',\n    'flex',\n    'gap-4',\n    'shadow-[0_-6px_6px_-1px_rgba(51,51,51,0.05)]'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,OAAO,EAC3C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}
+{"version":3,"file":"DialogActionBar.js","names":[],"sources":["../../../src/components/dialog/DialogActionBar.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const DialogActionBar = styled('div', {\n  base: [\n    'border-t',\n    'border-default',\n    'p-4',\n    'flex',\n    'gap-4',\n    'shadow-(--shadow-edge-top)'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,OAAO,EAC3C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}

package/dist/components/dialog/DialogContent.js

@@ -1,5 +1,6 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
+import { ThemePortalScope } from "../../experiments/theme/Theme.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { DialogBackground } from "./DialogBackground.js";
 import { backdropOverlay } from "../../utilities/style/backdrop-overlay.js";
@@ -13,8 +14,10 @@ var StyledDialogOverlay = styled(Overlay, { base: backdropOverlay });
 var StyledDialogContent = styled(Content, {
 	base: [
 		"transform-[translate(-50%,-50%)]",
-		"bg-white",
-		"shadow-xl",
+		"bg-surface-overlay",
+		"shadow-(--shadow-floating-xl)",
+		"forced-colors:border",
+		"forced-colors:border-[CanvasText]",
 		"box-border",
 		"left-1/2",
 		"h-auto",
@@ -106,7 +109,7 @@ var StyledDialogContent = styled(Content, {
 		] }
 	}
 }, { enableResponsiveVariants: true });
-var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...rest }) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(StyledDialogOverlay, {
+var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog", showCloseButton = true, ...rest }) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ThemePortalScope, { children: /* @__PURE__ */ jsxs(StyledDialogOverlay, {
 	id: modalOverlayId,
 	children: [React$1.Children.map(children, (child) => React$1.isValidElement(child) && child.type === DialogBackground ? child : null), /* @__PURE__ */ jsxs(StyledDialogContent, {
 		size,
@@ -120,13 +123,13 @@ var DialogContent = ({ size = "sm", children, closeDialogText = "Close dialog",
 			label: closeDialogText,
 			hasTooltip: false,
 			size: "md",
-			theme: "neutral",
+			tone: "neutral",
 			"data-dialog-close": true,
 			className: "absolute top-4 right-4 size-12",
 			children: /* @__PURE__ */ jsx(Icon, { is: Close })
 		}), React$1.Children.map(children, (child) => React$1.isValidElement(child) && child.type === DialogBackground ? null : child)]
 	})]
-}) });
+}) }) });
 //#endregion
 export { DialogContent };
 

package/dist/components/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { backdropOverlay } from '../../utilities/style/backdrop-overlay'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-xl',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        sm: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        md: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        lg: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        xl: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh',\n          '[&>[data-dialog-close]]:top-safe-offset-4',\n          '[&>[data-dialog-close]]:right-safe-offset-4'\n        ]\n      },\n      layout: {\n        panel: ['flex', 'flex-col', 'p-0']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...rest\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child) && child.type === DialogBackground\n          ? child\n          : null\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...rest}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            data-dialog-close\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) && child.type === DialogBackground\n            ? null\n            : child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;;AAUA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,gBACR,CAAC;AAED,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;EAAK,EACnC;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,WAEH,oBAAC,QAAD,EAAA,UACE,qBAAC,qBAAD;CAAqB,IAAI;WAAzB,CACG,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,QACA,IACN,GACA,qBAAC,qBAAD;EACQ;EACN,cAAW;EACX,uBAAuB,UAAU;GAE/B,IADgB,MAAM,QACT,OAAO,gBAClB,MAAM,eAAe;EAEzB;EACA,GAAI;YATN,CAWG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,YAAY;GACZ,MAAK;GACL,OAAM;GACN,qBAAA;GACA,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA,GAEb,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,OACA,KACN,CACmB;GACF;GACf,CAAA"}
+{"version":3,"file":"DialogContent.js","names":[],"sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { ThemePortalScope } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\nimport { backdropOverlay } from '../../utilities/style/backdrop-overlay'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      // `transform: translate()` is required for `floating-ui` to\n      // correctly position elements within the Dialog component.\n      // we can't use the translate property directly\n      'transform-[translate(-50%,-50%)]',\n      'bg-surface-overlay',\n      'shadow-(--shadow-floating-xl)',\n      // Forced colours drop box-shadow, so the edge needs a real border\n      'forced-colors:border',\n      'forced-colors:border-[CanvasText]',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-xl',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        sm: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        md: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        lg: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        xl: [\n          'rounded-xl',\n          'size-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275',\n          '[&>[data-dialog-close]]:top-4',\n          '[&>[data-dialog-close]]:right-4'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh',\n          '[&>[data-dialog-close]]:top-safe-offset-4',\n          '[&>[data-dialog-close]]:right-safe-offset-4'\n        ]\n      },\n      layout: {\n        panel: ['flex', 'flex-col', 'p-0']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...rest\n}: DialogContentProps) => (\n  <Portal>\n    <ThemePortalScope>\n      <StyledDialogOverlay id={modalOverlayId}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) && child.type === DialogBackground\n            ? child\n            : null\n        )}\n        <StyledDialogContent\n          size={size}\n          aria-label=\"Dialog\"\n          onPointerDownOutside={(event) => {\n            const element = event.target as HTMLElement\n            if (element?.id !== modalOverlayId) {\n              event.preventDefault()\n            }\n          }}\n          {...rest}\n        >\n          {showCloseButton && (\n            <ActionIcon\n              as={Close}\n              label={closeDialogText}\n              hasTooltip={false}\n              size=\"md\"\n              tone=\"neutral\"\n              data-dialog-close\n              className=\"absolute top-4 right-4 size-12\"\n            >\n              <Icon is={CloseIcon} />\n            </ActionIcon>\n          )}\n          {React.Children.map(children, (child) =>\n            React.isValidElement(child) && child.type === DialogBackground\n              ? null\n              : child\n          )}\n        </StyledDialogContent>\n      </StyledDialogOverlay>\n    </ThemePortalScope>\n  </Portal>\n)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,iBAAiB;AAEvB,IAAM,sBAAsB,OAAO,SAAS,EAC1C,MAAM,gBACR,CAAC;AAED,IAAM,sBAAsB,OAC1B,SACA;CACE,MAAM;EAIJ;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,QAAQ,EACN,OAAO;GAAC;GAAQ;GAAY;EAAK,EACnC;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAa,iBAAiB,EAC5B,OAAO,MACP,UACA,kBAAkB,gBAClB,kBAAkB,MAClB,GAAG,WAEH,oBAAC,QAAD,EAAA,UACE,oBAAC,kBAAD,EAAA,UACE,qBAAC,qBAAD;CAAqB,IAAI;WAAzB,CACG,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,QACA,IACN,GACA,qBAAC,qBAAD;EACQ;EACN,cAAW;EACX,uBAAuB,UAAU;GAE/B,IADgB,MAAM,QACT,OAAO,gBAClB,MAAM,eAAe;EAEzB;EACA,GAAI;YATN,CAWG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,YAAY;GACZ,MAAK;GACL,MAAK;GACL,qBAAA;GACA,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA,GAEb,QAAM,SAAS,IAAI,WAAW,UAC7B,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,mBAC1C,OACA,KACN,CACmB;GACF;GACL,CAAA,EACZ,CAAA"}

package/dist/components/dialog/DialogHeading.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 var DialogHeading = ({ className, ...rest }) => /* @__PURE__ */ jsx(Heading, {
 	size: "sm",
 	...rest,
-	className: cn("border-b", "border-b-grey-200", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", "[&_*]:box-border", className)
+	className: cn("border-b", "border-b-subtle", "pb-8", "pt-0", "px-8", "mb-8", "-mx-8", "box-content", "[&_*]:box-border", className)
 });
 //#endregion
 export { DialogHeading };

package/dist/components/dialog/DialogHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Heading, type HeadingProps } from '../heading/Heading'\n\nexport const DialogHeading = ({ className, ...rest }: HeadingProps) => (\n  <Heading\n    size=\"sm\"\n    {...rest}\n    className={cn(\n      'border-b',\n      'border-b-grey-200',\n      'pb-8',\n      'pt-0',\n      'px-8',\n      'mb-8',\n      '-mx-8',\n      // box-content lets the -mx-8/px-8 full-bleed bottom border span the\n      // dialog width. box-sizing isn't inheritable per spec, but apps using the\n      // `*{ box-sizing: inherit }` reset make it cascade — so content-box would\n      // leak onto every descendant and blow out padded/w-full controls placed\n      // in the heading. Re-assert border-box on descendants so it can't. See #889.\n      'box-content',\n      '[&_*]:box-border',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;;AAKA,IAAa,iBAAiB,EAAE,WAAW,GAAG,WAC5C,oBAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,qBACA,QACA,QACA,QACA,QACA,SAMA,eACA,oBACA,SACF;AACD,CAAA"}
+{"version":3,"file":"DialogHeading.js","names":[],"sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Heading, type HeadingProps } from '../heading/Heading'\n\nexport const DialogHeading = ({ className, ...rest }: HeadingProps) => (\n  <Heading\n    size=\"sm\"\n    {...rest}\n    className={cn(\n      'border-b',\n      'border-b-subtle',\n      'pb-8',\n      'pt-0',\n      'px-8',\n      'mb-8',\n      '-mx-8',\n      // box-content lets the -mx-8/px-8 full-bleed bottom border span the\n      // dialog width. box-sizing isn't inheritable per spec, but apps using the\n      // `*{ box-sizing: inherit }` reset make it cascade — so content-box would\n      // leak onto every descendant and blow out padded/w-full controls placed\n      // in the heading. Re-assert border-box on descendants so it can't. See #889.\n      'box-content',\n      '[&_*]:box-border',\n      className\n    )}\n  />\n)\n"],"mappings":";;;;;AAKA,IAAa,iBAAiB,EAAE,WAAW,GAAG,WAC5C,oBAAC,SAAD;CACE,MAAK;CACL,GAAI;CACJ,WAAW,GACT,YACA,mBACA,QACA,QACA,QACA,QACA,SAMA,eACA,oBACA,SACF;AACD,CAAA"}

package/dist/components/dialog/DialogNavigationBar.js

@@ -5,7 +5,7 @@ var DialogNavigationBar = styled("div", { base: [
 	"justify-between",
 	"items-center",
 	"border-b",
-	"border-grey-300",
+	"border-default",
 	"p-4"
 ] });
 //#endregion

package/dist/components/dialog/DialogNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogNavigationBar.js","names":[],"sources":["../../../src/components/dialog/DialogNavigationBar.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const DialogNavigationBar = styled('div', {\n  base: [\n    'flex',\n    'justify-between',\n    'items-center',\n    'border-b',\n    'border-grey-300',\n    'p-4'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,sBAAsB,OAAO,OAAO,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}
+{"version":3,"file":"DialogNavigationBar.js","names":[],"sources":["../../../src/components/dialog/DialogNavigationBar.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const DialogNavigationBar = styled('div', {\n  base: [\n    'flex',\n    'justify-between',\n    'items-center',\n    'border-b',\n    'border-default',\n    'p-4'\n  ]\n})\n"],"mappings":";;AAEA,IAAa,sBAAsB,OAAO,OAAO,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC"}

package/dist/components/divider/Divider.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 //#region src/components/divider/Divider.tsx
 var Divider = styled("hr", {
-	base: ["border-none", "bg-grey-200"],
+	base: ["border-none", "bg-(--border-color-subtle)"],
 	variants: { orientation: {
 		horizontal: ["h-px", "w-full"],
 		vertical: [

package/dist/components/divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","names":[],"sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const Divider = styled(\n  'hr',\n  {\n    base: ['border-none', 'bg-grey-200'],\n    variants: {\n      orientation: {\n        horizontal: ['h-px', 'w-full'],\n        vertical: ['h-full', 'min-h-8', 'w-px']\n      }\n    },\n    defaultVariants: {\n      orientation: 'horizontal'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n"],"mappings":";;AAEA,IAAa,UAAU,OACrB,MACA;CACE,MAAM,CAAC,eAAe,aAAa;CACnC,UAAU,EACR,aAAa;EACX,YAAY,CAAC,QAAQ,QAAQ;EAC7B,UAAU;GAAC;GAAU;GAAW;EAAM;CACxC,EACF;CACA,iBAAiB,EACf,aAAa,aACf;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC"}
+{"version":3,"file":"Divider.js","names":[],"sources":["../../../src/components/divider/Divider.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const Divider = styled(\n  'hr',\n  {\n    base: ['border-none', 'bg-(--border-color-subtle)'],\n    variants: {\n      orientation: {\n        horizontal: ['h-px', 'w-full'],\n        vertical: ['h-full', 'min-h-8', 'w-px']\n      }\n    },\n    defaultVariants: {\n      orientation: 'horizontal'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n"],"mappings":";;AAEA,IAAa,UAAU,OACrB,MACA;CACE,MAAM,CAAC,eAAe,4BAA4B;CAClD,UAAU,EACR,aAAa;EACX,YAAY,CAAC,QAAQ,QAAQ;EAC7B,UAAU;GAAC;GAAU;GAAW;EAAM;CACxC,EACF;CACA,iBAAiB,EACf,aAAa,aACf;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC"}

package/dist/components/drawer/DrawerClose.js

@@ -8,7 +8,7 @@ import { Close as Close$1 } from "@radix-ui/react-dialog";
 var DrawerClose = ({ label = "Close", ...props }) => /* @__PURE__ */ jsx(Close$1, {
 	asChild: true,
 	children: /* @__PURE__ */ jsx(ActionIcon, {
-		theme: "neutral",
+		tone: "neutral",
 		appearance: "simple",
 		size: "md",
 		hasTooltip: false,

package/dist/components/drawer/DrawerClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerClose.js","names":[],"sources":["../../../src/components/drawer/DrawerClose.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport { Close as DialogClose } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const DrawerClose = ({\n  label = 'Close',\n  ...props\n}: Omit<React.ComponentProps<typeof ActionIcon>, 'children'>) => (\n  <DialogClose asChild>\n    <ActionIcon\n      theme=\"neutral\"\n      appearance=\"simple\"\n      size=\"md\"\n      hasTooltip={false}\n      label={label}\n      {...props}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  </DialogClose>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,eAAe,EAC1B,QAAQ,SACR,GAAG,YAEH,oBAAC,SAAD;CAAa,SAAA;WACX,oBAAC,YAAD;EACE,OAAM;EACN,YAAW;EACX,MAAK;EACL,YAAY;EACL;EACP,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;CACR,CAAA;AACD,CAAA"}
+{"version":3,"file":"DrawerClose.js","names":[],"sources":["../../../src/components/drawer/DrawerClose.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport { Close as DialogClose } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nexport const DrawerClose = ({\n  label = 'Close',\n  ...props\n}: Omit<React.ComponentProps<typeof ActionIcon>, 'children'>) => (\n  <DialogClose asChild>\n    <ActionIcon\n      tone=\"neutral\"\n      appearance=\"simple\"\n      size=\"md\"\n      hasTooltip={false}\n      label={label}\n      {...props}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  </DialogClose>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,eAAe,EAC1B,QAAQ,SACR,GAAG,YAEH,oBAAC,SAAD;CAAa,SAAA;WACX,oBAAC,YAAD;EACE,MAAK;EACL,YAAW;EACX,MAAK;EACL,YAAY;EACL;EACP,GAAI;YAEJ,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;CACR,CAAA;AACD,CAAA"}

package/dist/components/drawer/DrawerContent.js

@@ -1,5 +1,5 @@
 import { styled } from "../../styled.js";
-import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
+import { ThemePortalScope } from "../../experiments/theme/Theme.js";
 import { DrawerOverlay } from "./DrawerOverlay.js";
 import { DrawerContext } from "./Drawer.context.js";
 import * as React$1 from "react";
@@ -8,8 +8,11 @@ import { Content, Portal } from "@radix-ui/react-dialog";
 //#region src/components/drawer/DrawerContent.tsx
 var StyledContent = styled(Content, {
 	base: [
-		"bg-(--base-1)",
-		"shadow-lg",
+		"bg-surface-overlay",
+		"text-default",
+		"shadow-(--shadow-floating-lg)",
+		"forced-colors:border",
+		"forced-colors:border-[CanvasText]",
 		"fixed",
 		"z-1147483646",
 		"motion-safe:data-[state=open]:animate-slide-direction-in",
@@ -61,21 +64,16 @@ var StyledContent = styled(Content, {
 });
 var DrawerContent = ({ children, ...rest }) => {
 	const { position } = React$1.use(DrawerContext);
-	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsx(ColorScheme, {
-		base: "grey1",
-		accent: "primary1",
+	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsx(ThemePortalScope, { children: /* @__PURE__ */ jsx(StyledContent, {
+		size: "lg",
+		position,
+		...rest,
 		asChild: true,
-		children: /* @__PURE__ */ jsx(StyledContent, {
-			size: "lg",
-			position,
-			...rest,
-			asChild: true,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col",
-				children
-			})
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children
 		})
-	})] });
+	}) })] });
 };
 //#endregion
 export { DrawerContent, StyledContent };

package/dist/components/drawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.js","names":[],"sources":["../../../src/components/drawer/DrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { DrawerContext } from './Drawer.context'\nimport { DrawerOverlay } from './DrawerOverlay'\n\nexport const StyledContent = styled(Content, {\n  base: [\n    'bg-(--base-1)',\n    'shadow-lg',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    position: {\n      top: [\n        '[--slide-direction-out-y:-100%]',\n        'top-0',\n        'left-0',\n        'w-full',\n        'max-h-17/20'\n      ],\n      right: [\n        '[--slide-direction-out-x:100%]',\n        'right-0',\n        'top-0',\n        'h-full',\n        'w-(--drawer-content-width,100%)',\n        'max-w-full'\n      ],\n      bottom: [\n        '[--slide-direction-out-y:100%]',\n        'bottom-0',\n        'left-0',\n        'w-full',\n        'max-h-17/20'\n      ],\n      left: [\n        '[--slide-direction-out-x:-100%]',\n        'left-0',\n        'top-0',\n        'h-full',\n        'w-(--drawer-content-width,100%)',\n        'max-w-full'\n      ]\n    },\n    size: {\n      xs: ['[--drawer-content-width:240px]'],\n      sm: ['[--drawer-content-width:256px]'],\n      md: ['[--drawer-content-width:288px]'],\n      lg: ['[--drawer-content-width:304px]'],\n      xl: ['[--drawer-content-width:320px]'],\n      '2xl': ['[--drawer-content-width:720px]'],\n      '3xl': ['[--drawer-content-width:1000px]']\n    }\n  }\n})\n\nexport const DrawerContent = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => {\n  const { position } = React.use(DrawerContext)\n\n  return (\n    <Portal>\n      <DrawerOverlay />\n      <ColorScheme base=\"grey1\" accent=\"primary1\" asChild>\n        <StyledContent size=\"lg\" position={position} {...rest} asChild>\n          <div className=\"flex flex-col\">{children}</div>\n        </StyledContent>\n      </ColorScheme>\n    </Portal>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,OAAO,SAAS;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,KAAK;IACH;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,OAAO,CAAC,gCAAgC;GACxC,OAAO,CAAC,iCAAiC;EAC3C;CACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,GAAG,WAC6C;CAChD,MAAM,EAAE,aAAa,QAAM,IAAI,aAAa;CAE5C,OACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,aAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,SAAA;YAC1C,oBAAC,eAAD;GAAe,MAAK;GAAe;GAAU,GAAI;GAAM,SAAA;aACrD,oBAAC,OAAD;IAAK,WAAU;IAAiB;GAAc,CAAA;EACjC,CAAA;CACJ,CAAA,CACP,EAAA,CAAA;AAEZ"}
+{"version":3,"file":"DrawerContent.js","names":[],"sources":["../../../src/components/drawer/DrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { ThemePortalScope } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\nimport { DrawerContext } from './Drawer.context'\nimport { DrawerOverlay } from './DrawerOverlay'\n\nexport const StyledContent = styled(Content, {\n  base: [\n    'bg-surface-overlay',\n    'text-default',\n    'shadow-(--shadow-floating-lg)',\n    // Forced colours drop box-shadow, so the edge needs a real border\n    'forced-colors:border',\n    'forced-colors:border-[CanvasText]',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    position: {\n      top: [\n        '[--slide-direction-out-y:-100%]',\n        'top-0',\n        'left-0',\n        'w-full',\n        'max-h-17/20'\n      ],\n      right: [\n        '[--slide-direction-out-x:100%]',\n        'right-0',\n        'top-0',\n        'h-full',\n        'w-(--drawer-content-width,100%)',\n        'max-w-full'\n      ],\n      bottom: [\n        '[--slide-direction-out-y:100%]',\n        'bottom-0',\n        'left-0',\n        'w-full',\n        'max-h-17/20'\n      ],\n      left: [\n        '[--slide-direction-out-x:-100%]',\n        'left-0',\n        'top-0',\n        'h-full',\n        'w-(--drawer-content-width,100%)',\n        'max-w-full'\n      ]\n    },\n    size: {\n      xs: ['[--drawer-content-width:240px]'],\n      sm: ['[--drawer-content-width:256px]'],\n      md: ['[--drawer-content-width:288px]'],\n      lg: ['[--drawer-content-width:304px]'],\n      xl: ['[--drawer-content-width:320px]'],\n      '2xl': ['[--drawer-content-width:720px]'],\n      '3xl': ['[--drawer-content-width:1000px]']\n    }\n  }\n})\n\nexport const DrawerContent = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => {\n  const { position } = React.use(DrawerContext)\n\n  return (\n    <Portal>\n      <DrawerOverlay />\n      <ThemePortalScope>\n        <StyledContent size=\"lg\" position={position} {...rest} asChild>\n          <div className=\"flex flex-col\">{children}</div>\n        </StyledContent>\n      </ThemePortalScope>\n    </Portal>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,OAAO,SAAS;CAC3C,MAAM;EACJ;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,UAAU;GACR,KAAK;IACH;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,IAAI,CAAC,gCAAgC;GACrC,OAAO,CAAC,gCAAgC;GACxC,OAAO,CAAC,iCAAiC;EAC3C;CACF;AACF,CAAC;AAED,IAAa,iBAAiB,EAC5B,UACA,GAAG,WAC6C;CAChD,MAAM,EAAE,aAAa,QAAM,IAAI,aAAa;CAE5C,OACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,kBAAD,EAAA,UACE,oBAAC,eAAD;EAAe,MAAK;EAAe;EAAU,GAAI;EAAM,SAAA;YACrD,oBAAC,OAAD;GAAK,WAAU;GAAiB;EAAc,CAAA;CACjC,CAAA,EACC,CAAA,CACZ,EAAA,CAAA;AAEZ"}

package/dist/components/drawer/DrawerFooter.js

@@ -4,7 +4,7 @@ var DrawerFooter = styled("div", { base: [
 	"p-4",
 	"w-full",
 	"border-t",
-	"border-t-(--base-3)"
+	"border-t-subtle"
 ] });
 //#endregion
 export { DrawerFooter };

package/dist/components/drawer/DrawerFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerFooter.js","names":[],"sources":["../../../src/components/drawer/DrawerFooter.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const DrawerFooter = styled('div', {\n  base: ['p-4', 'w-full', 'border-t', 'border-t-(--base-3)']\n})\n"],"mappings":";;AAEA,IAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CAAC;CAAO;CAAU;CAAY;AAAqB,EAC3D,CAAC"}
+{"version":3,"file":"DrawerFooter.js","names":[],"sources":["../../../src/components/drawer/DrawerFooter.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const DrawerFooter = styled('div', {\n  base: ['p-4', 'w-full', 'border-t', 'border-t-subtle']\n})\n"],"mappings":";;AAEA,IAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CAAC;CAAO;CAAU;CAAY;AAAiB,EACvD,CAAC"}

package/dist/components/drawer/DrawerHeader.js

@@ -5,7 +5,7 @@ var DrawerHeader = styled("div", { base: [
 	"w-full",
 	"min-h-16",
 	"border-b",
-	"border-b-(--base-3)"
+	"border-b-subtle"
 ] });
 //#endregion
 export { DrawerHeader };

package/dist/components/drawer/DrawerHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.js","names":[],"sources":["../../../src/components/drawer/DrawerHeader.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const DrawerHeader = styled('div', {\n  base: ['p-4', 'w-full', 'min-h-16', 'border-b', 'border-b-(--base-3)']\n})\n"],"mappings":";;AAEA,IAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CAAC;CAAO;CAAU;CAAY;CAAY;AAAqB,EACvE,CAAC"}
+{"version":3,"file":"DrawerHeader.js","names":[],"sources":["../../../src/components/drawer/DrawerHeader.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const DrawerHeader = styled('div', {\n  base: ['p-4', 'w-full', 'min-h-16', 'border-b', 'border-b-subtle']\n})\n"],"mappings":";;AAEA,IAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CAAC;CAAO;CAAU;CAAY;CAAY;AAAiB,EACnE,CAAC"}

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -1,3 +1,4 @@
+import { Portal } from '@radix-ui/react-dropdown-menu';
 import * as React from 'react';
 import { DropdownMenuItem } from './DropdownMenuItem';
 export declare const DropdownMenu: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuProps> & {
@@ -12,7 +13,7 @@ export declare const DropdownMenu: React.FC<import("@radix-ui/react-dropdown-men
         href: string;
         reloadDocument?: boolean;
     }) => React.JSX.Element;
-    Portal: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuPortalProps>;
+    Portal: ({ children, ...rest }: React.ComponentProps<typeof Portal>) => React.JSX.Element;
     Separator: import("../..").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>, unknown>;
     Trigger: import("../..").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>, unknown>;
 };

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -1,3 +1,4 @@
+import { ThemePortalScope } from "../../experiments/theme/Theme.js";
 import { DropdownMenuContent } from "./DropdownMenuContent.js";
 import { DropdownMenuItem } from "./DropdownMenuItem.js";
 import { DropdownMenuLabel } from "./DropdownMenuLabel.js";
@@ -5,15 +6,20 @@ import { DropdownMenuLinkItem } from "./DropdownMenuLinkItem.js";
 import { DropdownMenuSeparator } from "./DropdownMenuSeparator.js";
 import { DropdownMenuTrigger } from "./DropdownMenuTrigger.js";
 import "react";
+import { jsx } from "react/jsx-runtime";
 import { Group, Portal, Root } from "@radix-ui/react-dropdown-menu";
 //#region src/components/dropdown-menu/DropdownMenu.tsx
+var DropdownMenuPortal = ({ children, ...rest }) => /* @__PURE__ */ jsx(Portal, {
+	...rest,
+	children: /* @__PURE__ */ jsx(ThemePortalScope, { children })
+});
 var DropdownMenu = /* @__PURE__ */ Object.assign(Root, {
 	Content: DropdownMenuContent,
 	Group,
 	Item: DropdownMenuItem,
 	Label: DropdownMenuLabel,
 	LinkItem: DropdownMenuLinkItem,
-	Portal,
+	Portal: DropdownMenuPortal,
 	Separator: DropdownMenuSeparator,
 	Trigger: DropdownMenuTrigger
 });

package/dist/components/dropdown-menu/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenu.tsx"],"sourcesContent":["import {\n  Group,\n  Portal,\n  Root as DropdownMenuRoot\n} from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\n\nimport { DropdownMenuContent } from './DropdownMenuContent'\nimport { DropdownMenuItem } from './DropdownMenuItem'\nimport { DropdownMenuLabel } from './DropdownMenuLabel'\nimport { DropdownMenuLinkItem } from './DropdownMenuLinkItem'\nimport { DropdownMenuSeparator } from './DropdownMenuSeparator'\nimport { DropdownMenuTrigger } from './DropdownMenuTrigger'\n\nexport const DropdownMenu = /* @__PURE__ */ Object.assign(DropdownMenuRoot, {\n  Content: DropdownMenuContent,\n  Group: Group,\n  Item: DropdownMenuItem,\n  Label: DropdownMenuLabel,\n  LinkItem: DropdownMenuLinkItem,\n  Portal: Portal,\n  Separator: DropdownMenuSeparator,\n  Trigger: DropdownMenuTrigger\n})\n"],"mappings":";;;;;;;;;AAcA,IAAa,eAA+B,uBAAO,OAAO,MAAkB;CAC1E,SAAS;CACF;CACP,MAAM;CACN,OAAO;CACP,UAAU;CACF;CACR,WAAW;CACX,SAAS;AACX,CAAC"}
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenu.tsx"],"sourcesContent":["import {\n  Group,\n  Portal,\n  Root as DropdownMenuRoot\n} from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\n\nimport { ThemePortalScope } from '../../experiments/theme/Theme'\nimport { DropdownMenuContent } from './DropdownMenuContent'\nimport { DropdownMenuItem } from './DropdownMenuItem'\nimport { DropdownMenuLabel } from './DropdownMenuLabel'\nimport { DropdownMenuLinkItem } from './DropdownMenuLinkItem'\nimport { DropdownMenuSeparator } from './DropdownMenuSeparator'\nimport { DropdownMenuTrigger } from './DropdownMenuTrigger'\n\nconst DropdownMenuPortal = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof Portal>) => (\n  <Portal {...rest}>\n    <ThemePortalScope>{children}</ThemePortalScope>\n  </Portal>\n)\n\nexport const DropdownMenu = /* @__PURE__ */ Object.assign(DropdownMenuRoot, {\n  Content: DropdownMenuContent,\n  Group: Group,\n  Item: DropdownMenuItem,\n  Label: DropdownMenuLabel,\n  LinkItem: DropdownMenuLinkItem,\n  Portal: DropdownMenuPortal,\n  Separator: DropdownMenuSeparator,\n  Trigger: DropdownMenuTrigger\n})\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,sBAAsB,EAC1B,UACA,GAAG,WAEH,oBAAC,QAAD;CAAQ,GAAI;WACV,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;AACxC,CAAA;AAGV,IAAa,eAA+B,uBAAO,OAAO,MAAkB;CAC1E,SAAS;CACF;CACP,MAAM;CACN,OAAO;CACP,UAAU;CACV,QAAQ;CACR,WAAW;CACX,SAAS;AACX,CAAC"}

package/dist/components/dropdown-menu/DropdownMenuContent.js

@@ -2,9 +2,11 @@ import { styled } from "../../styled.js";
 import { Content } from "@radix-ui/react-dropdown-menu";
 //#region src/components/dropdown-menu/DropdownMenuContent.tsx
 var DropdownMenuContent = styled(Content, { base: [
-	"bg-white",
+	"bg-surface-overlay",
 	"rounded-sm",
-	"shadow-sm",
+	"shadow-(--shadow-floating-sm)",
+	"forced-colors:border",
+	"forced-colors:border-[CanvasText]",
 	"py-2",
 	"z-10",
 	"[--slide-opacity-out:0]",

package/dist/components/dropdown-menu/DropdownMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContent.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '../../styled'\n\nexport const DropdownMenuContent = styled(\n  Content,\n  {\n    base: [\n      'bg-white',\n      'rounded-sm',\n      'shadow-sm',\n      'py-2',\n      'z-10',\n      '[--slide-opacity-out:0]',\n      'data-[side=top]:[--slide-direction-out-y:-4px]',\n      'data-[side=right]:[--slide-direction-out-x:4px]',\n      'data-[side=bottom]:[--slide-direction-out-y:4px]',\n      'data-[side=left]:[--slide-direction-out-x:-4px]',\n      'motion-safe:data-[state=open]:animate-slide-direction-in',\n      'motion-safe:data-[state=closed]:animate-slide-direction-out'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OACjC,SACA,EACE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"DropdownMenuContent.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '../../styled'\n\nexport const DropdownMenuContent = styled(\n  Content,\n  {\n    base: [\n      'bg-surface-overlay',\n      'rounded-sm',\n      'shadow-(--shadow-floating-sm)',\n      // Forced colours drop box-shadow, so the edge needs a real border\n      'forced-colors:border',\n      'forced-colors:border-[CanvasText]',\n      'py-2',\n      'z-10',\n      '[--slide-opacity-out:0]',\n      'data-[side=top]:[--slide-direction-out-y:-4px]',\n      'data-[side=right]:[--slide-direction-out-x:4px]',\n      'data-[side=bottom]:[--slide-direction-out-y:4px]',\n      'data-[side=left]:[--slide-direction-out-x:-4px]',\n      'motion-safe:data-[state=open]:animate-slide-direction-in',\n      'motion-safe:data-[state=closed]:animate-slide-direction-out'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OACjC,SACA,EACE,MAAM;CACJ;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

package/dist/components/dropdown-menu/DropdownMenuItem.js

@@ -3,7 +3,7 @@ import { Item } from "@radix-ui/react-dropdown-menu";
 //#region src/components/dropdown-menu/DropdownMenuItem.tsx
 var DropdownMenuItem = styled(Item, { base: [
 	"items-center",
-	"text-grey-1000",
+	"text-default",
 	"cursor-pointer",
 	"flex",
 	"font-body",
@@ -31,7 +31,7 @@ var DropdownMenuItem = styled(Item, { base: [
 	"focus:before:outline-none",
 	"focus:before:scale-100",
 	"focus:outline-none",
-	"focus:text-primary-900",
+	"focus:text-accent-hover",
 	"hover:underline"
 ] }, { enablePolymorphism: false });
 //#endregion

package/dist/components/dropdown-menu/DropdownMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuItem.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '../../styled'\n\nexport const DropdownMenuItem = styled(\n  Item,\n  {\n    base: [\n      'items-center',\n      'text-grey-1000',\n      'cursor-pointer',\n      'flex',\n      'font-body',\n      'font-normal',\n      'relative',\n      'px-3',\n      'py-2',\n      'data-disabled:cursor-not-allowed',\n      'data-disabled:opacity-30',\n      'data-disabled:pointer-events-none',\n      'aria-[current=page]:before:absolute',\n      'aria-[current=page]:before:border-l-2',\n      'aria-[current=page]:before:border-l-current',\n      \"aria-[current=page]:before:content-['']\",\n      'aria-[current=page]:before:h-6',\n      'aria-[current=page]:before:left-0',\n      'aria-[current=page]:before:outline-none',\n      'aria-[current=page]:before:scale-100',\n      'focus:before:absolute',\n      'focus:before:border-l-2',\n      'focus:before:border-l-current',\n      \"focus:before:content-['']\",\n      'focus:before:h-6',\n      'focus:before:left-0',\n      'focus:before:outline-none',\n      'focus:before:scale-100',\n      'focus:outline-none',\n      'focus:text-primary-900',\n      'hover:underline'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAC9B,MACA,EACE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"DropdownMenuItem.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '../../styled'\n\nexport const DropdownMenuItem = styled(\n  Item,\n  {\n    base: [\n      'items-center',\n      'text-default',\n      'cursor-pointer',\n      'flex',\n      'font-body',\n      'font-normal',\n      'relative',\n      'px-3',\n      'py-2',\n      'data-disabled:cursor-not-allowed',\n      'data-disabled:opacity-30',\n      'data-disabled:pointer-events-none',\n      'aria-[current=page]:before:absolute',\n      'aria-[current=page]:before:border-l-2',\n      'aria-[current=page]:before:border-l-current',\n      \"aria-[current=page]:before:content-['']\",\n      'aria-[current=page]:before:h-6',\n      'aria-[current=page]:before:left-0',\n      'aria-[current=page]:before:outline-none',\n      'aria-[current=page]:before:scale-100',\n      'focus:before:absolute',\n      'focus:before:border-l-2',\n      'focus:before:border-l-current',\n      \"focus:before:content-['']\",\n      'focus:before:h-6',\n      'focus:before:left-0',\n      'focus:before:outline-none',\n      'focus:before:scale-100',\n      'focus:outline-none',\n      'focus:text-accent-hover',\n      'hover:underline'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,mBAAmB,OAC9B,MACA,EACE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

package/dist/components/dropdown-menu/DropdownMenuLabel.js

@@ -7,7 +7,7 @@ import { Label } from "@radix-ui/react-dropdown-menu";
 var DropdownMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ jsx(Text, {
 	as: Label,
 	size: "sm",
-	className: cn("px-3", "py-2", "text-text-subtle", className),
+	className: cn("px-3", "py-2", "text-subtle", className),
 	...rest
 });
 DropdownMenuLabel.displayName = "DropdownMenuLabel";

package/dist/components/dropdown-menu/DropdownMenuLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuLabel.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuLabel.tsx"],"sourcesContent":["import { Label } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype DropdownMenuLabelProps = React.ComponentProps<typeof Label>\n\nexport const DropdownMenuLabel = ({\n  className,\n  ...rest\n}: DropdownMenuLabelProps) => (\n  <Text\n    as={Label}\n    size=\"sm\"\n    className={cn('px-3', 'py-2', 'text-text-subtle', className)}\n    {...rest}\n  />\n)\n\nDropdownMenuLabel.displayName = 'DropdownMenuLabel'\n"],"mappings":";;;;;;AAQA,IAAa,qBAAqB,EAChC,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAI;CACJ,MAAK;CACL,WAAW,GAAG,QAAQ,QAAQ,oBAAoB,SAAS;CAC3D,GAAI;AACL,CAAA;AAGH,kBAAkB,cAAc"}
+{"version":3,"file":"DropdownMenuLabel.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuLabel.tsx"],"sourcesContent":["import { Label } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype DropdownMenuLabelProps = React.ComponentProps<typeof Label>\n\nexport const DropdownMenuLabel = ({\n  className,\n  ...rest\n}: DropdownMenuLabelProps) => (\n  <Text\n    as={Label}\n    size=\"sm\"\n    className={cn('px-3', 'py-2', 'text-subtle', className)}\n    {...rest}\n  />\n)\n\nDropdownMenuLabel.displayName = 'DropdownMenuLabel'\n"],"mappings":";;;;;;AAQA,IAAa,qBAAqB,EAChC,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAI;CACJ,MAAK;CACL,WAAW,GAAG,QAAQ,QAAQ,eAAe,SAAS;CACtD,GAAI;AACL,CAAA;AAGH,kBAAkB,cAAc"}

package/dist/components/dropdown-menu/DropdownMenuSeparator.js

@@ -3,7 +3,7 @@ import { Separator } from "@radix-ui/react-dropdown-menu";
 //#region src/components/dropdown-menu/DropdownMenuSeparator.tsx
 var DropdownMenuSeparator = styled(Separator, { base: [
 	"h-px",
-	"bg-grey-600",
+	"bg-neutral-solid",
 	"my-2"
 ] }, { enablePolymorphism: false });
 //#endregion

package/dist/components/dropdown-menu/DropdownMenuSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuSeparator.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuSeparator.tsx"],"sourcesContent":["import { Separator } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '../../styled'\n\nexport const DropdownMenuSeparator = styled(\n  Separator,\n  {\n    base: ['h-px', 'bg-grey-600', 'my-2']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,wBAAwB,OACnC,WACA,EACE,MAAM;CAAC;CAAQ;CAAe;AAAM,EACtC,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"DropdownMenuSeparator.js","names":[],"sources":["../../../src/components/dropdown-menu/DropdownMenuSeparator.tsx"],"sourcesContent":["import { Separator } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '../../styled'\n\nexport const DropdownMenuSeparator = styled(\n  Separator,\n  {\n    base: ['h-px', 'bg-neutral-solid', 'my-2']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,wBAAwB,OACnC,WACA,EACE,MAAM;CAAC;CAAQ;CAAoB;AAAM,EAC3C,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

package/dist/components/empty-state/EmptyStateBody.js

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/empty-state/EmptyStateBody.tsx
 var StyledEmptyStateBody = styled(Text, {
-	base: ["text-grey-800", "font-normal"],
+	base: ["text-subtle", "font-normal"],
 	variants: { size: {
 		xs: ["mb-4", "text-sm"],
 		sm: ["mb-4", "text-sm"],

package/dist/components/empty-state/EmptyStateBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateBody.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateBody = styled(\n  Text,\n  {\n    base: ['text-grey-800', 'font-normal'],\n    variants: {\n      size: {\n        xs: ['mb-4', 'text-sm'],\n        sm: ['mb-4', 'text-sm'],\n        md: ['mb-4', 'text-sm'],\n        lg: ['mb-6', 'text-md'],\n        xl: ['mb-6', 'text-md']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody>\n\nexport const EmptyStateBody = (props: EmptyStateBodyProps) => {\n  const { size } = React.use(EmptyStateContext)\n  return <StyledEmptyStateBody {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,uBAAuB,OAC3B,MACA;CACE,MAAM,CAAC,iBAAiB,aAAa;CACrC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;CACxB,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAIA,IAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,SAAS,QAAM,IAAI,iBAAiB;CAC5C,OAAO,oBAAC,sBAAD;EAAsB,GAAI;EAAa;CAAO,CAAA;AACvD"}
+{"version":3,"file":"EmptyStateBody.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateBody = styled(\n  Text,\n  {\n    base: ['text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        xs: ['mb-4', 'text-sm'],\n        sm: ['mb-4', 'text-sm'],\n        md: ['mb-4', 'text-sm'],\n        lg: ['mb-6', 'text-md'],\n        xl: ['mb-6', 'text-md']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype EmptyStateBodyProps = React.ComponentProps<typeof StyledEmptyStateBody>\n\nexport const EmptyStateBody = (props: EmptyStateBodyProps) => {\n  const { size } = React.use(EmptyStateContext)\n  return <StyledEmptyStateBody {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,uBAAuB,OAC3B,MACA;CACE,MAAM,CAAC,eAAe,aAAa;CACnC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;CACxB,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAIA,IAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,SAAS,QAAM,IAAI,iBAAiB;CAC5C,OAAO,oBAAC,sBAAD;EAAsB,GAAI;EAAa;CAAO,CAAA;AACvD"}

package/dist/components/empty-state/EmptyStateTitle.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/empty-state/EmptyStateTitle.tsx
 var StyledEmptyStateTitle = styled("h2", {
 	base: [
-		"text-grey-800",
+		"text-subtle",
 		"font-body",
 		"font-semibold",
 		"m-0"

package/dist/components/empty-state/EmptyStateTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateTitle.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled(\n  'h2',\n  {\n    base: ['text-grey-800', 'font-body', 'font-semibold', 'm-0'],\n    variants: {\n      size: {\n        xs: ['mb-3', 'text-md'],\n        sm: ['mb-3', 'text-md'],\n        md: ['mb-3', 'text-md'],\n        lg: ['mb-4', 'text-lg'],\n        xl: ['mb-4', 'text-lg']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\n// Override, not intersection: ComponentProps yields `as?: never`, and\n// intersecting that with ElementType silently collapses `as` to undefined\ntype EmptyStateTitleProps = Override<\n  React.ComponentProps<typeof StyledEmptyStateTitle>,\n  {\n    as?: React.ComponentType | React.ElementType\n  }\n>\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.use(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"mappings":";;;;;AAMA,IAAM,wBAAwB,OAC5B,MACA;CACE,MAAM;EAAC;EAAiB;EAAa;EAAiB;CAAK;CAC3D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;CACxB,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAWA,IAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,SAAS,QAAM,IAAI,iBAAiB;CAC5C,OAAO,oBAAC,uBAAD;EAA6B;EAAM,GAAI;CAAQ,CAAA;AACxD"}
+{"version":3,"file":"EmptyStateTitle.js","names":[],"sources":["../../../src/components/empty-state/EmptyStateTitle.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { EmptyStateContext } from './EmptyState.context'\n\nconst StyledEmptyStateTitle = styled(\n  'h2',\n  {\n    base: ['text-subtle', 'font-body', 'font-semibold', 'm-0'],\n    variants: {\n      size: {\n        xs: ['mb-3', 'text-md'],\n        sm: ['mb-3', 'text-md'],\n        md: ['mb-3', 'text-md'],\n        lg: ['mb-4', 'text-lg'],\n        xl: ['mb-4', 'text-lg']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\n// Override, not intersection: ComponentProps yields `as?: never`, and\n// intersecting that with ElementType silently collapses `as` to undefined\ntype EmptyStateTitleProps = Override<\n  React.ComponentProps<typeof StyledEmptyStateTitle>,\n  {\n    as?: React.ComponentType | React.ElementType\n  }\n>\n\nexport const EmptyStateTitle = (props: EmptyStateTitleProps) => {\n  const { size } = React.use(EmptyStateContext)\n  return <StyledEmptyStateTitle size={size} {...props} />\n}\n"],"mappings":";;;;;AAMA,IAAM,wBAAwB,OAC5B,MACA;CACE,MAAM;EAAC;EAAe;EAAa;EAAiB;CAAK;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;EACtB,IAAI,CAAC,QAAQ,SAAS;CACxB,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAWA,IAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,SAAS,QAAM,IAAI,iBAAiB;CAC5C,OAAO,oBAAC,uBAAD;EAA6B;EAAM,GAAI;CAAQ,CAAA;AACxD"}

package/dist/components/field-wrapper/FieldDescription.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/field-wrapper/FieldDescription.tsx
 var Description = ({ children, className }) => /* @__PURE__ */ jsx(Text, {
 	size: "sm",
-	className: cn("text-grey-700", "max-w-[80ch]", className),
+	className: cn("text-subtlest", "max-w-[80ch]", className),
 	children
 });
 //#endregion

package/dist/components/field-wrapper/FieldDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.js","names":[],"sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\nexport const Description = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => (\n  <Text size=\"sm\" className={cn('text-grey-700', 'max-w-[80ch]', className)}>\n    {children}\n  </Text>\n)\n"],"mappings":";;;;;AAKA,IAAa,eAAe,EAC1B,UACA,gBAEA,oBAAC,MAAD;CAAM,MAAK;CAAK,WAAW,GAAG,iBAAiB,gBAAgB,SAAS;CACrE;AACG,CAAA"}
+{"version":3,"file":"FieldDescription.js","names":[],"sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\nexport const Description = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => (\n  <Text size=\"sm\" className={cn('text-subtlest', 'max-w-[80ch]', className)}>\n    {children}\n  </Text>\n)\n"],"mappings":";;;;;AAKA,IAAa,eAAe,EAC1B,UACA,gBAEA,oBAAC,MAAD;CAAM,MAAK;CAAK,WAAW,GAAG,iBAAiB,gBAAgB,SAAS;CACrE;AACG,CAAA"}

package/dist/components/field-wrapper/FieldWrapper.js

@@ -31,6 +31,7 @@ var FieldWrapper = ({ children, error, fieldId, label, labelId, prompt, descript
 		}),
 		children,
 		error && /* @__PURE__ */ jsx(InlineMessage, {
+			tone: "danger",
 			className: "mt-2",
 			children: error
 		})

package/dist/components/field-wrapper/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport type { ValidationOptions } from '../form/validation'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { type LabelProps } from '../label/Label'\nimport { Link } from '../link/Link'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: {\n    link?: string\n    label: string\n    onClick?: () => void\n    // Forwarded to the internal Link's reloadDocument: when true the prompt\n    // renders a plain <a> with the raw link, bypassing any router link injected\n    // via Router.Provider — needed for links pointing at a different app. See #894.\n    reloadDocument?: boolean\n  }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n  /**\n   * Gives the visible label an id so a control can reference it via\n   * aria-labelledby. Only needed where htmlFor alone doesn't produce the\n   * accessible name — see SelectMenuField. Left unset, the label renders no id.\n   */\n  labelId?: string\n}\n\nexport type FieldElementWrapperProps = Omit<\n  FieldWrapperProps,\n  'fieldId' | 'labelId'\n> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  labelId,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n  <div {...rest}>\n    <div\n      className={cn(\n        'mb-3',\n        'flex',\n        'items-center',\n        'justify-between',\n        hideLabel && 'sr-only'\n      )}\n    >\n      <Label\n        htmlFor={fieldId}\n        id={labelId}\n        required={required}\n        appearance={appearance}\n      >\n        {label}\n      </Label>\n      {prompt && (\n        <Link\n          href={prompt?.link}\n          onClick={prompt?.onClick}\n          reloadDocument={prompt?.reloadDocument}\n          size=\"sm\"\n        >\n          {prompt.label}\n        </Link>\n      )}\n    </div>\n    {description && <Description className=\"mb-3\">{description}</Description>}\n    {children}\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n  </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;;AA4CA,IAAa,gBAAgB,EAC3B,UACA,OACA,SACA,OACA,SACA,QACA,aACA,UACA,WACA,YACA,GAAG,WAEH,qBAAC,OAAD;CAAK,GAAI;WAAT;EACE,qBAAC,OAAD;GACE,WAAW,GACT,QACA,QACA,gBACA,mBACA,aAAa,SACf;aAPF,CASE,oBAAC,OAAD;IACE,SAAS;IACT,IAAI;IACM;IACE;cAEX;GACI,CAAA,GACN,UACC,oBAAC,MAAD;IACE,MAAM,QAAQ;IACd,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;IACxB,MAAK;cAEJ,OAAO;GACJ,CAAA,CAEL;;EACJ,eAAe,oBAAC,aAAD;GAAa,WAAU;aAAQ;EAAyB,CAAA;EACvE;EACA,SAAS,oBAAC,eAAD;GAAe,WAAU;aAAQ;EAAqB,CAAA;CAC7D;;AAGP,aAAa,cAAc"}
+{"version":3,"file":"FieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport type { ValidationOptions } from '../form/validation'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { type LabelProps } from '../label/Label'\nimport { Link } from '../link/Link'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: {\n    link?: string\n    label: string\n    onClick?: () => void\n    // Forwarded to the internal Link's reloadDocument: when true the prompt\n    // renders a plain <a> with the raw link, bypassing any router link injected\n    // via Router.Provider — needed for links pointing at a different app. See #894.\n    reloadDocument?: boolean\n  }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n  /**\n   * Gives the visible label an id so a control can reference it via\n   * aria-labelledby. Only needed where htmlFor alone doesn't produce the\n   * accessible name — see SelectMenuField. Left unset, the label renders no id.\n   */\n  labelId?: string\n}\n\nexport type FieldElementWrapperProps = Omit<\n  FieldWrapperProps,\n  'fieldId' | 'labelId'\n> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  labelId,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => (\n  <div {...rest}>\n    <div\n      className={cn(\n        'mb-3',\n        'flex',\n        'items-center',\n        'justify-between',\n        hideLabel && 'sr-only'\n      )}\n    >\n      <Label\n        htmlFor={fieldId}\n        id={labelId}\n        required={required}\n        appearance={appearance}\n      >\n        {label}\n      </Label>\n      {prompt && (\n        <Link\n          href={prompt?.link}\n          onClick={prompt?.onClick}\n          reloadDocument={prompt?.reloadDocument}\n          size=\"sm\"\n        >\n          {prompt.label}\n        </Link>\n      )}\n    </div>\n    {description && <Description className=\"mb-3\">{description}</Description>}\n    {children}\n    {error && (\n      <InlineMessage tone=\"danger\" className=\"mt-2\">\n        {error}\n      </InlineMessage>\n    )}\n  </div>\n)\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"mappings":";;;;;;;;AA4CA,IAAa,gBAAgB,EAC3B,UACA,OACA,SACA,OACA,SACA,QACA,aACA,UACA,WACA,YACA,GAAG,WAEH,qBAAC,OAAD;CAAK,GAAI;WAAT;EACE,qBAAC,OAAD;GACE,WAAW,GACT,QACA,QACA,gBACA,mBACA,aAAa,SACf;aAPF,CASE,oBAAC,OAAD;IACE,SAAS;IACT,IAAI;IACM;IACE;cAEX;GACI,CAAA,GACN,UACC,oBAAC,MAAD;IACE,MAAM,QAAQ;IACd,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;IACxB,MAAK;cAEJ,OAAO;GACJ,CAAA,CAEL;;EACJ,eAAe,oBAAC,aAAD;GAAa,WAAU;aAAQ;EAAyB,CAAA;EACvE;EACA,SACC,oBAAC,eAAD;GAAe,MAAK;GAAS,WAAU;aACpC;EACY,CAAA;CAEd;;AAGP,aAAa,cAAc"}

package/dist/components/field-wrapper/InlineFieldWrapper.js

@@ -21,6 +21,7 @@ var InlineFieldWrapper = ({ align = "start", children, className, description, d
 			})), label]
 		}),
 		error && /* @__PURE__ */ jsx(InlineMessage, {
+			tone: "danger",
 			className: "mt-2",
 			children: error
 		}),

package/dist/components/field-wrapper/InlineFieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineFieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButton } from '../radio-button/RadioButton'\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={cn(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) &&\n              child?.props?.size !== 'lg' &&\n              'translate-y-1'\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={cn(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"mappings":";;;;;;;;;AAmBA,IAAa,sBAAsB,EACjC,QAAQ,SACR,UACA,WACA,aACA,YAAY,OACZ,OACA,OACA,eAEA,qBAAC,OAAD;CAAgB;WAAhB;EACE,qBAAC,OAAD;GACS;GACI;GACD;GACV,MAAK;aAJP,CAMG,QAAM,SAAS,IAAI,WAAW,UAC7B,oBAAC,OAAD;IACE,WAAW,GACT,cAAc,aAAa,QAC3B,cAAc,SAAS,SACtB,OAAO,SAAS,YAAY,OAAO,SAAS,gBAC3C,OAAO,OAAO,SAAS,QACvB,eACJ;cAEC;GACE,CAAA,CACN,GACA,KACI;;EACN,SAAS,oBAAC,eAAD;GAAe,WAAU;aAAQ;EAAqB,CAAA;EAC/D,eACC,oBAAC,aAAD;GACE,WAAW,GACT,QACA,cAAc,aAAa,QAC3B,cAAc,SAAS,MACzB;aAEC;EACU,CAAA;CAEZ;;AAGP,mBAAmB,cAAc"}
+{"version":3,"file":"InlineFieldWrapper.js","names":[],"sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButton } from '../radio-button/RadioButton'\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={cn(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) &&\n              child?.props?.size !== 'lg' &&\n              'translate-y-1'\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && (\n      <InlineMessage tone=\"danger\" className=\"mt-2\">\n        {error}\n      </InlineMessage>\n    )}\n    {description && (\n      <Description\n        className={cn(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"mappings":";;;;;;;;;AAmBA,IAAa,sBAAsB,EACjC,QAAQ,SACR,UACA,WACA,aACA,YAAY,OACZ,OACA,OACA,eAEA,qBAAC,OAAD;CAAgB;WAAhB;EACE,qBAAC,OAAD;GACS;GACI;GACD;GACV,MAAK;aAJP,CAMG,QAAM,SAAS,IAAI,WAAW,UAC7B,oBAAC,OAAD;IACE,WAAW,GACT,cAAc,aAAa,QAC3B,cAAc,SAAS,SACtB,OAAO,SAAS,YAAY,OAAO,SAAS,gBAC3C,OAAO,OAAO,SAAS,QACvB,eACJ;cAEC;GACE,CAAA,CACN,GACA,KACI;;EACN,SACC,oBAAC,eAAD;GAAe,MAAK;GAAS,WAAU;aACpC;EACY,CAAA;EAEhB,eACC,oBAAC,aAAD;GACE,WAAW,GACT,QACA,cAAc,aAAa,QAC3B,cAAc,SAAS,MACzB;aAEC;EACU,CAAA;CAEZ;;AAGP,mBAAmB,cAAc"}