@uva-glass/component-library 3.56.0 → 3.57.1

package/dist/TableCellResizerPlugin-Dn8Ks2Lm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellResizerPlugin-Dn8Ks2Lm.js","names":["o","t","e","r","i","n","c"],"sources":["../node_modules/.pnpm/@lexical+react@0.45.0_react-dom@19.2.7_react@19.2.7__react@19.2.7_yjs@13.6.31/node_modules/@lexical/react/dist/useLexicalEditable.prod.mjs","../src/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.module.css","../src/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport{useLexicalComposerContext as r}from\"@lexical/react/LexicalComposerContext\";import{useLayoutEffect as t,useEffect as e,useMemo as i,useState as n,useRef as c}from\"react\";import{CAN_USE_DOM as o}from\"lexical\";const u=o?t:e;function a(r){return{initialValueFn:()=>r.isEditable(),subscribe:t=>r.registerEditableListener(t)}}function l(){return function(t){const[e]=r(),o=i(()=>t(e),[e,t]),[a,l]=n(()=>o.initialValueFn()),s=c(a);return u(()=>{const{initialValueFn:r,subscribe:t}=o,e=r();return s.current!==e&&(s.current=e,l(e)),t(r=>{s.current=r,l(r)})},[o,t]),a}(a)}export{l as useLexicalEditable};\n","/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n *\r\n */\n\n.table-cell-resizer__resizer {\n  position: absolute;\n}\n","/* eslint-disable jsx-a11y/no-static-element-interactions */\r\n/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n * Modified from original to fit project needs wim jurriaans.\r\n *\r\n *\r\n */\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\r\nimport { useLexicalEditable } from '@lexical/react/useLexicalEditable';\r\nimport {\r\n  $computeTableMapSkipCellCheck,\r\n  $getTableNodeFromLexicalNodeOrThrow,\r\n  $getTableRowIndexFromTableCellNode,\r\n  $isTableCellNode,\r\n  $isTableRowNode,\r\n  TableNode,\r\n  getDOMCellFromTarget,\r\n  getTableElement,\r\n  TableCellNode,\r\n} from '@lexical/table';\r\nimport { $getNearestNodeOfType, calculateZoomLevel } from '@lexical/utils';\r\nimport { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';\r\nimport { createPortal } from 'react-dom';\r\n\r\nimport type { LexicalEditor } from 'lexical';\r\nimport type { TableDOMCell, TableMapType, TableRowNode } from '@lexical/table';\r\nimport type { JSX, MouseEventHandler, ReactPortal } from 'react';\r\n\r\nimport styles from './TableCellResizerPlugin.module.css';\r\n\r\nimport {\r\n  getEditorContentWidth,\r\n  getEditorParrentCellWidth,\r\n  tableHasContent,\r\n} from 'components/RteEditor/Plugins/TablePlugin/helpers';\r\nimport { $createTableWrapperNode, TableWrapperNode } from 'components/RteEditor/nodes';\r\n\r\ntype MousePosition = {\r\n  x: number;\r\n  y: number;\r\n};\r\n\r\ntype MouseDraggingDirection = 'right' | 'bottom';\r\n\r\nconst MIN_ROW_HEIGHT = 33;\r\nconst MIN_COLUMN_WIDTH = 32;\r\nconst HALF = 2;\r\n\r\nfunction TableCellResizer({ editor }: { editor: LexicalEditor }): JSX.Element {\r\n  const targetRef = useRef<HTMLElement | null>(null);\r\n  const resizerRef = useRef<HTMLDivElement | null>(null);\r\n  const tableRectRef = useRef<DOMRect | null>(null);\r\n\r\n  const mouseStartPosRef = useRef<MousePosition | null>(null);\r\n  const [mouseCurrentPos, updateMouseCurrentPos] = useState<MousePosition | null>(null);\r\n\r\n  const [activeCell, updateActiveCell] = useState<TableDOMCell | null>(null);\r\n  const [isMouseDown, updateIsMouseDown] = useState<boolean>(false);\r\n  const [draggingDirection, updateDraggingDirection] = useState<MouseDraggingDirection | null>(null);\r\n\r\n  const resetState = useCallback(() => {\r\n    updateActiveCell(null);\r\n    targetRef.current = null;\r\n    updateDraggingDirection(null);\r\n    mouseStartPosRef.current = null;\r\n    tableRectRef.current = null;\r\n  }, []);\r\n\r\n  const isMouseDownOnEvent = (event: MouseEvent) => {\r\n    return (event.buttons & 1) === 1;\r\n  };\r\n\r\n  useEffect(() => {\r\n    return editor.registerNodeTransform(TableNode, (tableNode) => {\r\n      // modification: set default column widths if not defined or table cells of imported tables has the width set\r\n      if (!tableNode.getColWidths()) {\r\n        const tableRows = tableNode.getChildren();\r\n        const columnCount = tableNode.getColumnCount();\r\n        const colWidths = new Array(columnCount).fill(undefined);\r\n\r\n        const firstRow = tableRows[0] as TableRowNode;\r\n        const cells = firstRow.getChildren();\r\n        cells.forEach((cell, colIdx) => {\r\n          const domCell = editor.getElementByKey(cell.getKey());\r\n          if (domCell && domCell.style.width) {\r\n            colWidths[colIdx] = parseInt(domCell.style.width, 10);\r\n            domCell.style.width = '';\r\n          } else if (tableHasContent(tableNode)) {\r\n            const isNested = tableNode ? $getNearestNodeOfType(tableNode, TableCellNode) : null;\r\n\r\n            const availableWidth = isNested\r\n              ? getEditorParrentCellWidth(isNested, columnCount, editor)\r\n              : getEditorContentWidth(editor);\r\n            const newColWidth = availableWidth / columnCount;\r\n            colWidths[colIdx] = Math.max(newColWidth, MIN_COLUMN_WIDTH);\r\n          } else {\r\n            colWidths[colIdx] = MIN_COLUMN_WIDTH;\r\n          }\r\n        });\r\n\r\n        tableNode.setColWidths(colWidths);\r\n      }\r\n\r\n      // modification: wrap table node in a wrapper node if there is no wrapper node present\r\n      if (tableNode && !(tableNode.getParent() instanceof TableWrapperNode)) {\r\n        const wrapperNode = $createTableWrapperNode();\r\n        tableNode.replace(wrapperNode);\r\n        wrapperNode.append(tableNode);\r\n      }\r\n\r\n      return tableNode;\r\n    });\r\n  }, [editor]);\r\n\r\n  useEffect(() => {\r\n    const onMouseMove = (event: MouseEvent) => {\r\n      const target = event.target;\r\n      if (!isHTMLElement(target)) {\r\n        return;\r\n      }\r\n\r\n      if (draggingDirection) {\r\n        updateMouseCurrentPos({\r\n          x: event.clientX,\r\n          y: event.clientY,\r\n        });\r\n        return;\r\n      }\r\n      updateIsMouseDown(isMouseDownOnEvent(event));\r\n      if (resizerRef.current && resizerRef.current.contains(target)) {\r\n        return;\r\n      }\r\n\r\n      if (targetRef.current !== target) {\r\n        targetRef.current = target;\r\n        const cell = getDOMCellFromTarget(target);\r\n\r\n        if (cell && activeCell !== cell) {\r\n          editor.getEditorState().read(\r\n            () => {\r\n              const tableCellNode = $getNearestNodeFromDOMNode(cell.elem);\r\n              if (!tableCellNode) {\r\n                throw new Error('TableCellResizer: Table cell node not found.');\r\n              }\r\n\r\n              const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n              const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));\r\n\r\n              if (!tableElement) {\r\n                throw new Error('TableCellResizer: Table element not found.');\r\n              }\r\n\r\n              targetRef.current = target;\r\n              tableRectRef.current = tableElement.getBoundingClientRect();\r\n              updateActiveCell(cell);\r\n            },\r\n            { editor }\r\n          );\r\n        } else if (cell == null) {\r\n          resetState();\r\n        }\r\n      }\r\n    };\r\n\r\n    const onMouseDown = () => {\r\n      updateIsMouseDown(true);\r\n    };\r\n\r\n    const onMouseUp = () => {\r\n      updateIsMouseDown(false);\r\n    };\r\n\r\n    const removeRootListener = editor.registerRootListener((rootElement, prevRootElement) => {\r\n      prevRootElement?.removeEventListener('mousemove', onMouseMove);\r\n      prevRootElement?.removeEventListener('mousedown', onMouseDown);\r\n      prevRootElement?.removeEventListener('mouseup', onMouseUp);\r\n      rootElement?.addEventListener('mousemove', onMouseMove);\r\n      rootElement?.addEventListener('mousedown', onMouseDown);\r\n      rootElement?.addEventListener('mouseup', onMouseUp);\r\n    });\r\n\r\n    return () => {\r\n      removeRootListener();\r\n    };\r\n  }, [activeCell, draggingDirection, editor, resetState]);\r\n\r\n  const isHeightChanging = (direction: MouseDraggingDirection) => {\r\n    if (direction === 'bottom') {\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const updateRowHeight = useCallback(\r\n    (heightChange: number) => {\r\n      if (!activeCell) {\r\n        throw new Error('TableCellResizer: Expected active cell.');\r\n      }\r\n\r\n      editor.update(\r\n        () => {\r\n          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);\r\n          if (!$isTableCellNode(tableCellNode)) {\r\n            throw new Error('TableCellResizer: Table cell node not found.');\r\n          }\r\n\r\n          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n\r\n          const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode) + tableCellNode.getRowSpan() - 1;\r\n\r\n          const tableRows = tableNode.getChildren();\r\n\r\n          if (tableRowIndex >= tableRows.length || tableRowIndex < 0) {\r\n            throw new Error('Expected table cell to be inside of table row.');\r\n          }\r\n\r\n          const tableRow = tableRows[tableRowIndex];\r\n\r\n          if (!$isTableRowNode(tableRow)) {\r\n            throw new Error('Expected table row');\r\n          }\r\n\r\n          let height = tableRow.getHeight();\r\n          if (height === undefined) {\r\n            const rowCells = tableRow.getChildren<TableCellNode>();\r\n            height = Math.min(...rowCells.map((cell) => getCellNodeHeight(cell, editor) ?? Infinity));\r\n          }\r\n\r\n          const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);\r\n          tableRow.setHeight(newHeight);\r\n        },\r\n        { tag: 'skip-scroll-into-view' }\r\n      );\r\n    },\r\n    [activeCell, editor]\r\n  );\r\n\r\n  const getCellNodeHeight = (cell: TableCellNode, activeEditor: LexicalEditor): number | undefined => {\r\n    const domCellNode = activeEditor.getElementByKey(cell.getKey());\r\n    return domCellNode?.clientHeight;\r\n  };\r\n\r\n  const getCellColumnIndex = (tableCellNode: TableCellNode, tableMap: TableMapType) => {\r\n    for (let row = 0; row < tableMap.length; row++) {\r\n      for (let column = 0; column < tableMap[row].length; column++) {\r\n        if (tableMap[row][column].cell === tableCellNode) {\r\n          return column;\r\n        }\r\n      }\r\n    }\r\n    return -1;\r\n  };\r\n\r\n  const updateColumnWidth = useCallback(\r\n    (widthChange: number) => {\r\n      if (!activeCell) {\r\n        throw new Error('TableCellResizer: Expected active cell.');\r\n      }\r\n      editor.update(\r\n        () => {\r\n          const tableCellNode = $getNearestNodeFromDOMNode(activeCell.elem);\r\n          if (!$isTableCellNode(tableCellNode)) {\r\n            throw new Error('TableCellResizer: Table cell node not found.');\r\n          }\r\n\r\n          const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);\r\n          const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);\r\n          const columnIndex = getCellColumnIndex(tableCellNode, tableMap);\r\n          if (columnIndex === undefined) {\r\n            throw new Error('TableCellResizer: Table column not found.');\r\n          }\r\n\r\n          const colWidths = tableNode.getColWidths();\r\n          if (!colWidths) {\r\n            return;\r\n          }\r\n          const width = colWidths[columnIndex];\r\n          if (width === undefined) {\r\n            return;\r\n          }\r\n          const newColWidths = [...colWidths];\r\n          const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);\r\n          newColWidths[columnIndex] = newWidth;\r\n          tableNode.setColWidths(newColWidths);\r\n\r\n          // modification: when resizing a column, also resize the next column so the table doesn't overflow\r\n          if (columnIndex < tableNode.getColumnCount() - 1) {\r\n            const nextColWidths = tableNode.getColWidths();\r\n            if (!nextColWidths) {\r\n              return;\r\n            }\r\n            const newNextColWidths = [...nextColWidths];\r\n            const newColumnIndex = columnIndex + 1;\r\n            const newNextWidth = nextColWidths[newColumnIndex];\r\n            const nextWidth = Math.max(newNextWidth - widthChange, MIN_COLUMN_WIDTH);\r\n            newNextColWidths[newColumnIndex] = nextWidth;\r\n            tableNode.setColWidths(newNextColWidths);\r\n          }\r\n        },\r\n        { tag: 'skip-scroll-into-view' }\r\n      );\r\n    },\r\n    [activeCell, editor]\r\n  );\r\n\r\n  const mouseUpHandler = useCallback(\r\n    (direction: MouseDraggingDirection) => {\r\n      const handler = (event: MouseEvent) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        if (!activeCell) {\r\n          throw new Error('TableCellResizer: Expected active cell.');\r\n        }\r\n\r\n        if (mouseStartPosRef.current) {\r\n          const { x, y } = mouseStartPosRef.current;\r\n\r\n          if (activeCell === null) {\r\n            return;\r\n          }\r\n          const zoom = calculateZoomLevel(event.target as Element);\r\n\r\n          if (isHeightChanging(direction)) {\r\n            const heightChange = (event.clientY - y) / zoom;\r\n            updateRowHeight(heightChange);\r\n          } else {\r\n            const widthChange = (event.clientX - x) / zoom;\r\n            updateColumnWidth(widthChange);\r\n          }\r\n\r\n          resetState();\r\n          document.removeEventListener('mouseup', handler);\r\n        }\r\n      };\r\n      return handler;\r\n    },\r\n    [activeCell, resetState, updateColumnWidth, updateRowHeight]\r\n  );\r\n\r\n  const toggleResize = useCallback(\r\n    (direction: MouseDraggingDirection): MouseEventHandler<HTMLDivElement> =>\r\n      (event) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        if (!activeCell) {\r\n          throw new Error('TableCellResizer: Expected active cell.');\r\n        }\r\n\r\n        mouseStartPosRef.current = {\r\n          x: event.clientX,\r\n          y: event.clientY,\r\n        };\r\n        updateMouseCurrentPos(mouseStartPosRef.current);\r\n        updateDraggingDirection(direction);\r\n\r\n        document.addEventListener('mouseup', mouseUpHandler(direction));\r\n      },\r\n    [activeCell, mouseUpHandler]\r\n  );\r\n\r\n  const getResizers = useCallback(() => {\r\n    if (activeCell) {\r\n      const { height, width, top, left } = activeCell.elem.getBoundingClientRect();\r\n      const zoom = calculateZoomLevel(activeCell.elem);\r\n      const zoneWidth = 10; // Pixel width of the zone where you can drag the edge\r\n      const styles = {\r\n        bottom: {\r\n          backgroundColor: 'none',\r\n          cursor: 'ns-resize',\r\n          height: `${zoneWidth}px`,\r\n          left: `${window.pageXOffset + left}px`,\r\n          top: `${window.pageYOffset + top + height - zoneWidth / HALF}px`,\r\n          width: `${width}px`,\r\n          zIndex: 5000,\r\n        },\r\n        right: {\r\n          backgroundColor: 'none',\r\n          cursor: 'ew-resize',\r\n          height: `${height}px`,\r\n          left: `${window.pageXOffset + left + width - zoneWidth / HALF}px`,\r\n          top: `${window.pageYOffset + top}px`,\r\n          width: `${zoneWidth}px`,\r\n          zIndex: 5000,\r\n        },\r\n      };\r\n\r\n      const tableRect = tableRectRef.current;\r\n\r\n      if (draggingDirection && mouseCurrentPos && tableRect) {\r\n        if (isHeightChanging(draggingDirection)) {\r\n          styles[draggingDirection].left = `${window.pageXOffset + tableRect.left}px`;\r\n          styles[draggingDirection].top = `${window.pageYOffset + mouseCurrentPos.y / zoom}px`;\r\n          styles[draggingDirection].height = '3px';\r\n          styles[draggingDirection].width = `${tableRect.width}px`;\r\n        } else {\r\n          styles[draggingDirection].top = `${window.pageYOffset + tableRect.top}px`;\r\n          styles[draggingDirection].left = `${window.pageXOffset + mouseCurrentPos.x / zoom}px`;\r\n          styles[draggingDirection].width = '3px';\r\n          styles[draggingDirection].height = `${tableRect.height}px`;\r\n        }\r\n\r\n        styles[draggingDirection].backgroundColor = '#adf';\r\n      }\r\n\r\n      return styles;\r\n    }\r\n\r\n    return {\r\n      bottom: null,\r\n      left: null,\r\n      right: null,\r\n      top: null,\r\n    };\r\n  }, [activeCell, draggingDirection, mouseCurrentPos]);\r\n\r\n  const resizerStyles = getResizers();\r\n\r\n  return (\r\n    <div ref={resizerRef}>\r\n      {activeCell != null && !isMouseDown && (\r\n        <>\r\n          <div\r\n            className={styles['table-cell-resizer__resizer']}\r\n            style={resizerStyles.right || undefined}\r\n            onMouseDown={toggleResize('right')}\r\n          />\r\n          <div\r\n            className={styles['table-cell-resizer__resizer']}\r\n            style={resizerStyles.bottom || undefined}\r\n            onMouseDown={toggleResize('bottom')}\r\n          />\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const TableCellResizerPlugin = (): null | ReactPortal => {\r\n  const [editor] = useLexicalComposerContext();\r\n  const isEditable = useLexicalEditable();\r\n\r\n  return useMemo(\r\n    () => (isEditable ? createPortal(<TableCellResizer editor={editor} />, document.body) : null),\r\n    [editor, isEditable]\r\n  );\r\n};\r\n"],"x_google_ignoreList":[0],"mappings":"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"}

package/dist/{TextArea-GR2ZWwLh.js → TextArea-D_VoyGIO.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { useEffect as t, useRef as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import './assets/TextArea.css';var o = {
@@ -64,4 +64,4 @@ function s({ onChange: s, label: c, subLabel: l, maxCharacters: u = 0, heightAsT
 //#endregion
 export { s as t };
 
-//# sourceMappingURL=TextArea-GR2ZWwLh.js.map
+//# sourceMappingURL=TextArea-D_VoyGIO.js.map

package/dist/{TextArea-GR2ZWwLh.js.map → TextArea-D_VoyGIO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TextArea-GR2ZWwLh.js","names":[],"sources":["../src/components/TextArea/TextArea.module.css","../src/components/TextArea/TextArea.tsx"],"sourcesContent":[".text-area__wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.text-area__header {\n  align-items: flex-end;\n  display: flex;\n  justify-content: space-between;\n}\n\n.text-area__label-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.text-area__label {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: var(--semibold);\n}\n\n.text-area__label.required::after {\n  color: var(--color-red-600);\n  content: \"\\2605\";\n  font-size: 0.5rem;\n  margin-left: 0.25rem;\n  vertical-align: top;\n}\n\n.text-area__sub-label {\n  color: var(--color-grey-700);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count {\n  color: var(--color-grey-600);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count--alert {\n  color: var(--color-red-600);\n  font-weight: bold;\n}\n\n.text-area {\n  border-radius: 0.5rem;\n  font-family: inherit;\n  font-size: inherit;\n  min-height: 5.25rem;\n  overflow: hidden;\n  padding: 0.5rem;\n  resize: none;\n  white-space: pre-wrap;\n  width: 100%;\n  word-wrap: break-word;\n}\n\n.text-area--oneLine {\n  max-height: 2.5rem;\n  min-height: 2.5rem;\n}\n\n.text-area.not-valid {\n  border-color: var(--color-red-600);\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The max number of visible lines in the text area */\n  heightAsTextField?: boolean;\n  /** The default value for the text area */\n  defaultValue?: string;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n}\n\nexport function TextArea({\n  onChange,\n  label,\n  subLabel,\n  maxCharacters = 0,\n  heightAsTextField = false,\n  defaultValue = '',\n  required = false,\n  notValid = false,\n}: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  const autoResize = () => {\n    const el = textAreaRef.current;\n    if (!el) return;\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n  };\n\n  useEffect(() => {\n    if (!heightAsTextField) {\n      autoResize();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && (\n              <span className={clsx(styles['text-area__label'], { [styles['required']]: required })}>{label}</span>\n            )}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={clsx(styles['text-area'], {\n          [styles['not-valid']]: notValid,\n          [styles['text-area--oneLine']]: heightAsTextField,\n        })}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;ACwBA,SAAgB,EAAS,EACvB,aACA,UACA,aACA,mBAAgB,GAChB,uBAAoB,IACpB,kBAAe,IACf,cAAW,IACX,cAAW,MACK;CAChB,IAAM,IAAc,EAA4B,IAAI,GAC9C,CAAC,GAAgB,KAAqB,EAAS,EAAa,MAAM,GAElE,UAAoB;EACxB,AAAI,EAAY,YACd,EAAY,QAAQ,MAAM,SAAS,QACnC,EAAY,QAAQ,MAAM,SAAS,GAAG,EAAY,QAAQ,aAAa,KAEvE,EAAkB,EAAY,QAAQ,MAAM,MAAM,GAClD,EAAS,EAAY,QAAQ,MAAM,KAAK,CAAC;CAE7C,GAEM,UAAmB;EACvB,IAAM,IAAK,EAAY;EAClB,MACL,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;CACvC;CASA,OAPA,QAAgB;EACd,AAAK,KACH,EAAW;CAGf,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,EACI,KAAS,IAAgB,MACzB,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAK,EAAO,qBAAqB,GAAG,EAAO,WAAc,EAAS,CAAC;eAAI;IAAY,CAAA,GAErG,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA0B;IAAe,CAAA,CAC1E;OACL,IAAgB,KACf,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,QAAD;MAAM,WAAW,EAAK,GAAG,EAAO,kCAAkC,MAAmB,EAAc,CAAC;gBACjG;KACG,CAAA;KAAC;KACO;IACX;KAEJ;MAGP,kBAAC,YAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,cAAc;KAClC,EAAO,eAAe;KACtB,EAAO,wBAAwB;GAClC,CAAC;GACD,WAAW,IAAgB,IAAI,IAAgB,KAAA;GAC/C,SAAS;GACK;EACf,CAAA,CACE;;AAET"}
+{"version":3,"file":"TextArea-D_VoyGIO.js","names":[],"sources":["../src/components/TextArea/TextArea.module.css","../src/components/TextArea/TextArea.tsx"],"sourcesContent":[".text-area__wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.text-area__header {\n  align-items: flex-end;\n  display: flex;\n  justify-content: space-between;\n}\n\n.text-area__label-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.text-area__label {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: var(--semibold);\n}\n\n.text-area__label.required::after {\n  color: var(--color-red-600);\n  content: \"\\2605\";\n  font-size: 0.5rem;\n  margin-left: 0.25rem;\n  vertical-align: top;\n}\n\n.text-area__sub-label {\n  color: var(--color-grey-700);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count {\n  color: var(--color-grey-600);\n  font-size: var(--font-size-text-non-essential);\n}\n\n.text-area__word-count--alert {\n  color: var(--color-red-600);\n  font-weight: bold;\n}\n\n.text-area {\n  border-radius: 0.5rem;\n  font-family: inherit;\n  font-size: inherit;\n  min-height: 5.25rem;\n  overflow: hidden;\n  padding: 0.5rem;\n  resize: none;\n  white-space: pre-wrap;\n  width: 100%;\n  word-wrap: break-word;\n}\n\n.text-area--oneLine {\n  max-height: 2.5rem;\n  min-height: 2.5rem;\n}\n\n.text-area.not-valid {\n  border-color: var(--color-red-600);\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps {\n  /** Returns entered values as trimmed string */\n  onChange: (value: string) => void;\n  /** The label for the text area */\n  label?: string;\n  /** Optional sub label for the text area */\n  subLabel?: string;\n  /** The max amount of allowed charecters in the text area */\n  maxCharacters?: number;\n  /** The max number of visible lines in the text area */\n  heightAsTextField?: boolean;\n  /** The default value for the text area */\n  defaultValue?: string;\n  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n  required?: boolean;\n  /** `true` to color border red to show not valid; otherwise, `false`. */\n  notValid?: boolean;\n}\n\nexport function TextArea({\n  onChange,\n  label,\n  subLabel,\n  maxCharacters = 0,\n  heightAsTextField = false,\n  defaultValue = '',\n  required = false,\n  notValid = false,\n}: TextAreaProps) {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n  const [characterCount, setCharacterCount] = useState(defaultValue.length);\n\n  const handleInput = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.style.height = 'auto';\n      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;\n\n      setCharacterCount(textAreaRef.current.value.length);\n      onChange(textAreaRef.current.value.trim());\n    }\n  };\n\n  const autoResize = () => {\n    const el = textAreaRef.current;\n    if (!el) return;\n    el.style.height = 'auto';\n    el.style.height = `${el.scrollHeight}px`;\n  };\n\n  useEffect(() => {\n    if (!heightAsTextField) {\n      autoResize();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div className={styles['text-area__wrapper']}>\n      {(label || maxCharacters > 0) && (\n        <div className={styles['text-area__header']}>\n          <span className={styles['text-area__label-wrapper']}>\n            {label && (\n              <span className={clsx(styles['text-area__label'], { [styles['required']]: required })}>{label}</span>\n            )}\n            {subLabel && <span className={styles['text-area__sub-label']}>{subLabel}</span>}\n          </span>\n          {maxCharacters > 0 && (\n            <div className={styles['text-area__word-count']}>\n              <span className={clsx({ [styles['text-area__word-count--alert']]: characterCount === maxCharacters })}>\n                {characterCount}\n              </span>\n              &nbsp;/&nbsp;{maxCharacters}\n            </div>\n          )}\n        </div>\n      )}\n\n      <textarea\n        ref={textAreaRef}\n        className={clsx(styles['text-area'], {\n          [styles['not-valid']]: notValid,\n          [styles['text-area--oneLine']]: heightAsTextField,\n        })}\n        maxLength={maxCharacters > 0 ? maxCharacters : undefined}\n        onInput={handleInput}\n        defaultValue={defaultValue}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;ACwBA,SAAgB,EAAS,EACvB,aACA,UACA,aACA,mBAAgB,GAChB,uBAAoB,IACpB,kBAAe,IACf,cAAW,IACX,cAAW,MACK;CAChB,IAAM,IAAc,EAA4B,IAAI,GAC9C,CAAC,GAAgB,KAAqB,EAAS,EAAa,MAAM,GAElE,UAAoB;EACxB,AAAI,EAAY,YACd,EAAY,QAAQ,MAAM,SAAS,QACnC,EAAY,QAAQ,MAAM,SAAS,GAAG,EAAY,QAAQ,aAAa,KAEvE,EAAkB,EAAY,QAAQ,MAAM,MAAM,GAClD,EAAS,EAAY,QAAQ,MAAM,KAAK,CAAC;CAE7C,GAEM,UAAmB;EACvB,IAAM,IAAK,EAAY;EAClB,MACL,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;CACvC;CASA,OAPA,QAAgB;EACd,AAAK,KACH,EAAW;CAGf,GAAG,CAAC,CAAC,GAGH,kBAAC,OAAD;EAAK,WAAW,EAAO;YAAvB,EACI,KAAS,IAAgB,MACzB,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAK,EAAO,qBAAqB,GAAG,EAAO,WAAc,EAAS,CAAC;eAAI;IAAY,CAAA,GAErG,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA0B;IAAe,CAAA,CAC1E;OACL,IAAgB,KACf,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,QAAD;MAAM,WAAW,EAAK,GAAG,EAAO,kCAAkC,MAAmB,EAAc,CAAC;gBACjG;KACG,CAAA;KAAC;KACO;IACX;KAEJ;MAGP,kBAAC,YAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,cAAc;KAClC,EAAO,eAAe;KACtB,EAAO,wBAAwB;GAClC,CAAC;GACD,WAAW,IAAgB,IAAI,IAAgB,KAAA;GAC/C,SAAS;GACK;EACf,CAAA,CACE;;AAET"}

package/dist/{ToggleSwitch-b54K58vY.js → ToggleSwitch-ev4Jh4y-.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import './assets/ToggleSwitch.css';//#region src/components/ToggleSwitch/ToggleSwitch.module.css
 var r = {
@@ -48,4 +48,4 @@ function a({ label: a, labelPosition: o = "after", labelVisible: s = !0, loading
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=ToggleSwitch-b54K58vY.js.map
+//# sourceMappingURL=ToggleSwitch-ev4Jh4y-.js.map

package/dist/{ToggleSwitch-b54K58vY.js.map → ToggleSwitch-ev4Jh4y-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch-b54K58vY.js","names":[],"sources":["../src/components/ToggleSwitch/ToggleSwitch.module.css","../src/components/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":[".toggle-switch {\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  gap: 1ch;\n  user-select: none;\n}\n\n.toggle-switch__visible {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-uva-black);\n  border-radius: 0.75rem;\n  box-shadow:\n    0 1px 1px hsla(0deg 0% 0% / 6%),\n    0 1px 2px hsl(0deg 0% 0% / 10%);\n  display: flex;\n  height: 1.5rem;\n  outline: 0.125rem dotted transparent;\n  outline-offset: 0.125rem;\n  padding: 0.25rem;\n  transition: background-color 150ms;\n  width: 3.125rem;\n}\n\n:focus-visible + .toggle-switch__visible {\n  outline-color: var(--color-navy-600);\n}\n\n:checked + .toggle-switch__visible {\n  background-color: var(--color-forest-600);\n}\n\n.toggle-switch__visible::before {\n  background-color: var(--color-grey-300);\n  border: 1px solid var(--color-uva-black);\n  border-radius: 0.75rem;\n  content: \"\";\n  display: inline-block;\n  height: 1rem;\n  min-width: 1rem;\n  transform: translateX(-0.1rem);\n  transition:\n    background-color 150ms,\n    transform 150ms,\n    width 150ms;\n}\n\n:checked + .toggle-switch__visible::before {\n  background-color: var(--color-uva-white);\n  transform: translateX(1.6rem);\n}\n\n.toggle-switch--disabled .toggle-switch__visible::before {\n  background-color: hsl(0deg 0% 0% / 10%);\n  border-color: hsl(0deg 0% 0% / 10%);\n}\n\n:checked:active + .toggle-switch__visible::before {\n  transform: translateX(1.25rem);\n}\n\n.toggle-switch--disabled,\n.toggle-switch--loading {\n  pointer-events: none;\n}\n\n.toggle-switch--disabled .toggle-switch__visible {\n  background-color: var(--color-grey-300);\n  border-color: hsl(0deg 0% 0% / 10%);\n  box-shadow: none;\n}\n\n.toggle-switch--visually-hidden {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0 -1px -1px 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.toggle-switch--disabled-label {\n  color: var(--color-grey-700);\n}\n\n.toggle-switch--loading-cursor {\n  cursor: wait;\n}\n\n.toggle-switch--extra-left-gap {\n  margin-left: 0.5rem;\n}\n","import classNames from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ToggleSwitch.module.css';\n\nexport interface ToggleSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'className'> {\n  /** The label for the toggle switch. */\n  label: string;\n  /** Boolean value if label should be visible. */\n  labelVisible?: boolean;\n  /** Selection for label placement compared to toggle switch. */\n  labelPosition?: 'before' | 'after';\n  /** Boolean value to be used if the toggle mutates. If true the toggle is disabled in a loading state. */\n  loading?: boolean;\n  /** Boolean value if extra gap is needed on left of component. */\n  extraLeftGap?: boolean;\n}\n\nfunction ConditionalWrapper({\n  condition,\n  wrapper,\n  children,\n}: {\n  condition: boolean;\n  wrapper: (children: ReactNode) => ReactNode;\n  children: ReactNode;\n}) {\n  return condition ? wrapper(children) : children;\n}\n\n/** Represents a component for a toggle switch. */\nexport function ToggleSwitch({\n  label,\n  labelPosition = 'after',\n  labelVisible = true,\n  loading = false,\n  extraLeftGap,\n  ...restProps\n}: ToggleSwitchProps) {\n  const labelComponent = (\n    <span\n      className={classNames(\n        { [styles['toggle-switch--visually-hidden']]: !labelVisible },\n        { [styles['toggle-switch--disabled-label']]: restProps.disabled }\n      )}\n    >\n      {label}\n    </span>\n  );\n\n  return (\n    <ConditionalWrapper\n      condition={loading}\n      wrapper={(children) => <div className={styles['toggle-switch--loading-cursor']}>{children}</div>}\n    >\n      <label\n        className={classNames(\n          styles['toggle-switch'],\n          { [styles['toggle-switch--disabled']]: restProps.disabled },\n          { [styles['toggle-switch--loading']]: loading },\n          { [styles['toggle-switch--extra-left-gap']]: extraLeftGap }\n        )}\n      >\n        {labelPosition === 'before' && labelComponent}\n        <input className={styles['toggle-switch--visually-hidden']} {...restProps} type=\"checkbox\" />\n        <span className={styles['toggle-switch__visible']} title={!labelVisible ? label : ''} />\n        {labelPosition === 'after' && labelComponent}\n      </label>\n    </ConditionalWrapper>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;ACmBA,SAAS,EAAmB,EAC1B,cACA,YACA,eAKC;CACD,OAAO,IAAY,EAAQ,CAAQ,IAAI;AACzC;AAGA,SAAgB,EAAa,EAC3B,UACA,mBAAgB,SAChB,kBAAe,IACf,aAAU,IACV,iBACA,GAAG,KACiB;CACpB,IAAM,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,GAAG,EAAO,oCAAoC,CAAC,EAAa,GAC5D,GAAG,EAAO,mCAAmC,EAAU,SAAS,CAClE;YAEC;CACG,CAAA;CAGR,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU,MAAa,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAmC;EAAc,CAAA;YAE/F,kBAAC,SAAD;GACE,WAAW,EACT,EAAO,kBACP,GAAG,EAAO,6BAA6B,EAAU,SAAS,GAC1D,GAAG,EAAO,4BAA4B,EAAQ,GAC9C,GAAG,EAAO,mCAAmC,EAAa,CAC5D;aANF;IAQG,MAAkB,YAAY;IAC/B,kBAAC,SAAD;KAAO,WAAW,EAAO;KAAmC,GAAI;KAAW,MAAK;IAAY,CAAA;IAC5F,kBAAC,QAAD;KAAM,WAAW,EAAO;KAA2B,OAAQ,IAAuB,KAAR;IAAa,CAAA;IACtF,MAAkB,WAAW;GACzB;;CACW,CAAA;AAExB"}
+{"version":3,"file":"ToggleSwitch-ev4Jh4y-.js","names":[],"sources":["../src/components/ToggleSwitch/ToggleSwitch.module.css","../src/components/ToggleSwitch/ToggleSwitch.tsx"],"sourcesContent":[".toggle-switch {\n  align-items: center;\n  cursor: pointer;\n  display: inline-flex;\n  gap: 1ch;\n  user-select: none;\n}\n\n.toggle-switch__visible {\n  align-items: center;\n  background-color: var(--color-uva-white);\n  border: 1px solid var(--color-uva-black);\n  border-radius: 0.75rem;\n  box-shadow:\n    0 1px 1px hsla(0deg 0% 0% / 6%),\n    0 1px 2px hsl(0deg 0% 0% / 10%);\n  display: flex;\n  height: 1.5rem;\n  outline: 0.125rem dotted transparent;\n  outline-offset: 0.125rem;\n  padding: 0.25rem;\n  transition: background-color 150ms;\n  width: 3.125rem;\n}\n\n:focus-visible + .toggle-switch__visible {\n  outline-color: var(--color-navy-600);\n}\n\n:checked + .toggle-switch__visible {\n  background-color: var(--color-forest-600);\n}\n\n.toggle-switch__visible::before {\n  background-color: var(--color-grey-300);\n  border: 1px solid var(--color-uva-black);\n  border-radius: 0.75rem;\n  content: \"\";\n  display: inline-block;\n  height: 1rem;\n  min-width: 1rem;\n  transform: translateX(-0.1rem);\n  transition:\n    background-color 150ms,\n    transform 150ms,\n    width 150ms;\n}\n\n:checked + .toggle-switch__visible::before {\n  background-color: var(--color-uva-white);\n  transform: translateX(1.6rem);\n}\n\n.toggle-switch--disabled .toggle-switch__visible::before {\n  background-color: hsl(0deg 0% 0% / 10%);\n  border-color: hsl(0deg 0% 0% / 10%);\n}\n\n:checked:active + .toggle-switch__visible::before {\n  transform: translateX(1.25rem);\n}\n\n.toggle-switch--disabled,\n.toggle-switch--loading {\n  pointer-events: none;\n}\n\n.toggle-switch--disabled .toggle-switch__visible {\n  background-color: var(--color-grey-300);\n  border-color: hsl(0deg 0% 0% / 10%);\n  box-shadow: none;\n}\n\n.toggle-switch--visually-hidden {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: 0 -1px -1px 0;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.toggle-switch--disabled-label {\n  color: var(--color-grey-700);\n}\n\n.toggle-switch--loading-cursor {\n  cursor: wait;\n}\n\n.toggle-switch--extra-left-gap {\n  margin-left: 0.5rem;\n}\n","import classNames from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ToggleSwitch.module.css';\n\nexport interface ToggleSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'className'> {\n  /** The label for the toggle switch. */\n  label: string;\n  /** Boolean value if label should be visible. */\n  labelVisible?: boolean;\n  /** Selection for label placement compared to toggle switch. */\n  labelPosition?: 'before' | 'after';\n  /** Boolean value to be used if the toggle mutates. If true the toggle is disabled in a loading state. */\n  loading?: boolean;\n  /** Boolean value if extra gap is needed on left of component. */\n  extraLeftGap?: boolean;\n}\n\nfunction ConditionalWrapper({\n  condition,\n  wrapper,\n  children,\n}: {\n  condition: boolean;\n  wrapper: (children: ReactNode) => ReactNode;\n  children: ReactNode;\n}) {\n  return condition ? wrapper(children) : children;\n}\n\n/** Represents a component for a toggle switch. */\nexport function ToggleSwitch({\n  label,\n  labelPosition = 'after',\n  labelVisible = true,\n  loading = false,\n  extraLeftGap,\n  ...restProps\n}: ToggleSwitchProps) {\n  const labelComponent = (\n    <span\n      className={classNames(\n        { [styles['toggle-switch--visually-hidden']]: !labelVisible },\n        { [styles['toggle-switch--disabled-label']]: restProps.disabled }\n      )}\n    >\n      {label}\n    </span>\n  );\n\n  return (\n    <ConditionalWrapper\n      condition={loading}\n      wrapper={(children) => <div className={styles['toggle-switch--loading-cursor']}>{children}</div>}\n    >\n      <label\n        className={classNames(\n          styles['toggle-switch'],\n          { [styles['toggle-switch--disabled']]: restProps.disabled },\n          { [styles['toggle-switch--loading']]: loading },\n          { [styles['toggle-switch--extra-left-gap']]: extraLeftGap }\n        )}\n      >\n        {labelPosition === 'before' && labelComponent}\n        <input className={styles['toggle-switch--visually-hidden']} {...restProps} type=\"checkbox\" />\n        <span className={styles['toggle-switch__visible']} title={!labelVisible ? label : ''} />\n        {labelPosition === 'after' && labelComponent}\n      </label>\n    </ConditionalWrapper>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;ACmBA,SAAS,EAAmB,EAC1B,cACA,YACA,eAKC;CACD,OAAO,IAAY,EAAQ,CAAQ,IAAI;AACzC;AAGA,SAAgB,EAAa,EAC3B,UACA,mBAAgB,SAChB,kBAAe,IACf,aAAU,IACV,iBACA,GAAG,KACiB;CACpB,IAAM,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,GAAG,EAAO,oCAAoC,CAAC,EAAa,GAC5D,GAAG,EAAO,mCAAmC,EAAU,SAAS,CAClE;YAEC;CACG,CAAA;CAGR,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU,MAAa,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAmC;EAAc,CAAA;YAE/F,kBAAC,SAAD;GACE,WAAW,EACT,EAAO,kBACP,GAAG,EAAO,6BAA6B,EAAU,SAAS,GAC1D,GAAG,EAAO,4BAA4B,EAAQ,GAC9C,GAAG,EAAO,mCAAmC,EAAa,CAC5D;aANF;IAQG,MAAkB,YAAY;IAC/B,kBAAC,SAAD;KAAO,WAAW,EAAO;KAAmC,GAAI;KAAW,MAAK;IAAY,CAAA;IAC5F,kBAAC,QAAD;KAAM,WAAW,EAAO;KAA2B,OAAQ,IAAuB,KAAR;IAAa,CAAA;IACtF,MAAkB,WAAW;GACzB;;CACW,CAAA;AAExB"}

package/dist/{VarIndicator-DoMWwSUm.js → VarIndicator-D0cnlcIf.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./clsx-BWCAbrjV.js";
+import { t as e } from "./clsx-C67XSbzZ.js";
 import { Icon as t } from "./components/Icon/Icon.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import './assets/VarIndicator.css';//#region src/components/VarIndicator/VarIndicator.module.css
@@ -47,4 +47,4 @@ var a = {
 //#endregion
 export { s as t };
 
-//# sourceMappingURL=VarIndicator-DoMWwSUm.js.map
+//# sourceMappingURL=VarIndicator-D0cnlcIf.js.map

package/dist/{VarIndicator-DoMWwSUm.js.map → VarIndicator-D0cnlcIf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VarIndicator-DoMWwSUm.js","names":[],"sources":["../src/components/VarIndicator/VarIndicator.module.css","../src/components/VarIndicator/VarIndicator.tsx"],"sourcesContent":["/* \n  TODO: if the right semantic names are available we put them in the tokens file.\n  It is also an attempt (test) to give tokens semantic names for feature benefits\n*/\n\n:root {\n  /* Semantic names */\n  --color-active: var(--color-forest-700);\n  --color-background-active: var(--color-forest-100);\n  --color-background-active-hover: var(--color-forest-200);\n  --color-background-draft: var(--color-navy-100);\n  --color-background-draft-hover: var(--color-navy-200);\n  --color-background-submitted: var(--color-orange-100);\n  --color-background-submitted-hover: var(--color-orange-200);\n  --color-border-active: var(--color-forest-700);\n  --color-border-draft: var(--color-navy-600);\n  --color-border-submitted: var(--color-orange-900);\n  --color-draft: var(--color-navy-600);\n  --color-draft-hover: var(--color-uva-white);\n  --color-label: var(--color-uva-black);\n  --color-submitted: var(--color-orange-900);\n  --color-submitted-hover: var(--color-uva-white);\n  /* Global vars */\n  --border-radius-var-indicator: 0.25rem;\n}\n\n.var-indicator__container {\n  align-items: center;\n  appearance: none;\n  border: 1px solid;\n  border-radius: var(--border-radius-var-indicator);\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-default);\n  font-weight: var(--semibold);\n  gap: 0.375rem;\n  height: 2rem;\n  justify-content: center;\n  line-height: inherit;\n  margin: 0;\n  padding: 0 0.75rem 0 0.5rem;\n  white-space: nowrap;\n}\n\n.var-indicator__label {\n  color: var(--color-label);\n}\n\n.var-indicator__step-container {\n  align-items: center;\n  display: inline-flex;\n  height: 100%;\n  justify-content: flex-start;\n}\n\n.var-indicator__step-container > svg {\n  margin: 0 -0.5rem;\n}\n\n.var-indicator__container--compact {\n  padding: 0;\n  position: relative;\n  width: 2rem;\n}\n\n.var-indicator__container--compact > svg {\n  margin: 0;\n}\n\n.var-indicator__container--compact-flyover-wrapper {\n  display: none;\n  height: 2rem;\n  position: absolute;\n  right: -1px;\n  top: -1px;\n  width: auto;\n  z-index: 1;\n}\n\n.var-indicator__container--compact:hover .var-indicator__container--compact-flyover-wrapper {\n  display: flex;\n}\n\n.var-indicator__container--draft,\n.var-indicator__container--rejected,\n.var-indicator__container--draft .var-indicator__container--compact-flyover-wrapper,\n.var-indicator__container--rejected .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-draft);\n  border-color: var(--color-border-draft);\n  color: var(--color-draft);\n}\n\n.var-indicator__container--draft:hover,\n.var-indicator__container--rejected:hover,\n.var-indicator__container--draft:hover .var-indicator__container--compact-flyover-wrapper,\n.var-indicator__container--rejected:hover .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-draft-hover);\n}\n\n.var-indicator__container--submitted,\n.var-indicator__container--submitted .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-submitted);\n  border-color: var(--color-border-submitted);\n  color: var(--color-submitted);\n}\n\n.var-indicator__container--submitted:hover,\n.var-indicator__container--submitted:hover .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-submitted-hover);\n}\n\n.var-indicator__container--active,\n.var-indicator__container--active .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-active);\n  border-color: var(--color-border-active);\n  color: var(--color-active);\n}\n\n.var-indicator__container--active:hover,\n.var-indicator__container--active:hover .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-active-hover);\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './VarIndicator.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type StatusType = 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE';\n\nexport interface VarIndicatorProps {\n  /** Label on the indicator */\n  label: Record<StatusType, string>;\n  /** Status type 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE' */\n  variant?: StatusType;\n  /** Maximum number of steps if variant is 'SUBMITTED' */\n  maxSteps?: number;\n  /** Current step if variant is 'SUBMITTED' */\n  currentStep?: number;\n  /** If set shows compact view and opens to the left on hover */\n  isCompact?: boolean;\n  onClick?: () => void;\n}\n\nconst ICON_NAMES = {\n  DRAFT: 'CircleLarge',\n  REJECTED: 'CircleLarge',\n  SUBMITTED: 'CircleLargeDotted',\n  ACTIVE: 'SignalActive',\n};\n\nexport const VarIndicator = ({\n  label,\n  variant = 'DRAFT',\n  maxSteps,\n  currentStep = 1,\n  isCompact,\n  onClick,\n}: VarIndicatorProps) => {\n  const IndicatorContent = () => (\n    <>\n      <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n      <span className={styles['var-indicator__label']}>{label[`${variant}`]}</span>\n      {maxSteps &&\n        maxSteps > 0 &&\n        variant === 'SUBMITTED' &&\n        Array.from({ length: maxSteps }, (_, idx) => idx + 1).map((step) => (\n          <div key={step} className={styles['var-indicator__step-container']}>\n            <Icon name={step <= currentStep ? 'CircleSmallFilled' : 'CircleSmall'} />\n          </div>\n        ))}\n    </>\n  );\n\n  return (\n    <button\n      className={clsx(\n        styles['var-indicator__container'],\n        styles[`var-indicator__container--${variant.toLowerCase()}`],\n        {\n          [styles['var-indicator__container--compact']]: isCompact,\n        }\n      )}\n      onClick={onClick}\n    >\n      {isCompact ? (\n        <>\n          <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n          <div\n            className={clsx(\n              styles['var-indicator__container'],\n              styles['var-indicator__container--compact-flyover-wrapper']\n            )}\n          >\n            <IndicatorContent />\n          </div>\n        </>\n      ) : (\n        <IndicatorContent />\n      )}\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;GCwBM,IAAa;CACjB,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;AACV,GAEa,KAAgB,EAC3B,UACA,aAAU,SACV,aACA,iBAAc,GACd,cACA,iBACuB;CACvB,IAAM,UACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;EAAK,CAAA;EACjE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA0B,EAAM,GAAG;EAAiB,CAAA;EAC3E,KACC,IAAW,KACX,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQ,EAAS,IAAI,GAAG,MAAQ,IAAM,CAAC,EAAE,KAAK,MACzD,kBAAC,OAAD;GAAgB,WAAW,EAAO;aAChC,kBAAC,GAAD,EAAM,MAAM,KAAQ,IAAc,sBAAsB,cAAgB,CAAA;EACrE,GAFK,CAEL,CACN;CACH,EAAA,CAAA;CAGJ,OACE,kBAAC,UAAD;EACE,WAAW,EACT,EAAO,6BACP,EAAO,6BAA6B,EAAQ,YAAY,MACxD,GACG,EAAO,uCAAuC,EACjD,CACF;EACS;YAER,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;EAAK,CAAA,GACjE,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,6BACP,EAAO,oDACT;aAEA,kBAAC,GAAD,CAAmB,CAAA;EAChB,CAAA,CACL,EAAA,CAAA,IAEF,kBAAC,GAAD,CAAmB,CAAA;CAEf,CAAA;AAEZ"}
+{"version":3,"file":"VarIndicator-D0cnlcIf.js","names":[],"sources":["../src/components/VarIndicator/VarIndicator.module.css","../src/components/VarIndicator/VarIndicator.tsx"],"sourcesContent":["/* \n  TODO: if the right semantic names are available we put them in the tokens file.\n  It is also an attempt (test) to give tokens semantic names for feature benefits\n*/\n\n:root {\n  /* Semantic names */\n  --color-active: var(--color-forest-700);\n  --color-background-active: var(--color-forest-100);\n  --color-background-active-hover: var(--color-forest-200);\n  --color-background-draft: var(--color-navy-100);\n  --color-background-draft-hover: var(--color-navy-200);\n  --color-background-submitted: var(--color-orange-100);\n  --color-background-submitted-hover: var(--color-orange-200);\n  --color-border-active: var(--color-forest-700);\n  --color-border-draft: var(--color-navy-600);\n  --color-border-submitted: var(--color-orange-900);\n  --color-draft: var(--color-navy-600);\n  --color-draft-hover: var(--color-uva-white);\n  --color-label: var(--color-uva-black);\n  --color-submitted: var(--color-orange-900);\n  --color-submitted-hover: var(--color-uva-white);\n  /* Global vars */\n  --border-radius-var-indicator: 0.25rem;\n}\n\n.var-indicator__container {\n  align-items: center;\n  appearance: none;\n  border: 1px solid;\n  border-radius: var(--border-radius-var-indicator);\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: var(--font-size-default);\n  font-weight: var(--semibold);\n  gap: 0.375rem;\n  height: 2rem;\n  justify-content: center;\n  line-height: inherit;\n  margin: 0;\n  padding: 0 0.75rem 0 0.5rem;\n  white-space: nowrap;\n}\n\n.var-indicator__label {\n  color: var(--color-label);\n}\n\n.var-indicator__step-container {\n  align-items: center;\n  display: inline-flex;\n  height: 100%;\n  justify-content: flex-start;\n}\n\n.var-indicator__step-container > svg {\n  margin: 0 -0.5rem;\n}\n\n.var-indicator__container--compact {\n  padding: 0;\n  position: relative;\n  width: 2rem;\n}\n\n.var-indicator__container--compact > svg {\n  margin: 0;\n}\n\n.var-indicator__container--compact-flyover-wrapper {\n  display: none;\n  height: 2rem;\n  position: absolute;\n  right: -1px;\n  top: -1px;\n  width: auto;\n  z-index: 1;\n}\n\n.var-indicator__container--compact:hover .var-indicator__container--compact-flyover-wrapper {\n  display: flex;\n}\n\n.var-indicator__container--draft,\n.var-indicator__container--rejected,\n.var-indicator__container--draft .var-indicator__container--compact-flyover-wrapper,\n.var-indicator__container--rejected .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-draft);\n  border-color: var(--color-border-draft);\n  color: var(--color-draft);\n}\n\n.var-indicator__container--draft:hover,\n.var-indicator__container--rejected:hover,\n.var-indicator__container--draft:hover .var-indicator__container--compact-flyover-wrapper,\n.var-indicator__container--rejected:hover .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-draft-hover);\n}\n\n.var-indicator__container--submitted,\n.var-indicator__container--submitted .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-submitted);\n  border-color: var(--color-border-submitted);\n  color: var(--color-submitted);\n}\n\n.var-indicator__container--submitted:hover,\n.var-indicator__container--submitted:hover .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-submitted-hover);\n}\n\n.var-indicator__container--active,\n.var-indicator__container--active .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-active);\n  border-color: var(--color-border-active);\n  color: var(--color-active);\n}\n\n.var-indicator__container--active:hover,\n.var-indicator__container--active:hover .var-indicator__container--compact-flyover-wrapper {\n  background-color: var(--color-background-active-hover);\n}\n","import { clsx } from 'clsx';\n\nimport type { IconProps } from 'components/Icon';\n\nimport styles from './VarIndicator.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport type StatusType = 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE';\n\nexport interface VarIndicatorProps {\n  /** Label on the indicator */\n  label: Record<StatusType, string>;\n  /** Status type 'DRAFT' | 'REJECTED' | 'SUBMITTED' | 'ACTIVE' */\n  variant?: StatusType;\n  /** Maximum number of steps if variant is 'SUBMITTED' */\n  maxSteps?: number;\n  /** Current step if variant is 'SUBMITTED' */\n  currentStep?: number;\n  /** If set shows compact view and opens to the left on hover */\n  isCompact?: boolean;\n  onClick?: () => void;\n}\n\nconst ICON_NAMES = {\n  DRAFT: 'CircleLarge',\n  REJECTED: 'CircleLarge',\n  SUBMITTED: 'CircleLargeDotted',\n  ACTIVE: 'SignalActive',\n};\n\nexport const VarIndicator = ({\n  label,\n  variant = 'DRAFT',\n  maxSteps,\n  currentStep = 1,\n  isCompact,\n  onClick,\n}: VarIndicatorProps) => {\n  const IndicatorContent = () => (\n    <>\n      <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n      <span className={styles['var-indicator__label']}>{label[`${variant}`]}</span>\n      {maxSteps &&\n        maxSteps > 0 &&\n        variant === 'SUBMITTED' &&\n        Array.from({ length: maxSteps }, (_, idx) => idx + 1).map((step) => (\n          <div key={step} className={styles['var-indicator__step-container']}>\n            <Icon name={step <= currentStep ? 'CircleSmallFilled' : 'CircleSmall'} />\n          </div>\n        ))}\n    </>\n  );\n\n  return (\n    <button\n      className={clsx(\n        styles['var-indicator__container'],\n        styles[`var-indicator__container--${variant.toLowerCase()}`],\n        {\n          [styles['var-indicator__container--compact']]: isCompact,\n        }\n      )}\n      onClick={onClick}\n    >\n      {isCompact ? (\n        <>\n          <Icon name={ICON_NAMES[variant] as IconProps['name']} size={16} />\n          <div\n            className={clsx(\n              styles['var-indicator__container'],\n              styles['var-indicator__container--compact-flyover-wrapper']\n            )}\n          >\n            <IndicatorContent />\n          </div>\n        </>\n      ) : (\n        <IndicatorContent />\n      )}\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;GCwBM,IAAa;CACjB,OAAO;CACP,UAAU;CACV,WAAW;CACX,QAAQ;AACV,GAEa,KAAgB,EAC3B,UACA,aAAU,SACV,aACA,iBAAc,GACd,cACA,iBACuB;CACvB,IAAM,UACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;EAAK,CAAA;EACjE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA0B,EAAM,GAAG;EAAiB,CAAA;EAC3E,KACC,IAAW,KACX,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQ,EAAS,IAAI,GAAG,MAAQ,IAAM,CAAC,EAAE,KAAK,MACzD,kBAAC,OAAD;GAAgB,WAAW,EAAO;aAChC,kBAAC,GAAD,EAAM,MAAM,KAAQ,IAAc,sBAAsB,cAAgB,CAAA;EACrE,GAFK,CAEL,CACN;CACH,EAAA,CAAA;CAGJ,OACE,kBAAC,UAAD;EACE,WAAW,EACT,EAAO,6BACP,EAAO,6BAA6B,EAAQ,YAAY,MACxD,GACG,EAAO,uCAAuC,EACjD,CACF;EACS;YAER,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;EAAK,CAAA,GACjE,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,6BACP,EAAO,oDACT;aAEA,kBAAC,GAAD,CAAmB,CAAA;EAChB,CAAA,CACL,EAAA,CAAA,IAEF,kBAAC,GAAD,CAAmB,CAAA;CAEf,CAAA;AAEZ"}

package/dist/{chunk-FON5IJBZ-BBb6rYhU.js → chunk-5WKL7XVT-3IraU-Ja.js}

@@ -1,9 +1,9 @@
-import { B as e, D as t, I as n, L as r, N as i, R as a, V as o, a as s, i as c, r as l, u, z as d } from "./test-Bd7kXF_B.js";
+import { B as e, D as t, I as n, L as r, N as i, R as a, V as o, a as s, i as c, r as l, u, z as d } from "./test-WxLxsxwA.js";
 function f(e) {
 	return [e, ...e.querySelectorAll("*")].reduce((e, t) => ("shadowRoot" in t && t.shadowRoot && e.push(t.shadowRoot, ...f(t.shadowRoot)), e), []);
 }
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-Q5EHHZ3R.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-Q5EHHZ3R.js
 var p = {
 	AUTODOCS: "autodocs",
 	ATTACHED_MDX: "attached-mdx",
@@ -718,7 +718,7 @@ var p = {
 	}), n(h(), e);
 } });
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-LCHBOIHN.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-LCHBOIHN.js
 function x(e) {
 	if (!e || typeof e != "object") return !1;
 	let t = Object.getPrototypeOf(e);
@@ -732,7 +732,7 @@ function C(e) {
 }
 var w = "[object RegExp]", T = "[object String]", E = "[object Number]", D = "[object Boolean]", O = "[object Symbol]", k = "[object Date]", A = "[object Map]", j = "[object Set]", M = "[object Array]", N = "[object Function]", P = "[object ArrayBuffer]", F = "[object Object]", I = "[object Error]", ee = "[object DataView]", te = "[object Uint8Array]", L = "[object Uint8ClampedArray]", R = "[object Uint16Array]", z = "[object Uint32Array]", ne = "[object BigUint64Array]", B = "[object Int8Array]", re = "[object Int16Array]", ie = "[object Int32Array]", ae = "[object BigInt64Array]", oe = "[object Float32Array]", se = "[object Float64Array]";
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-YK43Z22A.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-YK43Z22A.js
 function ce(e, t) {
 	let n = {}, r = Object.keys(e);
 	for (let i = 0; i < r.length; i++) {
@@ -750,7 +750,7 @@ function le(e, t) {
 	return n;
 }
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-2HVKLHKJ.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-2HVKLHKJ.js
 function ue({ code: e, category: t }) {
 	return `SB_${t}_${String(e).padStart(4, "0")}`;
 }
@@ -3345,10 +3345,10 @@ var $t = (...e) => {
 `${tn}`;
 var nn = `${tn}/snippet-rendered`, rn = /* @__PURE__ */ ((e) => (e.AUTO = "auto", e.CODE = "code", e.DYNAMIC = "dynamic", e))(rn || {});
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-NZMVUW5T.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-NZMVUW5T.js
 function an() {}
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-IYCKG66Y.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-IYCKG66Y.js
 function on(e, t) {
 	return e === t || Number.isNaN(e) && Number.isNaN(t);
 }
@@ -3444,7 +3444,7 @@ function un(e, t) {
 }
 process.env.NODE_ENV;
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-IWQGIXJS.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-IWQGIXJS.js
 var dn = a({ "../../node_modules/entities/lib/maps/entities.json"(e, t) {
 	t.exports = {
 		Aacute: "Á",
@@ -6613,12 +6613,7 @@ var dn = a({ "../../node_modules/entities/lib/maps/entities.json"(e, t) {
 				this.state = n.payload, this.emitToListeners(t, i);
 				break;
 		}
-		switch (n.type) {
-			case e.InternalEventType.SET_STATE:
-				this.debug("handleChannelEvents: Setting state", { event: n }), this.state = n.payload.state;
-				break;
-		}
-		this.emitToListeners(n, { actor: i.actor });
+		n.type === e.InternalEventType.SET_STATE && (this.debug("handleChannelEvents: Setting state", { event: n }), this.state = n.payload.state), this.emitToListeners(n, { actor: i.actor });
 	}
 	debug(t, n) {
 		this.debugging && console.debug(r`[UniversalStore::${this.id}::${this.environment ?? e.Environment.UNKNOWN}]
@@ -6724,7 +6719,7 @@ var wn = Object.create, Tn = Object.defineProperty, En = Object.getOwnPropertyDe
 	t.exports = function() {
 		if (typeof Symbol != "function" || typeof Object.getOwnPropertySymbols != "function") return !1;
 		if (typeof Symbol.iterator == "symbol") return !0;
-		var e = {}, t = Symbol("test"), n = Object(t);
+		var e = {}, t = /* @__PURE__ */ Symbol("test"), n = Object(t);
 		if (typeof t == "string" || Object.prototype.toString.call(t) !== "[object Symbol]" || Object.prototype.toString.call(n) !== "[object Symbol]") return !1;
 		var r = 42;
 		for (var i in e[t] = r, e) return !1;
@@ -6740,7 +6735,7 @@ var wn = Object.create, Tn = Object.defineProperty, En = Object.getOwnPropertyDe
 } }), Qn = Y({ "node_modules/.pnpm/has-symbols@1.1.0/node_modules/has-symbols/index.js"(e, t) {
 	var n = typeof Symbol < "u" && Symbol, r = Zn();
 	t.exports = function() {
-		return typeof n != "function" || typeof Symbol != "function" || typeof n("foo") != "symbol" || typeof Symbol("bar") != "symbol" ? !1 : r();
+		return typeof n != "function" || typeof Symbol != "function" || typeof n("foo") != "symbol" || typeof /* @__PURE__ */ Symbol("bar") != "symbol" ? !1 : r();
 	};
 } }), $n = Y({ "node_modules/.pnpm/get-proto@1.0.1/node_modules/get-proto/Reflect.getPrototypeOf.js"(e, t) {
 	t.exports = typeof Reflect < "u" && Reflect.getPrototypeOf || null;
@@ -7437,11 +7432,11 @@ var Da = (e) => e.transports !== void 0, Oa = () => Math.random().toString(16).s
 var Ia = "storybook/highlight", La = `${Ia}/add`, Ra = `${Ia}/remove`, za = `${Ia}/reset`, Ba = `${Ia}/scroll-into-view`, Va = 2147483647, Ha = "storybook/actions";
 `${Ha}`;
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-6XWLIJQL.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-6XWLIJQL.js
 var Ua = `${Ha}/action-event`;
 `${Ha}`;
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-EUVGDK4H.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-EUVGDK4H.js
 var Wa = {
 	depth: 10,
 	clearOnStoryChange: !0,
@@ -7495,7 +7490,7 @@ function Ja(e, t = {}) {
 	return i.isAction = !0, i.implicit = t.implicit, i;
 }
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-SL75JR6Y.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-SL75JR6Y.js
 var Ya = "storybook/viewport";
 `${Ya}`, `${Ya}`, o(a({ "../../node_modules/@ngard/tiny-isequal/index.js"(e) {
 	Object.defineProperty(e, "__esModule", { value: !0 }), e.isEqual = /* @__PURE__ */ (function() {
@@ -7631,7 +7626,7 @@ var { step: to } = u({ step: async (e, t, n) => t(n) }, { intercept: !0 }), no =
 		menu: Array.isArray(t) ? t.every(Array.isArray) ? t : [t] : void 0
 	};
 }, oo = (e) => e instanceof Function, so = /* @__PURE__ */ new Map(), co = /* @__PURE__ */ new Map(), lo = /* @__PURE__ */ new Map(), Z = (e) => {
-	let t = Symbol();
+	let t = /* @__PURE__ */ Symbol();
 	return co.set(t, []), so.set(t, e), {
 		get: () => so.get(t),
 		set: (e) => {
@@ -8146,7 +8141,7 @@ var Ao = (e, t = 0, n) => {
 	return e;
 };
 //#endregion
-//#region node_modules/storybook/dist/_browser-chunks/chunk-FON5IJBZ.js
+//#region node_modules/.pnpm/storybook@10.4.6_@testing-library+dom@10.4.1_@types+react@19.2.17_prettier@3.8.4_react-_5ecd9dbbee65e1ea65fd2957bfec03cf/node_modules/storybook/dist/_browser-chunks/chunk-5WKL7XVT.js
 function jo() {
 	return new ka({ transport: {
 		setHandler: () => {},
@@ -8216,7 +8211,7 @@ function Wo(e, t) {
 	n.currentEffects.includes(r) || n.currentEffects.push(r);
 }
 o(bn(), 1);
-var Go = Symbol("incompatible"), Ko = (e, t) => {
+var Go = /* @__PURE__ */ Symbol("incompatible"), Ko = (e, t) => {
 	let n = t.type;
 	if (e == null || !n || t.mapping) return e;
 	switch (n.name) {
@@ -8247,7 +8242,7 @@ var Go = Symbol("incompatible"), Ko = (e, t) => {
 		i !== void 0 && (n[r] = i);
 	} else n[r] = e[r];
 	return n;
-}, {}), Jo = Symbol("Deeply equal"), Yo = (e, t) => {
+}, {}), Jo = /* @__PURE__ */ Symbol("Deeply equal"), Yo = (e, t) => {
 	if (typeof e != typeof t) return t;
 	if (un(e, t)) return Jo;
 	if (Array.isArray(e) && Array.isArray(t)) {
@@ -8445,4 +8440,4 @@ async function xs(e, t) {
 //#endregion
 export { p as _, Uo as a, Me as c, Qt as d, Xt as f, St as g, Ct as h, Wo as i, q as l, Fe as m, $o as n, Ja as o, Ie as p, xs as r, rn as s, fs as t, en as u };
 
-//# sourceMappingURL=chunk-FON5IJBZ-BBb6rYhU.js.map
+//# sourceMappingURL=chunk-5WKL7XVT-3IraU-Ja.js.map