@tcn/ui 0.17.0 → 0.18.1

package/dist/inputs/color_input/color_picker.js

@@ -1,19 +1,20 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import s, { useRef as a, useLayoutEffect as k } from "react";
 import { useForkRef as l } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import { clsx as e } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
-import "../../utils/resize/context.js";
-import "../../resizable.module-I6iyBAvM.js";
-import "../../utils/resize/resize_handle.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { ZStack as u } from "../../stacks/z_stack.js";
 import { ChromePicker as h } from "react-color";
-import '../../color_picker.css';const d = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", c = { "color-picker": d, "chrome-picker": R }, q = s.forwardRef(function({ color: t, onColorChange: i, className: m, ...p }, f) {
+import '../../color_picker.css';const d = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", c = { "color-picker": d, "chrome-picker": R }, v = s.forwardRef(function({ color: t, onColorChange: i, className: m, ...p }, f) {
   const r = a(null), n = l(r, f);
   return k(() => {
     r.current && r.current.focus();
@@ -39,6 +40,6 @@ import '../../color_picker.css';const d = "_color-picker_4757d5a", R = "_chrome-
   );
 });
 export {
-  q as ColorPicker
+  v as ColorPicker
 };
 //# sourceMappingURL=color_picker.js.map

package/dist/inputs/color_input/color_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color_picker.js","sources":["../../../src/inputs/color_input/color_picker.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { HTMLAttributes, useLayoutEffect, useRef } from 'react';\nimport { ChromePicker, Color, type ColorResult } from 'react-color';\nimport styles from './color_picker.module.css';\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  color: Color;\n  onColorChange: (color: ColorResult) => void;\n}\n\nexport const ColorPicker = React.forwardRef(function ColorPicker(\n  { color, onColorChange, className, ...props }: ColorPickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const padRef = useRef<HTMLDivElement | null>(null);\n  const forkedRef = useForkRef(padRef, ref);\n\n  useLayoutEffect(() => {\n    padRef.current && padRef.current.focus();\n  }, []);\n\n  return (\n    <ZStack\n      tabIndex={0}\n      ref={forkedRef}\n      padding=\"8px\"\n      height=\"auto\"\n      width=\"auto\"\n      className={clsx(styles['color-picker'], 'tcn-color-picker', className)}\n      {...props}\n    >\n      <ChromePicker\n        className={clsx(styles['chrome-picker'], 'tcn-chrome-picker')}\n        color={color}\n        onChange={onColorChange}\n      />\n    </ZStack>\n  );\n});\n"],"names":["ColorPicker","React","color","onColorChange","className","props","ref","padRef","useRef","forkedRef","useForkRef","useLayoutEffect","jsx","ZStack","clsx","styles","ChromePicker"],"mappings":";;;;;;;;;;;;;;;gHAYaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,OAAAC,GAAO,eAAAC,GAAe,WAAAC,GAAW,GAAGC,EAAA,GACtCC,GACA;AACA,QAAMC,IAASC,EAA8B,IAAI,GAC3CC,IAAYC,EAAWH,GAAQD,CAAG;AAExC,SAAAK,EAAgB,MAAM;AACpB,IAAAJ,EAAO,WAAWA,EAAO,QAAQ,MAAA;AAAA,EACnC,GAAG,CAAA,CAAE,GAGH,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,KAAKJ;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWK,EAAKC,EAAO,cAAc,GAAG,oBAAoBX,CAAS;AAAA,MACpE,GAAGC;AAAA,MAEJ,UAAA,gBAAAO;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAWF,EAAKC,EAAO,eAAe,GAAG,mBAAmB;AAAA,UAC5D,OAAAb;AAAA,UACA,UAAUC;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"color_picker.js","sources":["../../../src/inputs/color_input/color_picker.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { HTMLAttributes, useLayoutEffect, useRef } from 'react';\nimport { ChromePicker, Color, type ColorResult } from 'react-color';\nimport styles from './color_picker.module.css';\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  color: Color;\n  onColorChange: (color: ColorResult) => void;\n}\n\nexport const ColorPicker = React.forwardRef(function ColorPicker(\n  { color, onColorChange, className, ...props }: ColorPickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const padRef = useRef<HTMLDivElement | null>(null);\n  const forkedRef = useForkRef(padRef, ref);\n\n  useLayoutEffect(() => {\n    padRef.current && padRef.current.focus();\n  }, []);\n\n  return (\n    <ZStack\n      tabIndex={0}\n      ref={forkedRef}\n      padding=\"8px\"\n      height=\"auto\"\n      width=\"auto\"\n      className={clsx(styles['color-picker'], 'tcn-color-picker', className)}\n      {...props}\n    >\n      <ChromePicker\n        className={clsx(styles['chrome-picker'], 'tcn-chrome-picker')}\n        color={color}\n        onChange={onColorChange}\n      />\n    </ZStack>\n  );\n});\n"],"names":["ColorPicker","React","color","onColorChange","className","props","ref","padRef","useRef","forkedRef","useForkRef","useLayoutEffect","jsx","ZStack","clsx","styles","ChromePicker"],"mappings":";;;;;;;;;;;;;;;;gHAYaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,OAAAC,GAAO,eAAAC,GAAe,WAAAC,GAAW,GAAGC,EAAA,GACtCC,GACA;AACA,QAAMC,IAASC,EAA8B,IAAI,GAC3CC,IAAYC,EAAWH,GAAQD,CAAG;AAExC,SAAAK,EAAgB,MAAM;AACpB,IAAAJ,EAAO,WAAWA,EAAO,QAAQ,MAAA;AAAA,EACnC,GAAG,CAAA,CAAE,GAGH,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,KAAKJ;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWK,EAAKC,EAAO,cAAc,GAAG,oBAAoBX,CAAS;AAAA,MACpE,GAAGC;AAAA,MAEJ,UAAA,gBAAAO;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAWF,EAAKC,EAAO,eAAe,GAAG,mBAAmB;AAAA,UAC5D,OAAAb;AAAA,UACA,UAAUC;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/combo_box/combo_box.js

@@ -1,19 +1,20 @@
 import { jsxs as D, Fragment as L, jsx as C } from "react/jsx-runtime";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import N, { useRef as c, useState as f } from "react";
 import { useForkRef as z } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import { clsx as G } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
-import "../../utils/resize/context.js";
-import "../../resizable.module-I6iyBAvM.js";
-import "../../utils/resize/resize_handle.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { SuggestionList as H } from "../suggestions/suggestion_list.js";
 import { Input as J } from "../input/input.js";
-const ce = N.forwardRef(function({
+const ie = N.forwardRef(function({
   onOptionSelect: m,
   children: O = [],
   onKeyDown: r,
@@ -94,6 +95,6 @@ const ce = N.forwardRef(function({
   ] });
 });
 export {
-  ce as ComboBox
+  ie as ComboBox
 };
 //# sourceMappingURL=combo_box.js.map

package/dist/inputs/combo_box/combo_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo_box.js","sources":["../../../src/inputs/combo_box/combo_box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { Input, InputProps } from '../input/input.js';\nimport { OptionProps } from '../options/option.js';\n\nexport interface ComboBoxProps extends InputProps {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onOptionSelect?: (value: string) => void;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const ComboBox = React.forwardRef(function ComboBox(\n  {\n    onOptionSelect: onSuggestionSelect,\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    ...props\n  }: ComboBoxProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const isAlreadyFocusedRef = useRef(false);\n  const [searchValue, setSearchValue] = useState(value);\n  const valueRef = useRef(value);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    isClosingRef.current = false;\n    setSearchValue('');\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose(\n    value: string,\n    selectionStart: number | null,\n    selectionEnd: number | null\n  ) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    requestAnimationFrame(() => {\n      if (input != null) {\n        input.value = value;\n        input.focus();\n        input.setSelectionRange(selectionStart, selectionEnd);\n      }\n    });\n    props.onChange && props.onChange(value);\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    if (input != null) {\n      input.focus();\n    }\n\n    closeSuggestions();\n    onSuggestionSelect && onSuggestionSelect(value);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    valueRef.current = event.currentTarget.value;\n\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      onKeyDown && onKeyDown(event);\n      return;\n    }\n\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n\n    setSearchValue(event.currentTarget.value);\n\n    if (key === 'Enter') {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n        event.preventDefault();\n      }\n    }\n\n    if (valueRef.current !== event.currentTarget.value) {\n      openSuggestions();\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLInputElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLInputElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Input\n        ref={forkedRef}\n        className={clsx(className, 'tcn-combo-box-input')}\n        {...props}\n        value={value}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      />\n      <SuggestionList\n        open={isSuggestionsOpen}\n        anchorElement={anchorElement}\n        onClose={handleClose}\n        value={value}\n        initialSearchValue={searchValue}\n        trimCustomInput={trimCustomInput}\n        onOptionSelect={handleSelection}\n        noSuggestionMessage={noOptionMatchedMessage}\n        haveValueAsOption={true}\n      >\n        {children}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["ComboBox","React","onSuggestionSelect","children","onKeyDown","onKeyUp","value","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","props","ref","isAlreadyFocusedRef","useRef","searchValue","setSearchValue","useState","valueRef","isClosingRef","anchorElement","setAnchorElement","internalInputRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","openSuggestions","closeSuggestions","handleClose","selectionStart","selectionEnd","input","handleSelection","handleKeyDown","event","handleKeyUp","key","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Input","clsx","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"combo_box.js","sources":["../../../src/inputs/combo_box/combo_box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { Input, InputProps } from '../input/input.js';\nimport { OptionProps } from '../options/option.js';\n\nexport interface ComboBoxProps extends InputProps {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onOptionSelect?: (value: string) => void;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const ComboBox = React.forwardRef(function ComboBox(\n  {\n    onOptionSelect: onSuggestionSelect,\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    ...props\n  }: ComboBoxProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const isAlreadyFocusedRef = useRef(false);\n  const [searchValue, setSearchValue] = useState(value);\n  const valueRef = useRef(value);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    isClosingRef.current = false;\n    setSearchValue('');\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose(\n    value: string,\n    selectionStart: number | null,\n    selectionEnd: number | null\n  ) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    requestAnimationFrame(() => {\n      if (input != null) {\n        input.value = value;\n        input.focus();\n        input.setSelectionRange(selectionStart, selectionEnd);\n      }\n    });\n    props.onChange && props.onChange(value);\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    if (input != null) {\n      input.focus();\n    }\n\n    closeSuggestions();\n    onSuggestionSelect && onSuggestionSelect(value);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    valueRef.current = event.currentTarget.value;\n\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      onKeyDown && onKeyDown(event);\n      return;\n    }\n\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n\n    setSearchValue(event.currentTarget.value);\n\n    if (key === 'Enter') {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n        event.preventDefault();\n      }\n    }\n\n    if (valueRef.current !== event.currentTarget.value) {\n      openSuggestions();\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLInputElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLInputElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Input\n        ref={forkedRef}\n        className={clsx(className, 'tcn-combo-box-input')}\n        {...props}\n        value={value}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      />\n      <SuggestionList\n        open={isSuggestionsOpen}\n        anchorElement={anchorElement}\n        onClose={handleClose}\n        value={value}\n        initialSearchValue={searchValue}\n        trimCustomInput={trimCustomInput}\n        onOptionSelect={handleSelection}\n        noSuggestionMessage={noOptionMatchedMessage}\n        haveValueAsOption={true}\n      >\n        {children}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["ComboBox","React","onSuggestionSelect","children","onKeyDown","onKeyUp","value","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","props","ref","isAlreadyFocusedRef","useRef","searchValue","setSearchValue","useState","valueRef","isClosingRef","anchorElement","setAnchorElement","internalInputRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","openSuggestions","closeSuggestions","handleClose","selectionStart","selectionEnd","input","handleSelection","handleKeyDown","event","handleKeyUp","key","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Input","clsx","SuggestionList"],"mappings":"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"}

package/dist/inputs/date_picker/date_picker.js

@@ -1,16 +1,17 @@
 import { jsxs as m, jsx as n, Fragment as T } from "react/jsx-runtime";
 import { useSignalValue as y, useSignalValueEffect as _ } from "@tcn/state";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import Y, { useState as B, useRef as L, useLayoutEffect as r } from "react";
 import { useResizeObserver as O } from "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import { clsx as R } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
-import "../../utils/resize/context.js";
-import "../../resizable.module-I6iyBAvM.js";
-import "../../utils/resize/resize_handle.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { HStack as U } from "../../stacks/h_stack.js";
 import { Spacer as V } from "../../stacks/spacer.js";
 import { VStack as u } from "../../stacks/v_stack.js";
@@ -18,7 +19,7 @@ import { DatePickerBody as $ } from "./date_picker_body.js";
 import { DatePickerHeader as q } from "./date_picker_header.js";
 import { DatePickerPresenter as E } from "./date_picker_presenter.js";
 import { DatePickerTimeSelector as G } from "./date_picker_time_selector.js";
-import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-picker-box_4da3776", w = { "date-picker": J, "date-picker-box": K }, ue = Y.forwardRef(function({
+import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-picker-box_4da3776", w = { "date-picker": J, "date-picker-box": K }, he = Y.forwardRef(function({
   value: i,
   disabled: h,
   onChange: k,
@@ -114,6 +115,6 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   );
 });
 export {
-  ue as DatePicker
+  he as DatePicker
 };
 //# sourceMappingURL=date_picker.js.map

package/dist/inputs/date_picker/date_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker.js","sources":["../../../src/inputs/date_picker/date_picker.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { useResizeObserver } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { DatePickerBody } from './date_picker_body.js';\nimport { DatePickerHeader } from './date_picker_header.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerTimeSelector } from './date_picker_time_selector.js';\nimport styles from './date_picker.module.css';\n\nexport interface DatePickerProps {\n  value: Date | null;\n  disabled?: boolean;\n  onChange?: (value: Date | null) => void;\n  onError?: (error: string | null) => void;\n  showTime?: boolean;\n  min?: Date | null;\n  max?: Date | null;\n  minVisibleTimeInMilliseconds?: number;\n  maxVisibleTimeInMilliseconds?: number;\n  disabledDates?: Date[];\n  countryCode?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n  timeIntervalInMinutes?: number;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n}\n\nexport const DatePicker = React.forwardRef(function DatePicker(\n  {\n    value,\n    disabled,\n    onChange,\n    onError,\n    showTime = false,\n    min: minDate = null,\n    max: maxDate = null,\n    minVisibleTimeInMilliseconds,\n    maxVisibleTimeInMilliseconds,\n    disabledDates,\n    countryCode = 'en-US',\n    renderActions,\n    onTimeSelected,\n    timeIntervalInMinutes,\n  }: DatePickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [calendarHeight, setCalendarHeight] = useState(0);\n  const isMountedRef = useRef(false);\n  const calendarRef = useResizeObserver((_, height) => {\n    setCalendarHeight(height);\n  });\n  const [presenter] = useState(() => {\n    const today = new Date();\n\n    const year = value == null ? today.getFullYear() : value.getFullYear();\n    const month = value == null ? today.getMonth() : value.getMonth();\n\n    return new DatePickerPresenter(value, year, month, showTime);\n  });\n\n  const state = useSignalValue(presenter.stateBroadcast);\n  const innerValue = useSignalValue(presenter.valueBroadcast);\n  const error = state.error;\n\n  useSignalValueEffect<string | null>(innerError => {\n    error !== innerError && onError && onError(innerError);\n  }, presenter.errorBroadcast);\n\n  useSignalValueEffect<Date | null>(value => {\n    if (isMountedRef.current) {\n      onChange && onChange(value);\n    } else {\n      isMountedRef.current = true;\n    }\n  }, presenter.valueBroadcast);\n\n  useLayoutEffect(() => {\n    presenter.initialize();\n  }, [presenter]);\n\n  useLayoutEffect(() => {\n    presenter.setShowTime(showTime);\n  }, [presenter, showTime]);\n\n  useLayoutEffect(() => {\n    presenter.setMinDate(minDate);\n  }, [presenter, minDate]);\n\n  useLayoutEffect(() => {\n    presenter.setMaxDate(maxDate);\n  }, [presenter, maxDate]);\n\n  useLayoutEffect(() => {\n    if (disabledDates == null) {\n      presenter.setDisabledDates([]);\n    } else {\n      presenter.setDisabledDates(disabledDates);\n    }\n  }, [presenter, disabledDates]);\n\n  useLayoutEffect(() => {\n    if (typeof minVisibleTimeInMilliseconds === 'number') {\n      presenter.setMinVisibleTime(minVisibleTimeInMilliseconds);\n    }\n  }, [presenter, minVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof maxVisibleTimeInMilliseconds === 'number') {\n      presenter.setMaxVisibleTime(maxVisibleTimeInMilliseconds);\n    }\n  }, [presenter, maxVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof timeIntervalInMinutes === 'number') {\n      presenter.setTimeIntervalInMinutes(timeIntervalInMinutes);\n    }\n  }, [presenter, timeIntervalInMinutes]);\n\n  useLayoutEffect(() => {\n    presenter.selectDate(value);\n  }, [presenter, value]);\n\n  return (\n    <HStack\n      ref={ref}\n      width=\"auto\"\n      height=\"auto\"\n      className={clsx(styles['date-picker'], 'tcn-date-picker')}\n      tabIndex={0}\n    >\n      <VStack\n        ref={calendarRef}\n        inline\n        height=\"auto\"\n        width=\"auto\"\n        className={clsx(styles['date-picker-box'], 'tcn-date-picker-box')}\n        data-is-disabled={disabled}\n      >\n        <VStack height=\"auto\">\n          <DatePickerHeader countryCode={countryCode} presenter={presenter} />\n          <DatePickerBody countryCode={countryCode} presenter={presenter} />\n        </VStack>\n        {renderActions && <VStack paddingInline=\"8px\">{renderActions(presenter)}</VStack>}\n        <Spacer height=\"8px\" />\n      </VStack>\n      {showTime && (\n        <>\n          <Spacer width=\"8px\" />\n          <DatePickerTimeSelector\n            height={`${calendarHeight}px`}\n            origin={innerValue}\n            max={state.max}\n            min={state.min}\n            minVisibleTimeInMilliseconds={state.minVisibleTimeInMilliseconds}\n            maxVisibleTimeInMilliseconds={state.maxVisibleTimeInMilliseconds}\n            intervalInMinutes={state.timeIntervalInMinutes}\n            disabled={disabled}\n            onSelect={(hour, minutes, seconds) => {\n              presenter.setTime(hour, minutes, seconds);\n              onTimeSelected && onTimeSelected(hour, minutes, seconds);\n            }}\n          />\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["DatePicker","React","value","disabled","onChange","onError","showTime","minDate","maxDate","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","disabledDates","countryCode","renderActions","onTimeSelected","timeIntervalInMinutes","ref","calendarHeight","setCalendarHeight","useState","isMountedRef","useRef","calendarRef","useResizeObserver","_","height","presenter","today","year","month","DatePickerPresenter","state","useSignalValue","innerValue","error","useSignalValueEffect","innerError","useLayoutEffect","jsxs","HStack","clsx","styles","VStack","jsx","DatePickerHeader","DatePickerBody","Spacer","Fragment","DatePickerTimeSelector","hour","minutes","seconds"],"mappings":"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"}
+{"version":3,"file":"date_picker.js","sources":["../../../src/inputs/date_picker/date_picker.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { useResizeObserver } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { DatePickerBody } from './date_picker_body.js';\nimport { DatePickerHeader } from './date_picker_header.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerTimeSelector } from './date_picker_time_selector.js';\nimport styles from './date_picker.module.css';\n\nexport interface DatePickerProps {\n  value: Date | null;\n  disabled?: boolean;\n  onChange?: (value: Date | null) => void;\n  onError?: (error: string | null) => void;\n  showTime?: boolean;\n  min?: Date | null;\n  max?: Date | null;\n  minVisibleTimeInMilliseconds?: number;\n  maxVisibleTimeInMilliseconds?: number;\n  disabledDates?: Date[];\n  countryCode?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n  timeIntervalInMinutes?: number;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n}\n\nexport const DatePicker = React.forwardRef(function DatePicker(\n  {\n    value,\n    disabled,\n    onChange,\n    onError,\n    showTime = false,\n    min: minDate = null,\n    max: maxDate = null,\n    minVisibleTimeInMilliseconds,\n    maxVisibleTimeInMilliseconds,\n    disabledDates,\n    countryCode = 'en-US',\n    renderActions,\n    onTimeSelected,\n    timeIntervalInMinutes,\n  }: DatePickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [calendarHeight, setCalendarHeight] = useState(0);\n  const isMountedRef = useRef(false);\n  const calendarRef = useResizeObserver((_, height) => {\n    setCalendarHeight(height);\n  });\n  const [presenter] = useState(() => {\n    const today = new Date();\n\n    const year = value == null ? today.getFullYear() : value.getFullYear();\n    const month = value == null ? today.getMonth() : value.getMonth();\n\n    return new DatePickerPresenter(value, year, month, showTime);\n  });\n\n  const state = useSignalValue(presenter.stateBroadcast);\n  const innerValue = useSignalValue(presenter.valueBroadcast);\n  const error = state.error;\n\n  useSignalValueEffect<string | null>(innerError => {\n    error !== innerError && onError && onError(innerError);\n  }, presenter.errorBroadcast);\n\n  useSignalValueEffect<Date | null>(value => {\n    if (isMountedRef.current) {\n      onChange && onChange(value);\n    } else {\n      isMountedRef.current = true;\n    }\n  }, presenter.valueBroadcast);\n\n  useLayoutEffect(() => {\n    presenter.initialize();\n  }, [presenter]);\n\n  useLayoutEffect(() => {\n    presenter.setShowTime(showTime);\n  }, [presenter, showTime]);\n\n  useLayoutEffect(() => {\n    presenter.setMinDate(minDate);\n  }, [presenter, minDate]);\n\n  useLayoutEffect(() => {\n    presenter.setMaxDate(maxDate);\n  }, [presenter, maxDate]);\n\n  useLayoutEffect(() => {\n    if (disabledDates == null) {\n      presenter.setDisabledDates([]);\n    } else {\n      presenter.setDisabledDates(disabledDates);\n    }\n  }, [presenter, disabledDates]);\n\n  useLayoutEffect(() => {\n    if (typeof minVisibleTimeInMilliseconds === 'number') {\n      presenter.setMinVisibleTime(minVisibleTimeInMilliseconds);\n    }\n  }, [presenter, minVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof maxVisibleTimeInMilliseconds === 'number') {\n      presenter.setMaxVisibleTime(maxVisibleTimeInMilliseconds);\n    }\n  }, [presenter, maxVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof timeIntervalInMinutes === 'number') {\n      presenter.setTimeIntervalInMinutes(timeIntervalInMinutes);\n    }\n  }, [presenter, timeIntervalInMinutes]);\n\n  useLayoutEffect(() => {\n    presenter.selectDate(value);\n  }, [presenter, value]);\n\n  return (\n    <HStack\n      ref={ref}\n      width=\"auto\"\n      height=\"auto\"\n      className={clsx(styles['date-picker'], 'tcn-date-picker')}\n      tabIndex={0}\n    >\n      <VStack\n        ref={calendarRef}\n        inline\n        height=\"auto\"\n        width=\"auto\"\n        className={clsx(styles['date-picker-box'], 'tcn-date-picker-box')}\n        data-is-disabled={disabled}\n      >\n        <VStack height=\"auto\">\n          <DatePickerHeader countryCode={countryCode} presenter={presenter} />\n          <DatePickerBody countryCode={countryCode} presenter={presenter} />\n        </VStack>\n        {renderActions && <VStack paddingInline=\"8px\">{renderActions(presenter)}</VStack>}\n        <Spacer height=\"8px\" />\n      </VStack>\n      {showTime && (\n        <>\n          <Spacer width=\"8px\" />\n          <DatePickerTimeSelector\n            height={`${calendarHeight}px`}\n            origin={innerValue}\n            max={state.max}\n            min={state.min}\n            minVisibleTimeInMilliseconds={state.minVisibleTimeInMilliseconds}\n            maxVisibleTimeInMilliseconds={state.maxVisibleTimeInMilliseconds}\n            intervalInMinutes={state.timeIntervalInMinutes}\n            disabled={disabled}\n            onSelect={(hour, minutes, seconds) => {\n              presenter.setTime(hour, minutes, seconds);\n              onTimeSelected && onTimeSelected(hour, minutes, seconds);\n            }}\n          />\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["DatePicker","React","value","disabled","onChange","onError","showTime","minDate","maxDate","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","disabledDates","countryCode","renderActions","onTimeSelected","timeIntervalInMinutes","ref","calendarHeight","setCalendarHeight","useState","isMountedRef","useRef","calendarRef","useResizeObserver","_","height","presenter","today","year","month","DatePickerPresenter","state","useSignalValue","innerValue","error","useSignalValueEffect","innerError","useLayoutEffect","jsxs","HStack","clsx","styles","VStack","jsx","DatePickerHeader","DatePickerBody","Spacer","Fragment","DatePickerTimeSelector","hour","minutes","seconds"],"mappings":";;;;;;;;;;;;;;;;;;;;;kHA8BaA,KAAaC,EAAM,WAAW,SACzC;AAAA,EACE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,KAAKC,IAAU;AAAA,EACf,KAAKC,IAAU;AAAA,EACf,8BAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,uBAAAC;AACF,GACAC,GACA;AACA,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAChDC,IAAeC,EAAO,EAAK,GAC3BC,IAAcC,EAAkB,CAACC,GAAGC,MAAW;AACnD,IAAAP,EAAkBO,CAAM;AAAA,EAC1B,CAAC,GACK,CAACC,CAAS,IAAIP,EAAS,MAAM;AACjC,UAAMQ,wBAAY,KAAA,GAEZC,IAAO1B,KAAS,OAAOyB,EAAM,YAAA,IAAgBzB,EAAM,YAAA,GACnD2B,IAAQ3B,KAAS,OAAOyB,EAAM,SAAA,IAAazB,EAAM,SAAA;AAEvD,WAAO,IAAI4B,EAAoB5B,GAAO0B,GAAMC,GAAOvB,CAAQ;AAAA,EAC7D,CAAC,GAEKyB,IAAQC,EAAeN,EAAU,cAAc,GAC/CO,IAAaD,EAAeN,EAAU,cAAc,GACpDQ,IAAQH,EAAM;AAEpB,SAAAI,EAAoC,CAAAC,MAAc;AAChD,IAAAF,MAAUE,KAAc/B,KAAWA,EAAQ+B,CAAU;AAAA,EACvD,GAAGV,EAAU,cAAc,GAE3BS,EAAkC,CAAAjC,MAAS;AACzC,IAAIkB,EAAa,UACfhB,KAAYA,EAASF,CAAK,IAE1BkB,EAAa,UAAU;AAAA,EAE3B,GAAGM,EAAU,cAAc,GAE3BW,EAAgB,MAAM;AACpB,IAAAX,EAAU,WAAA;AAAA,EACZ,GAAG,CAACA,CAAS,CAAC,GAEdW,EAAgB,MAAM;AACpB,IAAAX,EAAU,YAAYpB,CAAQ;AAAA,EAChC,GAAG,CAACoB,GAAWpB,CAAQ,CAAC,GAExB+B,EAAgB,MAAM;AACpB,IAAAX,EAAU,WAAWnB,CAAO;AAAA,EAC9B,GAAG,CAACmB,GAAWnB,CAAO,CAAC,GAEvB8B,EAAgB,MAAM;AACpB,IAAAX,EAAU,WAAWlB,CAAO;AAAA,EAC9B,GAAG,CAACkB,GAAWlB,CAAO,CAAC,GAEvB6B,EAAgB,MAAM;AACpB,IAAI1B,KAAiB,OACnBe,EAAU,iBAAiB,EAAE,IAE7BA,EAAU,iBAAiBf,CAAa;AAAA,EAE5C,GAAG,CAACe,GAAWf,CAAa,CAAC,GAE7B0B,EAAgB,MAAM;AACpB,IAAI,OAAO5B,KAAiC,YAC1CiB,EAAU,kBAAkBjB,CAA4B;AAAA,EAE5D,GAAG,CAACiB,GAAWjB,CAA4B,CAAC,GAE5C4B,EAAgB,MAAM;AACpB,IAAI,OAAO3B,KAAiC,YAC1CgB,EAAU,kBAAkBhB,CAA4B;AAAA,EAE5D,GAAG,CAACgB,GAAWhB,CAA4B,CAAC,GAE5C2B,EAAgB,MAAM;AACpB,IAAI,OAAOtB,KAA0B,YACnCW,EAAU,yBAAyBX,CAAqB;AAAA,EAE5D,GAAG,CAACW,GAAWX,CAAqB,CAAC,GAErCsB,EAAgB,MAAM;AACpB,IAAAX,EAAU,WAAWxB,CAAK;AAAA,EAC5B,GAAG,CAACwB,GAAWxB,CAAK,CAAC,GAGnB,gBAAAoC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAvB;AAAA,MACA,OAAM;AAAA,MACN,QAAO;AAAA,MACP,WAAWwB,EAAKC,EAAO,aAAa,GAAG,iBAAiB;AAAA,MACxD,UAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,KAAKpB;AAAA,YACL,QAAM;AAAA,YACN,QAAO;AAAA,YACP,OAAM;AAAA,YACN,WAAWkB,EAAKC,EAAO,iBAAiB,GAAG,qBAAqB;AAAA,YAChE,oBAAkBtC;AAAA,YAElB,UAAA;AAAA,cAAA,gBAAAmC,EAACI,GAAA,EAAO,QAAO,QACb,UAAA;AAAA,gBAAA,gBAAAC,EAACC,GAAA,EAAiB,aAAAhC,GAA0B,WAAAc,EAAA,CAAsB;AAAA,gBAClE,gBAAAiB,EAACE,GAAA,EAAe,aAAAjC,GAA0B,WAAAc,EAAA,CAAsB;AAAA,cAAA,GAClE;AAAA,cACCb,KAAiB,gBAAA8B,EAACD,GAAA,EAAO,eAAc,OAAO,UAAA7B,EAAca,CAAS,GAAE;AAAA,cACxE,gBAAAiB,EAACG,GAAA,EAAO,QAAO,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtBxC,KACC,gBAAAgC,EAAAS,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAJ,EAACG,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,UACpB,gBAAAH;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,QAAQ,GAAG/B,CAAc;AAAA,cACzB,QAAQgB;AAAA,cACR,KAAKF,EAAM;AAAA,cACX,KAAKA,EAAM;AAAA,cACX,8BAA8BA,EAAM;AAAA,cACpC,8BAA8BA,EAAM;AAAA,cACpC,mBAAmBA,EAAM;AAAA,cACzB,UAAA5B;AAAA,cACA,UAAU,CAAC8C,GAAMC,GAASC,MAAY;AACpC,gBAAAzB,EAAU,QAAQuB,GAAMC,GAASC,CAAO,GACxCrC,KAAkBA,EAAemC,GAAMC,GAASC,CAAO;AAAA,cACzD;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/inputs/date_picker/date_picker_header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker_header.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_header.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAuBjE,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,qBAAqB,2CA+DjF"}
+{"version":3,"file":"date_picker_header.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_header.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAuBjE,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,qBAAqB,2CAiEjF"}

package/dist/inputs/date_picker/date_picker_header.js

@@ -5,30 +5,29 @@ import { Spacer as h } from "../../stacks/spacer.js";
 import { useRef as M, useMemo as b } from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import { SlimButton as m } from "../../actions/button/slim_button/slim_button.js";
-import "../../actions/button/button/button.js";
+import { Button as m } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { getMonthsOfYear as u } from "../../utils/calendar/get_months_of_year.js";
 import { Select as k } from "../select/select.js";
-import { ChevronLeftIcon as S } from "@tcn/icons/chevron_left_icon.js";
-import { ChevronRightIcon as x } from "@tcn/icons/chevron_right_icon.js";
-import { Option as y } from "../options/option.js";
+import { ChevronLeftIcon as y } from "@tcn/icons/chevron_left_icon.js";
+import { ChevronRightIcon as S } from "@tcn/icons/chevron_right_icon.js";
+import { Option as x } from "../options/option.js";
 import { clsx as O } from "clsx";
 import { DatePickerYearInput as B } from "./date_picker_year_input.js";
 import '../../date_picker_header.css';const N = "_date-picker-header_696681a", R = { "date-picker-header": N };
 function V(t) {
   const o = u(t, "short"), i = u(t, "long");
-  return o.map((n, r) => /* @__PURE__ */ e(y, { value: String(r), label: n, keywords: [n], children: i[r] }, r));
+  return o.map((n, r) => /* @__PURE__ */ e(x, { value: String(r), label: n, keywords: [n], children: i[r] }, r));
 }
-function G({ presenter: t, countryCode: o }) {
+function F({ presenter: t, countryCode: o }) {
   const i = g(t.stateBroadcast), n = M(null);
   function r(a) {
     t.setVisibleMonth(Number(a));
   }
-  function p() {
+  function d() {
     return t.setVisibleMonth(t.stateBroadcast.get().visibleMonth - 1);
   }
-  function d() {
+  function p() {
     return t.setVisibleMonth(t.stateBroadcast.get().visibleMonth + 1);
   }
   const f = b(() => V(o), [o]);
@@ -45,10 +44,11 @@ function G({ presenter: t, countryCode: o }) {
         /* @__PURE__ */ e(
           m,
           {
+            utility: !0,
             disabled: !i.canNavigateToPreviousMonth,
             hierarchy: "tertiary",
-            onClick: p,
-            children: /* @__PURE__ */ e(S, { flipOnRtl: !0, size: "md" })
+            onClick: d,
+            children: /* @__PURE__ */ e(y, { flipOnRtl: !0, size: "md" })
           }
         ),
         /* @__PURE__ */ e(h, {}),
@@ -70,10 +70,11 @@ function G({ presenter: t, countryCode: o }) {
         /* @__PURE__ */ e(
           m,
           {
+            utility: !0,
             disabled: !i.canNavigateToNextMonth,
             hierarchy: "tertiary",
-            onClick: d,
-            children: /* @__PURE__ */ e(x, { flipOnRtl: !0, size: "md" })
+            onClick: p,
+            children: /* @__PURE__ */ e(S, { flipOnRtl: !0, size: "md" })
           }
         )
       ]
@@ -81,6 +82,6 @@ function G({ presenter: t, countryCode: o }) {
   );
 }
 export {
-  G as DatePickerHeader
+  F as DatePickerHeader
 };
 //# sourceMappingURL=date_picker_header.js.map

package/dist/inputs/date_picker/date_picker_header.js.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker_header.js","sources":["../../../src/inputs/date_picker/date_picker_header.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport React, { useMemo, useRef } from 'react';\nimport { SlimButton } from '../../actions/index.js';\nimport { getMonthsOfYear } from '../../utils/calendar/get_months_of_year.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { Select } from '../select/select.js';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { Option, OptionProps } from '../options/option.js';\nimport { DatePickerState } from './date_picker_presenter.js';\nimport styles from './date_picker_header.module.css';\nimport { clsx } from 'clsx';\nimport { DatePickerYearInput } from './date_picker_year_input.js';\n\nfunction makeMonthsOptions(countryCode: string): React.ReactElement<OptionProps>[] {\n  const shortMonths = getMonthsOfYear(countryCode, 'short');\n  const longMonths = getMonthsOfYear(countryCode, 'long');\n\n  return shortMonths.map((m, index) => {\n    return (\n      <Option key={index} value={String(index)} label={m} keywords={[m]}>\n        {longMonths[index]}\n      </Option>\n    );\n  });\n}\n\nexport interface DatePickerHeaderProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n}\n\nexport function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderProps) {\n  const state = useSignalValue(presenter.stateBroadcast);\n  const yearInputRef = useRef<HTMLInputElement>(null);\n\n  function selectMonth(value: string) {\n    presenter.setVisibleMonth(Number(value));\n  }\n\n  function previous() {\n    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth - 1);\n  }\n\n  function next() {\n    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth + 1);\n  }\n\n  const monthsOptions = useMemo(() => {\n    return makeMonthsOptions(countryCode);\n  }, [countryCode]);\n\n  useSignalValueEffect((state: DatePickerState) => {\n    const input = yearInputRef.current;\n    if (input && input.value !== String(state.visibleYear)) {\n      input.value = String(state.visibleYear);\n    }\n  }, presenter.stateBroadcast);\n\n  return (\n    <HStack\n      className={clsx(styles['date-picker-header'], 'tcn-date-picker-header')}\n      minWidth=\"35px\"\n      width=\"100%\"\n    >\n      <SlimButton\n        disabled={!state.canNavigateToPreviousMonth}\n        hierarchy=\"tertiary\"\n        onClick={previous}\n      >\n        <ChevronLeftIcon flipOnRtl size=\"md\" />\n      </SlimButton>\n      <Spacer />\n      <HStack hAlign=\"center\" gap=\"4px\" width=\"auto\">\n        <Select\n          hierarchy=\"tertiary\"\n          width=\"auto\"\n          maxWidth=\"150px\"\n          value={String(state.visibleMonth)}\n          onChange={selectMonth}\n        >\n          {monthsOptions}\n        </Select>\n        <DatePickerYearInput presenter={presenter} />\n      </HStack>\n      <Spacer />\n      <SlimButton\n        disabled={!state.canNavigateToNextMonth}\n        hierarchy=\"tertiary\"\n        onClick={next}\n      >\n        <ChevronRightIcon flipOnRtl size=\"md\" />\n      </SlimButton>\n    </HStack>\n  );\n}\n"],"names":["makeMonthsOptions","countryCode","shortMonths","getMonthsOfYear","longMonths","m","index","jsx","Option","DatePickerHeader","presenter","state","useSignalValue","yearInputRef","useRef","selectMonth","value","previous","next","monthsOptions","useMemo","useSignalValueEffect","input","jsxs","HStack","clsx","styles","SlimButton","ChevronLeftIcon","Spacer","Select","DatePickerYearInput","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,SAASA,EAAkBC,GAAwD;AACjF,QAAMC,IAAcC,EAAgBF,GAAa,OAAO,GAClDG,IAAaD,EAAgBF,GAAa,MAAM;AAEtD,SAAOC,EAAY,IAAI,CAACG,GAAGC,MAEvB,gBAAAC,EAACC,GAAA,EAAmB,OAAO,OAAOF,CAAK,GAAG,OAAOD,GAAG,UAAU,CAACA,CAAC,GAC7D,UAAAD,EAAWE,CAAK,KADNA,CAEb,CAEH;AACH;AAOO,SAASG,EAAiB,EAAE,WAAAC,GAAW,aAAAT,KAAsC;AAClF,QAAMU,IAAQC,EAAeF,EAAU,cAAc,GAC/CG,IAAeC,EAAyB,IAAI;AAElD,WAASC,EAAYC,GAAe;AAClC,IAAAN,EAAU,gBAAgB,OAAOM,CAAK,CAAC;AAAA,EACzC;AAEA,WAASC,IAAW;AAClB,WAAOP,EAAU,gBAAgBA,EAAU,eAAe,IAAA,EAAM,eAAe,CAAC;AAAA,EAClF;AAEA,WAASQ,IAAO;AACd,WAAOR,EAAU,gBAAgBA,EAAU,eAAe,IAAA,EAAM,eAAe,CAAC;AAAA,EAClF;AAEA,QAAMS,IAAgBC,EAAQ,MACrBpB,EAAkBC,CAAW,GACnC,CAACA,CAAW,CAAC;AAEhB,SAAAoB,EAAqB,CAACV,MAA2B;AAC/C,UAAMW,IAAQT,EAAa;AAC3B,IAAIS,KAASA,EAAM,UAAU,OAAOX,EAAM,WAAW,MACnDW,EAAM,QAAQ,OAAOX,EAAM,WAAW;AAAA,EAE1C,GAAGD,EAAU,cAAc,GAGzB,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,oBAAoB,GAAG,wBAAwB;AAAA,MACtE,UAAS;AAAA,MACT,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAnB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,UAAU,CAAChB,EAAM;AAAA,YACjB,WAAU;AAAA,YACV,SAASM;AAAA,YAET,UAAA,gBAAAV,EAACqB,GAAA,EAAgB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEtCC,GAAA,EAAO;AAAA,0BACPL,GAAA,EAAO,QAAO,UAAS,KAAI,OAAM,OAAM,QACtC,UAAA;AAAA,UAAA,gBAAAjB;AAAA,YAACuB;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAM;AAAA,cACN,UAAS;AAAA,cACT,OAAO,OAAOnB,EAAM,YAAY;AAAA,cAChC,UAAUI;AAAA,cAET,UAAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAZ,EAACwB,KAAoB,WAAArB,EAAA,CAAsB;AAAA,QAAA,GAC7C;AAAA,0BACCmB,GAAA,EAAO;AAAA,QACR,gBAAAtB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,UAAU,CAAChB,EAAM;AAAA,YACjB,WAAU;AAAA,YACV,SAASO;AAAA,YAET,UAAA,gBAAAX,EAACyB,GAAA,EAAiB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"date_picker_header.js","sources":["../../../src/inputs/date_picker/date_picker_header.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport React, { useMemo, useRef } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { getMonthsOfYear } from '../../utils/calendar/get_months_of_year.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { Select } from '../select/select.js';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { Option, OptionProps } from '../options/option.js';\nimport { DatePickerState } from './date_picker_presenter.js';\nimport styles from './date_picker_header.module.css';\nimport { clsx } from 'clsx';\nimport { DatePickerYearInput } from './date_picker_year_input.js';\n\nfunction makeMonthsOptions(countryCode: string): React.ReactElement<OptionProps>[] {\n  const shortMonths = getMonthsOfYear(countryCode, 'short');\n  const longMonths = getMonthsOfYear(countryCode, 'long');\n\n  return shortMonths.map((m, index) => {\n    return (\n      <Option key={index} value={String(index)} label={m} keywords={[m]}>\n        {longMonths[index]}\n      </Option>\n    );\n  });\n}\n\nexport interface DatePickerHeaderProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n}\n\nexport function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderProps) {\n  const state = useSignalValue(presenter.stateBroadcast);\n  const yearInputRef = useRef<HTMLInputElement>(null);\n\n  function selectMonth(value: string) {\n    presenter.setVisibleMonth(Number(value));\n  }\n\n  function previous() {\n    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth - 1);\n  }\n\n  function next() {\n    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth + 1);\n  }\n\n  const monthsOptions = useMemo(() => {\n    return makeMonthsOptions(countryCode);\n  }, [countryCode]);\n\n  useSignalValueEffect((state: DatePickerState) => {\n    const input = yearInputRef.current;\n    if (input && input.value !== String(state.visibleYear)) {\n      input.value = String(state.visibleYear);\n    }\n  }, presenter.stateBroadcast);\n\n  return (\n    <HStack\n      className={clsx(styles['date-picker-header'], 'tcn-date-picker-header')}\n      minWidth=\"35px\"\n      width=\"100%\"\n    >\n      <Button\n        utility\n        disabled={!state.canNavigateToPreviousMonth}\n        hierarchy=\"tertiary\"\n        onClick={previous}\n      >\n        <ChevronLeftIcon flipOnRtl size=\"md\" />\n      </Button>\n      <Spacer />\n      <HStack hAlign=\"center\" gap=\"4px\" width=\"auto\">\n        <Select\n          hierarchy=\"tertiary\"\n          width=\"auto\"\n          maxWidth=\"150px\"\n          value={String(state.visibleMonth)}\n          onChange={selectMonth}\n        >\n          {monthsOptions}\n        </Select>\n        <DatePickerYearInput presenter={presenter} />\n      </HStack>\n      <Spacer />\n      <Button\n        utility\n        disabled={!state.canNavigateToNextMonth}\n        hierarchy=\"tertiary\"\n        onClick={next}\n      >\n        <ChevronRightIcon flipOnRtl size=\"md\" />\n      </Button>\n    </HStack>\n  );\n}\n"],"names":["makeMonthsOptions","countryCode","shortMonths","getMonthsOfYear","longMonths","m","index","jsx","Option","DatePickerHeader","presenter","state","useSignalValue","yearInputRef","useRef","selectMonth","value","previous","next","monthsOptions","useMemo","useSignalValueEffect","input","jsxs","HStack","clsx","styles","Button","ChevronLeftIcon","Spacer","Select","DatePickerYearInput","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,SAASA,EAAkBC,GAAwD;AACjF,QAAMC,IAAcC,EAAgBF,GAAa,OAAO,GAClDG,IAAaD,EAAgBF,GAAa,MAAM;AAEtD,SAAOC,EAAY,IAAI,CAACG,GAAGC,MAEvB,gBAAAC,EAACC,GAAA,EAAmB,OAAO,OAAOF,CAAK,GAAG,OAAOD,GAAG,UAAU,CAACA,CAAC,GAC7D,UAAAD,EAAWE,CAAK,KADNA,CAEb,CAEH;AACH;AAOO,SAASG,EAAiB,EAAE,WAAAC,GAAW,aAAAT,KAAsC;AAClF,QAAMU,IAAQC,EAAeF,EAAU,cAAc,GAC/CG,IAAeC,EAAyB,IAAI;AAElD,WAASC,EAAYC,GAAe;AAClC,IAAAN,EAAU,gBAAgB,OAAOM,CAAK,CAAC;AAAA,EACzC;AAEA,WAASC,IAAW;AAClB,WAAOP,EAAU,gBAAgBA,EAAU,eAAe,IAAA,EAAM,eAAe,CAAC;AAAA,EAClF;AAEA,WAASQ,IAAO;AACd,WAAOR,EAAU,gBAAgBA,EAAU,eAAe,IAAA,EAAM,eAAe,CAAC;AAAA,EAClF;AAEA,QAAMS,IAAgBC,EAAQ,MACrBpB,EAAkBC,CAAW,GACnC,CAACA,CAAW,CAAC;AAEhB,SAAAoB,EAAqB,CAACV,MAA2B;AAC/C,UAAMW,IAAQT,EAAa;AAC3B,IAAIS,KAASA,EAAM,UAAU,OAAOX,EAAM,WAAW,MACnDW,EAAM,QAAQ,OAAOX,EAAM,WAAW;AAAA,EAE1C,GAAGD,EAAU,cAAc,GAGzB,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,oBAAoB,GAAG,wBAAwB;AAAA,MACtE,UAAS;AAAA,MACT,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAnB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAU,CAAChB,EAAM;AAAA,YACjB,WAAU;AAAA,YACV,SAASM;AAAA,YAET,UAAA,gBAAAV,EAACqB,GAAA,EAAgB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEtCC,GAAA,EAAO;AAAA,0BACPL,GAAA,EAAO,QAAO,UAAS,KAAI,OAAM,OAAM,QACtC,UAAA;AAAA,UAAA,gBAAAjB;AAAA,YAACuB;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAM;AAAA,cACN,UAAS;AAAA,cACT,OAAO,OAAOnB,EAAM,YAAY;AAAA,cAChC,UAAUI;AAAA,cAET,UAAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAZ,EAACwB,KAAoB,WAAArB,EAAA,CAAsB;AAAA,QAAA,GAC7C;AAAA,0BACCmB,GAAA,EAAO;AAAA,QACR,gBAAAtB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAU,CAAChB,EAAM;AAAA,YACjB,WAAU;AAAA,YACV,SAASO;AAAA,YAET,UAAA,gBAAAX,EAACyB,GAAA,EAAiB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/inputs/date_picker/date_picker_input.js

@@ -5,19 +5,19 @@ import { Popper as H } from "../../overlay/popper/legacy/popper.js";
 import { clsx as u } from "clsx";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import "../../actions/button/slim_button/slim_button.js";
 import { Button as J } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { DatePicker as Q } from "./date_picker.js";
-import "../../utils/click_away_listener.js";
-import { FocusRedirect as T } from "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import { FocusRedirect as T } from "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
-import "../../draggable.module-BgelQsuJ.js";
-import "../../utils/resize/context.js";
-import "../../resizable.module-I6iyBAvM.js";
-import "../../utils/resize/resize_handle.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_708f951", f = { button: U, popover: X }, Dt = B.forwardRef(
   ({
     value: c = /* @__PURE__ */ new Date(),

package/dist/inputs/date_picker/date_picker_time_selector.js

@@ -4,7 +4,6 @@ import { ZStack as C } from "../../stacks/z_stack.js";
 import { clsx as n } from "clsx";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import "../../actions/button/slim_button/slim_button.js";
 import { Button as O } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { BodyText as $ } from "../../typography/body_text/body_text.js";
@@ -16,7 +15,7 @@ import "../../typography/subheadline/subheadline.js";
 import "../../typography/title/title.js";
 import { ClockIcon as j } from "@tcn/icons/clock_icon.js";
 import '../../date_picker_time_selector.css';const z = "_time-box_f3145be", P = "_time-box-title_6cc801b", Z = "_time-box-title-container_22add52", v = "_selected-time_33e3aa3", s = { "time-box": z, "time-box-title": P, "time-box-title-container": Z, "selected-time": v };
-function ot({
+function et({
   origin: e,
   intervalInMinutes: f,
   max: b,
@@ -84,6 +83,6 @@ function ot({
   );
 }
 export {
-  ot as DatePickerTimeSelector
+  et as DatePickerTimeSelector
 };
 //# sourceMappingURL=date_picker_time_selector.js.map

package/dist/inputs/date_picker/date_picker_time_selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker_time_selector.js","sources":["../../../src/inputs/date_picker/date_picker_time_selector.tsx"],"sourcesContent":["import { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../../actions/index.js';\nimport styles from './date_picker_time_selector.module.css';\nimport { BodyText } from '../../typography/index.js';\nimport { ClockIcon } from '@tcn/icons/clock_icon.js';\n\nexport interface DatePickerTimeSelectorProps {\n  origin: Date | null;\n  intervalInMinutes: number;\n  max: Date | null;\n  min: Date | null;\n  minVisibleTimeInMilliseconds: number;\n  maxVisibleTimeInMilliseconds: number;\n  onSelect: (hours: number, minutes: number, seconds: number) => void;\n  disabled?: boolean;\n  height?: string;\n}\n\nexport function DatePickerTimeSelector({\n  origin,\n  intervalInMinutes,\n  max,\n  min,\n  minVisibleTimeInMilliseconds,\n  maxVisibleTimeInMilliseconds,\n  onSelect,\n  disabled,\n  height,\n}: DatePickerTimeSelectorProps) {\n  const stepInMilliseconds = intervalInMinutes * 1000 * 60;\n  const amountOfSteps = (24 * 1000 * 60 * 60) / stepInMilliseconds;\n  const normalizedDate = new Date(origin || new Date());\n  const options: React.ReactElement[] = [];\n  const minTime = min?.getTime() ?? -Infinity;\n  const maxTime = max?.getTime() ?? Infinity;\n\n  normalizedDate.setHours(0, 0, 0, 0);\n  let offset = normalizedDate.getTime();\n  let offsetFromZero = 0;\n\n  for (let x = 0; x < amountOfSteps; x++) {\n    const date = new Date(offset);\n\n    let hour = date.getHours() % 12;\n    const minute = date.getMinutes();\n    const meridiem = date.getHours() >= 12 ? 'PM' : 'AM';\n    hour = hour === 0 ? 12 : hour;\n\n    const isSelected =\n      origin != null &&\n      date.getHours() === origin.getHours() &&\n      date.getMinutes() === origin.getMinutes() &&\n      date.getSeconds() === origin.getSeconds();\n\n    const time = date.getTime();\n    const isOutOfRange = time < minTime || time > maxTime;\n\n    const button = (\n      <Button\n        key={x}\n        width=\"flex\"\n        hierarchy=\"tertiary\"\n        className={clsx('tcn-selected-time', isSelected && styles['selected-time'])}\n        disabled={origin == null || disabled || isOutOfRange}\n        onClick={() => {\n          onSelect(date.getHours(), date.getMinutes(), date.getSeconds());\n        }}\n      >{`${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')} ${meridiem}`}</Button>\n    );\n\n    if (\n      offsetFromZero >= minVisibleTimeInMilliseconds &&\n      offsetFromZero <= maxVisibleTimeInMilliseconds\n    ) {\n      options.push(button);\n    }\n\n    offset += stepInMilliseconds;\n    offsetFromZero += stepInMilliseconds;\n  }\n\n  return (\n    <VStack\n      width=\"auto\"\n      height={height}\n      data-is-disabled={disabled || origin == null}\n      className={clsx(styles['time-box'], 'tcn-time-box')}\n    >\n      <ZStack\n        className={clsx(\n          styles['time-box-title-container'],\n          'tcn-time-box-title-container'\n        )}\n      >\n        <BodyText className={clsx(styles['time-box-title'], 'tcn-time-box-title')}>\n          <ClockIcon size=\"lg\" />\n        </BodyText>\n      </ZStack>\n      <VStack\n        width=\"auto\"\n        height=\"flex\"\n        overflowY=\"auto\"\n        style={{ paddingInline: '4px' }}\n      >\n        {options}\n      </VStack>\n    </VStack>\n  );\n}\n"],"names":["DatePickerTimeSelector","origin","intervalInMinutes","max","min","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","onSelect","disabled","height","stepInMilliseconds","amountOfSteps","normalizedDate","options","minTime","maxTime","offset","offsetFromZero","x","date","hour","minute","meridiem","isSelected","time","isOutOfRange","button","jsx","Button","clsx","styles","jsxs","VStack","ZStack","BodyText","ClockIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAqBO,SAASA,GAAuB;AAAA,EACrC,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AACF,GAAgC;AAC9B,QAAMC,IAAqBR,IAAoB,MAAO,IAChDS,IAAiB,KAAK,MAAO,KAAK,KAAMD,GACxCE,IAAiB,IAAI,KAAKX,KAAU,oBAAI,MAAM,GAC9CY,IAAgC,CAAA,GAChCC,IAAUV,GAAK,QAAA,KAAa,QAC5BW,IAAUZ,GAAK,QAAA,KAAa;AAElC,EAAAS,EAAe,SAAS,GAAG,GAAG,GAAG,CAAC;AAClC,MAAII,IAASJ,EAAe,QAAA,GACxBK,IAAiB;AAErB,WAASC,IAAI,GAAGA,IAAIP,GAAeO,KAAK;AACtC,UAAMC,IAAO,IAAI,KAAKH,CAAM;AAE5B,QAAII,IAAOD,EAAK,SAAA,IAAa;AAC7B,UAAME,IAASF,EAAK,WAAA,GACdG,IAAWH,EAAK,SAAA,KAAc,KAAK,OAAO;AAChD,IAAAC,IAAOA,MAAS,IAAI,KAAKA;AAEzB,UAAMG,IACJtB,KAAU,QACVkB,EAAK,SAAA,MAAelB,EAAO,SAAA,KAC3BkB,EAAK,WAAA,MAAiBlB,EAAO,WAAA,KAC7BkB,EAAK,WAAA,MAAiBlB,EAAO,WAAA,GAEzBuB,IAAOL,EAAK,QAAA,GACZM,IAAeD,IAAOV,KAAWU,IAAOT,GAExCW,IACJ,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,WAAU;AAAA,QACV,WAAWC,EAAK,qBAAqBN,KAAcO,EAAO,eAAe,CAAC;AAAA,QAC1E,UAAU7B,KAAU,QAAQO,KAAYiB;AAAA,QACxC,SAAS,MAAM;AACb,UAAAlB,EAASY,EAAK,YAAYA,EAAK,cAAcA,EAAK,YAAY;AAAA,QAChE;AAAA,QACA,aAAGC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EAAO,WAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,CAAQ;AAAA,MAAA;AAAA,MARhFJ;AAAA,IAAA;AAWT,IACED,KAAkBZ,KAClBY,KAAkBX,KAElBO,EAAQ,KAAKa,CAAM,GAGrBV,KAAUN,GACVO,KAAkBP;AAAA,EACpB;AAEA,SACE,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAAvB;AAAA,MACA,oBAAkBD,KAAYP,KAAU;AAAA,MACxC,WAAW4B,EAAKC,EAAO,UAAU,GAAG,cAAc;AAAA,MAElD,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWJ;AAAA,cACTC,EAAO,0BAA0B;AAAA,cACjC;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAH,EAACO,GAAA,EAAS,WAAWL,EAAKC,EAAO,gBAAgB,GAAG,oBAAoB,GACtE,UAAA,gBAAAH,EAACQ,GAAA,EAAU,MAAK,MAAK,EAAA,CACvB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAR;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YACV,OAAO,EAAE,eAAe,MAAA;AAAA,YAEvB,UAAAnB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"date_picker_time_selector.js","sources":["../../../src/inputs/date_picker/date_picker_time_selector.tsx"],"sourcesContent":["import { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../../actions/index.js';\nimport styles from './date_picker_time_selector.module.css';\nimport { BodyText } from '../../typography/index.js';\nimport { ClockIcon } from '@tcn/icons/clock_icon.js';\n\nexport interface DatePickerTimeSelectorProps {\n  origin: Date | null;\n  intervalInMinutes: number;\n  max: Date | null;\n  min: Date | null;\n  minVisibleTimeInMilliseconds: number;\n  maxVisibleTimeInMilliseconds: number;\n  onSelect: (hours: number, minutes: number, seconds: number) => void;\n  disabled?: boolean;\n  height?: string;\n}\n\nexport function DatePickerTimeSelector({\n  origin,\n  intervalInMinutes,\n  max,\n  min,\n  minVisibleTimeInMilliseconds,\n  maxVisibleTimeInMilliseconds,\n  onSelect,\n  disabled,\n  height,\n}: DatePickerTimeSelectorProps) {\n  const stepInMilliseconds = intervalInMinutes * 1000 * 60;\n  const amountOfSteps = (24 * 1000 * 60 * 60) / stepInMilliseconds;\n  const normalizedDate = new Date(origin || new Date());\n  const options: React.ReactElement[] = [];\n  const minTime = min?.getTime() ?? -Infinity;\n  const maxTime = max?.getTime() ?? Infinity;\n\n  normalizedDate.setHours(0, 0, 0, 0);\n  let offset = normalizedDate.getTime();\n  let offsetFromZero = 0;\n\n  for (let x = 0; x < amountOfSteps; x++) {\n    const date = new Date(offset);\n\n    let hour = date.getHours() % 12;\n    const minute = date.getMinutes();\n    const meridiem = date.getHours() >= 12 ? 'PM' : 'AM';\n    hour = hour === 0 ? 12 : hour;\n\n    const isSelected =\n      origin != null &&\n      date.getHours() === origin.getHours() &&\n      date.getMinutes() === origin.getMinutes() &&\n      date.getSeconds() === origin.getSeconds();\n\n    const time = date.getTime();\n    const isOutOfRange = time < minTime || time > maxTime;\n\n    const button = (\n      <Button\n        key={x}\n        width=\"flex\"\n        hierarchy=\"tertiary\"\n        className={clsx('tcn-selected-time', isSelected && styles['selected-time'])}\n        disabled={origin == null || disabled || isOutOfRange}\n        onClick={() => {\n          onSelect(date.getHours(), date.getMinutes(), date.getSeconds());\n        }}\n      >{`${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')} ${meridiem}`}</Button>\n    );\n\n    if (\n      offsetFromZero >= minVisibleTimeInMilliseconds &&\n      offsetFromZero <= maxVisibleTimeInMilliseconds\n    ) {\n      options.push(button);\n    }\n\n    offset += stepInMilliseconds;\n    offsetFromZero += stepInMilliseconds;\n  }\n\n  return (\n    <VStack\n      width=\"auto\"\n      height={height}\n      data-is-disabled={disabled || origin == null}\n      className={clsx(styles['time-box'], 'tcn-time-box')}\n    >\n      <ZStack\n        className={clsx(\n          styles['time-box-title-container'],\n          'tcn-time-box-title-container'\n        )}\n      >\n        <BodyText className={clsx(styles['time-box-title'], 'tcn-time-box-title')}>\n          <ClockIcon size=\"lg\" />\n        </BodyText>\n      </ZStack>\n      <VStack\n        width=\"auto\"\n        height=\"flex\"\n        overflowY=\"auto\"\n        style={{ paddingInline: '4px' }}\n      >\n        {options}\n      </VStack>\n    </VStack>\n  );\n}\n"],"names":["DatePickerTimeSelector","origin","intervalInMinutes","max","min","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","onSelect","disabled","height","stepInMilliseconds","amountOfSteps","normalizedDate","options","minTime","maxTime","offset","offsetFromZero","x","date","hour","minute","meridiem","isSelected","time","isOutOfRange","button","jsx","Button","clsx","styles","jsxs","VStack","ZStack","BodyText","ClockIcon"],"mappings":";;;;;;;;;;;;;;;;;AAqBO,SAASA,GAAuB;AAAA,EACrC,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AACF,GAAgC;AAC9B,QAAMC,IAAqBR,IAAoB,MAAO,IAChDS,IAAiB,KAAK,MAAO,KAAK,KAAMD,GACxCE,IAAiB,IAAI,KAAKX,KAAU,oBAAI,MAAM,GAC9CY,IAAgC,CAAA,GAChCC,IAAUV,GAAK,QAAA,KAAa,QAC5BW,IAAUZ,GAAK,QAAA,KAAa;AAElC,EAAAS,EAAe,SAAS,GAAG,GAAG,GAAG,CAAC;AAClC,MAAII,IAASJ,EAAe,QAAA,GACxBK,IAAiB;AAErB,WAASC,IAAI,GAAGA,IAAIP,GAAeO,KAAK;AACtC,UAAMC,IAAO,IAAI,KAAKH,CAAM;AAE5B,QAAII,IAAOD,EAAK,SAAA,IAAa;AAC7B,UAAME,IAASF,EAAK,WAAA,GACdG,IAAWH,EAAK,SAAA,KAAc,KAAK,OAAO;AAChD,IAAAC,IAAOA,MAAS,IAAI,KAAKA;AAEzB,UAAMG,IACJtB,KAAU,QACVkB,EAAK,SAAA,MAAelB,EAAO,SAAA,KAC3BkB,EAAK,WAAA,MAAiBlB,EAAO,WAAA,KAC7BkB,EAAK,WAAA,MAAiBlB,EAAO,WAAA,GAEzBuB,IAAOL,EAAK,QAAA,GACZM,IAAeD,IAAOV,KAAWU,IAAOT,GAExCW,IACJ,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,WAAU;AAAA,QACV,WAAWC,EAAK,qBAAqBN,KAAcO,EAAO,eAAe,CAAC;AAAA,QAC1E,UAAU7B,KAAU,QAAQO,KAAYiB;AAAA,QACxC,SAAS,MAAM;AACb,UAAAlB,EAASY,EAAK,YAAYA,EAAK,cAAcA,EAAK,YAAY;AAAA,QAChE;AAAA,QACA,aAAGC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EAAO,WAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,CAAQ;AAAA,MAAA;AAAA,MARhFJ;AAAA,IAAA;AAWT,IACED,KAAkBZ,KAClBY,KAAkBX,KAElBO,EAAQ,KAAKa,CAAM,GAGrBV,KAAUN,GACVO,KAAkBP;AAAA,EACpB;AAEA,SACE,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAAvB;AAAA,MACA,oBAAkBD,KAAYP,KAAU;AAAA,MACxC,WAAW4B,EAAKC,EAAO,UAAU,GAAG,cAAc;AAAA,MAElD,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWJ;AAAA,cACTC,EAAO,0BAA0B;AAAA,cACjC;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAH,EAACO,GAAA,EAAS,WAAWL,EAAKC,EAAO,gBAAgB,GAAG,oBAAoB,GACtE,UAAA,gBAAAH,EAACQ,GAAA,EAAU,MAAK,MAAK,EAAA,CACvB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAR;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YACV,OAAO,EAAE,eAAe,MAAA;AAAA,YAEvB,UAAAnB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/inputs/date_picker/date_picker_year_input.js

@@ -1,7 +1,6 @@
 import { jsxs as u, Fragment as f, jsx as e } from "react/jsx-runtime";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import "../../actions/button/slim_button/slim_button.js";
 import { Button as h } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { clsx as d } from "clsx";
@@ -10,7 +9,7 @@ import { Popper as y } from "../../overlay/popper/legacy/popper.js";
 import { DatePickerYearSelector as g } from "./date_picker_year_selector.js";
 import { useSignalValue as b } from "@tcn/state";
 import '../../date_picker_year_input.css';const k = "_year-select_eb568a7", s = { "year-select": k };
-function F({ presenter: t }) {
+function D({ presenter: t }) {
   const { visibleYear: c } = b(t.stateBroadcast), [a, i] = n(null), [l, r] = n(!1);
   function o() {
     r(!1);
@@ -45,6 +44,6 @@ function F({ presenter: t }) {
   ] });
 }
 export {
-  F as DatePickerYearInput
+  D as DatePickerYearInput
 };
 //# sourceMappingURL=date_picker_year_input.js.map

package/dist/inputs/date_picker/date_picker_year_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker_year_input.js","sources":["../../../src/inputs/date_picker/date_picker_year_input.tsx"],"sourcesContent":["import { Button } from '../../actions/index.js';\nimport { clsx } from 'clsx';\nimport styles from './date_picker_year_input.module.css';\nimport { useState } from 'react';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerYearSelector } from './date_picker_year_selector.js';\nimport { useSignalValue } from '@tcn/state';\n\nexport interface DatePickerYearInputProps {\n  presenter: DatePickerPresenter;\n}\n\nexport function DatePickerYearInput({ presenter }: DatePickerYearInputProps) {\n  const { visibleYear } = useSignalValue(presenter.stateBroadcast);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  function close() {\n    setIsOpen(false);\n  }\n\n  function open(event: React.MouseEvent<HTMLButtonElement>) {\n    setButtonRef(event.currentTarget);\n    setIsOpen(true);\n  }\n\n  return (\n    <>\n      <Button\n        hierarchy=\"tertiary\"\n        className={clsx('tcn-date-picker-year-select', styles['year-select'])}\n        width=\"auto\"\n        hAlign=\"start\"\n        onClick={open}\n      >\n        <span className={styles.selectedLabel}>{visibleYear}</span>\n      </Button>\n      <Popper\n        anchorElement={buttonRef}\n        horizontalAnchor=\"center\"\n        horizontalOrigin=\"center\"\n        onClose={close}\n        open={isOpen}\n        restoreFocus\n      >\n        <DatePickerYearSelector presenter={presenter} onClose={close} />\n      </Popper>\n    </>\n  );\n}\n"],"names":["DatePickerYearInput","presenter","visibleYear","useSignalValue","buttonRef","setButtonRef","useState","isOpen","setIsOpen","close","open","event","jsxs","Fragment","jsx","Button","clsx","styles","Popper","DatePickerYearSelector"],"mappings":";;;;;;;;;;;;AAaO,SAASA,EAAoB,EAAE,WAAAC,KAAuC;AAC3E,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAeF,EAAU,cAAc,GACzD,CAACG,GAAWC,CAAY,IAAIC,EAAmC,IAAI,GACnE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,WAASG,IAAQ;AACf,IAAAD,EAAU,EAAK;AAAA,EACjB;AAEA,WAASE,EAAKC,GAA4C;AACxD,IAAAN,EAAaM,EAAM,aAAa,GAChCH,EAAU,EAAI;AAAA,EAChB;AAEA,SACE,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAWC,EAAK,+BAA+BC,EAAO,aAAa,CAAC;AAAA,QACpE,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAASP;AAAA,QAET,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWG,EAAO,eAAgB,UAAAf,EAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtD,gBAAAY;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,eAAed;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,SAASK;AAAA,QACT,MAAMF;AAAA,QACN,cAAY;AAAA,QAEZ,UAAA,gBAAAO,EAACK,GAAA,EAAuB,WAAAlB,GAAsB,SAASQ,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAChE,GACF;AAEJ;"}
+{"version":3,"file":"date_picker_year_input.js","sources":["../../../src/inputs/date_picker/date_picker_year_input.tsx"],"sourcesContent":["import { Button } from '../../actions/index.js';\nimport { clsx } from 'clsx';\nimport styles from './date_picker_year_input.module.css';\nimport { useState } from 'react';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerYearSelector } from './date_picker_year_selector.js';\nimport { useSignalValue } from '@tcn/state';\n\nexport interface DatePickerYearInputProps {\n  presenter: DatePickerPresenter;\n}\n\nexport function DatePickerYearInput({ presenter }: DatePickerYearInputProps) {\n  const { visibleYear } = useSignalValue(presenter.stateBroadcast);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  function close() {\n    setIsOpen(false);\n  }\n\n  function open(event: React.MouseEvent<HTMLButtonElement>) {\n    setButtonRef(event.currentTarget);\n    setIsOpen(true);\n  }\n\n  return (\n    <>\n      <Button\n        hierarchy=\"tertiary\"\n        className={clsx('tcn-date-picker-year-select', styles['year-select'])}\n        width=\"auto\"\n        hAlign=\"start\"\n        onClick={open}\n      >\n        <span className={styles.selectedLabel}>{visibleYear}</span>\n      </Button>\n      <Popper\n        anchorElement={buttonRef}\n        horizontalAnchor=\"center\"\n        horizontalOrigin=\"center\"\n        onClose={close}\n        open={isOpen}\n        restoreFocus\n      >\n        <DatePickerYearSelector presenter={presenter} onClose={close} />\n      </Popper>\n    </>\n  );\n}\n"],"names":["DatePickerYearInput","presenter","visibleYear","useSignalValue","buttonRef","setButtonRef","useState","isOpen","setIsOpen","close","open","event","jsxs","Fragment","jsx","Button","clsx","styles","Popper","DatePickerYearSelector"],"mappings":";;;;;;;;;;;AAaO,SAASA,EAAoB,EAAE,WAAAC,KAAuC;AAC3E,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAeF,EAAU,cAAc,GACzD,CAACG,GAAWC,CAAY,IAAIC,EAAmC,IAAI,GACnE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,WAASG,IAAQ;AACf,IAAAD,EAAU,EAAK;AAAA,EACjB;AAEA,WAASE,EAAKC,GAA4C;AACxD,IAAAN,EAAaM,EAAM,aAAa,GAChCH,EAAU,EAAI;AAAA,EAChB;AAEA,SACE,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAWC,EAAK,+BAA+BC,EAAO,aAAa,CAAC;AAAA,QACpE,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAASP;AAAA,QAET,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWG,EAAO,eAAgB,UAAAf,EAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtD,gBAAAY;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,eAAed;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,SAASK;AAAA,QACT,MAAMF;AAAA,QACN,cAAY;AAAA,QAEZ,UAAA,gBAAAO,EAACK,GAAA,EAAuB,WAAAlB,GAAsB,SAASQ,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAChE,GACF;AAEJ;"}

package/dist/inputs/date_picker/date_picker_year_selector.js

@@ -5,11 +5,10 @@ import { ChevronRightIcon as O } from "@tcn/icons/chevron_right_icon.js";
 import { useSignalValue as $ } from "@tcn/state";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import { SlimButton as g } from "../../actions/button/slim_button/slim_button.js";
-import "../../actions/button/button/button.js";
+import { Button as y } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { HStack as t } from "../../stacks/h_stack.js";
-import { Spacer as x } from "../../stacks/spacer.js";
+import { Spacer as g } from "../../stacks/spacer.js";
 import { VStack as E } from "../../stacks/v_stack.js";
 import { BodyText as L } from "../../typography/body_text/body_text.js";
 import "../../typography/callout/callout.js";
@@ -18,16 +17,17 @@ import "../../typography/footnote/footnote.js";
 import { Headline as M } from "../../typography/headline/headline.js";
 import "../../typography/subheadline/subheadline.js";
 import "../../typography/title/title.js";
-import "../../utils/click_away_listener.js";
-import { FocusRedirect as T } from "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import { FocusRedirect as T } from "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
-import { clsx as y } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
-import "../../utils/resize/context.js";
-import "../../resizable.module-I6iyBAvM.js";
-import "../../utils/resize/resize_handle.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
+import { clsx as x } from "clsx";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import '../../date_picker_year_selector.css';const q = "_date-picker-year-selector_ab05e1f", A = "_date-picker-year-button_fded757", Y = { "date-picker-year-selector": q, "date-picker-year-button": A };
 function Re({
   presenter: s,
@@ -35,12 +35,12 @@ function Re({
 }) {
   const { min: p, max: m, visibleYear: o, visibleMonth: b } = $(
     s.stateBroadcast
-  ), [a, f] = z(0), c = D(null), R = p == null ? -1 / 0 : p.getFullYear(), S = m == null ? 1 / 0 : m.getFullYear(), r = [], d = o % 20;
-  let u = o - d + a, F = u + 19;
+  ), [a, f] = z(0), c = D(null), R = p == null ? -1 / 0 : p.getFullYear(), F = m == null ? 1 / 0 : m.getFullYear(), r = [], u = o % 20;
+  let d = o - u + a, S = d + 19;
   for (let n = 0; n < 20; n++) {
     let l = !1;
     const i = new Date(o, b, 1);
-    i.setFullYear(o - d + n + a), (i.getFullYear() > S || i.getFullYear() < R) && (l = !0);
+    i.setFullYear(o - u + n + a), (i.getFullYear() > F || i.getFullYear() < R) && (l = !0);
     const j = t;
     r.push(
       /* @__PURE__ */ e(
@@ -49,7 +49,7 @@ function Re({
           as: "button",
           width: "flex",
           disabled: l,
-          className: y(Y["date-picker-year-button"], "tcn-date-picker-year-button"),
+          className: x(Y["date-picker-year-button"], "tcn-date-picker-year-button"),
           "data-is-disabled": String(l),
           "data-is-selected": String(i.getFullYear() === o),
           onClick: () => {
@@ -80,26 +80,26 @@ function Re({
       ref: c,
       tabIndex: 0,
       padding: "8px",
-      className: y(
+      className: x(
         Y["date-picker-year-selector"],
         "tcn-date-picker-year-selector"
       ),
       gap: "4px",
       children: [
         /* @__PURE__ */ h(t, { gap: "4px", children: [
-          /* @__PURE__ */ e(g, { onClick: P, hierarchy: "tertiary", children: /* @__PURE__ */ e(N, { flipOnRtl: !0, size: "md" }) }),
-          /* @__PURE__ */ e(x, {}),
+          /* @__PURE__ */ e(y, { utility: !0, onClick: P, hierarchy: "tertiary", children: /* @__PURE__ */ e(N, { flipOnRtl: !0, size: "md" }) }),
+          /* @__PURE__ */ e(g, {}),
           /* @__PURE__ */ e(
             M,
             {
               selectable: !1,
               emphasis: "faint",
               hierarchy: "tertiary",
-              children: `${u}-${F}`
+              children: `${d}-${S}`
             }
           ),
-          /* @__PURE__ */ e(x, {}),
-          /* @__PURE__ */ e(g, { hierarchy: "tertiary", onClick: V, children: /* @__PURE__ */ e(O, { size: "md" }) })
+          /* @__PURE__ */ e(g, {}),
+          /* @__PURE__ */ e(y, { utility: !0, hierarchy: "tertiary", onClick: V, children: /* @__PURE__ */ e(O, { size: "md" }) })
         ] }),
         /* @__PURE__ */ e(t, { gap: "4px", children: v }),
         /* @__PURE__ */ e(t, { gap: "4px", children: B }),