boreal-ui 0.0.76 → 0.0.78

package/dist/next/Toggle.css

@@ -0,0 +1,464 @@
+@charset "UTF-8";
+/**
+ * ---------------------------------------------------------------------
+ * theme.scss
+ * ---------------------------------------------------------------------
+ * Global design tokens and theme configuration for the Boreal UI system.
+ * This file defines SCSS variables, maps, and constants for:
+ * - Colors (brand, background, feedback, text)
+ * - Fonts (families, sizes, weights)
+ * - Spacing
+ * - Border radii
+ * - Shadows
+ * - Transitions
+ * - Z-index layers
+ * - Thematic color maps
+ * - UI states (success, error, warning)
+ * - Rounding and shadow presets
+ * 
+ * All variables support the `!default` flag to allow overrides via user-defined themes.
+ * ---------------------------------------------------------------------
+ *
+ * == Color Palette ==
+ * $primary-color           – Brand primary color
+ * $secondary-color         – Secondary accent color
+ * $tertiary-color          – Alternate accent color
+ * $quaternary-color        – Alternate accent color
+ * $background-color        – Main background color (dark)
+ * $background-color-surface – Surface layer background (cards, modals)
+ * $error-color, $success-color, $warning-color – Feedback states
+ * $link-color              – Link default color
+ * $link-hover-color        – Link hover state
+ * $text-color, $text-color-light, $text-color-primary, $text-color-secondary – Text coloring
+ *
+ * == Typography ==
+ * $font-family-primary / secondary – Primary typefaces
+ * $font-size-xxs to $font-size-xxl – Font size scale
+ * $font-weight-light to bolder     – Font weights
+ *
+ * == Spacing ==
+ * $spacing-xxs to $spacing-xl – Margin/padding utility scale
+ *
+ * == Border Radius ==
+ * $border-radius-xs to full  – Border rounding presets
+ *
+ * == Shadows ==
+ * $box-shadow-light to intense – Shadow elevation levels
+ * $inverted-shadows            – Shadows used on dark surfaces (e.g. modals)
+ *
+ * == Transitions ==
+ * $transition-fast / default / slow – Standard easing transitions
+ *
+ * == Z-Index Layers ==
+ * $z-index-drawer   – For slide-out panels
+ * $z-index-modal    – For modals and overlays
+ * $z-index-tooltip  – Highest layer for tooltips and floating labels
+ *
+ * == Theme Map ==
+ * $themes: map of theme names (e.g. "primary", "secondary") to their visual styles
+ *  - Each theme includes: bg, hover, text, border, text-hover
+ *
+ * == State Map ==
+ * $states: visual styles for UI feedback states (success, error, warning)
+ *
+ * == Rounding / Shadow Maps ==
+ * $rounding: key-value pairs for component rounding levels
+ * $shadow: key-value pairs for shadow levels
+ */
+/**
+ * -----------------------------------------------------
+ * _breakpoints.scss
+ * -----------------------------------------------------
+ * These constants define the standard device-width breakpoints
+ * used in responsive media queries throughout the theme.
+ *
+ * - $breakpoint-xs: 320px  (Extra small, portrait phones)
+ * - $breakpoint-sm: 480px  (Small devices, larger phones)
+ * - $breakpoint-md: 768px  (Medium devices, tablets)
+ * - $breakpoint-lg: 1024px (Large devices, desktops)
+ * - $breakpoint-xl: 1280px (Extra large desktops)
+ * - $breakpoint-xxl: 1536px (Widescreens, large monitors)
+ *
+ * $breakpoints map:
+ *  Use this map to loop over breakpoints or access named values.
+ */
+._container_9odur_85 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+@media (width <= 319.98px) {
+  ._container_9odur_85 {
+    gap: var(--spacing-xxs);
+  }
+}
+@media (min-width: 1024px) {
+  ._container_9odur_85 {
+    gap: var(--spacing-md);
+  }
+}
+
+._label_9odur_101 {
+  font-family: var(--font-family-ui);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-label);
+  line-height: var(--line-height-label);
+  letter-spacing: var(--letter-spacing-label);
+  color: var(--text-color-primary);
+}
+@media (width <= 319.98px) {
+  ._label_9odur_101 {
+    font-size: var(--font-size-caption);
+  }
+}
+@media (min-width: 1024px) {
+  ._label_9odur_101 {
+    font-size: var(--font-size-body-sm);
+  }
+}
+
+._toggle_9odur_120 {
+  background-color: var(--disabled-color);
+  position: relative;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+  transition: background 0.3s ease-in-out;
+  outline: none;
+}
+._toggle_9odur_120:focus-visible {
+  outline: 2px solid var(--focus-outline-color, var(--primary-color));
+  outline-offset: 2px;
+  border-radius: 9999px;
+}
+._toggle_9odur_120 ._slider_9odur_135 {
+  background-color: var(--text-color-primary);
+  position: absolute;
+  left: 4px;
+  transition: transform 0.3s ease-in-out;
+}
+._toggle_9odur_120._active_9odur_141 {
+  background-color: var(--primary-color);
+}
+
+._xs_9odur_145 ._toggle_9odur_120 {
+  width: 30px;
+  height: 12px;
+}
+._xs_9odur_145 ._toggle_9odur_120 ._slider_9odur_135 {
+  width: 8px;
+  height: 8px;
+}
+._xs_9odur_145 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+  transform: translateX(15px);
+}
+@media (width <= 319.98px) {
+  ._xs_9odur_145 ._toggle_9odur_120 {
+    width: 27px;
+    height: 10.8px;
+  }
+  ._xs_9odur_145 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 7.2px;
+    height: 7.2px;
+  }
+  ._xs_9odur_145 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(12.75px);
+  }
+}
+@media (min-width: 1024px) {
+  ._xs_9odur_145 ._toggle_9odur_120 {
+    width: 31.5px;
+    height: 12.6px;
+  }
+  ._xs_9odur_145 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 8.4px;
+    height: 8.4px;
+  }
+  ._xs_9odur_145 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(15.75px);
+  }
+}
+
+._small_9odur_183 ._toggle_9odur_120 {
+  width: 40px;
+  height: 20px;
+}
+._small_9odur_183 ._toggle_9odur_120 ._slider_9odur_135 {
+  width: 16px;
+  height: 16px;
+}
+._small_9odur_183 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+  transform: translateX(18px);
+}
+@media (width <= 319.98px) {
+  ._small_9odur_183 ._toggle_9odur_120 {
+    width: 36px;
+    height: 18px;
+  }
+  ._small_9odur_183 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 14.4px;
+    height: 14.4px;
+  }
+  ._small_9odur_183 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(15.3px);
+  }
+}
+@media (min-width: 1024px) {
+  ._small_9odur_183 ._toggle_9odur_120 {
+    width: 42px;
+    height: 21px;
+  }
+  ._small_9odur_183 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 16.8px;
+    height: 16.8px;
+  }
+  ._small_9odur_183 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(18.9px);
+  }
+}
+
+._medium_9odur_221 ._toggle_9odur_120 {
+  width: 50px;
+  height: 28px;
+}
+._medium_9odur_221 ._toggle_9odur_120 ._slider_9odur_135 {
+  width: 20px;
+  height: 20px;
+}
+._medium_9odur_221 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+  transform: translateX(22px);
+}
+@media (width <= 319.98px) {
+  ._medium_9odur_221 ._toggle_9odur_120 {
+    width: 45px;
+    height: 25.2px;
+  }
+  ._medium_9odur_221 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 18px;
+    height: 18px;
+  }
+  ._medium_9odur_221 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(18.7px);
+  }
+}
+@media (min-width: 1024px) {
+  ._medium_9odur_221 ._toggle_9odur_120 {
+    width: 52.5px;
+    height: 29.4px;
+  }
+  ._medium_9odur_221 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 21px;
+    height: 21px;
+  }
+  ._medium_9odur_221 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(23.1px);
+  }
+}
+
+._large_9odur_259 ._toggle_9odur_120 {
+  width: 60px;
+  height: 34px;
+}
+._large_9odur_259 ._toggle_9odur_120 ._slider_9odur_135 {
+  width: 25px;
+  height: 25px;
+}
+._large_9odur_259 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+  transform: translateX(28px);
+}
+@media (width <= 319.98px) {
+  ._large_9odur_259 ._toggle_9odur_120 {
+    width: 54px;
+    height: 30.6px;
+  }
+  ._large_9odur_259 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 22.5px;
+    height: 22.5px;
+  }
+  ._large_9odur_259 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(23.8px);
+  }
+}
+@media (min-width: 1024px) {
+  ._large_9odur_259 ._toggle_9odur_120 {
+    width: 63px;
+    height: 35.7px;
+  }
+  ._large_9odur_259 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 26.25px;
+    height: 26.25px;
+  }
+  ._large_9odur_259 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(29.4px);
+  }
+}
+
+._xl_9odur_297 ._toggle_9odur_120 {
+  width: 70px;
+  height: 44px;
+}
+._xl_9odur_297 ._toggle_9odur_120 ._slider_9odur_135 {
+  width: 30px;
+  height: 30px;
+}
+._xl_9odur_297 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+  transform: translateX(32px);
+}
+@media (width <= 319.98px) {
+  ._xl_9odur_297 ._toggle_9odur_120 {
+    width: 63px;
+    height: 39.6px;
+  }
+  ._xl_9odur_297 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 27px;
+    height: 27px;
+  }
+  ._xl_9odur_297 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(27.2px);
+  }
+}
+@media (min-width: 1024px) {
+  ._xl_9odur_297 ._toggle_9odur_120 {
+    width: 73.5px;
+    height: 46.2px;
+  }
+  ._xl_9odur_297 ._toggle_9odur_120 ._slider_9odur_135 {
+    width: 31.5px;
+    height: 31.5px;
+  }
+  ._xl_9odur_297 ._toggle_9odur_120._active_9odur_141 ._slider_9odur_135 {
+    transform: translateX(33.6px);
+  }
+}
+
+._primary_9odur_335 ._toggle_9odur_120._active_9odur_141 {
+  background-color: var(--primary-color);
+}
+
+._secondary_9odur_339 ._toggle_9odur_120._active_9odur_141 {
+  background-color: var(--secondary-color);
+}
+
+._tertiary_9odur_343 ._toggle_9odur_120._active_9odur_141 {
+  background-color: var(--tertiary-color);
+}
+
+._quaternary_9odur_347 ._toggle_9odur_120._active_9odur_141 {
+  background-color: var(--quaternary-color);
+}
+
+._clear_9odur_351 ._toggle_9odur_120._active_9odur_141 {
+  background-color: transparent;
+}
+
+._success_9odur_355 ._toggle_9odur_120._active_9odur_141 {
+  outline: 2px solid var(--success-color);
+}
+
+._error_9odur_359 ._toggle_9odur_120._active_9odur_141 {
+  outline: 2px solid var(--error-color);
+}
+
+._warning_9odur_363 ._toggle_9odur_120._active_9odur_141 {
+  outline: 2px solid var(--warning-color);
+}
+
+._clear_9odur_351 ._toggle_9odur_120._active_9odur_141 {
+  outline: 2px solid var(--text-color-primary);
+}
+
+._disabled_9odur_371 {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.6;
+  box-shadow: none;
+}
+._disabled_9odur_371 ._toggle_9odur_120 {
+  background-color: var(--disabled-color);
+}
+
+._roundNone_9odur_381 {
+  border-radius: var(--border-radius-none);
+}
+._roundNone_9odur_381 ._slider_9odur_135 {
+  border-radius: var(--border-radius-none);
+}
+
+._roundSmall_9odur_388 {
+  border-radius: var(--border-radius-sm);
+}
+._roundSmall_9odur_388 ._slider_9odur_135 {
+  border-radius: var(--border-radius-sm);
+}
+
+._roundMedium_9odur_395 {
+  border-radius: var(--border-radius-md);
+}
+._roundMedium_9odur_395 ._slider_9odur_135 {
+  border-radius: var(--border-radius-md);
+}
+
+._roundLarge_9odur_402 {
+  border-radius: var(--border-radius-lg);
+}
+._roundLarge_9odur_402 ._slider_9odur_135 {
+  border-radius: var(--border-radius-lg);
+}
+
+._roundFull_9odur_409 {
+  border-radius: var(--border-radius-full);
+}
+._roundFull_9odur_409 ._slider_9odur_135 {
+  border-radius: var(--border-radius-full);
+}
+
+._shadowNone_9odur_416 {
+  box-shadow: var(--box-shadow-none);
+}
+
+._shadowLight_9odur_420 {
+  box-shadow: var(--box-shadow-light);
+}
+
+._shadowMedium_9odur_424 {
+  box-shadow: var(--box-shadow-medium);
+}
+
+._shadowStrong_9odur_428 {
+  box-shadow: var(--box-shadow-heavy);
+}
+
+._shadowIntense_9odur_432 {
+  box-shadow: var(--box-shadow-intense);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._toggle_9odur_120,
+  ._toggle_9odur_120 * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+@media (hover: none) {
+  ._toggle_9odur_120 {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  ._toggle_9odur_120 {
+    background: ButtonFace;
+    color: ButtonText;
+    border: 1px solid ButtonText;
+  }
+  ._toggle_9odur_120._active_9odur_141 {
+    background: Highlight;
+  }
+  ._toggle_9odur_120 ._slider_9odur_135 {
+    background: ButtonText;
+  }
+  ._toggle_9odur_120:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}

package/dist/next/Toggle.js

@@ -1,4 +1,4 @@
-import { T } from "./Toggle-BomUbOZa.js";
+import { T } from "./Toggle-CegN5JEB.js";
 export {
   T as default
 };

package/dist/next/{Toolbar-Be-YQqmX.js → Toolbar-DqBlTLsk.js}

@@ -1,41 +1,31 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { A as Avatar } from "./Avatar-nnjhILk-.js";
+import { A as Avatar } from "./Avatar-DymaVXDv.js";
 import { useMemo } from "react";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
 import { d as getDefaultTheme, b as getDefaultShadow, a as getDefaultRounding } from "./boreal-style-config-DsaRlxmw.js";
-const noScroll = "_noScroll_1w7wb_109";
-const errorMessage = "_errorMessage_1w7wb_110";
-const loadingContainer = "_loadingContainer_1w7wb_111";
-const hideScrollbar = "_hideScrollbar_1w7wb_103";
-const sr_only = "_sr_only_1w7wb_112";
-const toolbar = "_toolbar_1w7wb_637";
-const primary = "_primary_1w7wb_660";
-const secondary = "_secondary_1w7wb_664";
-const tertiary = "_tertiary_1w7wb_668";
-const quaternary = "_quaternary_1w7wb_672";
-const clear = "_clear_1w7wb_676";
-const section = "_section_1w7wb_681";
-const title = "_title_1w7wb_709";
-const avatarWrapper = "_avatarWrapper_1w7wb_729";
-const roundNone = "_roundNone_1w7wb_739";
-const roundSmall = "_roundSmall_1w7wb_744";
-const roundMedium = "_roundMedium_1w7wb_749";
-const roundLarge = "_roundLarge_1w7wb_754";
-const roundFull = "_roundFull_1w7wb_759";
-const shadowNone = "_shadowNone_1w7wb_764";
-const shadowLight = "_shadowLight_1w7wb_768";
-const shadowMedium = "_shadowMedium_1w7wb_772";
-const shadowStrong = "_shadowStrong_1w7wb_776";
-const shadowIntense = "_shadowIntense_1w7wb_780";
-const spin = "_spin_1w7wb_1";
-const pulse = "_pulse_1w7wb_1";
+import './Toolbar.css';const toolbar = "_toolbar_1vsps_204";
+const primary = "_primary_1vsps_227";
+const secondary = "_secondary_1vsps_231";
+const tertiary = "_tertiary_1vsps_235";
+const quaternary = "_quaternary_1vsps_239";
+const clear = "_clear_1vsps_243";
+const section = "_section_1vsps_248";
+const title = "_title_1vsps_276";
+const avatarWrapper = "_avatarWrapper_1vsps_296";
+const roundNone = "_roundNone_1vsps_306";
+const roundSmall = "_roundSmall_1vsps_311";
+const roundMedium = "_roundMedium_1vsps_316";
+const roundLarge = "_roundLarge_1vsps_321";
+const roundFull = "_roundFull_1vsps_326";
+const shadowNone = "_shadowNone_1vsps_331";
+const shadowLight = "_shadowLight_1vsps_335";
+const shadowMedium = "_shadowMedium_1vsps_339";
+const shadowStrong = "_shadowStrong_1vsps_343";
+const shadowIntense = "_shadowIntense_1vsps_347";
+const spin = "_spin_1vsps_1";
+const pulse = "_pulse_1vsps_1";
 const styles = {
-  noScroll,
-  errorMessage,
-  loadingContainer,
-  hideScrollbar,
-  sr_only,
   toolbar,
   primary,
   secondary,
@@ -55,15 +45,15 @@ const styles = {
   shadowMedium,
   shadowStrong,
   shadowIntense,
-  "fade-in": "_fade-in_1w7wb_1",
-  "slide-up": "_slide-up_1w7wb_1",
-  "spin-3d": "_spin-3d_1w7wb_1",
+  "fade-in": "_fade-in_1vsps_1",
+  "slide-up": "_slide-up_1vsps_1",
+  "spin-3d": "_spin-3d_1vsps_1",
   spin,
   pulse,
-  "fade-in-up": "_fade-in-up_1w7wb_1",
-  "progress-grow": "_progress-grow_1w7wb_1",
-  "indeterminate-move": "_indeterminate-move_1w7wb_1",
-  "skeleton-loading": "_skeleton-loading_1w7wb_1"
+  "fade-in-up": "_fade-in-up_1vsps_1",
+  "progress-grow": "_progress-grow_1vsps_1",
+  "indeterminate-move": "_indeterminate-move_1vsps_1",
+  "skeleton-loading": "_skeleton-loading_1vsps_1"
 };
 const ToolbarBase = ({
   title: title2,
@@ -188,4 +178,4 @@ Toolbar.displayName = "Toolbar";
 export {
   Toolbar as T
 };
-//# sourceMappingURL=Toolbar-Be-YQqmX.js.map
+//# sourceMappingURL=Toolbar-DqBlTLsk.js.map

package/dist/next/{Toolbar-Be-YQqmX.js.map → Toolbar-DqBlTLsk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Toolbar-Be-YQqmX.js","sources":["../../src/components/Toolbar/ToolbarBase.tsx","../../src/components/Toolbar/next/Toolbar.tsx"],"sourcesContent":["import React, { JSX, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToolbarBaseProps } from \"./Toolbar.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ToolbarBase: React.FC<ToolbarBaseProps> = ({\r\n  title,\r\n  titleId,\r\n  left,\r\n  center,\r\n  right,\r\n  avatar,\r\n  theme = getDefaultTheme(),\r\n  shadow = getDefaultShadow(),\r\n  rounding = getDefaultRounding(),\r\n  className = \"\",\r\n  \"data-testid\": testId = \"toolbar\",\r\n  \"aria-label\": ariaLabelProp,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  leftAriaLabel = \"Toolbar left section\",\r\n  centerAriaLabel = \"Toolbar center section\",\r\n  rightAriaLabel = \"Toolbar right section\",\r\n  AvatarComponent,\r\n  classMap,\r\n  \"aria-label\": ariaLabel = \"Toolbar\",\r\n  headingLevel = 1,\r\n}): JSX.Element => {\r\n  const safeHeading = Math.min(6, Math.max(1, headingLevel));\r\n  const TitleTag = `h${safeHeading}` as keyof JSX.IntrinsicElements;\r\n\r\n  const toolbarClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.toolbar,\r\n        classMap[theme],\r\n        className,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n      ),\r\n    [classMap, theme, className, shadow, rounding],\r\n  );\r\n\r\n  const resolvedAriaLabel = ariaLabelledBy\r\n    ? undefined\r\n    : (ariaLabelProp ?? ariaLabel);\r\n\r\n  const avatarAriaHidden =\r\n    avatar && !avatar.name && !avatar.onClick && !avatar[\"aria-label\"]\r\n      ? true\r\n      : undefined;\r\n\r\n  const resolvedTitleId = title ? (titleId ?? `${testId}-title`) : undefined;\r\n\r\n  return (\r\n    <div\r\n      className={toolbarClass}\r\n      role=\"toolbar\"\r\n      aria-orientation=\"horizontal\"\r\n      aria-label={resolvedAriaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={leftAriaLabel}\r\n        data-testid={`${testId}-left`}\r\n      >\r\n        {left}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={centerAriaLabel}\r\n        data-testid={`${testId}-center`}\r\n      >\r\n        {title && (\r\n          <TitleTag\r\n            id={resolvedTitleId}\r\n            className={classMap.title}\r\n            data-testid={`${testId}-title`}\r\n          >\r\n            {title}\r\n          </TitleTag>\r\n        )}\r\n        {center}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={rightAriaLabel}\r\n        data-testid={`${testId}-right`}\r\n      >\r\n        {right}\r\n        {avatar && (\r\n          <div\r\n            className={classMap.avatarWrapper}\r\n            data-testid={`${testId}-avatar`}\r\n          >\r\n            <AvatarComponent\r\n              name={avatar.name}\r\n              src={avatar.src}\r\n              size={avatar.size || \"medium\"}\r\n              shape={avatar.shape || \"circle\"}\r\n              theme={avatar.theme}\r\n              outline={avatar.outline}\r\n              onClick={avatar.onClick}\r\n              aria-label={avatar[\"aria-label\"]}\r\n              aria-hidden={avatarAriaHidden}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nToolbarBase.displayName = \"ToolbarBase\";\r\nexport default ToolbarBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./Toolbar.module.scss\";\r\nimport Avatar from \"../../Avatar/next/Avatar\";\r\nimport ToolbarBase from \"../ToolbarBase\";\r\nimport { ToolbarProps } from \"../Toolbar.types\";\r\n\r\nconst Toolbar: React.FC<ToolbarProps> = (props) => (\r\n  <ToolbarBase {...props} AvatarComponent={Avatar} classMap={styles} />\r\n);\r\nToolbar.displayName = \"Toolbar\";\r\nexport default Toolbar;\r\n"],"names":["title"],"mappings":"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"}
+{"version":3,"file":"Toolbar-DqBlTLsk.js","sources":["../../src/components/Toolbar/ToolbarBase.tsx","../../src/components/Toolbar/next/Toolbar.tsx"],"sourcesContent":["import React, { JSX, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { ToolbarBaseProps } from \"./Toolbar.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst ToolbarBase: React.FC<ToolbarBaseProps> = ({\r\n  title,\r\n  titleId,\r\n  left,\r\n  center,\r\n  right,\r\n  avatar,\r\n  theme = getDefaultTheme(),\r\n  shadow = getDefaultShadow(),\r\n  rounding = getDefaultRounding(),\r\n  className = \"\",\r\n  \"data-testid\": testId = \"toolbar\",\r\n  \"aria-label\": ariaLabelProp,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  leftAriaLabel = \"Toolbar left section\",\r\n  centerAriaLabel = \"Toolbar center section\",\r\n  rightAriaLabel = \"Toolbar right section\",\r\n  AvatarComponent,\r\n  classMap,\r\n  \"aria-label\": ariaLabel = \"Toolbar\",\r\n  headingLevel = 1,\r\n}): JSX.Element => {\r\n  const safeHeading = Math.min(6, Math.max(1, headingLevel));\r\n  const TitleTag = `h${safeHeading}` as keyof JSX.IntrinsicElements;\r\n\r\n  const toolbarClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.toolbar,\r\n        classMap[theme],\r\n        className,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n      ),\r\n    [classMap, theme, className, shadow, rounding],\r\n  );\r\n\r\n  const resolvedAriaLabel = ariaLabelledBy\r\n    ? undefined\r\n    : (ariaLabelProp ?? ariaLabel);\r\n\r\n  const avatarAriaHidden =\r\n    avatar && !avatar.name && !avatar.onClick && !avatar[\"aria-label\"]\r\n      ? true\r\n      : undefined;\r\n\r\n  const resolvedTitleId = title ? (titleId ?? `${testId}-title`) : undefined;\r\n\r\n  return (\r\n    <div\r\n      className={toolbarClass}\r\n      role=\"toolbar\"\r\n      aria-orientation=\"horizontal\"\r\n      aria-label={resolvedAriaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-describedby={ariaDescribedBy}\r\n      data-testid={testId}\r\n    >\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={leftAriaLabel}\r\n        data-testid={`${testId}-left`}\r\n      >\r\n        {left}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={centerAriaLabel}\r\n        data-testid={`${testId}-center`}\r\n      >\r\n        {title && (\r\n          <TitleTag\r\n            id={resolvedTitleId}\r\n            className={classMap.title}\r\n            data-testid={`${testId}-title`}\r\n          >\r\n            {title}\r\n          </TitleTag>\r\n        )}\r\n        {center}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.section}\r\n        role=\"group\"\r\n        aria-label={rightAriaLabel}\r\n        data-testid={`${testId}-right`}\r\n      >\r\n        {right}\r\n        {avatar && (\r\n          <div\r\n            className={classMap.avatarWrapper}\r\n            data-testid={`${testId}-avatar`}\r\n          >\r\n            <AvatarComponent\r\n              name={avatar.name}\r\n              src={avatar.src}\r\n              size={avatar.size || \"medium\"}\r\n              shape={avatar.shape || \"circle\"}\r\n              theme={avatar.theme}\r\n              outline={avatar.outline}\r\n              onClick={avatar.onClick}\r\n              aria-label={avatar[\"aria-label\"]}\r\n              aria-hidden={avatarAriaHidden}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nToolbarBase.displayName = \"ToolbarBase\";\r\nexport default ToolbarBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./Toolbar.module.scss\";\r\nimport Avatar from \"../../Avatar/next/Avatar\";\r\nimport ToolbarBase from \"../ToolbarBase\";\r\nimport { ToolbarProps } from \"../Toolbar.types\";\r\n\r\nconst Toolbar: React.FC<ToolbarProps> = (props) => (\r\n  <ToolbarBase {...props} AvatarComponent={Avatar} classMap={styles} />\r\n);\r\nToolbar.displayName = \"Toolbar\";\r\nexport default Toolbar;\r\n"],"names":["title"],"mappings":"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"}

package/dist/next/{Toolbar-roQbIEcD.cjs → Toolbar-DqsQznCj.cjs}

@@ -1,42 +1,32 @@
 "use strict";
-const require$$2 = require("react/jsx-runtime");
-const Avatar = require("./Avatar-DL_juTQA.cjs");
+require('./Toolbar.css');const require$$2 = require("react/jsx-runtime");
+const Avatar = require("./Avatar-C-Z-ZPt8.cjs");
 const React = require("react");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
 const borealStyleConfig = require("./boreal-style-config-C1UIwOFN.cjs");
-const noScroll = "_noScroll_1w7wb_109";
-const errorMessage = "_errorMessage_1w7wb_110";
-const loadingContainer = "_loadingContainer_1w7wb_111";
-const hideScrollbar = "_hideScrollbar_1w7wb_103";
-const sr_only = "_sr_only_1w7wb_112";
-const toolbar = "_toolbar_1w7wb_637";
-const primary = "_primary_1w7wb_660";
-const secondary = "_secondary_1w7wb_664";
-const tertiary = "_tertiary_1w7wb_668";
-const quaternary = "_quaternary_1w7wb_672";
-const clear = "_clear_1w7wb_676";
-const section = "_section_1w7wb_681";
-const title = "_title_1w7wb_709";
-const avatarWrapper = "_avatarWrapper_1w7wb_729";
-const roundNone = "_roundNone_1w7wb_739";
-const roundSmall = "_roundSmall_1w7wb_744";
-const roundMedium = "_roundMedium_1w7wb_749";
-const roundLarge = "_roundLarge_1w7wb_754";
-const roundFull = "_roundFull_1w7wb_759";
-const shadowNone = "_shadowNone_1w7wb_764";
-const shadowLight = "_shadowLight_1w7wb_768";
-const shadowMedium = "_shadowMedium_1w7wb_772";
-const shadowStrong = "_shadowStrong_1w7wb_776";
-const shadowIntense = "_shadowIntense_1w7wb_780";
-const spin = "_spin_1w7wb_1";
-const pulse = "_pulse_1w7wb_1";
+const toolbar = "_toolbar_1vsps_204";
+const primary = "_primary_1vsps_227";
+const secondary = "_secondary_1vsps_231";
+const tertiary = "_tertiary_1vsps_235";
+const quaternary = "_quaternary_1vsps_239";
+const clear = "_clear_1vsps_243";
+const section = "_section_1vsps_248";
+const title = "_title_1vsps_276";
+const avatarWrapper = "_avatarWrapper_1vsps_296";
+const roundNone = "_roundNone_1vsps_306";
+const roundSmall = "_roundSmall_1vsps_311";
+const roundMedium = "_roundMedium_1vsps_316";
+const roundLarge = "_roundLarge_1vsps_321";
+const roundFull = "_roundFull_1vsps_326";
+const shadowNone = "_shadowNone_1vsps_331";
+const shadowLight = "_shadowLight_1vsps_335";
+const shadowMedium = "_shadowMedium_1vsps_339";
+const shadowStrong = "_shadowStrong_1vsps_343";
+const shadowIntense = "_shadowIntense_1vsps_347";
+const spin = "_spin_1vsps_1";
+const pulse = "_pulse_1vsps_1";
 const styles = {
-  noScroll,
-  errorMessage,
-  loadingContainer,
-  hideScrollbar,
-  sr_only,
   toolbar,
   primary,
   secondary,
@@ -56,15 +46,15 @@ const styles = {
   shadowMedium,
   shadowStrong,
   shadowIntense,
-  "fade-in": "_fade-in_1w7wb_1",
-  "slide-up": "_slide-up_1w7wb_1",
-  "spin-3d": "_spin-3d_1w7wb_1",
+  "fade-in": "_fade-in_1vsps_1",
+  "slide-up": "_slide-up_1vsps_1",
+  "spin-3d": "_spin-3d_1vsps_1",
   spin,
   pulse,
-  "fade-in-up": "_fade-in-up_1w7wb_1",
-  "progress-grow": "_progress-grow_1w7wb_1",
-  "indeterminate-move": "_indeterminate-move_1w7wb_1",
-  "skeleton-loading": "_skeleton-loading_1w7wb_1"
+  "fade-in-up": "_fade-in-up_1vsps_1",
+  "progress-grow": "_progress-grow_1vsps_1",
+  "indeterminate-move": "_indeterminate-move_1vsps_1",
+  "skeleton-loading": "_skeleton-loading_1vsps_1"
 };
 const ToolbarBase = ({
   title: title2,
@@ -187,4 +177,4 @@ ToolbarBase.displayName = "ToolbarBase";
 const Toolbar = (props) => /* @__PURE__ */ require$$2.jsx(ToolbarBase, { ...props, AvatarComponent: Avatar.Avatar, classMap: styles });
 Toolbar.displayName = "Toolbar";
 exports.Toolbar = Toolbar;
-//# sourceMappingURL=Toolbar-roQbIEcD.cjs.map
+//# sourceMappingURL=Toolbar-DqsQznCj.cjs.map