@atom-learning/components 5.11.0 → 5.12.1

package/dist/components/date-field/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"gUAYO,MAAMA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EACxB,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9BU,EAAMT,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKf,EACL,YAAaM,EACb,MAAOK,EACP,QAASR,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,CAAA,EAEtCU,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAV,EAAU,YAAc"}
+{"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={appearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={appearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"wWAYa,MAAAA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EAAe,EACvC,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMV,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKhB,EACL,YAAaM,EACb,MAAOM,EACP,QAAST,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAAAA,EAEZQ,EAAA,cAACE,EAAA,CACC,GAAId,EACJ,KAAMA,EACN,IAAKW,EACL,WAAYP,EACX,GAAIK,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAX,EAAU,YAAc"}

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

@@ -1,2 +1,2 @@
-import{CalendarEvent as B}from"@atom-learning/icons";import p from"dayjs";import M from"dayjs/plugin/customParseFormat";import*as e from"react";import{DIALOG_Z_INDEX as P}from"../../constants/zIndices.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as H}from"../../utilities/style/get-icon-size.js";import{useCallbackRefState as $}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as U}from"../action-icon/ActionIcon.js";import{Box as V}from"../box/Box.js";import{Calendar as W}from"../calendar/Calendar.js";import{DEFAULT_LABELS as Y}from"../calendar/constants.js";import{Icon as j}from"../icon/Icon.js";import{Input as G}from"../input/Input.js";import{Popover as c}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as C}from"./constants.js";p.extend(M);const I=(n,o=C)=>n?p(n).format(o):"",w=e.forwardRef(({initialDate:n,dateFormat:o=C,firstDayOfWeek:y=1,disabled:f,monthNames:T,weekdayNames:k,size:d="md",labels:A,revalidate:l,onChange:u,minDate:O,maxDate:x,...z},F)=>{const[s,D]=e.useState(n?p(n).toDate():void 0),[m,S]=$();e.useImperativeHandle(F,()=>m);const L=I(s,o),N=e.useCallback(t=>{const r=t.target.value,a=p(r,o),i=a.isValid()?a.toDate():void 0;D(i),u==null||u(i)},[o,u]),E=e.useCallback(t=>{D(t),(()=>{var r;if(!m)return;const a=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;a==null||a.call(m,I(t,o));const i=new Event("input",{bubbles:!0});m.dispatchEvent(i)})()},[o,m]),b={...Y,...A},[R,v]=e.useState(!1),h=e.useRef(null),g=e.useRef(null),_=e.useMemo(()=>H(d),[d]);return e.createElement(V,{css:{position:"relative",height:"max-content"}},e.createElement(G,{name:"date",disabled:f,size:d,...z,onChange:N,ref:S,defaultValue:L}),e.createElement(c,{modal:!0,open:R,onOpenChange:v},e.createElement(c.Trigger,{asChild:!0},e.createElement(U,{css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"0"},disabled:f,label:b.open,size:_,theme:"neutral",hasTooltip:!1},e.createElement(j,{is:B}))),e.createElement(c.Portal,null,e.createElement(c.Content,{css:{pr:"$sizes$2",zIndex:P},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var r,a;t.preventDefault(),s?(r=g.current)==null||r.focus():(a=h.current)==null||a.focus()}},e.createElement(W,{date:s||new Date,selected:s,onDateSelected:async t=>{v(!1),await E(t.date),l&&l()},setYear:async t=>{await E(t),l&&l()},minDate:O,maxDate:x,refDateToday:h,refDateSelected:g,firstDayOfWeek:y,monthNames:T,weekdayNames:k,labels:b})))))});w.displayName="DateInput";export{w as DateInput};
+import{CalendarEvent as M}from"@atom-learning/icons";import p from"dayjs";import P from"dayjs/plugin/customParseFormat";import*as e from"react";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as H}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{useCallbackRefState as _}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as U}from"../action-icon/ActionIcon.js";import{Box as V}from"../box/Box.js";import{Calendar as W}from"../calendar/Calendar.js";import{DEFAULT_LABELS as Y}from"../calendar/constants.js";import{Icon as $}from"../icon/Icon.js";import{Input as j}from"../input/Input.js";import{Popover as c}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as C}from"./constants.js";p.extend(P);const w=(n,o=C)=>n?p(n).format(o):"",y=e.forwardRef(({initialDate:n,dateFormat:o=C,firstDayOfWeek:I=1,disabled:f,monthNames:T,weekdayNames:k,size:d="md",labels:A,revalidate:m,onChange:u,minDate:x,maxDate:O,...S},z)=>{const[s,D]=e.useState(n?p(n).toDate():void 0),[l,F]=_();e.useImperativeHandle(z,()=>l);const N=w(s,o),L=e.useCallback(t=>{const r=t.target.value,a=p(r,o),i=a.isValid()?a.toDate():void 0;D(i),u==null||u(i)},[o,u]),E=e.useCallback(t=>{D(t),(()=>{var r;if(!l)return;const a=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;a==null||a.call(l,w(t,o));const i=new Event("input",{bubbles:!0});l.dispatchEvent(i)})()},[o,l]),b={...Y,...A},[R,v]=e.useState(!1),h=e.useRef(null),g=e.useRef(null),B=e.useMemo(()=>H(d),[d]);return e.createElement(V,{css:{position:"relative",height:"max-content"}},e.createElement(j,{name:"date",disabled:f,size:d,...S,onChange:L,ref:F,defaultValue:N}),e.createElement(c,{modal:!0,open:R,onOpenChange:v},e.createElement(c.Trigger,{asChild:!0},e.createElement(U,{css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"0"},disabled:f,label:b.open,size:B,theme:"neutral",hasTooltip:!1},e.createElement($,{is:M}))),e.createElement(c.Portal,null,e.createElement(c.Content,{css:{pr:"$sizes$2",zIndex:1147483646},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var r,a;t.preventDefault(),s?(r=g.current)==null||r.focus():(a=h.current)==null||a.focus()}},e.createElement(W,{date:s||new Date,selected:s,onDateSelected:async t=>{v(!1),await E(t.date),m&&m()},setYear:async t=>{await E(t),m&&m()},minDate:x,maxDate:O,refDateToday:h,refDateSelected:g,firstDayOfWeek:I,monthNames:T,weekdayNames:k,labels:b})))))});y.displayName="DateInput";export{y as DateInput};
 //# sourceMappingURL=DateInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, 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'\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    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput: React.ForwardRefExoticComponent<DateInputProps> =\n  React.forwardRef(\n    (\n      {\n        initialDate,\n        dateFormat = DEFAULT_DATE_FORMAT,\n        firstDayOfWeek = 1,\n        disabled,\n        monthNames,\n        weekdayNames,\n        size = 'md',\n        labels,\n        revalidate,\n        onChange,\n        minDate,\n        maxDate,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [date, setDate] = React.useState(\n        initialDate ? dayjs(initialDate).toDate() : undefined\n      )\n\n      const [inputElRef, setInputElRef] = useCallbackRefState()\n      React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\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 = React.useMemo(() => getFieldIconSize(size), [size])\n\n      return (\n        <Box css={{ position: 'relative', height: 'max-content' }}>\n          <Input\n            name=\"date\"\n            disabled={disabled}\n            size={size}\n            {...remainingProps}\n            onChange={handleInputChange}\n            ref={setInputElRef}\n            defaultValue={dateString}\n          />\n          <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n            <Popover.Trigger asChild>\n              <ActionIcon\n                css={{\n                  position: 'absolute',\n                  top: '50%',\n                  transform: 'translateY(-50%)',\n                  right: '0'\n                }}\n                disabled={disabled}\n                label={updatedLabels.open}\n                size={iconSize}\n                theme=\"neutral\"\n                hasTooltip={false}\n              >\n                <Icon is={CalendarEvent} />\n              </ActionIcon>\n            </Popover.Trigger>\n            <Popover.Portal>\n              <Popover.Content\n                css={{ pr: '$sizes$2', zIndex: DIALOG_Z_INDEX }}\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              >\n                <Calendar\n                  date={date || new Date()}\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        </Box>\n      )\n    }\n  )\n\nDateInput.displayName = 'DateInput'\n"],"names":["dayjs","customParseFormat","formatDateToString","date","dateFormat","DEFAULT_DATE_FORMAT","DateInput","React","initialDate","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","setDate","inputElRef","setInputElRef","useCallbackRefState","dateString","handleInputChange","event","newDateString","parsedInputDate","newDate","handleCalendarChange","_a","nativeInputValueSetter","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","iconSize","getFieldIconSize","Box","Input","Popover","ActionIcon","Icon","CalendarEvent","DIALOG_Z_INDEX","e","_b","Calendar"],"mappings":"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"}
+{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, 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'\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    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput: React.ForwardRefExoticComponent<DateInputProps> =\n  React.forwardRef(\n    (\n      {\n        initialDate,\n        dateFormat = DEFAULT_DATE_FORMAT,\n        firstDayOfWeek = 1,\n        disabled,\n        monthNames,\n        weekdayNames,\n        size = 'md',\n        labels,\n        revalidate,\n        onChange,\n        minDate,\n        maxDate,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [date, setDate] = React.useState(\n        initialDate ? dayjs(initialDate).toDate() : undefined\n      )\n\n      const [inputElRef, setInputElRef] = useCallbackRefState()\n      React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\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 = React.useMemo(() => getFieldIconSize(size), [size])\n\n      return (\n        <Box css={{ position: 'relative', height: 'max-content' }}>\n          <Input\n            name=\"date\"\n            disabled={disabled}\n            size={size}\n            {...remainingProps}\n            onChange={handleInputChange}\n            ref={setInputElRef}\n            defaultValue={dateString}\n          />\n          <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n            <Popover.Trigger asChild>\n              <ActionIcon\n                css={{\n                  position: 'absolute',\n                  top: '50%',\n                  transform: 'translateY(-50%)',\n                  right: '0'\n                }}\n                disabled={disabled}\n                label={updatedLabels.open}\n                size={iconSize}\n                theme=\"neutral\"\n                hasTooltip={false}\n              >\n                <Icon is={CalendarEvent} />\n              </ActionIcon>\n            </Popover.Trigger>\n            <Popover.Portal>\n              <Popover.Content\n                css={{ pr: '$sizes$2', zIndex: 1147483646 }}\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              >\n                <Calendar\n                  date={date || new Date()}\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        </Box>\n      )\n    }\n  )\n\nDateInput.displayName = 'DateInput'\n"],"names":["dayjs","customParseFormat","formatDateToString","date","dateFormat","DEFAULT_DATE_FORMAT","DateInput","React","initialDate","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","setDate","inputElRef","setInputElRef","useCallbackRefState","dateString","handleInputChange","event","newDateString","parsedInputDate","newDate","handleCalendarChange","_a","nativeInputValueSetter","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","iconSize","getFieldIconSize","Box","Input","Popover","ActionIcon","Icon","CalendarEvent","e","_b","Calendar"],"mappings":"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"}

package/dist/components/dialog/DialogContent.js

@@ -1,2 +1,2 @@
-import{Close as g}from"@atom-learning/icons";import{Overlay as x,Content as f,Portal as v,Close as b}from"@radix-ui/react-dialog";import*as e from"react";import{DIALOG_Z_INDEX as w}from"../../constants/zIndices.js";import{keyframes as s,styled as l}from"../../stitches.js";import{backdropOverlay as $}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Icon as C}from"../icon/Icon.js";import{DialogBackground as n}from"./DialogBackground.js";const i="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=s({"0%":{transform:m},"100%":{transform:i}}),y=s({"0%":{transform:i},"100%":{transform:m}}),E=l(x,$),o={width:"auto",height:"auto",maxWidth:"auto",maxHeight:"auto","@supports (height: 100svh)":{height:"auto",maxHeight:"auto"}},I=l(f,{bg:"white",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:i,zIndex:w,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{...o,borderRadius:"$1",width:"380px"},sm:{...o,borderRadius:"$1",width:"480px"},md:{...o,borderRadius:"$1",width:"600px"},lg:{...o,borderRadius:"$1",width:"800px"},xl:{...o,borderRadius:"$1",width:"1100px"},fullscreen:{width:"100vw",height:"100vh",maxWidth:"100vw",maxHeight:"100vh","@supports (height: 100svh)":{height:"100svh",maxHeight:"100svh"}}}}}),H=({size:h="sm",children:a,closeDialogText:p="Close dialog",showCloseButton:u=!0,...c})=>e.createElement(v,null,e.createElement(E,{id:d},e.Children.map(a,t=>(t==null?void 0:t.type)===n&&t),e.createElement(I,{size:h,"aria-label":"Dialog",onPointerDownOutside:t=>{const r=t.target;(r==null?void 0:r.id)!==d&&t.preventDefault()},...c},u&&e.createElement(z,{as:b,css:{position:"absolute",right:"$4",top:"$4",size:"$5"},label:p,hasTooltip:!1,size:"md",theme:"neutral"},e.createElement(C,{is:g})),e.Children.map(a,t=>(t==null?void 0:t.type)!==n&&t))));export{H as DialogContent};
+import{Close as g}from"@atom-learning/icons";import{Overlay as x,Content as f,Portal as v,Close as b}from"@radix-ui/react-dialog";import*as t from"react";import{keyframes as s,styled as l}from"../../stitches.js";import{backdropOverlay as w}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as $}from"../action-icon/ActionIcon.js";import{Icon as z}from"../icon/Icon.js";import{DialogBackground as n}from"./DialogBackground.js";const i="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",C=s({"0%":{transform:m},"100%":{transform:i}}),y=s({"0%":{transform:i},"100%":{transform:m}}),D=l(x,w),o={width:"auto",height:"auto",maxWidth:"auto",maxHeight:"auto","@supports (height: 100svh)":{height:"auto",maxHeight:"auto"}},E=l(f,{bg:"white",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:i,zIndex:1147483646,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${C} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{...o,borderRadius:"$1",width:"380px"},sm:{...o,borderRadius:"$1",width:"480px"},md:{...o,borderRadius:"$1",width:"600px"},lg:{...o,borderRadius:"$1",width:"800px"},xl:{...o,borderRadius:"$1",width:"1100px"},fullscreen:{width:"100vw",height:"100vh",maxWidth:"100vw",maxHeight:"100vh","@supports (height: 100svh)":{height:"100svh",maxHeight:"100svh"}}}}}),H=({size:h="sm",children:a,closeDialogText:p="Close dialog",showCloseButton:u=!0,...c})=>t.createElement(v,null,t.createElement(D,{id:d},t.Children.map(a,e=>(e==null?void 0:e.type)===n&&e),t.createElement(E,{size:h,"aria-label":"Dialog",onPointerDownOutside:e=>{const r=e.target;(r==null?void 0:r.id)!==d&&e.preventDefault()},...c},u&&t.createElement($,{as:b,css:{position:"absolute",right:"$4",top:"$4",size:"$5"},label:p,hasTooltip:!1,size:"md",theme:"neutral"},t.createElement(z,{is:g})),t.Children.map(a,e=>(e==null?void 0:e.type)!==n&&e))));export{H as DialogContent};
 //# sourceMappingURL=DialogContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","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 { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n  '0%': { transform: contentOffScreen },\n  '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n  '0%': { transform: contentOnScreen },\n  '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, backdropOverlay)\n\nconst sizeReset = {\n  width: 'auto',\n  height: 'auto',\n  maxWidth: 'auto',\n  maxHeight: 'auto',\n  '@supports (height: 100svh)': {\n    height: 'auto',\n    maxHeight: 'auto'\n  }\n}\nconst StyledDialogContent = styled(Content, {\n  bg: 'white',\n  boxShadow: '$3',\n  boxSizing: 'border-box',\n  left: '50%',\n  maxWidth: '90vw',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n  p: '$5',\n  position: 'fixed',\n  top: '50%',\n  transform: contentOnScreen,\n  zIndex: DIALOG_Z_INDEX,\n  '&:focus': {\n    outline: 'none'\n  },\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    }\n  },\n  variants: {\n    size: {\n      xs: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '380px'\n      },\n      sm: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '480px'\n      },\n      md: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '600px'\n      },\n      lg: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '800px'\n      },\n      xl: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '1100px'\n      },\n      fullscreen: {\n        width: '100vw',\n        height: '100vh',\n        maxWidth: '100vw',\n        maxHeight: '100vh',\n        '@supports (height: 100svh)': {\n          height: '100svh',\n          maxHeight: '100svh'\n        }\n      }\n    }\n  }\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  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\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        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            css={{ position: 'absolute', right: '$4', top: '$4', size: '$5' }}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","backdropOverlay","sizeReset","StyledDialogContent","Content","DIALOG_Z_INDEX","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ufAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAASC,CAAe,EAErDC,EAAY,CAChB,MAAO,OACP,OAAQ,OACR,SAAU,OACV,UAAW,OACX,6BAA8B,CAC5B,OAAQ,OACR,UAAW,MACb,CACF,EACMC,EAAsBJ,EAAOK,EAAS,CAC1C,GAAI,QACJ,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWZ,EACX,OAAQa,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGV,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,GAAGK,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,QACT,EACA,WAAY,CACV,MAAO,QACP,OAAQ,QACR,SAAU,QACV,UAAW,QACX,6BAA8B,CAC5B,OAAQ,SACR,UAAW,QACb,CACF,CACF,CACF,CACF,CAAC,EAOYI,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,GACtBkB,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACT,EAAA,CACC,KAAMI,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,eAEV,CAAA,EACC,GAAGL,CAAAA,EAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,KAAM,KAAM,IAAK,EAChE,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAENG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAAA,CAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,YAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
+{"version":3,"file":"DialogContent.js","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 { keyframes, styled } from '~/stitches'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n  '0%': { transform: contentOffScreen },\n  '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n  '0%': { transform: contentOnScreen },\n  '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, backdropOverlay)\n\nconst sizeReset = {\n  width: 'auto',\n  height: 'auto',\n  maxWidth: 'auto',\n  maxHeight: 'auto',\n  '@supports (height: 100svh)': {\n    height: 'auto',\n    maxHeight: 'auto'\n  }\n}\nconst StyledDialogContent = styled(Content, {\n  bg: 'white',\n  boxShadow: '$3',\n  boxSizing: 'border-box',\n  left: '50%',\n  maxWidth: '90vw',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n  p: '$5',\n  position: 'fixed',\n  top: '50%',\n  transform: contentOnScreen,\n  zIndex: 1147483646,\n  '&:focus': {\n    outline: 'none'\n  },\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n    }\n  },\n  variants: {\n    size: {\n      xs: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '380px'\n      },\n      sm: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '480px'\n      },\n      md: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '600px'\n      },\n      lg: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '800px'\n      },\n      xl: {\n        ...sizeReset,\n        borderRadius: '$1',\n        width: '1100px'\n      },\n      fullscreen: {\n        width: '100vw',\n        height: '100vh',\n        maxWidth: '100vw',\n        maxHeight: '100vh',\n        '@supports (height: 100svh)': {\n          height: '100svh',\n          maxHeight: '100svh'\n        }\n      }\n    }\n  }\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  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\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        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            css={{ position: 'absolute', right: '$4', top: '$4', size: '$5' }}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","backdropOverlay","sizeReset","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"0bAWA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAASC,CAAe,EAErDC,EAAY,CAChB,MAAO,OACP,OAAQ,OACR,SAAU,OACV,UAAW,OACX,6BAA8B,CAC5B,OAAQ,OACR,UAAW,MACb,CACF,EACMC,EAAsBJ,EAAOK,EAAS,CAC1C,GAAI,QACJ,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWZ,EACX,OAAQ,WACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGG,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,GAAGK,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,OACT,EACA,GAAI,CACF,GAAGA,EACH,aAAc,KACd,MAAO,QACT,EACA,WAAY,CACV,MAAO,QACP,OAAQ,QACR,SAAU,QACV,UAAW,QACX,6BAA8B,CAC5B,OAAQ,SACR,UAAW,QACb,CACF,CACF,CACF,CACF,CAAC,EAOYG,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACb,EAAA,CAAoB,GAAIJ,CAAAA,EACtBiB,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAA,OAAAA,EAAS,MAAOtB,GAClBqB,EAAM,eAEV,CAAA,EACC,GAAGL,CAEHD,EAAAA,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,KAAM,KAAM,IAAK,EAChE,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,WAENG,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAW,CAAA,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,YAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}

package/dist/components/drawer/DrawerContent.js

@@ -1,2 +1,2 @@
-import{Content as l,Portal as p}from"@radix-ui/react-dialog";import t from"react";import{Flex as s}from"../flex/Flex.js";import{DIALOG_Z_INDEX as c}from"../../constants/zIndices.js";import{ColorScheme as x}from"../../experiments/color-scheme/ColorScheme.js";import{styled as w}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideInOut as e}from"../../utilities/style/keyframe-animations.js";import{DrawerContext as h}from"./Drawer.context.js";import{DrawerOverlay as u}from"./DrawerOverlay.js";const f=e({outPosition:{x:0,y:"-100%"}}),y=e({outPosition:{x:"100%",y:0}}),g=e({outPosition:{x:0,y:"100%"}}),C=e({outPosition:{x:"-100%",y:0}}),i=o=>({'&[data-state="open"]':{animationName:o.in},'&[data-state="closed"]':{animationName:o.out}}),n={left:0,width:"100%",maxHeight:"85%"},r={top:0,height:"100%",width:"var(--drawer-content-width, 100%)",maxWidth:"100%"},a=w(l,{bg:"$base1",boxShadow:"$2",position:"fixed",zIndex:c,"@allowMotion":{animationTimingFunction:"ease-out",animationDuration:"250ms"},variants:{position:{top:{top:0,...n,...i(f)},right:{right:0,...r,...i(y)},bottom:{bottom:0,...n,...i(g)},left:{left:0,...r,...i(C)}},size:{xs:{"--drawer-content-width":"240px"},sm:{"--drawer-content-width":"256px"},md:{"--drawer-content-width":"288px"},lg:{"--drawer-content-width":"304px"},xl:{"--drawer-content-width":"320px"},"2xl":{"--drawer-content-width":"720px"},"3xl":{"--drawer-content-width":"1000px"}}}}),D=({children:o,...m})=>{const{position:d}=t.useContext(h);return t.createElement(p,null,t.createElement(u,null),t.createElement(x,{base:"grey1",accent:"primary1",asChild:!0},t.createElement(a,{size:"lg",position:d,...m,asChild:!0},t.createElement(s,{direction:"column"},o))))};export{D as DrawerContent,a as StyledContent};
+import{Content as l,Portal as p}from"@radix-ui/react-dialog";import t from"react";import{Flex as s}from"../flex/Flex.js";import{ColorScheme as c}from"../../experiments/color-scheme/ColorScheme.js";import{styled as x}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{slideInOut as e}from"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{DrawerContext as w}from"./Drawer.context.js";import{DrawerOverlay as h}from"./DrawerOverlay.js";const u=e({outPosition:{x:0,y:"-100%"}}),f=e({outPosition:{x:"100%",y:0}}),y=e({outPosition:{x:0,y:"100%"}}),g=e({outPosition:{x:"-100%",y:0}}),i=o=>({'&[data-state="open"]':{animationName:o.in},'&[data-state="closed"]':{animationName:o.out}}),n={left:0,width:"100%",maxHeight:"85%"},r={top:0,height:"100%",width:"var(--drawer-content-width, 100%)",maxWidth:"100%"},a=x(l,{bg:"$base1",boxShadow:"$2",position:"fixed",zIndex:1147483646,"@allowMotion":{animationTimingFunction:"ease-out",animationDuration:"250ms"},variants:{position:{top:{top:0,...n,...i(u)},right:{right:0,...r,...i(f)},bottom:{bottom:0,...n,...i(y)},left:{left:0,...r,...i(g)}},size:{xs:{"--drawer-content-width":"240px"},sm:{"--drawer-content-width":"256px"},md:{"--drawer-content-width":"288px"},lg:{"--drawer-content-width":"304px"},xl:{"--drawer-content-width":"320px"},"2xl":{"--drawer-content-width":"720px"},"3xl":{"--drawer-content-width":"1000px"}}}}),C=({children:o,...m})=>{const{position:d}=t.useContext(w);return t.createElement(p,null,t.createElement(h,null),t.createElement(c,{base:"grey1",accent:"primary1",asChild:!0},t.createElement(a,{size:"lg",position:d,...m,asChild:!0},t.createElement(s,{direction:"column"},o))))};export{C as DrawerContent,a as StyledContent};
 //# sourceMappingURL=DrawerContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.js","sources":["../../../src/components/drawer/DrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { ColorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { slideInOut } from '~/utilities'\n\nimport { DrawerContext } from './Drawer.context'\nimport { DrawerOverlay } from './DrawerOverlay'\n\nconst animationTop = slideInOut({ outPosition: { x: 0, y: '-100%' } })\nconst animationRight = slideInOut({ outPosition: { x: '100%', y: 0 } })\nconst animationBottom = slideInOut({ outPosition: { x: 0, y: '100%' } })\nconst animationLeft = slideInOut({ outPosition: { x: '-100%', y: 0 } })\nconst setupAnimation = (animation: ReturnType<typeof slideInOut>) => {\n  return {\n    '&[data-state=\"open\"]': {\n      animationName: animation.in\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animation.out\n    }\n  }\n}\n\nconst positionY = {\n  left: 0,\n  width: '100%',\n  maxHeight: '85%'\n}\n\nconst positionX = {\n  top: 0,\n  height: '100%',\n  width: 'var(--drawer-content-width, 100%)',\n  maxWidth: '100%'\n}\n\nexport const StyledContent = styled(Content, {\n  bg: '$base1',\n  boxShadow: '$2',\n  position: 'fixed',\n  zIndex: DIALOG_Z_INDEX,\n  '@allowMotion': {\n    animationTimingFunction: 'ease-out',\n    animationDuration: '250ms'\n  },\n  variants: {\n    position: {\n      top: {\n        top: 0,\n        ...positionY,\n        ...setupAnimation(animationTop)\n      },\n      right: {\n        right: 0,\n        ...positionX,\n        ...setupAnimation(animationRight)\n      },\n      bottom: {\n        bottom: 0,\n        ...positionY,\n        ...setupAnimation(animationBottom)\n      },\n      left: {\n        left: 0,\n        ...positionX,\n        ...setupAnimation(animationLeft)\n      }\n    },\n    size: {\n      xs: {\n        '--drawer-content-width': '240px'\n      },\n      sm: {\n        '--drawer-content-width': '256px'\n      },\n      md: {\n        '--drawer-content-width': '288px'\n      },\n      lg: {\n        '--drawer-content-width': '304px'\n      },\n      xl: {\n        '--drawer-content-width': '320px'\n      },\n      '2xl': {\n        '--drawer-content-width': '720px'\n      },\n      '3xl': {\n        '--drawer-content-width': '1000px'\n      }\n    }\n  }\n})\n\nexport const DrawerContent = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => {\n  const { position } = React.useContext(DrawerContext)\n\n  return (\n    <Portal>\n      <DrawerOverlay />\n      <ColorScheme base=\"grey1\" accent=\"primary1\" asChild>\n        <StyledContent size=\"lg\" position={position} {...rest} asChild>\n          <Flex direction=\"column\">{children}</Flex>\n        </StyledContent>\n      </ColorScheme>\n    </Portal>\n  )\n}\n"],"names":["animationTop","slideInOut","animationRight","animationBottom","animationLeft","setupAnimation","animation","positionY","positionX","StyledContent","styled","Content","DIALOG_Z_INDEX","DrawerContent","children","rest","position","React","DrawerContext","Portal","DrawerOverlay","ColorScheme","Flex"],"mappings":"imBAYA,MAAMA,EAAeC,EAAW,CAAE,YAAa,CAAE,EAAG,EAAG,EAAG,OAAQ,CAAE,CAAC,EAC/DC,EAAiBD,EAAW,CAAE,YAAa,CAAE,EAAG,OAAQ,EAAG,CAAE,CAAE,CAAC,EAChEE,EAAkBF,EAAW,CAAE,YAAa,CAAE,EAAG,EAAG,EAAG,MAAO,CAAE,CAAC,EACjEG,EAAgBH,EAAW,CAAE,YAAa,CAAE,EAAG,QAAS,EAAG,CAAE,CAAE,CAAC,EAChEI,EAAkBC,IACf,CACL,uBAAwB,CACtB,cAAeA,EAAU,EAC3B,EACA,yBAA0B,CACxB,cAAeA,EAAU,GAC3B,CACF,GAGIC,EAAY,CAChB,KAAM,EACN,MAAO,OACP,UAAW,KACb,EAEMC,EAAY,CAChB,IAAK,EACL,OAAQ,OACR,MAAO,oCACP,SAAU,MACZ,EAEaC,EAAgBC,EAAOC,EAAS,CAC3C,GAAI,SACJ,UAAW,KACX,SAAU,QACV,OAAQC,EACR,eAAgB,CACd,wBAAyB,WACzB,kBAAmB,OACrB,EACA,SAAU,CACR,SAAU,CACR,IAAK,CACH,IAAK,EACL,GAAGL,EACH,GAAGF,EAAeL,CAAY,CAChC,EACA,MAAO,CACL,MAAO,EACP,GAAGQ,EACH,GAAGH,EAAeH,CAAc,CAClC,EACA,OAAQ,CACN,OAAQ,EACR,GAAGK,EACH,GAAGF,EAAeF,CAAe,CACnC,EACA,KAAM,CACJ,KAAM,EACN,GAAGK,EACH,GAAGH,EAAeD,CAAa,CACjC,CACF,EACA,KAAM,CACJ,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,MAAO,CACL,yBAA0B,OAC5B,EACA,MAAO,CACL,yBAA0B,QAC5B,CACF,CACF,CACF,CAAC,EAEYS,EAAgB,CAAC,CAC5B,SAAAC,KACGC,CACL,IAAkD,CAChD,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAM,WAAWC,CAAa,EAEnD,OACED,EAAA,cAACE,EAAA,KACCF,EAAA,cAACG,EAAA,IAAc,EACfH,EAAA,cAACI,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAW,QAAO,EACjDJ,EAAAA,EAAA,cAACR,EAAc,CAAA,KAAK,KAAK,SAAUO,EAAW,GAAGD,EAAM,QAAO,IAC5DE,EAAA,cAACK,EAAA,CAAK,UAAU,QAAUR,EAAAA,CAAS,CACrC,CACF,CACF,CAEJ"}
+{"version":3,"file":"DrawerContent.js","sources":["../../../src/components/drawer/DrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { ColorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { slideInOut } from '~/utilities'\n\nimport { DrawerContext } from './Drawer.context'\nimport { DrawerOverlay } from './DrawerOverlay'\n\nconst animationTop = slideInOut({ outPosition: { x: 0, y: '-100%' } })\nconst animationRight = slideInOut({ outPosition: { x: '100%', y: 0 } })\nconst animationBottom = slideInOut({ outPosition: { x: 0, y: '100%' } })\nconst animationLeft = slideInOut({ outPosition: { x: '-100%', y: 0 } })\nconst setupAnimation = (animation: ReturnType<typeof slideInOut>) => {\n  return {\n    '&[data-state=\"open\"]': {\n      animationName: animation.in\n    },\n    '&[data-state=\"closed\"]': {\n      animationName: animation.out\n    }\n  }\n}\n\nconst positionY = {\n  left: 0,\n  width: '100%',\n  maxHeight: '85%'\n}\n\nconst positionX = {\n  top: 0,\n  height: '100%',\n  width: 'var(--drawer-content-width, 100%)',\n  maxWidth: '100%'\n}\n\nexport const StyledContent = styled(Content, {\n  bg: '$base1',\n  boxShadow: '$2',\n  position: 'fixed',\n  zIndex: 1147483646,\n  '@allowMotion': {\n    animationTimingFunction: 'ease-out',\n    animationDuration: '250ms'\n  },\n  variants: {\n    position: {\n      top: {\n        top: 0,\n        ...positionY,\n        ...setupAnimation(animationTop)\n      },\n      right: {\n        right: 0,\n        ...positionX,\n        ...setupAnimation(animationRight)\n      },\n      bottom: {\n        bottom: 0,\n        ...positionY,\n        ...setupAnimation(animationBottom)\n      },\n      left: {\n        left: 0,\n        ...positionX,\n        ...setupAnimation(animationLeft)\n      }\n    },\n    size: {\n      xs: {\n        '--drawer-content-width': '240px'\n      },\n      sm: {\n        '--drawer-content-width': '256px'\n      },\n      md: {\n        '--drawer-content-width': '288px'\n      },\n      lg: {\n        '--drawer-content-width': '304px'\n      },\n      xl: {\n        '--drawer-content-width': '320px'\n      },\n      '2xl': {\n        '--drawer-content-width': '720px'\n      },\n      '3xl': {\n        '--drawer-content-width': '1000px'\n      }\n    }\n  }\n})\n\nexport const DrawerContent = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => {\n  const { position } = React.useContext(DrawerContext)\n\n  return (\n    <Portal>\n      <DrawerOverlay />\n      <ColorScheme base=\"grey1\" accent=\"primary1\" asChild>\n        <StyledContent size=\"lg\" position={position} {...rest} asChild>\n          <Flex direction=\"column\">{children}</Flex>\n        </StyledContent>\n      </ColorScheme>\n    </Portal>\n  )\n}\n"],"names":["animationTop","slideInOut","animationRight","animationBottom","animationLeft","setupAnimation","animation","positionY","positionX","StyledContent","styled","Content","DrawerContent","children","rest","position","React","DrawerContext","Portal","DrawerOverlay","ColorScheme","Flex"],"mappings":"oiBAWA,MAAMA,EAAeC,EAAW,CAAE,YAAa,CAAE,EAAG,EAAG,EAAG,OAAQ,CAAE,CAAC,EAC/DC,EAAiBD,EAAW,CAAE,YAAa,CAAE,EAAG,OAAQ,EAAG,CAAE,CAAE,CAAC,EAChEE,EAAkBF,EAAW,CAAE,YAAa,CAAE,EAAG,EAAG,EAAG,MAAO,CAAE,CAAC,EACjEG,EAAgBH,EAAW,CAAE,YAAa,CAAE,EAAG,QAAS,EAAG,CAAE,CAAE,CAAC,EAChEI,EAAkBC,IACf,CACL,uBAAwB,CACtB,cAAeA,EAAU,EAC3B,EACA,yBAA0B,CACxB,cAAeA,EAAU,GAC3B,CACF,GAGIC,EAAY,CAChB,KAAM,EACN,MAAO,OACP,UAAW,KACb,EAEMC,EAAY,CAChB,IAAK,EACL,OAAQ,OACR,MAAO,oCACP,SAAU,MACZ,EAEaC,EAAgBC,EAAOC,EAAS,CAC3C,GAAI,SACJ,UAAW,KACX,SAAU,QACV,OAAQ,WACR,eAAgB,CACd,wBAAyB,WACzB,kBAAmB,OACrB,EACA,SAAU,CACR,SAAU,CACR,IAAK,CACH,IAAK,EACL,GAAGJ,EACH,GAAGF,EAAeL,CAAY,CAChC,EACA,MAAO,CACL,MAAO,EACP,GAAGQ,EACH,GAAGH,EAAeH,CAAc,CAClC,EACA,OAAQ,CACN,OAAQ,EACR,GAAGK,EACH,GAAGF,EAAeF,CAAe,CACnC,EACA,KAAM,CACJ,KAAM,EACN,GAAGK,EACH,GAAGH,EAAeD,CAAa,CACjC,CACF,EACA,KAAM,CACJ,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,GAAI,CACF,yBAA0B,OAC5B,EACA,MAAO,CACL,yBAA0B,OAC5B,EACA,MAAO,CACL,yBAA0B,QAC5B,CACF,CACF,CACF,CAAC,EAEYQ,EAAgB,CAAC,CAC5B,SAAAC,KACGC,CACL,IAAkD,CAChD,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAM,WAAWC,CAAa,EAEnD,OACED,EAAA,cAACE,EAAA,KACCF,EAAA,cAACG,EAAA,IAAc,EACfH,EAAA,cAACI,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAW,QAAO,EACjDJ,EAAAA,EAAA,cAACP,EAAc,CAAA,KAAK,KAAK,SAAUM,EAAW,GAAGD,EAAM,QAAO,IAC5DE,EAAA,cAACK,EAAA,CAAK,UAAU,QAAUR,EAAAA,CAAS,CACrC,CACF,CACF,CAEJ"}

package/dist/components/drawer/DrawerFooter.js

@@ -1,2 +1,2 @@
-import{styled as o}from"../../stitches.js";import{drawerSection as r}from"./Drawer.styles.js";const e=o("div",{...r,borderTop:"1px solid $base3"});export{e as DrawerFooter};
+import{styled as o}from"../../stitches.js";const r=o("div",{p:"$4",width:"100%",borderTop:"1px solid $base3"});export{r as DrawerFooter};
 //# sourceMappingURL=DrawerFooter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerFooter.js","sources":["../../../src/components/drawer/DrawerFooter.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { drawerSection } from './Drawer.styles'\n\nexport const DrawerFooter = styled('div', {\n  ...drawerSection,\n  borderTop: '1px solid $base3'\n})\n"],"names":["DrawerFooter","styled","drawerSection"],"mappings":"8FAIO,MAAMA,EAAeC,EAAO,MAAO,CACxC,GAAGC,EACH,UAAW,kBACb,CAAC"}
+{"version":3,"file":"DrawerFooter.js","sources":["../../../src/components/drawer/DrawerFooter.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const DrawerFooter = styled('div', {\n  p: '$4',\n  width: '100%',\n  borderTop: '1px solid $base3'\n})\n"],"names":["DrawerFooter","styled"],"mappings":"2CAEO,MAAMA,EAAeC,EAAO,MAAO,CACxC,EAAG,KACH,MAAO,OACP,UAAW,kBACb,CAAC"}

package/dist/components/drawer/DrawerHeader.js

@@ -1,2 +1,2 @@
-import{styled as r}from"../../stitches.js";import{drawerSection as o}from"./Drawer.styles.js";const e=r("div",{...o,minHeight:"$6",borderBottom:"1px solid $base3"});export{e as DrawerHeader};
+import{styled as e}from"../../stitches.js";const o=e("div",{p:"$4",width:"100%",minHeight:"$6",borderBottom:"1px solid $base3"});export{o as DrawerHeader};
 //# sourceMappingURL=DrawerHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerHeader.js","sources":["../../../src/components/drawer/DrawerHeader.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { drawerSection } from './Drawer.styles'\n\nexport const DrawerHeader = styled('div', {\n  ...drawerSection,\n  minHeight: '$6', // At least the height of the TopBar\n  borderBottom: '1px solid $base3'\n})\n"],"names":["DrawerHeader","styled","drawerSection"],"mappings":"8FAIa,MAAAA,EAAeC,EAAO,MAAO,CACxC,GAAGC,EACH,UAAW,KACX,aAAc,kBAChB,CAAC"}
+{"version":3,"file":"DrawerHeader.js","sources":["../../../src/components/drawer/DrawerHeader.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const DrawerHeader = styled('div', {\n  p: '$4',\n  width: '100%',\n  minHeight: '$6', // At least the height of the TopBar\n  borderBottom: '1px solid $base3'\n})\n"],"names":["DrawerHeader","styled"],"mappings":"2CAEa,MAAAA,EAAeC,EAAO,MAAO,CACxC,EAAG,KACH,MAAO,OACP,UAAW,KACX,aAAc,kBAChB,CAAC"}

package/dist/components/drawer/DrawerMain.js

@@ -1,2 +1,2 @@
-import{styled as o}from"../../stitches.js";import{drawerSection as r}from"./Drawer.styles.js";const e=o("div",{...r,flexGrow:1,overflowY:"auto"});export{e as DrawerMain};
+import{styled as o}from"../../stitches.js";const r=o("div",{p:"$4",width:"100%",flexGrow:1,overflowY:"auto"});export{r as DrawerMain};
 //# sourceMappingURL=DrawerMain.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerMain.js","sources":["../../../src/components/drawer/DrawerMain.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { drawerSection } from './Drawer.styles'\n\nexport const DrawerMain = styled('div', {\n  ...drawerSection,\n  flexGrow: 1,\n  overflowY: 'auto'\n})\n"],"names":["DrawerMain","styled","drawerSection"],"mappings":"8FAIa,MAAAA,EAAaC,EAAO,MAAO,CACtC,GAAGC,EACH,SAAU,EACV,UAAW,MACb,CAAC"}
+{"version":3,"file":"DrawerMain.js","sources":["../../../src/components/drawer/DrawerMain.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const DrawerMain = styled('div', {\n  p: '$4',\n  width: '100%',\n  flexGrow: 1,\n  overflowY: 'auto'\n})\n"],"names":["DrawerMain","styled"],"mappings":"2CAEa,MAAAA,EAAaC,EAAO,MAAO,CACtC,EAAG,KACH,MAAO,OACP,SAAU,EACV,UAAW,MACb,CAAC"}

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

@@ -1,2 +1,2 @@
-import{Content as i}from"@radix-ui/react-dropdown-menu";import{DROPDOWN_Z_INDEX as t}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideDownAndFade as o,slideLeftAndFade as n,slideUpAndFade as e,slideRightAndFade as d}from"../../utilities/style/keyframe-animations.js";const m=a(i,{bg:"white",borderRadius:"$0",boxShadow:"$0",py:"$2",zIndex:t,"@allowMotion":{animationDuration:"250ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:o},'&[data-side="right"]':{animationName:n},'&[data-side="bottom"]':{animationName:e},'&[data-side="left"]':{animationName:d}}}});export{m as DropdownMenuContent};
+import{Content as i}from"@radix-ui/react-dropdown-menu";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{slideDownAndFade as a,slideLeftAndFade as o,slideUpAndFade as n,slideRightAndFade as e}from"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const d=t(i,{bg:"white",borderRadius:"$0",boxShadow:"$0",py:"$2",zIndex:10,"@allowMotion":{animationDuration:"250ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:a},'&[data-side="right"]':{animationName:o},'&[data-side="bottom"]':{animationName:n},'&[data-side="left"]':{animationName:e}}}});export{d as DropdownMenuContent};
 //# sourceMappingURL=DropdownMenuContent.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuContent.js","sources":["../../../src/components/dropdown-menu/DropdownMenuContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-dropdown-menu'\n\nimport { DROPDOWN_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport {\n  slideDownAndFade,\n  slideLeftAndFade,\n  slideRightAndFade,\n  slideUpAndFade\n} from '~/utilities'\n\nexport const DropdownMenuContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$0',\n  boxShadow: '$0',\n  py: '$2',\n  zIndex: DROPDOWN_Z_INDEX,\n  '@allowMotion': {\n    animationDuration: '250ms',\n    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n    willChange: 'transform, opacity',\n    '&[data-state=\"open\"]': {\n      '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n      '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n      '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n      '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n    }\n  }\n})\n"],"names":["DropdownMenuContent","styled","Content","DROPDOWN_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade"],"mappings":"sbAWO,MAAMA,EAAsBC,EAAOC,EAAS,CACjD,GAAI,QACJ,aAAc,KACd,UAAW,KACX,GAAI,KACJ,OAAQC,EACR,eAAgB,CACd,kBAAmB,QACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,CACF,CAAC"}
+{"version":3,"file":"DropdownMenuContent.js","sources":["../../../src/components/dropdown-menu/DropdownMenuContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\nimport {\n  slideDownAndFade,\n  slideLeftAndFade,\n  slideRightAndFade,\n  slideUpAndFade\n} from '~/utilities'\n\nexport const DropdownMenuContent = styled(Content, {\n  bg: 'white',\n  borderRadius: '$0',\n  boxShadow: '$0',\n  py: '$2',\n  zIndex: 10,\n  '@allowMotion': {\n    animationDuration: '250ms',\n    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n    willChange: 'transform, opacity',\n    '&[data-state=\"open\"]': {\n      '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n      '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n      '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n      '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n    }\n  }\n})\n"],"names":["DropdownMenuContent","styled","Content","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade"],"mappings":"uXAUa,MAAAA,EAAsBC,EAAOC,EAAS,CACjD,GAAI,QACJ,aAAc,KACd,UAAW,KACX,GAAI,KACJ,OAAQ,GACR,eAAgB,CACd,kBAAmB,QACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,CACF,CAAC"}