@helsenorge/designsystem-react 13.0.0-beta.4 → 13.0.0-workspaces-beta.1

package/components/ServiceMessage/index.js

@@ -1,173 +0,0 @@
-import { a as IconSize } from "../../constants2.js";
-import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import { t as breakpoints } from "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
-import { t as getColor } from "../../color.js";
-import "../../spacing.js";
-import "../../currys.js";
-import { t as Icon_default } from "../../Icon.js";
-import "../../refs.js";
-import "../../CheckFill.js";
-import "../../ErrorSignFill.js";
-import "../../InfoSignFill.js";
-import "../../TriangleX.js";
-import { t as NotificationBadge_default } from "../../NotificationBadge.js";
-import { n as useBreakpoint } from "../../useBreakpoint.js";
-import "../../useIsMobileBreakpoint.js";
-import { n as getAriaLabelAttributes } from "../../accessibility.js";
-import { t as X_default } from "../../X.js";
-import { t as Close_default } from "../../Close.js";
-import { t as ChevronDown_default } from "../../ChevronDown.js";
-import { t as ChevronUp_default } from "../../ChevronUp.js";
-import { t as Forward_default } from "../../Forward.js";
-import React, { useId, useState } from "react";
-import cn from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./styles.module.scss";
-var Label = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {
-	const breakpoint = useBreakpoint();
-	const { isHovered, refObject } = usePseudoClasses();
-	const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;
-	const CustomTag = hasExpander ? "button" : "span";
-	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["service-message__label-container"], hasExpander && styles[`service-message__label-container--has-expander`]),
-		ref: refObject,
-		children: /* @__PURE__ */ jsx("div", {
-			className: styles["service-message__container"],
-			children: /* @__PURE__ */ jsx("div", {
-				className: styles["service-message__row"],
-				children: /* @__PURE__ */ jsx("div", {
-					className: styles["service-message__col"],
-					children: /* @__PURE__ */ jsxs("div", {
-						className: styles["service-message__label"],
-						children: [
-							/* @__PURE__ */ jsx(NotificationBadge_default, {
-								variant,
-								size: iconSize,
-								isHovered
-							}),
-							/* @__PURE__ */ jsx("h1", {
-								className: styles["service-message__title"],
-								id,
-								children: /* @__PURE__ */ jsx(CustomTag, {
-									className: styles["service-message__toggle"],
-									onClick: hasExpander ? onExpand : void 0,
-									"aria-expanded": hasExpander ? isExpanded : void 0,
-									children: label
-								})
-							}),
-							hasExpander && /* @__PURE__ */ jsx(Icon_default, {
-								size: iconSize,
-								svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
-								isHovered
-							}),
-							!hasExpander && dismissable && /* @__PURE__ */ jsx(Close_default, {
-								onClick: onDismiss,
-								ariaLabel: closeBtnText,
-								className: styles["service-message__close"]
-							})
-						]
-					})
-				})
-			})
-		})
-	});
-};
-var Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {
-	const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses();
-	const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses();
-	const hasUrl = url && urlTitle;
-	return /* @__PURE__ */ jsx("div", {
-		className: styles["service-message__container"],
-		children: /* @__PURE__ */ jsx("div", {
-			className: styles["service-message__row"],
-			children: /* @__PURE__ */ jsx("div", {
-				className: styles["service-message__col"],
-				children: /* @__PURE__ */ jsxs("div", {
-					className: styles["service-message__content"],
-					children: [
-						info && /* @__PURE__ */ jsx("p", {
-							className: styles["service-message__info"],
-							children: info
-						}),
-						extraInfo && /* @__PURE__ */ jsx("p", {
-							className: cn(styles["service-message__info"], styles["service-message__info--extra"]),
-							children: extraInfo
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: styles["service-message__actions"],
-							children: [hasUrl && /* @__PURE__ */ jsxs("a", {
-								className: styles["service-message__action"],
-								href: url,
-								ref: readMoreRef,
-								target,
-								children: [urlTitle, /* @__PURE__ */ jsx(Icon_default, {
-									size: IconSize.XSmall,
-									svgIcon: Forward_default,
-									color: getColor("blueberry", 700),
-									isHovered: readMoreHoverRefIsHovered
-								})]
-							}), dismissable && /* @__PURE__ */ jsxs("button", {
-								ref: closeButtonRef,
-								className: cn(styles["service-message__action"], styles["service-message__action--close"]),
-								"aria-label": closeBtnText,
-								onClick: onDismiss,
-								children: [closeBtnText, /* @__PURE__ */ jsx(Icon_default, {
-									size: IconSize.XSmall,
-									svgIcon: X_default,
-									color: getColor("blueberry", 700),
-									isHovered: closeButtonIsHovered
-								})]
-							})]
-						})
-					]
-				})
-			})
-		})
-	});
-};
-var ServiceMessage = ({ label, dismissable = true, onDismiss, info, extraInfo, urlTitle, url, target = "_self", closeBtnText = "fjern melding", expanderOpenFromStart = false, variant = "error", testId }) => {
-	const [isExpanded, setIsExpanded] = useState(expanderOpenFromStart);
-	const labelId = useId();
-	const hasExpander = !!info || !!extraInfo;
-	const ariaRole = variant === "error" ? "alert" : "region";
-	const ariaLabelAttributes = getAriaLabelAttributes({
-		label,
-		id: labelId
-	});
-	const handleClick = () => {
-		if (hasExpander) setIsExpanded(!isExpanded);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["service-message"], styles[`service-message--${variant}`]),
-		role: ariaRole,
-		...ariaLabelAttributes,
-		"data-testid": testId,
-		children: [/* @__PURE__ */ jsx(Label, {
-			label,
-			variant,
-			id: labelId,
-			hasExpander,
-			isExpanded,
-			dismissable,
-			onExpand: handleClick,
-			onDismiss,
-			closeBtnText
-		}), hasExpander && isExpanded && /* @__PURE__ */ jsx(Content, {
-			info,
-			extraInfo,
-			urlTitle,
-			url,
-			target,
-			dismissable,
-			onDismiss,
-			closeBtnText
-		})]
-	});
-};
-var ServiceMessage_default = ServiceMessage;
-export { ServiceMessage_default as default };
-
-//# sourceMappingURL=index.js.map

package/components/ServiceMessage/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["Label: React.FC<LabelProps>","Content: React.FC<ContentProps>","ServiceMessage: React.FC<ServiceMessageProps>"],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={refObject}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              <NotificationBadge variant={variant} size={iconSize} isHovered={isHovered} />\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'error',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useId();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'error' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    if (hasExpander) setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":"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"}

package/components/SharingStatus/index.js

@@ -1,33 +0,0 @@
-import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
-import { t as palette } from "../../palette.js";
-import { t as Icon_default } from "../../Icon.js";
-import React from "react";
-import cn from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./styles.module.scss";
-var SharingStatus = (props) => {
-	const { color = "neutral", icon, children, className, testId, wrapText } = props;
-	const sharingStatusClasses = cn(styles["sharing-status"], className);
-	const dotClasses = cn(styles["sharing-status__dot"], styles[`sharing-status__dot--${color}`]);
-	const labelClasses = cn(styles["sharing-status__label"], styles[`sharing-status__label--${color}`], { [styles["sharing-status__label--wrap"]]: wrapText });
-	return /* @__PURE__ */ jsxs("span", {
-		className: sharingStatusClasses,
-		"data-testid": testId,
-		"data-analyticsid": AnalyticsId.SharingStatus,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: dotClasses,
-			children: /* @__PURE__ */ jsx(Icon_default, {
-				color: palette.white,
-				svgIcon: icon,
-				size: IconSize.XXSmall
-			})
-		}), /* @__PURE__ */ jsx("span", {
-			className: labelClasses,
-			children
-		})]
-	});
-};
-var SharingStatus_default = SharingStatus;
-export { SharingStatus_default as default };
-
-//# sourceMappingURL=index.js.map

package/components/SharingStatus/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["SharingStatus: React.FC<SharingStatusProps>"],"sources":["../../../src/components/SharingStatus/SharingStatus.tsx","../../../src/components/SharingStatus/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { PaletteNames, palette } from '../../theme/palette';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type SharingStatusColor = Extract<PaletteNames, 'kiwi' | 'cherry' | 'neutral'>;\n\nexport interface SharingStatusProps {\n  /** Color choices represent variants of sharingstatus */\n  color?: SharingStatusColor;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Icon to be displayed next to the sharingstatus */\n  icon: SvgIcon;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the text placed to the right of the sharingstatus */\n  children: string;\n  /** turn on and off word wrapping */\n  wrapText?: boolean;\n}\n\nconst SharingStatus: React.FC<SharingStatusProps> = props => {\n  const { color = 'neutral', icon, children, className, testId, wrapText } = props;\n\n  const sharingStatusClasses = classNames(styles['sharing-status'], className);\n  const dotClasses = classNames(styles['sharing-status__dot'], styles[`sharing-status__dot--${color}`]);\n  const labelClasses = classNames(styles['sharing-status__label'], styles[`sharing-status__label--${color}`], {\n    [styles['sharing-status__label--wrap']]: wrapText,\n  });\n\n  return (\n    <span className={sharingStatusClasses} data-testid={testId} data-analyticsid={AnalyticsId.SharingStatus}>\n      <span className={dotClasses}>\n        <Icon color={palette.white} svgIcon={icon} size={IconSize.XXSmall} />\n      </span>\n      <span className={labelClasses}>{children}</span>\n    </span>\n  );\n};\n\nexport default SharingStatus;\n","import SharingStatus from './SharingStatus';\nexport * from './SharingStatus';\nexport default SharingStatus;\n"],"mappings":";;;;;;;AA2BA,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,QAAQ,WAAW,MAAM,UAAU,WAAW,QAAQ,aAAa;CAE3E,MAAM,uBAAuB,GAAW,OAAO,mBAAmB,UAAU;CAC5E,MAAM,aAAa,GAAW,OAAO,wBAAwB,OAAO,wBAAwB,SAAS;CACrG,MAAM,eAAe,GAAW,OAAO,0BAA0B,OAAO,0BAA0B,UAAU,GACzG,OAAO,iCAAiC,UAC1C,CAAC;AAEF,QACE,qBAAC,QAAA;EAAK,WAAW;EAAsB,eAAa;EAAQ,oBAAkB,YAAY;aACxF,oBAAC,QAAA;GAAK,WAAW;aACf,oBAAC,cAAA;IAAK,OAAO,QAAQ;IAAO,SAAS;IAAM,MAAM,SAAS;KAAW;IAChE,EACP,oBAAC,QAAA;GAAK,WAAW;GAAe;IAAgB,CAAA;GAC3C;;ACxCX,IAAA,wBD4Ce"}

package/components/Step/index.js

@@ -1,35 +0,0 @@
-import { n as AnalyticsId } from "../../constants2.js";
-import { t as StepButtons_default } from "../../StepButtons.js";
-import React from "react";
-import cn from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./styles.module.scss";
-var Step = ({ stepper, children, className, contentClassName, backButton, forwardButton, additionalButtons, cancelButton, stickyButtons = false, testId }) => {
-	const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-testid": testId,
-		"data-analyticsid": AnalyticsId.Step,
-		className,
-		children: [
-			stepper && /* @__PURE__ */ jsx("div", {
-				className: styles.step__stepper,
-				children: stepper
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: cn(styles.step__content, contentClassName),
-				children
-			}),
-			hasNavigation && /* @__PURE__ */ jsx(StepButtons_default, {
-				backButton,
-				forwardButton,
-				additionalButtons,
-				cancelButton,
-				sticky: stickyButtons
-			})
-		]
-	});
-};
-var Step_default = Step;
-export { Step_default as default };
-
-//# sourceMappingURL=index.js.map

package/components/Step/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["Step: React.FC<StepProps>"],"sources":["../../../src/components/Step/Step.tsx","../../../src/components/Step/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n  /** Stepper viser fremdriften */\n  stepper?: React.ReactElement<StepperProps>;\n  /** Innhold i steget */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content element. */\n  contentClassName?: string;\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false  */\n  stickyButtons?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n  stepper,\n  children,\n  className,\n  contentClassName,\n  backButton,\n  forwardButton,\n  additionalButtons,\n  cancelButton,\n  stickyButtons = false,\n  testId,\n}) => {\n  const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Step} className={className}>\n      {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n      <div className={classNames(styles.step__content, contentClassName)}>{children}</div>\n      {hasNavigation && (\n        <StepButtons\n          backButton={backButton}\n          forwardButton={forwardButton}\n          additionalButtons={additionalButtons}\n          cancelButton={cancelButton}\n          sticky={stickyButtons}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Step;\n","import Step from './Step';\nexport * from './Step';\nexport default Step;\n"],"mappings":";;;;;;AAkCA,IAAMA,QAA6B,EACjC,SACA,UACA,WACA,kBACA,YACA,eACA,mBACA,cACA,gBAAgB,OAChB,aACI;CACJ,MAAM,gBAAgB,cAAc,iBAAiB,qBAAqB;AAE1E,QACE,qBAAC,OAAA;EAAI,eAAa;EAAQ,oBAAkB,YAAY;EAAiB;;GACtE,WAAW,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAgB;KAAc;GACjE,oBAAC,OAAA;IAAI,WAAW,GAAW,OAAO,eAAe,iBAAiB;IAAG;KAAe;GACnF,iBACC,oBAAC,qBAAA;IACa;IACG;IACI;IACL;IACd,QAAQ;KACR;;GAEA;;AC3DV,IAAA,eD+De"}

package/components/Stepper/index.js

@@ -1,102 +0,0 @@
-import { n as AnalyticsId } from "../../constants2.js";
-import { n as getAriaLabelAttributes } from "../../accessibility.js";
-import "../../debounce.js";
-import { t as useSize } from "../../useSize.js";
-import React, { useRef } from "react";
-import cn from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styles from "./styles.module.scss";
-var MARKER_DOT_MIN_DISTANCE_PX = 4;
-var MARKER_WIDTH_PX = 24;
-const getValidatedMin = (min, max) => min < max ? min : max - 1;
-const getValidatedMax = (min, max) => max < min ? min : max;
-const getValidatedValue = (value, min, max) => {
-	if (typeof value === "undefined" || value < min) return min;
-	return value > max ? max : value;
-};
-const getMaximumDots = (stepperWidth) => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));
-const getDistanceBetweenDots = (stepperWidth, dots) => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);
-const getMarkerPosition = (distanceBetweenDots, index) => distanceBetweenDots * index;
-const getAllowedValues = (min, max) => Array.from(Array(max - min + 1), (_, index) => index + min);
-const getValidatedProps = (value, min, max) => {
-	const validatedMin = getValidatedMin(min, max);
-	const validatedMax = getValidatedMax(validatedMin, max);
-	return {
-		validatedValue: getValidatedValue(value, validatedMin, validatedMax),
-		validatedMin,
-		validatedMax
-	};
-};
-var Dot = ({ index, completed, distanceBetweenDots, position }) => {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn(styles.stepper__dot, completed && styles["stepper__dot--completed"], position && styles[`stepper__dot--${position}`]),
-		style: !position && typeof index !== "undefined" && typeof distanceBetweenDots !== "undefined" ? { left: `${index * distanceBetweenDots + 8}px` } : void 0,
-		"data-testid": "dot"
-	});
-};
-var Dot_default = Dot;
-var Dots = ({ allowedValues, currentValue, distanceBetweenDots }) => /* @__PURE__ */ jsx(Fragment, { children: allowedValues.map((value, index) => /* @__PURE__ */ jsx(Dot_default, {
-	index,
-	completed: value < currentValue,
-	distanceBetweenDots
-}, value)) });
-var DotList_default = Dots;
-var Stepper = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {
-	const wrapperRef = useRef(null);
-	const ref = useRef(null);
-	const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};
-	const { width: stepperWidth = 0 } = useSize(ref) || {};
-	const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);
-	const allowedValues = getAllowedValues(validatedMin, validatedMax);
-	const index = allowedValues.indexOf(validatedValue);
-	const maximumDots = getMaximumDots(wrapperWidth);
-	const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);
-	const markerPosition = getMarkerPosition(distanceBetweenDots, index);
-	const showAllDots = allowedValues.length <= maximumDots;
-	const isCompleted = validatedValue === validatedMax;
-	const ariaLabelAttributes = getAriaLabelAttributes({
-		label: ariaLabel,
-		id: ariaLabelledById
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: styles["stepper-wrapper"],
-		ref: wrapperRef,
-		children: [/* @__PURE__ */ jsxs("span", {
-			role: "progressbar",
-			...ariaLabelAttributes,
-			"aria-valuenow": validatedValue,
-			"aria-valuemin": validatedMin,
-			"aria-valuemax": validatedMax,
-			className: styles.stepper,
-			style: { backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px` },
-			ref,
-			"data-testid": testId,
-			"data-analyticsid": AnalyticsId.Stepper,
-			children: [
-				showAllDots && /* @__PURE__ */ jsx(DotList_default, {
-					allowedValues,
-					currentValue: validatedValue,
-					distanceBetweenDots
-				}),
-				!showAllDots && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Dot_default, {
-					completed: validatedValue > validatedMin,
-					position: "left"
-				}), /* @__PURE__ */ jsx(Dot_default, {
-					completed: validatedValue === validatedMax,
-					position: "right"
-				})] }),
-				/* @__PURE__ */ jsx("span", {
-					className: styles.stepper__marker,
-					style: { left: `${markerPosition}px` }
-				})
-			]
-		}), !showAllDots && /* @__PURE__ */ jsx("span", {
-			className: styles.stepper__number,
-			children: `${validatedValue}/${validatedMax}`
-		})]
-	});
-};
-var Stepper_default = Stepper;
-export { Stepper_default as default };
-
-//# sourceMappingURL=index.js.map

package/components/Stepper/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["Dot: React.FC<DotProps>","style: React.HTMLAttributes<HTMLSpanElement>['style']","Dots: React.FC<DotListProps>","Stepper: React.FC<StepperProps>"],"sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx","../../../src/components/Stepper/index.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n","import Stepper from './Stepper';\nexport * from './Stepper';\nexport default Stepper;\n"],"mappings":"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"}

package/components/StickyNote/index.js

@@ -1,205 +0,0 @@
-import "../../constants2.js";
-import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import "../../grid.js";
-import { t as Icon_default } from "../../Icon.js";
-import { n as mergeRefs } from "../../refs.js";
-import "../../useBreakpoint.js";
-import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
-import { t as useIdWithFallback } from "../../useIdWithFallback.js";
-import { t as getAriaDescribedBy } from "../../accessibility.js";
-import { t as X_default } from "../../X.js";
-import React, { useLayoutEffect, useRef } from "react";
-import cn from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styles from "./styles.module.scss";
-var Close_default = React.forwardRef(function ButtonForwardedRef(props, ref) {
-	const { testId, ariaLabel = "Lukk", onClick } = props;
-	const { refObject, isHovered } = usePseudoClasses();
-	const iconSize = useIsMobileBreakpoint() ? 38 : 48;
-	const closeClasses = cn(styles.close);
-	return /* @__PURE__ */ jsx("button", {
-		ref: mergeRefs([ref, refObject]),
-		"data-testid": testId,
-		className: closeClasses,
-		"aria-label": ariaLabel,
-		onClick,
-		type: "button",
-		children: /* @__PURE__ */ jsx("span", {
-			className: cn(styles["close__inner-container"]),
-			children: /* @__PURE__ */ jsx(Icon_default, {
-				svgIcon: X_default,
-				color: "black",
-				size: iconSize,
-				isHovered
-			})
-		})
-	});
-});
-var Triangle = ({ isHover, isFocus, isActive, isError }) => {
-	const palette = (() => {
-		const colors = {
-			border: "var(--component-stickynote-border-normal)",
-			background: "var(--component-stickynote-background-fold-normal-light)"
-		};
-		if (!isError) {
-			if (isHover) colors.background = "var(--component-stickynote-background-fold-normal-medium)";
-			if (isFocus) {
-				colors.border = "var(--color-action-border-onlight-focus)";
-				colors.background = "var(--component-stickynote-background-fold-normal-medium)";
-			}
-			if (isActive) colors.background = "var(--component-stickynote-background-fold-normal-dark)";
-		} else {
-			colors.border = "var(--component-stickynote-border-error)";
-			colors.background = "var(--component-stickynote-background-fold-error-light)";
-			if (isHover) colors.background = "var(--component-stickynote-background-fold-error-medium)";
-			if (isFocus) {
-				colors.border = "var(--color-action-border-onlight-focus)";
-				colors.background = "var(--component-stickynote-background-fold-error-medium)";
-			}
-			if (isActive) colors.background = "var(--component-stickynote-background-fold-error-dark)";
-		}
-		return colors;
-	})();
-	let svg;
-	if (isFocus) svg = /* @__PURE__ */ jsxs("svg", {
-		width: "21",
-		height: "21",
-		viewBox: "0 0 21 21",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: [
-			/* @__PURE__ */ jsx("mask", {
-				id: "path-1-inside-1_7753_1401",
-				fill: "white",
-				children: /* @__PURE__ */ jsx("path", { d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z" })
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z",
-				fill: palette.background
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z",
-				fill: palette.border,
-				mask: "url(#path-1-inside-1_7753_1401)"
-			})
-		]
-	});
-	else svg = /* @__PURE__ */ jsxs("svg", {
-		width: "21",
-		height: "21",
-		viewBox: "0 0 21 21",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: [
-			/* @__PURE__ */ jsx("mask", {
-				id: "path-1-inside-1_7717_293537",
-				fill: "white",
-				children: /* @__PURE__ */ jsx("path", { d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z" })
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z",
-				fill: palette.background
-			}),
-			/* @__PURE__ */ jsx("path", {
-				d: "M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z",
-				fill: palette.border,
-				mask: "url(#path-1-inside-1_7717_293537)"
-			})
-		]
-	});
-	return /* @__PURE__ */ jsx(Fragment, { children: svg });
-};
-var Triangle_default = Triangle;
-var StickyNote = (props) => {
-	const { wrapperClassName, timestamp, onXButtonClick, arialabelXButton, footerText, error, errorText, onClickWhileDisabled, testId,...textareaProps } = props;
-	const errorTextId = useIdWithFallback(props.errorTextId);
-	const stickynoteRef = useRef(null);
-	const textareaRef = useRef(null);
-	const { isFocused: isTextareaFocused } = usePseudoClasses(textareaRef);
-	const { isHovered, isActive } = usePseudoClasses(stickynoteRef);
-	const handleWrapperClick = (event) => {
-		if (event.target.closest("button")) return;
-		if (textareaProps.disabled) {
-			if (onClickWhileDisabled) onClickWhileDisabled();
-			return;
-		}
-		textareaRef.current?.focus();
-	};
-	const resizeTextarea = () => {
-		const textarea = textareaRef.current;
-		if (!textarea) return;
-		resizeTarget(textarea);
-	};
-	const resizeTarget = (target) => {
-		target.style.height = "inherit";
-		target.style.height = `${target.scrollHeight}px`;
-	};
-	useLayoutEffect(() => {
-		resizeTextarea();
-		setTimeout(() => resizeTextarea(), 1e3);
-	}, []);
-	const handleChange = (e) => {
-		const textarea = e.target;
-		resizeTarget(textarea);
-		if (textareaProps.onChange) textareaProps.onChange(e);
-	};
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-		"data-testid": testId,
-		ref: stickynoteRef,
-		className: cn(styles["sticky-note"], wrapperClassName, {
-			[styles["sticky-note--focused"]]: isTextareaFocused,
-			[styles["sticky-note--active"]]: isActive,
-			[styles["sticky-note--hovered"]]: isHovered && !isTextareaFocused && !textareaProps.disabled,
-			[styles["sticky-note--error"]]: error
-		}),
-		onClick: handleWrapperClick,
-		role: "textbox",
-		tabIndex: -1,
-		onKeyDown: (e) => {
-			if (e.key === "Enter" || e.key === " ") handleWrapperClick(e);
-		},
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: cn(styles["sticky-note__header"]),
-				children: timestamp && /* @__PURE__ */ jsx("span", {
-					className: styles["sticky-note__header__timestamp"],
-					children: timestamp
-				})
-			}),
-			/* @__PURE__ */ jsx("textarea", {
-				ref: textareaRef,
-				"data-testid": `${testId}-textarea`,
-				className: cn(styles["sticky-note__textarea"], textareaProps.className),
-				...textareaProps,
-				onChange: handleChange,
-				"aria-describedby": getAriaDescribedBy(props, errorTextId)
-			}),
-			/* @__PURE__ */ jsx(Close_default, {
-				onClick: onXButtonClick,
-				ariaLabel: arialabelXButton,
-				testId: "closeButton"
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: cn(styles["sticky-note__footer"]),
-				children: footerText && /* @__PURE__ */ jsx("span", { children: footerText })
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: cn(styles["sticky-note__triangle"]),
-				children: /* @__PURE__ */ jsx(Triangle_default, {
-					isHover: isHovered,
-					isActive,
-					isFocus: isTextareaFocused,
-					isError: !!error
-				})
-			})
-		]
-	}), error && /* @__PURE__ */ jsx("p", {
-		className: styles["sticky-note__error-text"],
-		id: errorTextId,
-		children: errorText
-	})] });
-};
-var StickyNote_default = StickyNote;
-export { StickyNote_default as default };
-
-//# sourceMappingURL=index.js.map