@uva-glass/component-library 3.55.6 → 3.55.7

package/dist/TextArea-CuASC9bX.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea-CuASC9bX.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,KAAK,EAC/C,CAAC,GAAgB,KAAqB,EAAS,EAAa,OAAO,EAEnE,UAAoB;AACxB,EAAI,EAAY,YACd,EAAY,QAAQ,MAAM,SAAS,QACnC,EAAY,QAAQ,MAAM,SAAS,GAAG,EAAY,QAAQ,aAAa,KAEvE,EAAkB,EAAY,QAAQ,MAAM,OAAO,EACnD,EAAS,EAAY,QAAQ,MAAM,MAAM,CAAC;IAIxC,UAAmB;EACvB,IAAM,IAAK,EAAY;AAClB,QACL,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;;AAUvC,QAPA,QAAgB;AACd,EAAK,KACH,GAAY;IAGb,EAAE,CAAC,EAGJ,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,GAAU,CAAC;eAAG;KAAa,CAAA,EAEtG,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA0B;KAAgB,CAAA,CAC1E;OACN,IAAgB,KACf,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,QAAD;MAAM,WAAW,EAAK,GAAG,EAAO,kCAAkC,MAAmB,GAAe,CAAC;gBAClG;MACI,CAAA;;KACO;KACV;MAEJ;MAGR,kBAAC,YAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,cAAc;KAClC,EAAO,eAAe;KACtB,EAAO,wBAAwB;IACjC,CAAC;GACF,WAAW,IAAgB,IAAI,IAAgB,KAAA;GAC/C,SAAS;GACK;GACd,CAAA,CACE"}
+{"version":3,"file":"TextArea-CuASC9bX.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,KAAK,EAC/C,CAAC,GAAgB,KAAqB,EAAS,EAAa,OAAO,EAEnE,UAAoB;EACxB,AAAI,EAAY,YACd,EAAY,QAAQ,MAAM,SAAS,QACnC,EAAY,QAAQ,MAAM,SAAS,GAAG,EAAY,QAAQ,aAAa,KAEvE,EAAkB,EAAY,QAAQ,MAAM,OAAO,EACnD,EAAS,EAAY,QAAQ,MAAM,MAAM,CAAC;IAIxC,UAAmB;EACvB,IAAM,IAAK,EAAY;EAClB,MACL,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAG,EAAG,aAAa;;CAUvC,OAPA,QAAgB;EACd,AAAK,KACH,GAAY;IAGb,EAAE,CAAC,EAGJ,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,GAAU,CAAC;eAAG;KAAa,CAAA,EAEtG,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAA0B;KAAgB,CAAA,CAC1E;OACN,IAAgB,KACf,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,QAAD;MAAM,WAAW,EAAK,GAAG,EAAO,kCAAkC,MAAmB,GAAe,CAAC;gBAClG;MACI,CAAA;;KACO;KACV;MAEJ;MAGR,kBAAC,YAAD;GACE,KAAK;GACL,WAAW,EAAK,EAAO,cAAc;KAClC,EAAO,eAAe;KACtB,EAAO,wBAAwB;IACjC,CAAC;GACF,WAAW,IAAgB,IAAI,IAAgB,KAAA;GAC/C,SAAS;GACK;GACd,CAAA,CACE"}

package/dist/ToggleSwitch-C7z7JVtx.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch-C7z7JVtx.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;AACD,QAAO,IAAY,EAAQ,EAAS,GAAG;;AAIzC,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,GAAc,EAC7D,GAAG,EAAO,mCAAmC,EAAU,UAAU,CAClE;YAEA;EACI,CAAA;AAGT,QACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU,MAAa,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAmC;GAAe,CAAA;YAEhG,kBAAC,SAAD;GACE,WAAW,EACT,EAAO,kBACP,GAAG,EAAO,6BAA6B,EAAU,UAAU,EAC3D,GAAG,EAAO,4BAA4B,GAAS,EAC/C,GAAG,EAAO,mCAAmC,GAAc,CAC5D;aANH;IAQG,MAAkB,YAAY;IAC/B,kBAAC,SAAD;KAAO,WAAW,EAAO;KAAmC,GAAI;KAAW,MAAK;KAAa,CAAA;IAC7F,kBAAC,QAAD;KAAM,WAAW,EAAO;KAA2B,OAAQ,IAAuB,KAAR;KAAc,CAAA;IACvF,MAAkB,WAAW;IACxB;;EACW,CAAA"}
+{"version":3,"file":"ToggleSwitch-C7z7JVtx.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,EAAS,GAAG;;AAIzC,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,GAAc,EAC7D,GAAG,EAAO,mCAAmC,EAAU,UAAU,CAClE;YAEA;EACI,CAAA;CAGT,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAAU,MAAa,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAmC;GAAe,CAAA;YAEhG,kBAAC,SAAD;GACE,WAAW,EACT,EAAO,kBACP,GAAG,EAAO,6BAA6B,EAAU,UAAU,EAC3D,GAAG,EAAO,4BAA4B,GAAS,EAC/C,GAAG,EAAO,mCAAmC,GAAc,CAC5D;aANH;IAQG,MAAkB,YAAY;IAC/B,kBAAC,SAAD;KAAO,WAAW,EAAO;KAAmC,GAAI;KAAW,MAAK;KAAa,CAAA;IAC7F,kBAAC,QAAD;KAAM,WAAW,EAAO;KAA2B,OAAQ,IAAuB,KAAR;KAAc,CAAA;IACvF,MAAkB,WAAW;IACxB;;EACW,CAAA"}

package/dist/Tooltip-D27p9kh4.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip-D27p9kh4.js","names":[],"sources":["../src/components/Tooltip/Tooltip.module.css","../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[".tooltip-container {\n  align-items: flex-end;\n  cursor: help;\n  display: flex;\n  position: relative;\n}\n\n.tooltip_small,\n.tooltip_medium,\n.tooltip_large {\n  background-color: var(--color-grey-700);\n  border-radius: 0.5rem;\n  color: var(--color-uva-white);\n  font-weight: 400;\n  padding: 0.5rem;\n  position: fixed;\n  text-align: center;\n  transform: translate(-50%, -50%);\n  white-space: normal;\n  z-index: 10;\n}\n\n.tooltip_small {\n  height: 4rem;\n  width: 14.5rem;\n}\n\n.tooltip_medium {\n  height: 5.5rem;\n  width: 20rem;\n}\n\n.tooltip_large {\n  height: 5.5rem;\n  width: 24.5rem;\n}\n\n.tooltip_small::before,\n.tooltip_medium::before,\n.tooltip_large::before {\n  border: 0.5rem solid transparent;\n  border-top-color: var(--color-grey-700);\n  content: \"\";\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.tooltip_small::before {\n  right: 1rem;\n  top: 4rem;\n}\n\n.tooltip_medium::before {\n  right: 3rem;\n  top: 5.5rem;\n}\n\n.tooltip_large::before {\n  right: 4rem;\n  top: 5.5rem;\n}\n\n.tooltip_under-trigger {\n  background-color: var(--color-grey-700);\n  border-radius: 0.5rem;\n  color: var(--color-uva-white);\n  font-weight: 400;\n  max-width: calc(100vw - 2rem);\n  padding: 0.25rem 1rem;\n  position: fixed;\n  right: 1rem;\n  top: 3.5rem;\n}\n\n.tooltip_under-trigger::before {\n  border-bottom: 0.5rem solid var(--color-grey-700);\n  border-left: 0.5rem solid transparent;\n  border-right: 0.5rem solid transparent;\n  content: \"\";\n  height: 0;\n  position: absolute;\n  right: 3.5rem;\n  top: -0.5rem;\n  width: 0;\n}\n\n@media (min-width: 50rem) {\n  .tooltip_under-trigger {\n    right: 0.5rem;\n  }\n}\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n  /** The element which triggers the tooltip on hover. */\n  element: ReactNode;\n  /** The id of the tooltip element. */\n  id: string;\n  /** The contents of the tooltip. */\n  text: string;\n  /** The size of the tooltip. */\n  size?: 'small' | 'medium' | 'large';\n  /** <span style=\"color: red\">**Obsolete**</span>. Used by Lens only, and should be refactored */\n  openUnderTrigger?: boolean;\n}\n\n/** Represents a component for a custom tooltip. */\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  /* eslint-disable @typescript-eslint/no-magic-numbers */\n  const topOffset = (size === 'small' && 20) || (size === 'large' && 35) || 27;\n  const leftOffset = (size === 'small' && 25) || (size === 'large' && 70) || 47;\n  /* eslint-enable @typescript-eslint/no-magic-numbers */\n\n  const calculatePosition = useCallback(() => {\n    if (containerRef.current && tooltipRef.current) {\n      const triggerRect = containerRef.current.getBoundingClientRect();\n      const tooltipRect = tooltipRef.current.getBoundingClientRect();\n      const scrollY = window.scrollY;\n      const scrollX = window.scrollX;\n      let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n      // Adjust top position to account for page scrolling\n      top -= scrollY;\n\n      // Position tooltip below if it would be above the viewport\n      if (top < 0) {\n        top = triggerRect.bottom + scrollY;\n      }\n\n      setPosition({ top, left });\n    }\n  }, [leftOffset, topOffset]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  function show() {\n    setIsOpen(true);\n  }\n\n  function hide() {\n    setIsOpen(false);\n  }\n\n  function toggle() {\n    if (isOpen) setIsOpen(false);\n    else setIsOpen(true);\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const tooltipContainerRef = containerRef.current;\n\n    tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n    return () => {\n      tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n    };\n  }, [onKeyUp]);\n\n  useEffect(() => {\n    calculatePosition();\n    window.addEventListener('resize', calculatePosition);\n    return () => {\n      window.removeEventListener('resize', calculatePosition);\n    };\n  }, [calculatePosition]);\n\n  useEffect(() => {\n    // Recalculate position when isOpen changes\n    if (isOpen && !openUnderTrigger) {\n      calculatePosition();\n    }\n  }, [isOpen, openUnderTrigger, calculatePosition]);\n\n  return (\n    <div\n      className={styles['tooltip-container']}\n      onBlur={hide}\n      onFocus={show}\n      onMouseEnter={show}\n      onMouseLeave={hide}\n      onMouseUp={toggle}\n      ref={containerRef}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n      {isOpen && (\n        <span\n          ref={tooltipRef}\n          className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n          id={id}\n          role=\"tooltip\"\n          style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n        >\n          {text}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;ACoBA,SAAgB,EAAQ,EAAE,YAAS,OAAI,SAAM,UAAO,UAAU,sBAAmB,MAAuB;CACtG,IAAM,IAAe,EAAuB,KAAK,EAC3C,IAAa,EAAwB,KAAK,EAC1C,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAU,KAAe,EAAS;EAAE,KAAK;EAAG,MAAM;EAAG,CAAC,EAGvD,IAAa,MAAS,WAAW,MAAQ,MAAS,WAAW,MAAO,IACpE,IAAc,MAAS,WAAW,MAAQ,MAAS,WAAW,MAAO,IAGrE,IAAoB,QAAkB;AAC1C,MAAI,EAAa,WAAW,EAAW,SAAS;GAC9C,IAAM,IAAc,EAAa,QAAQ,uBAAuB,EAC1D,IAAc,EAAW,QAAQ,uBAAuB,EACxD,IAAU,OAAO,SACjB,IAAU,OAAO,SACnB,IAAM,EAAY,MAAM,IAAU,IAAY,EAAY,QAExD,IAAO,EAAY,OAAO,IAAU,KAAc,EAAY,QAAQ,EAAY,SAAS;AAUjG,GAPA,KAAO,GAGH,IAAM,MACR,IAAM,EAAY,SAAS,IAG7B,EAAY;IAAE;IAAK;IAAM,CAAC;;IAE3B,CAAC,GAAY,EAAU,CAAC,EAErB,IAAU,GACb,MAAyB;AACxB,EAAI,EAAM,QAAQ,YAChB,EAAU,GAAM;IAGpB,CAAC,EAAU,CACZ;CAED,SAAS,IAAO;AACd,IAAU,GAAK;;CAGjB,SAAS,IAAO;AACd,IAAU,GAAM;;CAGlB,SAAS,IAAS;AAChB,EAAY,EAAR,GACgB;;AA8BtB,QA3BA,QAAgB;AACd,MAAI,CAAC,EAAa,QAAS;EAE3B,IAAM,IAAsB,EAAa;AAIzC,SAFA,EAAoB,iBAAiB,SAAS,GAAS,GAAK,QAE/C;AACX,KAAoB,oBAAoB,SAAS,GAAS,GAAK;;IAEhE,CAAC,EAAQ,CAAC,EAEb,SACE,GAAmB,EACnB,OAAO,iBAAiB,UAAU,EAAkB,QACvC;AACX,SAAO,oBAAoB,UAAU,EAAkB;KAExD,CAAC,EAAkB,CAAC,EAEvB,QAAgB;AAEd,EAAI,KAAU,CAAC,KACb,GAAmB;IAEpB;EAAC;EAAQ;EAAkB;EAAkB,CAAC,EAG/C,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,QAAQ;EACR,SAAS;EACT,cAAc;EACd,cAAc;EACd,WAAW;EACX,KAAK;EACL,MAAK;EACL,UAAU;YATZ,CAWE,kBAAC,OAAD;GAAK,oBAAkB,IAAS,IAAK,KAAA;aAAY;GAAc,CAAA,EAC9D,KACC,kBAAC,QAAD;GACE,KAAK;GACL,WAAW,IAAmB,EAAO,2BAA2B,EAAO,WAAW;GAC9E;GACJ,MAAK;GACL,OAAO,IAAmB,EAAE,GAAG;IAAE,KAAK,EAAS;IAAK,MAAM,EAAS;IAAM;aAExE;GACI,CAAA,CAEL"}
+{"version":3,"file":"Tooltip-D27p9kh4.js","names":[],"sources":["../src/components/Tooltip/Tooltip.module.css","../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[".tooltip-container {\n  align-items: flex-end;\n  cursor: help;\n  display: flex;\n  position: relative;\n}\n\n.tooltip_small,\n.tooltip_medium,\n.tooltip_large {\n  background-color: var(--color-grey-700);\n  border-radius: 0.5rem;\n  color: var(--color-uva-white);\n  font-weight: 400;\n  padding: 0.5rem;\n  position: fixed;\n  text-align: center;\n  transform: translate(-50%, -50%);\n  white-space: normal;\n  z-index: 10;\n}\n\n.tooltip_small {\n  height: 4rem;\n  width: 14.5rem;\n}\n\n.tooltip_medium {\n  height: 5.5rem;\n  width: 20rem;\n}\n\n.tooltip_large {\n  height: 5.5rem;\n  width: 24.5rem;\n}\n\n.tooltip_small::before,\n.tooltip_medium::before,\n.tooltip_large::before {\n  border: 0.5rem solid transparent;\n  border-top-color: var(--color-grey-700);\n  content: \"\";\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.tooltip_small::before {\n  right: 1rem;\n  top: 4rem;\n}\n\n.tooltip_medium::before {\n  right: 3rem;\n  top: 5.5rem;\n}\n\n.tooltip_large::before {\n  right: 4rem;\n  top: 5.5rem;\n}\n\n.tooltip_under-trigger {\n  background-color: var(--color-grey-700);\n  border-radius: 0.5rem;\n  color: var(--color-uva-white);\n  font-weight: 400;\n  max-width: calc(100vw - 2rem);\n  padding: 0.25rem 1rem;\n  position: fixed;\n  right: 1rem;\n  top: 3.5rem;\n}\n\n.tooltip_under-trigger::before {\n  border-bottom: 0.5rem solid var(--color-grey-700);\n  border-left: 0.5rem solid transparent;\n  border-right: 0.5rem solid transparent;\n  content: \"\";\n  height: 0;\n  position: absolute;\n  right: 3.5rem;\n  top: -0.5rem;\n  width: 0;\n}\n\n@media (min-width: 50rem) {\n  .tooltip_under-trigger {\n    right: 0.5rem;\n  }\n}\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './Tooltip.module.css';\n\nexport interface TooltipProps {\n  /** The element which triggers the tooltip on hover. */\n  element: ReactNode;\n  /** The id of the tooltip element. */\n  id: string;\n  /** The contents of the tooltip. */\n  text: string;\n  /** The size of the tooltip. */\n  size?: 'small' | 'medium' | 'large';\n  /** <span style=\"color: red\">**Obsolete**</span>. Used by Lens only, and should be refactored */\n  openUnderTrigger?: boolean;\n}\n\n/** Represents a component for a custom tooltip. */\nexport function Tooltip({ element, id, text, size = 'medium', openUnderTrigger = false }: TooltipProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  /* eslint-disable @typescript-eslint/no-magic-numbers */\n  const topOffset = (size === 'small' && 20) || (size === 'large' && 35) || 27;\n  const leftOffset = (size === 'small' && 25) || (size === 'large' && 70) || 47;\n  /* eslint-enable @typescript-eslint/no-magic-numbers */\n\n  const calculatePosition = useCallback(() => {\n    if (containerRef.current && tooltipRef.current) {\n      const triggerRect = containerRef.current.getBoundingClientRect();\n      const tooltipRect = tooltipRef.current.getBoundingClientRect();\n      const scrollY = window.scrollY;\n      const scrollX = window.scrollX;\n      let top = triggerRect.top + scrollY + topOffset - tooltipRect.height;\n      // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n      const left = triggerRect.left + scrollX + leftOffset + (triggerRect.width - tooltipRect.width) / 2;\n\n      // Adjust top position to account for page scrolling\n      top -= scrollY;\n\n      // Position tooltip below if it would be above the viewport\n      if (top < 0) {\n        top = triggerRect.bottom + scrollY;\n      }\n\n      setPosition({ top, left });\n    }\n  }, [leftOffset, topOffset]);\n\n  const onKeyUp = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n      }\n    },\n    [setIsOpen]\n  );\n\n  function show() {\n    setIsOpen(true);\n  }\n\n  function hide() {\n    setIsOpen(false);\n  }\n\n  function toggle() {\n    if (isOpen) setIsOpen(false);\n    else setIsOpen(true);\n  }\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    const tooltipContainerRef = containerRef.current;\n\n    tooltipContainerRef.addEventListener('keyup', onKeyUp, true);\n\n    return () => {\n      tooltipContainerRef.removeEventListener('keyup', onKeyUp, true);\n    };\n  }, [onKeyUp]);\n\n  useEffect(() => {\n    calculatePosition();\n    window.addEventListener('resize', calculatePosition);\n    return () => {\n      window.removeEventListener('resize', calculatePosition);\n    };\n  }, [calculatePosition]);\n\n  useEffect(() => {\n    // Recalculate position when isOpen changes\n    if (isOpen && !openUnderTrigger) {\n      calculatePosition();\n    }\n  }, [isOpen, openUnderTrigger, calculatePosition]);\n\n  return (\n    <div\n      className={styles['tooltip-container']}\n      onBlur={hide}\n      onFocus={show}\n      onMouseEnter={show}\n      onMouseLeave={hide}\n      onMouseUp={toggle}\n      ref={containerRef}\n      role=\"button\"\n      tabIndex={-1}\n    >\n      <div aria-describedby={isOpen ? id : undefined}>{element}</div>\n      {isOpen && (\n        <span\n          ref={tooltipRef}\n          className={openUnderTrigger ? styles['tooltip_under-trigger'] : styles[`tooltip_${size}`]}\n          id={id}\n          role=\"tooltip\"\n          style={openUnderTrigger ? {} : { top: position.top, left: position.left }}\n        >\n          {text}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;ACoBA,SAAgB,EAAQ,EAAE,YAAS,OAAI,SAAM,UAAO,UAAU,sBAAmB,MAAuB;CACtG,IAAM,IAAe,EAAuB,KAAK,EAC3C,IAAa,EAAwB,KAAK,EAC1C,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAU,KAAe,EAAS;EAAE,KAAK;EAAG,MAAM;EAAG,CAAC,EAGvD,IAAa,MAAS,WAAW,MAAQ,MAAS,WAAW,MAAO,IACpE,IAAc,MAAS,WAAW,MAAQ,MAAS,WAAW,MAAO,IAGrE,IAAoB,QAAkB;EAC1C,IAAI,EAAa,WAAW,EAAW,SAAS;GAC9C,IAAM,IAAc,EAAa,QAAQ,uBAAuB,EAC1D,IAAc,EAAW,QAAQ,uBAAuB,EACxD,IAAU,OAAO,SACjB,IAAU,OAAO,SACnB,IAAM,EAAY,MAAM,IAAU,IAAY,EAAY,QAExD,IAAO,EAAY,OAAO,IAAU,KAAc,EAAY,QAAQ,EAAY,SAAS;GAUjG,AAPA,KAAO,GAGH,IAAM,MACR,IAAM,EAAY,SAAS,IAG7B,EAAY;IAAE;IAAK;IAAM,CAAC;;IAE3B,CAAC,GAAY,EAAU,CAAC,EAErB,IAAU,GACb,MAAyB;EACxB,AAAI,EAAM,QAAQ,YAChB,EAAU,GAAM;IAGpB,CAAC,EAAU,CACZ;CAED,SAAS,IAAO;EACd,EAAU,GAAK;;CAGjB,SAAS,IAAO;EACd,EAAU,GAAM;;CAGlB,SAAS,IAAS;EAChB,AAAY,EAAR,GACgB;;CA8BtB,OA3BA,QAAgB;EACd,IAAI,CAAC,EAAa,SAAS;EAE3B,IAAM,IAAsB,EAAa;EAIzC,OAFA,EAAoB,iBAAiB,SAAS,GAAS,GAAK,QAE/C;GACX,EAAoB,oBAAoB,SAAS,GAAS,GAAK;;IAEhE,CAAC,EAAQ,CAAC,EAEb,SACE,GAAmB,EACnB,OAAO,iBAAiB,UAAU,EAAkB,QACvC;EACX,OAAO,oBAAoB,UAAU,EAAkB;KAExD,CAAC,EAAkB,CAAC,EAEvB,QAAgB;EAEd,AAAI,KAAU,CAAC,KACb,GAAmB;IAEpB;EAAC;EAAQ;EAAkB;EAAkB,CAAC,EAG/C,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,QAAQ;EACR,SAAS;EACT,cAAc;EACd,cAAc;EACd,WAAW;EACX,KAAK;EACL,MAAK;EACL,UAAU;YATZ,CAWE,kBAAC,OAAD;GAAK,oBAAkB,IAAS,IAAK,KAAA;aAAY;GAAc,CAAA,EAC9D,KACC,kBAAC,QAAD;GACE,KAAK;GACL,WAAW,IAAmB,EAAO,2BAA2B,EAAO,WAAW;GAC9E;GACJ,MAAK;GACL,OAAO,IAAmB,EAAE,GAAG;IAAE,KAAK,EAAS;IAAK,MAAM,EAAS;IAAM;aAExE;GACI,CAAA,CAEL"}

package/dist/VarIndicator-C-GueOZD.js.map

@@ -1 +1 @@
-{"version":3,"file":"VarIndicator-C-GueOZD.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;CACT,EAEY,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;GAAM,CAAA;EAClE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA0B,EAAM,GAAG;GAAkB,CAAA;EAC5E,KACC,IAAW,KACX,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQ,GAAU,GAAG,GAAG,MAAQ,IAAM,EAAE,CAAC,KAAK,MACzD,kBAAC,OAAD;GAAgB,WAAW,EAAO;aAChC,kBAAC,GAAD,EAAM,MAAM,KAAQ,IAAc,sBAAsB,eAAiB,CAAA;GACrE,EAFI,EAEJ,CACN;EACH,EAAA,CAAA;AAGL,QACE,kBAAC,UAAD;EACE,WAAW,EACT,EAAO,6BACP,EAAO,6BAA6B,EAAQ,aAAa,KACzD,GACG,EAAO,uCAAuC,GAChD,CACF;EACQ;YAER,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;GAAM,CAAA,EAClE,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,6BACP,EAAO,qDACR;aAED,kBAAC,GAAD,EAAoB,CAAA;GAChB,CAAA,CACL,EAAA,CAAA,GAEH,kBAAC,GAAD,EAAoB,CAAA;EAEf,CAAA"}
+{"version":3,"file":"VarIndicator-C-GueOZD.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;CACT,EAEY,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;GAAM,CAAA;EAClE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAA0B,EAAM,GAAG;GAAkB,CAAA;EAC5E,KACC,IAAW,KACX,MAAY,eACZ,MAAM,KAAK,EAAE,QAAQ,GAAU,GAAG,GAAG,MAAQ,IAAM,EAAE,CAAC,KAAK,MACzD,kBAAC,OAAD;GAAgB,WAAW,EAAO;aAChC,kBAAC,GAAD,EAAM,MAAM,KAAQ,IAAc,sBAAsB,eAAiB,CAAA;GACrE,EAFI,EAEJ,CACN;EACH,EAAA,CAAA;CAGL,OACE,kBAAC,UAAD;EACE,WAAW,EACT,EAAO,6BACP,EAAO,6BAA6B,EAAQ,aAAa,KACzD,GACG,EAAO,uCAAuC,GAChD,CACF;EACQ;YAER,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,MAAM,EAAW;GAA+B,MAAM;GAAM,CAAA,EAClE,kBAAC,OAAD;GACE,WAAW,EACT,EAAO,6BACP,EAAO,qDACR;aAED,kBAAC,GAAD,EAAoB,CAAA;GAChB,CAAA,CACL,EAAA,CAAA,GAEH,kBAAC,GAAD,EAAoB,CAAA;EAEf,CAAA"}

package/dist/assets/{src/css/fonts.css → fonts.css}

@@ -4,8 +4,8 @@
   src:
     local("SourceSans3-Regular"),
     local("Source Sans 3"),
-    url("./../assets/fonts/SourceSans3-Regular.otf.woff2") format("woff2"),
-    url("./../assets/fonts/SourceSans3-Regular.otf.woff") format("woff");
+    url("../assets/fonts/SourceSans3-Regular.otf.woff2") format("woff2"),
+    url("../assets/fonts/SourceSans3-Regular.otf.woff") format("woff");
 }
 
 @font-face {
@@ -16,6 +16,6 @@
     local("SourceSans3-Semibold"),
     local("Source Sans 3 Semibold"),
     local("Source Sans 3"),
-    url("./../assets/fonts/SourceSans3-Semibold.otf.woff2") format("woff2"),
-    url("./../assets/fonts/SourceSans3-Semibold.otf.woff") format("woff");
+    url("../assets/fonts/SourceSans3-Semibold.otf.woff2") format("woff2"),
+    url("../assets/fonts/SourceSans3-Semibold.otf.woff") format("woff");
 }