@os-design/core 1.0.155 → 1.0.157

package/dist/esm/DatePicker/DatePickerCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerCalendar.js","names":["React","useCallback","useRef","styled","ellipsisStyles","resetFocusStyles","transitionStyles","Left","Right","clr","m","getAccessibilityDateLabel","useDatePickerCalendar","Button","Container","div","min","xs","p","theme","datePickerPadding","MonthContainer","Month","Calendar","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","onChangeRef","current","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","getTime","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import React, { HTMLAttributes, useCallback, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { Left, Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: number | null;\n  onChange?: (value: number) => void;\n}\n\nconst Container = styled.div`\n  // For popover\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.datePickerPadding}em;\n  }\n`;\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onChange = () => {},\n}) => {\n  const onChangeRef = useRef(onChange);\n\n  useCallback(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        if (!onChangeRef.current) return;\n        onChangeRef.current(date.getTime() / 1000);\n      },\n      onKeyDown: (e) => {\n        if (!onChangeRef.current) return;\n        if (['Enter', ' '].includes(e.key)) {\n          onChangeRef.current(date.getTime() / 1000);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <Container>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </Container>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}
+{"version":3,"file":"DatePickerCalendar.js","names":["React","useCallback","useRef","styled","ellipsisStyles","resetFocusStyles","transitionStyles","Left","Right","clr","m","getAccessibilityDateLabel","useDatePickerCalendar","Button","Container","div","min","xs","p","theme","datePickerPadding","MonthContainer","Month","Calendar","datePickerCellSize","DayOfWeek","datePickerDayOfWeekColorText","sizes","small","Day","datePickerDaySize","borderRadius","datePickerDayColorBgHover","datePickerDayColorTextHover","DayAnotherMonth","datePickerDayAnotherMonthColorText","Today","datePickerTodayColorBg","datePickerTodayColorText","datePickerTodayColorBorder","SelectedDay","datePickerSelectedDayColorBg","datePickerSelectedDayColorText","DatePickerCalendar","firstDayOfWeek","locale","value","onChange","onChangeRef","current","selectedMonth","updateMonth","days","getDayProps","date","tabIndex","role","onClick","getTime","onKeyDown","e","includes","key","preventDefault","onMouseDown","prevMonthLabel","months","month","year","nextMonthLabel","shortDaysOfWeek","slice","map","item","type","toISOString","getDate"],"sources":["../../../src/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["import React, { HTMLAttributes, useCallback, useRef } from 'react';\nimport styled from '@emotion/styled';\nimport {\n  ellipsisStyles,\n  resetFocusStyles,\n  transitionStyles,\n} from '@os-design/styles';\nimport { Left, Right } from '@os-design/icons';\nimport { clr } from '@os-design/theming';\nimport { m } from '@os-design/media';\nimport {\n  DatePickerLocale,\n  getAccessibilityDateLabel,\n  useDatePickerCalendar,\n} from '@os-design/date-picker-utils';\nimport Button from '../Button';\n\ninterface DatePickerCalendarProps {\n  firstDayOfWeek: 'sunday' | 'monday';\n  locale: DatePickerLocale;\n  value?: number | null;\n  onChange?: (value: number) => void;\n}\n\nconst Container = styled.div`\n  // For popover\n  ${m.min.xs} {\n    padding: ${(p) => p.theme.datePickerPadding}em;\n  }\n`;\n\nconst MonthContainer = styled.div`\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5em;\n`;\n\nconst Month = styled.div`\n  flex-grow: 1;\n  font-weight: 500;\n  text-align: center;\n  padding: 0 0.4em;\n  ${ellipsisStyles};\n`;\n\nconst Calendar = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, ${(p) => p.theme.datePickerCellSize}em);\n  grid-auto-rows: ${(p) => p.theme.datePickerCellSize}em;\n  justify-content: space-between;\n  overflow-x: auto;\n`;\n\nconst DayOfWeek = styled.div`\n  justify-self: center;\n  align-self: center;\n  color: ${(p) => clr(p.theme.datePickerDayOfWeekColorText)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n`;\n\nconst Day = styled.div`\n  ${resetFocusStyles};\n  justify-self: center;\n  align-self: center;\n\n  width: ${(p) => p.theme.datePickerDaySize}em;\n  height: ${(p) => p.theme.datePickerDaySize}em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover,\n    &:focus {\n      background-color: ${(p) => clr(p.theme.datePickerDayColorBgHover)};\n      color: ${(p) => clr(p.theme.datePickerDayColorTextHover)};\n    }\n  }\n\n  ${transitionStyles('background-color', 'color')};\n`;\n\nconst DayAnotherMonth = styled(Day)`\n  color: ${(p) => clr(p.theme.datePickerDayAnotherMonthColorText)};\n`;\n\nconst Today = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerTodayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerTodayColorText)};\n  border: 1px solid ${(p) => clr(p.theme.datePickerTodayColorBorder)};\n  box-sizing: border-box;\n`;\n\nconst SelectedDay = styled(Day)`\n  background-color: ${(p) => clr(p.theme.datePickerSelectedDayColorBg)};\n  color: ${(p) => clr(p.theme.datePickerSelectedDayColorText)};\n`;\n\nconst DatePickerCalendar: React.FC<DatePickerCalendarProps> = ({\n  firstDayOfWeek,\n  locale,\n  value,\n  onChange = () => {},\n}) => {\n  const onChangeRef = useRef(onChange);\n\n  useCallback(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  const { selectedMonth, updateMonth, days } = useDatePickerCalendar({\n    value,\n    firstDayOfWeek,\n  });\n\n  const getDayProps = useCallback<\n    (date: Date) => HTMLAttributes<HTMLDivElement>\n  >(\n    (date: Date) => ({\n      tabIndex: 0,\n      role: 'button',\n      'aria-label': getAccessibilityDateLabel(date, locale),\n      onClick: () => {\n        if (!onChangeRef.current) return;\n        onChangeRef.current(date.getTime() / 1000);\n      },\n      onKeyDown: (e) => {\n        if (!onChangeRef.current) return;\n        if (['Enter', ' '].includes(e.key)) {\n          onChangeRef.current(date.getTime() / 1000);\n          e.preventDefault();\n        }\n      },\n      onMouseDown: (e) => e.preventDefault(),\n    }),\n    [locale]\n  );\n\n  return (\n    <Container>\n      <MonthContainer>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(-1)}\n          aria-label={locale.prevMonthLabel}\n        >\n          <Left />\n        </Button>\n        <Month>\n          {locale.months[selectedMonth.month]} {selectedMonth.year}\n        </Month>\n        <Button\n          type='ghost'\n          wide='never'\n          size='small'\n          onClick={() => updateMonth(1)}\n          aria-label={locale.nextMonthLabel}\n        >\n          <Right />\n        </Button>\n      </MonthContainer>\n\n      <Calendar>\n        {(firstDayOfWeek === 'sunday'\n          ? locale.shortDaysOfWeek\n          : [...locale.shortDaysOfWeek.slice(1), locale.shortDaysOfWeek[0]]\n        ).map((item) => (\n          <DayOfWeek key={item}>{item}</DayOfWeek>\n        ))}\n\n        {days.map(({ type, date }) => {\n          if (type === 'dayAnotherMonth') {\n            return (\n              <DayAnotherMonth key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </DayAnotherMonth>\n            );\n          }\n          if (type === 'selectedDay') {\n            return (\n              <SelectedDay key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </SelectedDay>\n            );\n          }\n          if (type === 'today') {\n            return (\n              <Today key={date.toISOString()} {...getDayProps(date)}>\n                {date.getDate()}\n              </Today>\n            );\n          }\n          return (\n            <Day key={date.toISOString()} {...getDayProps(date)}>\n              {date.getDate()}\n            </Day>\n          );\n        })}\n      </Calendar>\n    </Container>\n  );\n};\n\nexport default DatePickerCalendar;\n"],"mappings":"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"}

package/dist/esm/DatePicker/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 import { useForwardedRef, useForwardedState, useKeyPress } from '@os-design/utils';
 import { Down, Up } from '@os-design/icons';
@@ -12,7 +11,6 @@ import Popover from '../Popover';
 import Modal from '../Modal';
 import DatePickerCalendar from './DatePickerCalendar';
 import Button from '../Button';
-
 /**
  * The component to choose a date.
  */
@@ -73,7 +71,6 @@ const DatePicker = /*#__PURE__*/forwardRef(({
         },
         onKeyDown: e => {
           if (disabled) return;
-
           if (['Enter', ' '].includes(e.key)) {
             setForwardedValue(null);
             if (!containerRef.current) return;
@@ -85,7 +82,6 @@ const DatePicker = /*#__PURE__*/forwardRef(({
         "aria-label": locale.clearLabel
       }, /*#__PURE__*/React.createElement(ClearIcon, null)));
     }
-
     return right || /*#__PURE__*/React.createElement(IconContainer, null, opened ? /*#__PURE__*/React.createElement(Up, null) : /*#__PURE__*/React.createElement(Down, null));
   }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
   const rightHasPaddingValue = useMemo(() => {
@@ -103,7 +99,6 @@ const DatePicker = /*#__PURE__*/forwardRef(({
     },
     onKeyDown: e => {
       if (disabled) return;
-
       if (['Enter', ' '].includes(e.key)) {
         setOpened(!opened);
         e.preventDefault();

package/dist/esm/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useState","useForwardedRef","useForwardedState","useKeyPress","Down","Up","useIsMinWidth","defaultLocale","defaultFormat","getAccessibilityDateLabel","ThemeOverrider","SelectContainer","Content","LeftAddon","RightAddon","ClearIcon","IconContainer","Placeholder","Title","Popover","Modal","DatePickerCalendar","Button","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","firstDayOfWeek","locale","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","formattedValue","Date","closeHandler","window","undefined","isMinXs","calendar","v","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","t","buttonPaddingHorizontal","baseHeight","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n  defaultLocale,\n  DatePickerLocale,\n  defaultFormat,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { SelectContainer } from '../Select';\nimport {\n  Content,\n  LeftAddon,\n  RightAddon,\n  ClearIcon,\n  IconContainer,\n  Placeholder,\n  Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Selected timestamp.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: number | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format = defaultFormat,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return forwardedValue;\n      return format(new Date(forwardedValue * 1000), locale);\n    }, [forwardedValue, format, locale]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          closeHandler();\n        }}\n      />\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue !== undefined && forwardedValue !== null\n              ? getAccessibilityDateLabel(\n                  new Date(forwardedValue * 1000),\n                  locale\n                )\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <Popover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Popover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useState","useForwardedRef","useForwardedState","useKeyPress","Down","Up","useIsMinWidth","defaultLocale","defaultFormat","getAccessibilityDateLabel","ThemeOverrider","SelectContainer","Content","LeftAddon","RightAddon","ClearIcon","IconContainer","Placeholder","Title","Popover","Modal","DatePickerCalendar","Button","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","format","firstDayOfWeek","locale","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","formattedValue","Date","closeHandler","window","undefined","isMinXs","calendar","v","valueIsSpecified","rightValue","e","stopPropagation","includes","key","current","focus","preventDefault","clearLabel","rightHasPaddingValue","t","buttonPaddingHorizontal","baseHeight","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { WithSize } from '@os-design/styles';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport {\n  defaultLocale,\n  DatePickerLocale,\n  defaultFormat,\n  getAccessibilityDateLabel,\n} from '@os-design/date-picker-utils';\nimport { ThemeOverrider } from '@os-design/theming';\nimport { SelectContainer } from '../Select';\nimport {\n  Content,\n  LeftAddon,\n  RightAddon,\n  ClearIcon,\n  IconContainer,\n  Placeholder,\n  Title,\n} from '../Select/SelectToggle';\nimport Popover from '../Popover';\nimport Modal from '../Modal';\nimport DatePickerCalendar from './DatePickerCalendar';\nimport Button from '../Button';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface DatePickerProps extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (date: Date) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Selected timestamp.\n   * @default undefined\n   */\n  value?: number | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: number | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: number | null) => void;\n}\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      format = defaultFormat,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(false);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const formattedValue = useMemo(() => {\n      if (!forwardedValue) return forwardedValue;\n      return format(new Date(forwardedValue * 1000), locale);\n    }, [forwardedValue, format, locale]);\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const calendar = (\n      <DatePickerCalendar\n        firstDayOfWeek={firstDayOfWeek}\n        locale={locale}\n        value={forwardedValue}\n        onChange={(v) => {\n          setForwardedValue(v);\n          closeHandler();\n        }}\n      />\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          role='combobox'\n          aria-label={\n            forwardedValue !== undefined && forwardedValue !== null\n              ? getAccessibilityDateLabel(\n                  new Date(forwardedValue * 1000),\n                  locale\n                )\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <Popover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Popover>\n        ) : (\n          <Modal\n            title={placeholder}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendar}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}

package/dist/esm/Drawer/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef } from 'react';
 import FocusLock from 'react-focus-lock';
 import { useBodyScroll, useClosable, useKeyPress, omitEmotionProps } from '@os-design/utils';
@@ -38,23 +37,18 @@ const placementRightFadeOut = keyframes`
   from { transform: translateX(calc(100vw - 100%)); }
   to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
 `;
-
 const placementLeftVisibleStyles = p => p.placement === 'left' && p.visible && css`
     animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const placementLeftInvisibleStyles = p => p.placement === 'left' && !p.visible && css`
     animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const placementRightVisibleStyles = p => p.placement === 'right' && p.visible && css`
     animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const placementRightInvisibleStyles = p => p.placement === 'right' && !p.visible && css`
     animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;
   `;
-
 const Content = styled('div', omitEmotionProps('placement', 'width', 'visible', 'size'))`
   position: absolute;
   top: 0;
@@ -75,10 +69,10 @@ const Content = styled('div', omitEmotionProps('placement', 'width', 'visible',
   ${enableScrollingStyles('y')};
   ${sizeStyles};
 `;
+
 /**
  * The side panel that appears from the edge of the screen.
  */
-
 const Drawer = /*#__PURE__*/forwardRef(({
   placement = 'right',
   width = '15em',

package/dist/esm/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","FocusLock","useBodyScroll","useClosable","useKeyPress","omitEmotionProps","enableScrollingStyles","sizeStyles","clr","useTheme","styled","css","keyframes","Portal","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","Drawer","onClose","size","children","onClick","rest","ref","mounted","window","undefined","e","stopPropagation","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport {\n  useBodyScroll,\n  useClosable,\n  useKeyPress,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              placement={placement}\n              width={width}\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              {...rest}\n              ref={ref}\n            >\n              {children}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","FocusLock","useBodyScroll","useClosable","useKeyPress","omitEmotionProps","enableScrollingStyles","sizeStyles","clr","useTheme","styled","css","keyframes","Portal","ModalMask","DRAWER_CONTAINER_Z_INDEX","DRAWER_BOX_SHADOW_SIZE_EM","DrawerMask","Container","div","placementLeftFadeIn","placementLeftFadeOut","placementRightFadeIn","placementRightFadeOut","placementLeftVisibleStyles","p","placement","visible","theme","transitionDelay","placementLeftInvisibleStyles","placementRightVisibleStyles","placementRightInvisibleStyles","Content","width","colorBg","colorText","drawerColorBoxShadow","Drawer","onClose","size","children","onClick","rest","ref","mounted","window","undefined","e","stopPropagation","displayName"],"sources":["../../../src/Drawer/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport {\n  useBodyScroll,\n  useClosable,\n  useKeyPress,\n  omitEmotionProps,\n} from '@os-design/utils';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { clr, useTheme } from '@os-design/theming';\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\nimport Portal from '@os-design/portal';\nimport { ModalMask } from '../Modal';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface DrawerProps extends JsxDivProps, WithSize {\n  /**\n   * The placement of the drawer.\n   * @default right\n   */\n  placement?: 'left' | 'right';\n  /**\n   * The width of the drawer.\n   * @default 15em\n   */\n  width?: string;\n  /**\n   * Whether the drawer is visible.\n   * @default false\n   */\n  visible?: boolean;\n  /**\n   * Specifies a callback that will be called when a user clicks the mask.\n   * The callback should set the visible state to false.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\n\nconst DRAWER_CONTAINER_Z_INDEX = 900;\nconst DRAWER_BOX_SHADOW_SIZE_EM = 1;\n\nconst DrawerMask = styled(ModalMask)`\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst Container = styled.div`\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  z-index: ${DRAWER_CONTAINER_Z_INDEX};\n`;\n\nconst placementLeftFadeIn = keyframes`\n  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(0); }\n`;\n\nconst placementLeftFadeOut = keyframes`\n  from { transform: translateX(0); }\n  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementRightFadeIn = keyframes`\n  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n  to { transform: translateX(calc(100vw - 100%)); }\n`;\n\nconst placementRightFadeOut = keyframes`\n  from { transform: translateX(calc(100vw - 100%)); }\n  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }\n`;\n\nconst placementLeftVisibleStyles = (p) =>\n  p.placement === 'left' &&\n  p.visible &&\n  css`\n    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementLeftInvisibleStyles = (p) =>\n  p.placement === 'left' &&\n  !p.visible &&\n  css`\n    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightVisibleStyles = (p) =>\n  p.placement === 'right' &&\n  p.visible &&\n  css`\n    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;\n  `;\n\nconst placementRightInvisibleStyles = (p) =>\n  p.placement === 'right' &&\n  !p.visible &&\n  css`\n    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;\n  `;\n\ntype ContentProps = Pick<\n  DrawerProps,\n  'placement' | 'width' | 'visible' | 'size'\n>;\nconst Content = styled(\n  'div',\n  omitEmotionProps('placement', 'width', 'visible', 'size')\n)<ContentProps>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: ${(p) => p.width};\n  padding-bottom: env(safe-area-inset-bottom);\n\n  background-color: ${(p) => clr(p.theme.colorBg)};\n  color: ${(p) => clr(p.theme.colorText)};\n  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em\n    ${(p) => clr(p.theme.drawerColorBoxShadow)};\n\n  ${placementLeftVisibleStyles};\n  ${placementLeftInvisibleStyles};\n  ${placementRightVisibleStyles};\n  ${placementRightInvisibleStyles};\n\n  ${enableScrollingStyles('y')};\n  ${sizeStyles};\n`;\n\n/**\n * The side panel that appears from the edge of the screen.\n */\nconst Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n  (\n    {\n      placement = 'right',\n      width = '15em',\n      visible = false,\n      onClose = () => {},\n      size,\n      children,\n      onClick = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n    const mounted = useClosable(visible, theme.transitionDelay);\n    useBodyScroll(!visible);\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      onClose\n    );\n\n    if (!mounted) return null;\n\n    return (\n      <Portal>\n        <DrawerMask visible={visible} />\n        <Container onClick={onClose}>\n          <FocusLock autoFocus={false}>\n            <Content\n              placement={placement}\n              width={width}\n              visible={visible}\n              size={size}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClick(e);\n              }}\n              role='dialog'\n              aria-modal\n              {...rest}\n              ref={ref}\n            >\n              {children}\n            </Content>\n          </FocusLock>\n        </Container>\n      </Portal>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/esm/Form/FormConfigContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormConfigContext.js","names":["React","FormConfigContext","createContext","optionalText","displayName"],"sources":["../../../src/Form/FormConfigContext.ts"],"sourcesContent":["import React from 'react';\n\nexport interface FormConfigContextProps {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   */\n  optionalText: string;\n}\n\nconst FormConfigContext = React.createContext<FormConfigContextProps>({\n  optionalText: 'optional',\n});\n\nFormConfigContext.displayName = 'FormConfigContext';\n\nexport default FormConfigContext;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AASA,MAAMC,iBAAiB,gBAAGD,KAAK,CAACE,aAAN,CAA4C;EACpEC,YAAY,EAAE;AADsD,CAA5C,CAA1B;AAIAF,iBAAiB,CAACG,WAAlB,GAAgC,mBAAhC;AAEA,eAAeH,iBAAf"}
+{"version":3,"file":"FormConfigContext.js","names":["React","FormConfigContext","createContext","optionalText","displayName"],"sources":["../../../src/Form/FormConfigContext.ts"],"sourcesContent":["import React from 'react';\n\nexport interface FormConfigContextProps {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   */\n  optionalText: string;\n}\n\nconst FormConfigContext = React.createContext<FormConfigContextProps>({\n  optionalText: 'optional',\n});\n\nFormConfigContext.displayName = 'FormConfigContext';\n\nexport default FormConfigContext;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AASzB,MAAMC,iBAAiB,gBAAGD,KAAK,CAACE,aAAa,CAAyB;EACpEC,YAAY,EAAE;AAChB,CAAC,CAAC;AAEFF,iBAAiB,CAACG,WAAW,GAAG,mBAAmB;AAEnD,eAAeH,iBAAiB"}

package/dist/esm/Form/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { sizeStyles } from '@os-design/styles';
@@ -17,10 +16,10 @@ const StyledForm = styled('div', omitEmotionProps('size'))`
 
   ${sizeStyles};
 `;
+
 /**
  * The wrapper of the form.
  */
-
 const Form = /*#__PURE__*/forwardRef(({
   optionalText = 'optional',
   ...rest

package/dist/esm/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","sizeStyles","omitEmotionProps","FormConfigContext","StyledForm","Form","optionalText","rest","ref","memoizedOptionalText","displayName"],"sources":["../../../src/Form/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport FormConfigContext from './FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormProps extends JsxDivProps, WithSize {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   * @default optional\n   */\n  optionalText?: string;\n}\n\nconst StyledForm = styled('div', omitEmotionProps('size'))<WithSize>`\n  max-width: 50em;\n\n  & > * + * {\n    margin-top: 1em;\n  }\n  & > style + * {\n    margin-top: 0;\n  }\n\n  ${sizeStyles};\n`;\n\n/**\n * The wrapper of the form.\n */\nconst Form = forwardRef<HTMLDivElement, FormProps>(\n  ({ optionalText = 'optional', ...rest }, ref) => {\n    const memoizedOptionalText = useMemo(\n      () => ({ optionalText }),\n      [optionalText]\n    );\n\n    return (\n      <FormConfigContext.Provider value={memoizedOptionalText}>\n        <StyledForm {...rest} ref={ref} />\n      </FormConfigContext.Provider>\n    );\n  }\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,iBAAP,MAA8B,qBAA9B;AAWA,MAAMC,UAAU,GAAGJ,MAAM,CAAC,KAAD,EAAQE,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,UAAW;AACf,CAXA;AAaA;AACA;AACA;;AACA,MAAMI,IAAI,gBAAGP,UAAU,CACrB,CAAC;EAAEQ,YAAY,GAAG,UAAjB;EAA6B,GAAGC;AAAhC,CAAD,EAAyCC,GAAzC,KAAiD;EAC/C,MAAMC,oBAAoB,GAAGV,OAAO,CAClC,OAAO;IAAEO;EAAF,CAAP,CADkC,EAElC,CAACA,YAAD,CAFkC,CAApC;EAKA,oBACE,oBAAC,iBAAD,CAAmB,QAAnB;IAA4B,KAAK,EAAEG;EAAnC,gBACE,oBAAC,UAAD,eAAgBF,IAAhB;IAAsB,GAAG,EAAEC;EAA3B,GADF,CADF;AAKD,CAZoB,CAAvB;AAeAH,IAAI,CAACK,WAAL,GAAmB,MAAnB;AAEA,eAAeL,IAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","styled","sizeStyles","omitEmotionProps","FormConfigContext","StyledForm","Form","optionalText","rest","ref","memoizedOptionalText","displayName"],"sources":["../../../src/Form/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport FormConfigContext from './FormConfigContext';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormProps extends JsxDivProps, WithSize {\n  /**\n   * The text that is displayed to the right of the label of the optional field.\n   * @default optional\n   */\n  optionalText?: string;\n}\n\nconst StyledForm = styled('div', omitEmotionProps('size'))<WithSize>`\n  max-width: 50em;\n\n  & > * + * {\n    margin-top: 1em;\n  }\n  & > style + * {\n    margin-top: 0;\n  }\n\n  ${sizeStyles};\n`;\n\n/**\n * The wrapper of the form.\n */\nconst Form = forwardRef<HTMLDivElement, FormProps>(\n  ({ optionalText = 'optional', ...rest }, ref) => {\n    const memoizedOptionalText = useMemo(\n      () => ({ optionalText }),\n      [optionalText]\n    );\n\n    return (\n      <FormConfigContext.Provider value={memoizedOptionalText}>\n        <StyledForm {...rest} ref={ref} />\n      </FormConfigContext.Provider>\n    );\n  }\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,iBAAiB,MAAM,qBAAqB;AAWnD,MAAMC,UAAU,GAAGJ,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAID,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMI,IAAI,gBAAGP,UAAU,CACrB,CAAC;EAAEQ,YAAY,GAAG,UAAU;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC/C,MAAMC,oBAAoB,GAAGV,OAAO,CAClC,OAAO;IAAEO;EAAa,CAAC,CAAC,EACxB,CAACA,YAAY,CAAC,CACf;EAED,oBACE,oBAAC,iBAAiB,CAAC,QAAQ;IAAC,KAAK,EAAEG;EAAqB,gBACtD,oBAAC,UAAU,eAAKF,IAAI;IAAE,GAAG,EAAEC;EAAI,GAAG,CACP;AAEjC,CAAC,CACF;AAEDH,IAAI,CAACK,WAAW,GAAG,MAAM;AAEzB,eAAeL,IAAI"}

package/dist/esm/FormDivider/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { ellipsisStyles, sizeStyles } from '@os-design/styles';
@@ -38,10 +37,10 @@ const Description = styled.div`
   line-height: 1.2;
   ${ellipsisStyles};
 `;
+
 /**
  * The divider line for separating the various elements of the form.
  */
-
 const FormDivider = /*#__PURE__*/forwardRef(({
   title,
   description,

package/dist/esm/FormDivider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","styled","ellipsisStyles","sizeStyles","omitEmotionProps","clr","Container","p","theme","formDividerColor","Content","div","Title","colorText","sizes","large","Description","inputColorPlaceholder","small","FormDivider","title","description","rest","ref","displayName"],"sources":["../../../src/FormDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormDividerProps extends JsxDivProps, WithSize {\n  /**\n   * The title that is in the center of the divider.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};\n  }\n\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  line-height: 1.2;\n  ${ellipsisStyles};\n`;\n\n/**\n * The divider line for separating the various elements of the form.\n */\nconst FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(\n  ({ title, description, ...rest }, ref) => (\n    <Container role='separator' {...rest} ref={ref}>\n      <Content>\n        <Title>{title}</Title>\n        <Description>{description}</Description>\n      </Content>\n    </Container>\n  )\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,cAAT,EAAyBC,UAAzB,QAAqD,mBAArD;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,QAAoB,oBAApB;AAeA,MAAMC,SAAS,GAAGL,MAAM,CAAC,KAAD,EAAQG,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BG,CAAD,IAAOF,GAAG,CAACE,CAAC,CAACC,KAAF,CAAQC,gBAAT,CAA2B;AACjE;AACA;AACA,IAAIN,UAAW;AACf,CAfA;AAiBA,MAAMO,OAAO,GAAGT,MAAM,CAACU,GAAI;AAC3B;AACA;AACA;AACA,CAJA;AAMA,MAAMC,KAAK,GAAGX,MAAM,CAACU,GAAI;AACzB,WAAYJ,CAAD,IAAOF,GAAG,CAACE,CAAC,CAACC,KAAF,CAAQK,SAAT,CAAoB;AACzC,eAAgBN,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQM,KAAR,CAAcC,KAAM;AAC1C;AACA,IAAIb,cAAe;AACnB,CALA;AAOA,MAAMc,WAAW,GAAGf,MAAM,CAACU,GAAI;AAC/B,WAAYJ,CAAD,IAAOF,GAAG,CAACE,CAAC,CAACC,KAAF,CAAQS,qBAAT,CAAgC;AACrD,eAAgBV,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQM,KAAR,CAAcI,KAAM;AAC1C;AACA,IAAIhB,cAAe;AACnB,CALA;AAOA;AACA;AACA;;AACA,MAAMiB,WAAW,gBAAGnB,UAAU,CAC5B,CAAC;EAAEoB,KAAF;EAASC,WAAT;EAAsB,GAAGC;AAAzB,CAAD,EAAkCC,GAAlC,kBACE,oBAAC,SAAD;EAAW,IAAI,EAAC;AAAhB,GAAgCD,IAAhC;EAAsC,GAAG,EAAEC;AAA3C,iBACE,oBAAC,OAAD,qBACE,oBAAC,KAAD,QAAQH,KAAR,CADF,eAEE,oBAAC,WAAD,QAAcC,WAAd,CAFF,CADF,CAF0B,CAA9B;AAWAF,WAAW,CAACK,WAAZ,GAA0B,aAA1B;AAEA,eAAeL,WAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","styled","ellipsisStyles","sizeStyles","omitEmotionProps","clr","Container","p","theme","formDividerColor","Content","div","Title","colorText","sizes","large","Description","inputColorPlaceholder","small","FormDivider","title","description","rest","ref","displayName"],"sources":["../../../src/FormDivider/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { ellipsisStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormDividerProps extends JsxDivProps, WithSize {\n  /**\n   * The title that is in the center of the divider.\n   */\n  title: string;\n  /**\n   * The description that is under the title.\n   * @default undefined\n   */\n  description?: string;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  display: flex;\n  align-items: center;\n  margin: 3em 0 1em;\n\n  &::before,\n  &::after {\n    content: '';\n    flex: 1;\n    min-width: 5%;\n    max-width: 50%;\n    border-top: 1px solid ${(p) => clr(p.theme.formDividerColor)};\n  }\n\n  ${sizeStyles};\n`;\n\nconst Content = styled.div`\n  padding: 0 1.5em;\n  text-align: center;\n  overflow: hidden;\n`;\n\nconst Title = styled.div`\n  color: ${(p) => clr(p.theme.colorText)};\n  font-size: ${(p) => p.theme.sizes.large}em;\n  font-weight: 500;\n  ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n  color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  font-size: ${(p) => p.theme.sizes.small}em;\n  line-height: 1.2;\n  ${ellipsisStyles};\n`;\n\n/**\n * The divider line for separating the various elements of the form.\n */\nconst FormDivider = forwardRef<HTMLDivElement, FormDividerProps>(\n  ({ title, description, ...rest }, ref) => (\n    <Container role='separator' {...rest} ref={ref}>\n      <Content>\n        <Title>{title}</Title>\n        <Description>{description}</Description>\n      </Content>\n    </Container>\n  )\n);\n\nFormDivider.displayName = 'FormDivider';\n\nexport default FormDivider;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,UAAU,QAAkB,mBAAmB;AACxE,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AAexC,MAAMC,SAAS,GAAGL,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA6BG,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACC,gBAAgB,CAAE;AACjE;AACA;AACA,IAAIN,UAAW;AACf,CAAC;AAED,MAAMO,OAAO,GAAGT,MAAM,CAACU,GAAI;AAC3B;AACA;AACA;AACA,CAAC;AAED,MAAMC,KAAK,GAAGX,MAAM,CAACU,GAAI;AACzB,WAAYJ,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,eAAgBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACC,KAAM;AAC1C;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACU,GAAI;AAC/B,WAAYJ,CAAC,IAAKF,GAAG,CAACE,CAAC,CAACC,KAAK,CAACS,qBAAqB,CAAE;AACrD,eAAgBV,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACM,KAAK,CAACI,KAAM;AAC1C;AACA,IAAIhB,cAAe;AACnB,CAAC;;AAED;AACA;AACA;AACA,MAAMiB,WAAW,gBAAGnB,UAAU,CAC5B,CAAC;EAAEoB,KAAK;EAAEC,WAAW;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBACnC,oBAAC,SAAS;EAAC,IAAI,EAAC;AAAW,GAAKD,IAAI;EAAE,GAAG,EAAEC;AAAI,iBAC7C,oBAAC,OAAO,qBACN,oBAAC,KAAK,QAAEH,KAAK,CAAS,eACtB,oBAAC,WAAW,QAAEC,WAAW,CAAe,CAChC,CAEb,CACF;AAEDF,WAAW,CAACK,WAAW,GAAG,aAAa;AAEvC,eAAeL,WAAW"}

package/dist/esm/FormItem/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useCallback, useContext, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { sizeStyles } from '@os-design/styles';
@@ -27,21 +26,19 @@ const Optional = styled.span`
   color: ${p => clr(p.theme.formItemColorOptional)};
   margin-left: 0.3em;
 `;
-
 const hasErrorStyles = p => p.hasError && css`
     color: ${clr(p.theme.formItemColorError)};
   `;
-
 const Help = styled('div', omitEmotionProps('hasError'))`
   margin-top: 0.1em;
   font-size: ${p => p.theme.sizes.small}em;
   color: ${p => clr(p.theme.formItemColorHelp)};
   ${hasErrorStyles};
 `;
+
 /**
  * The wrapper of the field.
  */
-
 const FormItem = /*#__PURE__*/forwardRef(({
   label,
   help,

package/dist/esm/FormItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","styled","sizeStyles","omitEmotionProps","clr","ThemeOverrider","css","firstChildHasType","TextArea","TextAreaSkeleton","InputSkeleton","FormConfigContext","Switch","SwitchSkeleton","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","formItemColorError","Help","formItemColorHelp","FormItem","help","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","renderChildren","c","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,WAA5B,EAAyCC,UAAzC,EAAqDC,OAArD,QAAoE,OAApE;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,GAAT,EAAcC,cAAd,QAAoC,oBAApC;AACA,SAASC,GAAT,QAAoB,gBAApB;AACA,OAAOC,iBAAP,MAA8B,2BAA9B;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,gBAAP,MAA6B,qBAA7B;AACA,OAAOC,aAAP,MAA0B,kBAA1B;AACA,OAAOC,iBAAP,MAA8B,2BAA9B;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,cAAP,MAA2B,mBAA3B;AA+BA,MAAMC,SAAS,GAAGb,MAAM,CAAC,KAAD,EAAQE,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE,IAAID,UAAW;AACf,CAFA;AAIA,MAAMa,KAAK,GAAGd,MAAM,CAACe,KAAM;AAC3B;AACA;AACA;AACA,eAAgBC,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAAM;AAC1C,WAAYH,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACC,KAAF,CAAQG,SAAT,CAAoB;AACzC,CANA;AAQA,MAAMC,QAAQ,GAAGrB,MAAM,CAACsB,IAAK;AAC7B,WAAYN,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACC,KAAF,CAAQM,qBAAT,CAAgC;AACrD;AACA,CAHA;;AAKA,MAAMC,cAAc,GAAIR,CAAD,IACrBA,CAAC,CAACS,QAAF,IACApB,GAAI;AACN,aAAaF,GAAG,CAACa,CAAC,CAACC,KAAF,CAAQS,kBAAT,CAA6B;AAC7C,GAJA;;AAOA,MAAMC,IAAI,GAAG3B,MAAM,CAAC,KAAD,EAAQE,gBAAgB,CAAC,UAAD,CAAxB,CAAiD;AACpE;AACA,eAAgBc,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,KAAR,CAAcC,KAAM;AAC1C,WAAYH,CAAD,IAAOb,GAAG,CAACa,CAAC,CAACC,KAAF,CAAQW,iBAAT,CAA4B;AACjD,IAAIJ,cAAe;AACnB,CALA;AAOA;AACA;AACA;;AACA,MAAMK,QAAQ,gBAAGjC,UAAU,CACzB,CACE;EACEmB,KADF;EAEEe,IAFF;EAGEC,QAAQ,GAAG,KAHb;EAIEN,QAAQ,GAAG,KAJb;EAKEO,OAAO,GAAG,KALZ;EAMEC,EANF;EAOEC,QAPF;EAQE,GAAGC;AARL,CADF,EAWEC,GAXF,KAYK;EACH,MAAM;IAAEC;EAAF,IAAmBvC,UAAU,CAACY,iBAAD,CAAnC;EAEA,MAAM4B,WAAW,GAAGvC,OAAO,CACzB,MAAMkC,EAAE,IAAIM,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAAjC,EAAoC,EAApC,CADa,EAEzB,CAACT,EAAD,CAFyB,CAA3B;EAIA,MAAMU,OAAO,GAAG5C,OAAO,CAAC,MAAO,SAAQuC,WAAY,EAA5B,EAA+B,CAACA,WAAD,CAA/B,CAAvB;EACA,MAAMM,MAAM,GAAG7C,OAAO,CAAC,MAAO,QAAOuC,WAAY,EAA3B,EAA8B,CAACA,WAAD,CAA9B,CAAtB;EAEA,MAAMO,cAAc,GAAGhD,WAAW,CAAC,MAAM;IACvC,MAAMiD,CAAC,GAAG,aAAAnD,KAAK,CAACoD,cAAN,CAAqBb,QAArB,iBACNvC,KAAK,CAACqD,YAAN,CAAwBd,QAAxB,EAAkC;MAChCD,EAAE,EAAEU,OAD4B;MAEhC,gBAAgBlB,QAFgB;MAGhC,oBAAoBK,IAAI,GAAGc,MAAH,GAAYK;IAHJ,CAAlC,CADM,GAMNf,QANJ;IAQA,IAAI,CAACT,QAAL,EAAe,OAAOqB,CAAP;IAEf,oBACE,oBAAC,cAAD;MACE,SAAS,EAAG7B,KAAD,KAAY;QACrBiC,gBAAgB,EAAEjC,KAAK,CAACS;MADH,CAAZ;IADb,GAKGoB,CALH,CADF;EASD,CApBiC,EAoB/B,CAACZ,QAAD,EAAWS,OAAX,EAAoBb,IAApB,EAA0Bc,MAA1B,EAAkCnB,QAAlC,CApB+B,CAAlC;EAsBA,MAAM0B,cAAc,GAAGtD,WAAW,CAAC,MAAM;IACvC,IAAIS,iBAAiB,CAAC4B,QAAD,EAAW3B,QAAX,CAArB,EAA2C,oBAAO,oBAAC,gBAAD,OAAP;IAC3C,IAAID,iBAAiB,CAAC4B,QAAD,EAAWvB,MAAX,CAArB,EAAyC,oBAAO,oBAAC,cAAD,OAAP;IACzC,oBAAO,oBAAC,aAAD,OAAP;EACD,CAJiC,EAI/B,CAACuB,QAAD,CAJ+B,CAAlC;EAMA,oBACE,oBAAC,SAAD;IAAW,IAAI,EAAC,OAAhB;IAAwB,EAAE,EAAED;EAA5B,GAAoCE,IAApC;IAA0C,GAAG,EAAEC;EAA/C,IACGrB,KAAK,iBACJ,oBAAC,KAAD;IAAO,OAAO,EAAE4B;EAAhB,GACG5B,KADH,EAEGgB,QAAQ,iBAAI,oBAAC,QAAD,aAAYM,YAAZ,MAFf,CAFJ,EAOGL,OAAO,GAAGmB,cAAc,EAAjB,GAAsBN,cAAc,EAP9C,EAQGf,IAAI,iBACH,oBAAC,IAAD;IACE,QAAQ,EAAEL,QADZ;IAEE,aAAWA,QAAQ,GAAG,QAAH,GAAcwB,SAFnC;IAGE,EAAE,EAAEL;EAHN,GAKGd,IALH,CATJ,CADF;AAoBD,CAvEwB,CAA3B;AA0EAD,QAAQ,CAACuB,WAAT,GAAuB,UAAvB;AAEA,eAAevB,QAAf"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useContext","useMemo","styled","sizeStyles","omitEmotionProps","clr","ThemeOverrider","css","firstChildHasType","TextArea","TextAreaSkeleton","InputSkeleton","FormConfigContext","Switch","SwitchSkeleton","Container","Label","label","p","theme","sizes","small","colorText","Optional","span","formItemColorOptional","hasErrorStyles","hasError","formItemColorError","Help","formItemColorHelp","FormItem","help","optional","loading","id","children","rest","ref","optionalText","containerId","Math","random","toString","slice","fieldId","helpId","renderChildren","c","isValidElement","cloneElement","undefined","inputColorBorder","renderSkeleton","displayName"],"sources":["../../../src/FormItem/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport firstChildHasType from './utils/firstChildHasType';\nimport TextArea from '../TextArea';\nimport TextAreaSkeleton from '../TextAreaSkeleton';\nimport InputSkeleton from '../InputSkeleton';\nimport FormConfigContext from '../Form/FormConfigContext';\nimport Switch from '../Switch';\nimport SwitchSkeleton from '../SwitchSkeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface FormItemProps extends JsxDivProps, WithSize {\n  /**\n   * Label of the field.\n   * @default undefined\n   */\n  label?: string;\n  /**\n   * The help message located at the bottom of the field.\n   * @default undefined\n   */\n  help?: string;\n  /**\n   * Whether the field is optional.\n   * @default false\n   */\n  optional?: boolean;\n  /**\n   * Applies the red style to the field.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Whether the skeleton is displayed.\n   * @default false\n   */\n  loading?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\nconst Label = styled.label`\n  display: inline-flex;\n  align-items: center;\n  margin-bottom: 0.4em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.colorText)};\n`;\n\nconst Optional = styled.span`\n  color: ${(p) => clr(p.theme.formItemColorOptional)};\n  margin-left: 0.3em;\n`;\n\nconst hasErrorStyles = (p) =>\n  p.hasError &&\n  css`\n    color: ${clr(p.theme.formItemColorError)};\n  `;\n\ntype HelpProps = Required<Pick<FormItemProps, 'hasError'>>;\nconst Help = styled('div', omitEmotionProps('hasError'))<HelpProps>`\n  margin-top: 0.1em;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.formItemColorHelp)};\n  ${hasErrorStyles};\n`;\n\n/**\n * The wrapper of the field.\n */\nconst FormItem = forwardRef<HTMLDivElement, FormItemProps>(\n  (\n    {\n      label,\n      help,\n      optional = false,\n      hasError = false,\n      loading = false,\n      id,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { optionalText } = useContext(FormConfigContext);\n\n    const containerId = useMemo(\n      () => id || Math.random().toString(36).slice(2, 11),\n      [id]\n    );\n    const fieldId = useMemo(() => `field-${containerId}`, [containerId]);\n    const helpId = useMemo(() => `help-${containerId}`, [containerId]);\n\n    const renderChildren = useCallback(() => {\n      const c = React.isValidElement(children)\n        ? React.cloneElement<any>(children, {\n            id: fieldId,\n            'aria-invalid': hasError,\n            'aria-describedby': help ? helpId : undefined,\n          })\n        : children;\n\n      if (!hasError) return c;\n\n      return (\n        <ThemeOverrider\n          overrides={(theme) => ({\n            inputColorBorder: theme.formItemColorError,\n          })}\n        >\n          {c}\n        </ThemeOverrider>\n      );\n    }, [children, fieldId, help, helpId, hasError]);\n\n    const renderSkeleton = useCallback(() => {\n      if (firstChildHasType(children, TextArea)) return <TextAreaSkeleton />;\n      if (firstChildHasType(children, Switch)) return <SwitchSkeleton />;\n      return <InputSkeleton />;\n    }, [children]);\n\n    return (\n      <Container role='group' id={id} {...rest} ref={ref}>\n        {label && (\n          <Label htmlFor={fieldId}>\n            {label}\n            {optional && <Optional>({optionalText})</Optional>}\n          </Label>\n        )}\n        {loading ? renderSkeleton() : renderChildren()}\n        {help && (\n          <Help\n            hasError={hasError}\n            aria-live={hasError ? 'polite' : undefined}\n            id={helpId}\n          >\n            {help}\n          </Help>\n        )}\n      </Container>\n    );\n  }\n);\n\nFormItem.displayName = 'FormItem';\n\nexport default FormItem;\n"],"mappings":"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"}

package/dist/esm/FormItem/utils/firstChildHasType.js

@@ -1,9 +1,7 @@
 import React from 'react';
-
 const firstChildHasType = (children, component) => {
   const firstChild = React.Children.toArray(children)[0];
   return /*#__PURE__*/React.isValidElement(firstChild) && firstChild.type === component;
 };
-
 export default firstChildHasType;
 //# sourceMappingURL=firstChildHasType.js.map

package/dist/esm/FormItem/utils/firstChildHasType.js.map

@@ -1 +1 @@
-{"version":3,"file":"firstChildHasType.js","names":["React","firstChildHasType","children","component","firstChild","Children","toArray","isValidElement","type"],"sources":["../../../../src/FormItem/utils/firstChildHasType.ts"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nconst firstChildHasType = (\n  children: ReactNode | ReactNode[],\n  component: React.FC\n): boolean => {\n  const firstChild = React.Children.toArray(children)[0];\n  return React.isValidElement(firstChild) && firstChild.type === component;\n};\n\nexport default firstChildHasType;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAiC,OAAjC;;AAEA,MAAMC,iBAAiB,GAAG,CACxBC,QADwB,EAExBC,SAFwB,KAGZ;EACZ,MAAMC,UAAU,GAAGJ,KAAK,CAACK,QAAN,CAAeC,OAAf,CAAuBJ,QAAvB,EAAiC,CAAjC,CAAnB;EACA,OAAO,aAAAF,KAAK,CAACO,cAAN,CAAqBH,UAArB,KAAoCA,UAAU,CAACI,IAAX,KAAoBL,SAA/D;AACD,CAND;;AAQA,eAAeF,iBAAf"}
+{"version":3,"file":"firstChildHasType.js","names":["React","firstChildHasType","children","component","firstChild","Children","toArray","isValidElement","type"],"sources":["../../../../src/FormItem/utils/firstChildHasType.ts"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nconst firstChildHasType = (\n  children: ReactNode | ReactNode[],\n  component: React.FC\n): boolean => {\n  const firstChild = React.Children.toArray(children)[0];\n  return React.isValidElement(firstChild) && firstChild.type === component;\n};\n\nexport default firstChildHasType;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,MAAMC,iBAAiB,GAAG,CACxBC,QAAiC,EACjCC,SAAmB,KACP;EACZ,MAAMC,UAAU,GAAGJ,KAAK,CAACK,QAAQ,CAACC,OAAO,CAACJ,QAAQ,CAAC,CAAC,CAAC,CAAC;EACtD,OAAO,aAAAF,KAAK,CAACO,cAAc,CAACH,UAAU,CAAC,IAAIA,UAAU,CAACI,IAAI,KAAKL,SAAS;AAC1E,CAAC;AAED,eAAeF,iBAAiB"}

package/dist/esm/Gallery/Status.js

@@ -18,7 +18,6 @@ const Block = styled('div', omitEmotionProps('count', 'index', 'current'))`
   background-color: ${p => p.current ? clr(p.theme.galleryStatusColorBgCurrent) : clr(p.theme.galleryStatusColorBg)};
   backdrop-filter: blur(0.2em);
 `;
-
 const Status = ({
   count,
   current,
@@ -32,6 +31,5 @@ const Status = ({
   index: index,
   current: index === current
 })));
-
 export default Status;
 //# sourceMappingURL=Status.js.map

package/dist/esm/Gallery/Status.js.map

@@ -1 +1 @@
-{"version":3,"file":"Status.js","names":["React","styled","clr","omitEmotionProps","Container","p","height","Block","count","index","current","theme","galleryStatusColorBgCurrent","galleryStatusColorBg","Status","Array","fill","map","_"],"sources":["../../../src/Gallery/Status.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\n\ninterface StatusProps {\n  count: number;\n  current: number;\n  height: number;\n}\n\ninterface ContainerProps {\n  height: number;\n}\nconst Container = styled('div', omitEmotionProps('height'))<ContainerProps>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: ${(p) => p.height}px;\n`;\n\ninterface BlockProps {\n  count: number;\n  index: number;\n  current: boolean;\n}\nconst Block = styled(\n  'div',\n  omitEmotionProps('count', 'index', 'current')\n)<BlockProps>`\n  position: absolute;\n  left: ${(p) => (100 / p.count) * p.index}%;\n  width: ${(p) =>\n    p.index < p.count - 1\n      ? `calc(${100 / p.count}% - 2px)`\n      : `${100 / p.count}%`};\n  height: 100%;\n\n  background-color: ${(p) =>\n    p.current\n      ? clr(p.theme.galleryStatusColorBgCurrent)\n      : clr(p.theme.galleryStatusColorBg)};\n  backdrop-filter: blur(0.2em);\n`;\n\nconst Status: React.FC<StatusProps> = ({ count, current, height }) => (\n  <Container height={height}>\n    {Array(count)\n      .fill(0)\n      .map((_, index) => (\n        <Block\n          key={index} // eslint-disable-line react/no-array-index-key\n          count={count}\n          index={index}\n          current={index === current}\n        />\n      ))}\n  </Container>\n);\n\nexport default Status;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAAmB,iBAAnB;AACA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AAWA,MAAMC,SAAS,GAAGH,MAAM,CAAC,KAAD,EAAQE,gBAAgB,CAAC,QAAD,CAAxB,CAAoD;AAC5E;AACA;AACA;AACA;AACA,YAAaE,CAAD,IAAOA,CAAC,CAACC,MAAO;AAC5B,CANA;AAaA,MAAMC,KAAK,GAAGN,MAAM,CAClB,KADkB,EAElBE,gBAAgB,CAAC,OAAD,EAAU,OAAV,EAAmB,SAAnB,CAFE,CAGN;AACd;AACA,UAAWE,CAAD,IAAQ,MAAMA,CAAC,CAACG,KAAT,GAAkBH,CAAC,CAACI,KAAM;AAC3C,WAAYJ,CAAD,IACPA,CAAC,CAACI,KAAF,GAAUJ,CAAC,CAACG,KAAF,GAAU,CAApB,GACK,QAAO,MAAMH,CAAC,CAACG,KAAM,UAD1B,GAEK,GAAE,MAAMH,CAAC,CAACG,KAAM,GAAG;AAC5B;AACA;AACA,sBAAuBH,CAAD,IAClBA,CAAC,CAACK,OAAF,GACIR,GAAG,CAACG,CAAC,CAACM,KAAF,CAAQC,2BAAT,CADP,GAEIV,GAAG,CAACG,CAAC,CAACM,KAAF,CAAQE,oBAAT,CAA+B;AAC1C;AACA,CAjBA;;AAmBA,MAAMC,MAA6B,GAAG,CAAC;EAAEN,KAAF;EAASE,OAAT;EAAkBJ;AAAlB,CAAD,kBACpC,oBAAC,SAAD;EAAW,MAAM,EAAEA;AAAnB,GACGS,KAAK,CAACP,KAAD,CAAL,CACEQ,IADF,CACO,CADP,EAEEC,GAFF,CAEM,CAACC,CAAD,EAAIT,KAAJ,kBACH,oBAAC,KAAD;EACE,GAAG,EAAEA,KADP,CACc;EADd;EAEE,KAAK,EAAED,KAFT;EAGE,KAAK,EAAEC,KAHT;EAIE,OAAO,EAAEA,KAAK,KAAKC;AAJrB,EAHH,CADH,CADF;;AAeA,eAAeI,MAAf"}
+{"version":3,"file":"Status.js","names":["React","styled","clr","omitEmotionProps","Container","p","height","Block","count","index","current","theme","galleryStatusColorBgCurrent","galleryStatusColorBg","Status","Array","fill","map","_"],"sources":["../../../src/Gallery/Status.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\n\ninterface StatusProps {\n  count: number;\n  current: number;\n  height: number;\n}\n\ninterface ContainerProps {\n  height: number;\n}\nconst Container = styled('div', omitEmotionProps('height'))<ContainerProps>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: ${(p) => p.height}px;\n`;\n\ninterface BlockProps {\n  count: number;\n  index: number;\n  current: boolean;\n}\nconst Block = styled(\n  'div',\n  omitEmotionProps('count', 'index', 'current')\n)<BlockProps>`\n  position: absolute;\n  left: ${(p) => (100 / p.count) * p.index}%;\n  width: ${(p) =>\n    p.index < p.count - 1\n      ? `calc(${100 / p.count}% - 2px)`\n      : `${100 / p.count}%`};\n  height: 100%;\n\n  background-color: ${(p) =>\n    p.current\n      ? clr(p.theme.galleryStatusColorBgCurrent)\n      : clr(p.theme.galleryStatusColorBg)};\n  backdrop-filter: blur(0.2em);\n`;\n\nconst Status: React.FC<StatusProps> = ({ count, current, height }) => (\n  <Container height={height}>\n    {Array(count)\n      .fill(0)\n      .map((_, index) => (\n        <Block\n          key={index} // eslint-disable-line react/no-array-index-key\n          count={count}\n          index={index}\n          current={index === current}\n        />\n      ))}\n  </Container>\n);\n\nexport default Status;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AAWnD,MAAMC,SAAS,GAAGH,MAAM,CAAC,KAAK,EAAEE,gBAAgB,CAAC,QAAQ,CAAC,CAAkB;AAC5E;AACA;AACA;AACA;AACA,YAAaE,CAAC,IAAKA,CAAC,CAACC,MAAO;AAC5B,CAAC;AAOD,MAAMC,KAAK,GAAGN,MAAM,CAClB,KAAK,EACLE,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CACjC;AACd;AACA,UAAWE,CAAC,IAAM,GAAG,GAAGA,CAAC,CAACG,KAAK,GAAIH,CAAC,CAACI,KAAM;AAC3C,WAAYJ,CAAC,IACTA,CAAC,CAACI,KAAK,GAAGJ,CAAC,CAACG,KAAK,GAAG,CAAC,GAChB,QAAO,GAAG,GAAGH,CAAC,CAACG,KAAM,UAAS,GAC9B,GAAE,GAAG,GAAGH,CAAC,CAACG,KAAM,GAAG;AAC5B;AACA;AACA,sBAAuBH,CAAC,IACpBA,CAAC,CAACK,OAAO,GACLR,GAAG,CAACG,CAAC,CAACM,KAAK,CAACC,2BAA2B,CAAC,GACxCV,GAAG,CAACG,CAAC,CAACM,KAAK,CAACE,oBAAoB,CAAE;AAC1C;AACA,CAAC;AAED,MAAMC,MAA6B,GAAG,CAAC;EAAEN,KAAK;EAAEE,OAAO;EAAEJ;AAAO,CAAC,kBAC/D,oBAAC,SAAS;EAAC,MAAM,EAAEA;AAAO,GACvBS,KAAK,CAACP,KAAK,CAAC,CACVQ,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CAAC,CAACC,CAAC,EAAET,KAAK,kBACZ,oBAAC,KAAK;EACJ,GAAG,EAAEA,KAAM,CAAC;EAAA;EACZ,KAAK,EAAED,KAAM;EACb,KAAK,EAAEC,KAAM;EACb,OAAO,EAAEA,KAAK,KAAKC;AAAQ,EAE9B,CAAC,CAEP;AAED,eAAeI,MAAM"}

package/dist/esm/Gallery/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import styled from '@emotion/styled';
 import { Left, Right } from '@os-design/icons';
 import { clr, ThemeOverrider } from '@os-design/theming';
@@ -41,11 +40,11 @@ const RightButton = styled(NavButton)`
 `;
 const MIN_DIST_PX = 30;
 const MAX_ANGLE = 30;
+
 /**
  * The image gallery. Change the cursor/touch position to change images.
  * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.
  */
-
 const Gallery = /*#__PURE__*/forwardRef(({
   urls,
   aspectRatio = [16, 9],
@@ -61,8 +60,9 @@ const Gallery = /*#__PURE__*/forwardRef(({
   const imageIndexRef = useRef(imageIndex);
   useEffect(() => {
     imageIndexRef.current = imageIndex;
-  }, [imageIndex]); // Update the image if the index was changed
+  }, [imageIndex]);
 
+  // Update the image if the index was changed
   useEffect(() => {
     setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
   }, [imageIndex, urls]);
@@ -82,7 +82,6 @@ const Gallery = /*#__PURE__*/forwardRef(({
     const xPos = clientX - x;
     if (xPos < 0) return;
     const nextIndex = Math.floor(xPos / widthPerImage);
-
     if (imageIndexRef.current !== nextIndex) {
       setImageIndex(nextIndex);
     }
@@ -131,12 +130,10 @@ const Gallery = /*#__PURE__*/forwardRef(({
     const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
     if (diff < MIN_DIST_PX) return;
     const angle = Math.atan(diffY / diffX) * 180 / Math.PI;
-
     if (angle > MAX_ANGLE) {
       startTouchPosRef.current = null;
       return;
     }
-
     if (x < clientX) prev();else next();
     startTouchPosRef.current = null;
   }, [next, prev]);
@@ -151,7 +148,6 @@ const Gallery = /*#__PURE__*/forwardRef(({
         onTouchEnd: touchEndHandler
       };
     }
-
     return {
       onMouseMove: mouseMoveHandler
     };