@plumile/ui 0.1.130 → 0.1.132

package/lib/esm/atomic/molecules/markdown/components/MarkdownText.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownText.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownText.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.js';\nimport {\n  markdownFontSizeVar,\n  markdownTextColorVar,\n} from '../markdownVars.css.js';\n\nexport const text = style([\n  sprinkles({\n    lineHeight: 1.6,\n    wordBreak: 'break-word',\n    whiteSpace: 'pre-wrap',\n  }),\n  {\n    color: fallbackVar(markdownTextColorVar, vars.colors.text),\n    fontSize: fallbackVar(markdownFontSizeVar, vars.fontSize.base),\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"MarkdownText.css.js","names":[],"sources":["../../../../../../src/atomic/molecules/markdown/components/MarkdownText.css.ts"],"sourcesContent":["import { style, fallbackVar } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../../../theme/sprinkles.css.js';\nimport { vars } from '../../../../theme/themeContract.css.js';\nimport {\n  markdownFontSizeVar,\n  markdownTextColorVar,\n} from '../markdownVars.css.js';\n\nexport const text = style([\n  sprinkles({\n    lineHeight: 1.6,\n    wordBreak: 'break-word',\n    whiteSpace: 'pre-wrap',\n  }),\n  {\n    color: fallbackVar(markdownTextColorVar, vars.colors.text),\n    fontSize: fallbackVar(markdownFontSizeVar, vars.fontSize.base),\n  },\n]);\n"],"mappings":""}

package/lib/esm/atomic/molecules/markdown/markdownVars.css.js

@@ -1,4 +1,3 @@
-/* empty css                            */
 //#region src/atomic/molecules/markdown/markdownVars.css.ts
 var e = "var(--_1pjotr20)", t = "var(--_1pjotr21)", n = "var(--_1pjotr22)", r = "var(--_1pjotr23)", i = "var(--_1pjotr24)", a = "var(--_1pjotr25)";
 //#endregion

package/lib/esm/atomic/molecules/tabs/tabs.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/tabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: 2,\n  justifyContent: 'center',\n});\n\nconst tabBase = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 1,\n    borderTopLeftRadius: 'md',\n    borderTopRightRadius: 'md',\n    paddingX: 4,\n    paddingY: 2,\n    fontSize: 'sm',\n    color: 'textSecondary',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    borderBottomWidth: 2,\n    borderBottomColor: 'transparent',\n    fontWeight: 'medium',\n    textDecoration: 'none',\n    outline: 'none',\n    position: 'relative',\n  }),\n  {\n    marginBottom: '-1px',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n        color: vars.colors.primary,\n        borderBottomColor: vars.colors.primary,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: tabBase,\n  variants: {\n    state: {\n      default: style({\n        selectors: {\n          '&:hover': {\n            color: vars.colors.primary,\n            borderBottomColor: vars.colors.primaryLight,\n          },\n        },\n      }),\n      active: sprinkles({\n        color: 'primary',\n        borderBottomColor: 'primary',\n        fontWeight: 'semibold',\n      }),\n      disabled: sprinkles({\n        color: 'textMuted',\n        pointerEvents: 'none',\n        cursor: 'not-allowed',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type TabRecipeVariants = RecipeVariants<typeof tabRecipe>;\n"],"mappings":""}
+{"version":3,"file":"tabs.css.js","names":[],"sources":["../../../../../src/atomic/molecules/tabs/tabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: 2,\n  justifyContent: 'center',\n});\n\nconst tabBase = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 1,\n    borderTopLeftRadius: 'md',\n    borderTopRightRadius: 'md',\n    paddingX: 4,\n    paddingY: 2,\n    fontSize: 'sm',\n    color: 'textSecondary',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    borderBottomWidth: 2,\n    borderBottomColor: 'transparent',\n    fontWeight: 'medium',\n    textDecoration: 'none',\n    outline: 'none',\n    position: 'relative',\n  }),\n  {\n    marginBottom: '-1px',\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n        color: vars.colors.primary,\n        borderBottomColor: vars.colors.primary,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: tabBase,\n  variants: {\n    state: {\n      default: style({\n        selectors: {\n          '&:hover': {\n            color: vars.colors.primary,\n            borderBottomColor: vars.colors.primaryLight,\n          },\n        },\n      }),\n      active: sprinkles({\n        color: 'primary',\n        borderBottomColor: 'primary',\n        fontWeight: 'semibold',\n      }),\n      disabled: sprinkles({\n        color: 'textMuted',\n        pointerEvents: 'none',\n        cursor: 'not-allowed',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type TabRecipeVariants = RecipeVariants<typeof tabRecipe>;\n"],"mappings":""}

package/lib/esm/atomic/molecules/toast/toast.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.css.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/toast.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const viewport = sprinkles({\n  position: 'fixed',\n  right: 4,\n  bottom: 4,\n  zIndex: 'modal',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nconst slideIn = keyframes({\n  from: { transform: 'translateY(10px)', opacity: 0 },\n  to: { transform: 'translateY(0)', opacity: 1 },\n});\n\nexport const toast = style([\n  sprinkles({\n    backgroundColor: 'white',\n    borderColor: 'border',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 1,\n    paddingX: 4,\n    paddingY: 3,\n    borderRadius: 'lg',\n    boxShadow: 'lg',\n  }),\n  {\n    width: 'min(28rem, calc(100vw - 2rem))',\n    animation: `${slideIn} 140ms ease-out`,\n  },\n]);\n\nexport const kindRecipe = recipe({\n  variants: {\n    kind: {\n      info: { borderColor: vars.colors['blue-200'] },\n      warning: { borderColor: vars.colors['amber-200'] },\n      error: { borderColor: vars.colors['red-200'] },\n    },\n  },\n  defaultVariants: {\n    kind: 'info',\n  },\n});\n\nexport type KindVariants = RecipeVariants<typeof kindRecipe>;\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 2,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const message = sprinkles({\n  fontSize: 'sm',\n});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  marginTop: 1,\n});\n\nexport const closeButton = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 8,\n  height: 8,\n  borderRadius: 'md',\n  borderStyle: 'none',\n  borderWidth: 0,\n  backgroundColor: 'transparent',\n  cursor: 'pointer',\n});\n\nexport const progressTrack = style([\n  sprinkles({\n    marginTop: 1,\n    borderRadius: 'full',\n  }),\n  {\n    height: 4,\n    backgroundColor: vars.colors['blue-50'],\n    overflow: 'hidden',\n  },\n]);\n\nconst progressFill = keyframes({\n  from: { width: '0%' },\n  to: { width: '100%' },\n});\n\nexport const progressBar = style([\n  {\n    height: '100%',\n    width: '0%',\n    backgroundColor: vars.colors['blue-400'],\n    animationName: progressFill,\n    animationTimingFunction: 'linear',\n    animationFillMode: 'forwards',\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"toast.css.js","names":[],"sources":["../../../../../src/atomic/molecules/toast/toast.css.ts"],"sourcesContent":["import { style, keyframes } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const viewport = sprinkles({\n  position: 'fixed',\n  right: 4,\n  bottom: 4,\n  zIndex: 'modal',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nconst slideIn = keyframes({\n  from: { transform: 'translateY(10px)', opacity: 0 },\n  to: { transform: 'translateY(0)', opacity: 1 },\n});\n\nexport const toast = style([\n  sprinkles({\n    backgroundColor: 'white',\n    borderColor: 'border',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 1,\n    paddingX: 4,\n    paddingY: 3,\n    borderRadius: 'lg',\n    boxShadow: 'lg',\n  }),\n  {\n    width: 'min(28rem, calc(100vw - 2rem))',\n    animation: `${slideIn} 140ms ease-out`,\n  },\n]);\n\nexport const kindRecipe = recipe({\n  variants: {\n    kind: {\n      info: { borderColor: vars.colors['blue-200'] },\n      warning: { borderColor: vars.colors['amber-200'] },\n      error: { borderColor: vars.colors['red-200'] },\n    },\n  },\n  defaultVariants: {\n    kind: 'info',\n  },\n});\n\nexport type KindVariants = RecipeVariants<typeof kindRecipe>;\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 2,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const message = sprinkles({\n  fontSize: 'sm',\n});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  marginTop: 1,\n});\n\nexport const closeButton = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 8,\n  height: 8,\n  borderRadius: 'md',\n  borderStyle: 'none',\n  borderWidth: 0,\n  backgroundColor: 'transparent',\n  cursor: 'pointer',\n});\n\nexport const progressTrack = style([\n  sprinkles({\n    marginTop: 1,\n    borderRadius: 'full',\n  }),\n  {\n    height: 4,\n    backgroundColor: vars.colors['blue-50'],\n    overflow: 'hidden',\n  },\n]);\n\nconst progressFill = keyframes({\n  from: { width: '0%' },\n  to: { width: '100%' },\n});\n\nexport const progressBar = style([\n  {\n    height: '100%',\n    width: '0%',\n    backgroundColor: vars.colors['blue-400'],\n    animationName: progressFill,\n    animationTimingFunction: 'linear',\n    animationFillMode: 'forwards',\n  },\n]);\n"],"mappings":""}

package/lib/esm/atomic/organisms/sidebar/navigationSidebar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigationSidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/navigationSidebar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const collapseButton = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'brandPrimaryRed',\n    color: 'brandPrimaryRed',\n    backgroundColor: 'brandWhite',\n    height: 10,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandSecondaryOrange,\n        color: vars.colors.brandWhite,\n        boxShadow: vars.boxShadow.brandGlow,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\n      },\n    },\n  },\n]);\n\nexport const collapseButtonStateRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: {\n        width: vars.spacing[10],\n        paddingInline: 0,\n      },\n      expanded: {\n        paddingInline: vars.spacing[3],\n        width: 'auto',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type CollapseButtonStateVariants = RecipeVariants<\n  typeof collapseButtonStateRecipe\n>;\n\nexport const collapseButtonLabel = sprinkles({\n  marginLeft: 2,\n  fontSize: 'sm',\n  fontWeight: 'medium',\n});\n\nexport const collapsibleSection = sprinkles({\n  display: 'grid',\n  transitionProperty: 'gridTemplateRowsOpacity',\n  transitionDuration: 300,\n  transitionTimingFunction: 'ease-in-out',\n});\n\nexport const collapsibleStateRecipe = recipe({\n  variants: {\n    state: {\n      expanded: {\n        gridTemplateRows: '1fr',\n        opacity: 1,\n      },\n      collapsed: {\n        gridTemplateRows: '0fr',\n        opacity: 0,\n        pointerEvents: 'none',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'collapsed',\n  },\n});\n\nexport type CollapsibleStateVariants = RecipeVariants<\n  typeof collapsibleStateRecipe\n>;\n\nexport const collapsibleContent = sprinkles({\n  marginTop: 1,\n  marginLeft: 5,\n  borderLeftWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  paddingLeft: 3,\n  overflow: 'hidden',\n});\n\nexport const collapsibleItem = style({\n  selectors: {\n    '&:not(:first-child)': {\n      marginTop: vars.spacing[1],\n    },\n  },\n});\n\nexport const itemWrapper = sprinkles({\n  position: 'relative',\n});\n\nconst interactiveBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: 'full',\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    lineHeight: 1.2,\n    textAlign: 'left',\n    backgroundColor: 'transparent',\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandLightGray,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n      },\n    },\n  },\n]);\n\nexport const navButton = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'bold', color: 'brandDarkGray' }),\n]);\n\nconst navLinkBase = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'semibold', textDecoration: 'none' }),\n]);\n\nexport const navLinkRecipe = recipe({\n  base: navLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'brandDarkGray',\n      }),\n      active: sprinkles({\n        backgroundImage: 'brandDiagonal',\n        color: 'brandWhite',\n        borderColor: 'brandPrimaryRed',\n        borderRadius: 'xl',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type NavLinkVariants = RecipeVariants<typeof navLinkRecipe>;\n\nexport const navGapRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: sprinkles({ columnGap: 0 }),\n      expanded: sprinkles({ columnGap: 3 }),\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type NavGapVariants = RecipeVariants<typeof navGapRecipe>;\n\nexport const navWithTrailingAction = sprinkles({\n  paddingRight: 12,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  flexShrink: 0,\n});\n\nconst fadingLayer = sprinkles({\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconBaseLayer = fadingLayer;\n\nexport const iconHiddenOnHover = style([\n  fadingLayer,\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const iconVisibleOnHover = style([\n  fadingLayer,\n  sprinkles({ opacity: 0 }),\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n    },\n  },\n]);\n\nexport const trailingIconWrapper = sprinkles({\n  position: 'relative',\n  marginLeft: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n});\n\nexport const trailingActionButton = style([\n  sprinkles({\n    position: 'absolute',\n    top: '1/2',\n    right: 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    backgroundColor: 'brandWhite',\n    color: 'brandPrimaryRed',\n    opacity: 0,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    transform: 'translateY(-50%)',\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n      '&:hover': {\n        backgroundColor: vars.colors.brandSecondaryOrange,\n        color: vars.colors.brandWhite,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\n        opacity: 1,\n      },\n    },\n  },\n]);\n\nexport const trailingActionIconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n});\n\nexport const trailingActionIconHidden = style([\n  sprinkles({\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 0 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const trailingActionIconVisible = style([\n  sprinkles({\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 1 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 1 },\n    },\n  },\n]);\n\nconst childLinkBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    lineHeight: 1.2,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandLightGray,\n        color: vars.colors.brandDarkGray,\n      },\n    },\n  },\n]);\n\nexport const childLinkRecipe = recipe({\n  base: childLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'brandDarkGray',\n      }),\n      active: sprinkles({\n        backgroundColor: 'brandSecondaryOrange',\n        color: 'brandWhite',\n        fontWeight: 'semibold',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type ChildLinkVariants = RecipeVariants<typeof childLinkRecipe>;\n\nexport const childIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  flexShrink: 0,\n  color: 'brandPrimaryRed',\n});\n\nexport const childLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}
+{"version":3,"file":"navigationSidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/navigationSidebar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const collapseButton = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'brandPrimaryRed',\n    color: 'brandPrimaryRed',\n    backgroundColor: 'brandWhite',\n    height: 10,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandSecondaryOrange,\n        color: vars.colors.brandWhite,\n        boxShadow: vars.boxShadow.brandGlow,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\n      },\n    },\n  },\n]);\n\nexport const collapseButtonStateRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: {\n        width: vars.spacing[10],\n        paddingInline: 0,\n      },\n      expanded: {\n        paddingInline: vars.spacing[3],\n        width: 'auto',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type CollapseButtonStateVariants = RecipeVariants<\n  typeof collapseButtonStateRecipe\n>;\n\nexport const collapseButtonLabel = sprinkles({\n  marginLeft: 2,\n  fontSize: 'sm',\n  fontWeight: 'medium',\n});\n\nexport const collapsibleSection = sprinkles({\n  display: 'grid',\n  transitionProperty: 'gridTemplateRowsOpacity',\n  transitionDuration: 300,\n  transitionTimingFunction: 'ease-in-out',\n});\n\nexport const collapsibleStateRecipe = recipe({\n  variants: {\n    state: {\n      expanded: {\n        gridTemplateRows: '1fr',\n        opacity: 1,\n      },\n      collapsed: {\n        gridTemplateRows: '0fr',\n        opacity: 0,\n        pointerEvents: 'none',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'collapsed',\n  },\n});\n\nexport type CollapsibleStateVariants = RecipeVariants<\n  typeof collapsibleStateRecipe\n>;\n\nexport const collapsibleContent = sprinkles({\n  marginTop: 1,\n  marginLeft: 5,\n  borderLeftWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  paddingLeft: 3,\n  overflow: 'hidden',\n});\n\nexport const collapsibleItem = style({\n  selectors: {\n    '&:not(:first-child)': {\n      marginTop: vars.spacing[1],\n    },\n  },\n});\n\nexport const itemWrapper = sprinkles({\n  position: 'relative',\n});\n\nconst interactiveBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: 'full',\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    lineHeight: 1.2,\n    textAlign: 'left',\n    backgroundColor: 'transparent',\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandLightGray,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n      },\n    },\n  },\n]);\n\nexport const navButton = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'bold', color: 'brandDarkGray' }),\n]);\n\nconst navLinkBase = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'semibold', textDecoration: 'none' }),\n]);\n\nexport const navLinkRecipe = recipe({\n  base: navLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'brandDarkGray',\n      }),\n      active: sprinkles({\n        backgroundImage: 'brandDiagonal',\n        color: 'brandWhite',\n        borderColor: 'brandPrimaryRed',\n        borderRadius: 'xl',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type NavLinkVariants = RecipeVariants<typeof navLinkRecipe>;\n\nexport const navGapRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: sprinkles({ columnGap: 0 }),\n      expanded: sprinkles({ columnGap: 3 }),\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type NavGapVariants = RecipeVariants<typeof navGapRecipe>;\n\nexport const navWithTrailingAction = sprinkles({\n  paddingRight: 12,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  flexShrink: 0,\n});\n\nconst fadingLayer = sprinkles({\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconBaseLayer = fadingLayer;\n\nexport const iconHiddenOnHover = style([\n  fadingLayer,\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const iconVisibleOnHover = style([\n  fadingLayer,\n  sprinkles({ opacity: 0 }),\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n    },\n  },\n]);\n\nexport const trailingIconWrapper = sprinkles({\n  position: 'relative',\n  marginLeft: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n});\n\nexport const trailingActionButton = style([\n  sprinkles({\n    position: 'absolute',\n    top: '1/2',\n    right: 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    backgroundColor: 'brandWhite',\n    color: 'brandPrimaryRed',\n    opacity: 0,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    transform: 'translateY(-50%)',\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n      '&:hover': {\n        backgroundColor: vars.colors.brandSecondaryOrange,\n        color: vars.colors.brandWhite,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\n        opacity: 1,\n      },\n    },\n  },\n]);\n\nexport const trailingActionIconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n});\n\nexport const trailingActionIconHidden = style([\n  sprinkles({\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 0 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const trailingActionIconVisible = style([\n  sprinkles({\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 1 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 1 },\n    },\n  },\n]);\n\nconst childLinkBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    lineHeight: 1.2,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandLightGray,\n        color: vars.colors.brandDarkGray,\n      },\n    },\n  },\n]);\n\nexport const childLinkRecipe = recipe({\n  base: childLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'brandDarkGray',\n      }),\n      active: sprinkles({\n        backgroundColor: 'brandSecondaryOrange',\n        color: 'brandWhite',\n        fontWeight: 'semibold',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type ChildLinkVariants = RecipeVariants<typeof childLinkRecipe>;\n\nexport const childIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  flexShrink: 0,\n  color: 'brandPrimaryRed',\n});\n\nexport const childLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}

package/lib/esm/atomic/organisms/sidebar/sidebar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/sidebar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst EASE_IN_OUT = 'ease-in-out';\n\nexport const sidebar = sprinkles({\n  display: 'flex',\n  height: 'screen',\n  flexDirection: 'column',\n  overflow: 'hidden',\n  padding: 3,\n  transitionProperty: 'width',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n});\n\nexport const sidebarWidthRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: { width: vars.width[16] },\n      expanded: { width: vars.width[60] },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type SidebarWidthVariants = RecipeVariants<typeof sidebarWidthRecipe>;\n\nexport const content = sprinkles({\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n});\n\nexport const headerRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 2,\n  marginBottom: 3,\n  marginTop: 0,\n  padding: 2,\n  borderRadius: 'xl',\n  backgroundImage: 'brandDiagonal',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  transitionProperty: 'opacity',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n});\n\nexport const headerActions = sprinkles({\n  display: 'flex',\n  width: 'full',\n  justifyContent: 'flex-start',\n  gap: 2,\n  marginBottom: 3,\n});\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n  gap: 2,\n  transitionProperty: 'gap',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n  paddingTop: 4,\n});\n\nexport const navCollapsed = sprinkles({\n  gap: 1,\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const footerCollapsed = sprinkles({\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nexport const defaultHeaderButton = style([\n  sprinkles({\n    borderRadius: 'md',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'brandWhite',\n    backgroundImage: 'brandDiagonal',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'brandPrimaryRed',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    boxShadow: `0 10px 20px color-mix(in srgb, ${vars.colors.black} 8%, transparent)`,\n    selectors: {\n      '&:hover': {\n        boxShadow: `0 12px 24px color-mix(in srgb, ${vars.colors.black} 12%, transparent)`,\n        transform: 'translateY(-1px)',\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\n      },\n    },\n  },\n]);\n\nconst navigationLinkBase = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  borderRadius: 'lg',\n  paddingY: 2,\n  paddingX: 3,\n  fontSize: 'sm',\n  lineHeight: 1.2,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  color: 'brandDarkGray',\n  transitionProperty: 'default',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const organizationLink = style([\n  navigationLinkBase,\n  sprinkles({ fontWeight: 'semibold' }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandLightGray,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n    },\n  },\n]);\n\nexport const organizationLinkActive = sprinkles({\n  backgroundImage: 'brandDiagonal',\n  color: 'brandWhite',\n  borderRadius: 'xl',\n});\n\nexport const organizationIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  color: 'inherit',\n  fontWeight: 'semibold',\n  transitionProperty: 'colors',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const linkLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}
+{"version":3,"file":"sidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/sidebar.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nconst EASE_IN_OUT = 'ease-in-out';\n\nexport const sidebar = sprinkles({\n  display: 'flex',\n  height: 'screen',\n  flexDirection: 'column',\n  overflow: 'hidden',\n  padding: 3,\n  transitionProperty: 'width',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n});\n\nexport const sidebarWidthRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: { width: vars.width[16] },\n      expanded: { width: vars.width[60] },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type SidebarWidthVariants = RecipeVariants<typeof sidebarWidthRecipe>;\n\nexport const content = sprinkles({\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n});\n\nexport const headerRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  gap: 2,\n  marginBottom: 3,\n  marginTop: 0,\n  padding: 2,\n  borderRadius: 'xl',\n  backgroundImage: 'brandDiagonal',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  transitionProperty: 'opacity',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n});\n\nexport const headerActions = sprinkles({\n  display: 'flex',\n  width: 'full',\n  justifyContent: 'flex-start',\n  gap: 2,\n  marginBottom: 3,\n});\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flex: 1,\n  flexDirection: 'column',\n  gap: 2,\n  transitionProperty: 'gap',\n  transitionDuration: 300,\n  transitionTimingFunction: EASE_IN_OUT,\n  paddingTop: 4,\n});\n\nexport const navCollapsed = sprinkles({\n  gap: 1,\n});\n\nexport const footer = sprinkles({\n  marginTop: 4,\n});\n\nexport const footerCollapsed = sprinkles({\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nexport const defaultHeaderButton = style([\n  sprinkles({\n    borderRadius: 'md',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'brandWhite',\n    backgroundImage: 'brandDiagonal',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'brandPrimaryRed',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    boxShadow: `0 10px 20px color-mix(in srgb, ${vars.colors.black} 8%, transparent)`,\n    selectors: {\n      '&:hover': {\n        boxShadow: `0 12px 24px color-mix(in srgb, ${vars.colors.black} 12%, transparent)`,\n        transform: 'translateY(-1px)',\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.brandSecondaryOrange}`,\n      },\n    },\n  },\n]);\n\nconst navigationLinkBase = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  borderRadius: 'lg',\n  paddingY: 2,\n  paddingX: 3,\n  fontSize: 'sm',\n  lineHeight: 1.2,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  color: 'brandDarkGray',\n  transitionProperty: 'default',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const organizationLink = style([\n  navigationLinkBase,\n  sprinkles({ fontWeight: 'semibold' }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.brandLightGray,\n        borderColor: vars.colors.brandSecondaryOrange,\n      },\n    },\n  },\n]);\n\nexport const organizationLinkActive = sprinkles({\n  backgroundImage: 'brandDiagonal',\n  color: 'brandWhite',\n  borderRadius: 'xl',\n});\n\nexport const organizationIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  color: 'inherit',\n  fontWeight: 'semibold',\n  transitionProperty: 'colors',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const linkLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}

package/lib/esm/backoffice/layout/backofficeLayoutTokens.js

@@ -1,4 +1,4 @@
-import { vars as e } from "../../theme/themeContract.js";
+import { vars as e } from "../../theme/themeContract.css.js";
 import { screens as t } from "../../theme/common.js";
 //#region src/backoffice/layout/backofficeLayoutTokens.ts
 var n = { detail: {

package/lib/esm/backoffice/layout/backofficeLayoutTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeLayoutTokens.js","names":[],"sources":["../../../../src/backoffice/layout/backofficeLayoutTokens.ts"],"sourcesContent":["import { screens } from '../../theme/common.js';\nimport { vars } from '../../theme/themeContract.js';\n\n/**\n * Source of truth for backoffice layout dimensions and breakpoints.\n * Keep these values centralized to avoid drift between templates/pages.\n */\nexport const backofficeLayoutTokens = {\n  detail: {\n    asideWidth: '320px',\n    splitMinWidth: 'screen and (min-width: 1200px)',\n    collapseMaxWidth: screens.lg,\n    gap: vars.spacing[4],\n    stickyTop: vars.spacing[6],\n    tabsStickyTop: vars.spacing[4],\n  },\n} as const;\n\nexport default backofficeLayoutTokens;\n"],"mappings":";;;AAOA,IAAa,IAAyB,EACpC,QAAQ;CACN,YAAY;CACZ,eAAe;CACf,kBAAkB,EAAQ;CAC1B,KAAK,EAAK,QAAQ;CAClB,WAAW,EAAK,QAAQ;CACxB,eAAe,EAAK,QAAQ;CAC7B,EACF"}
+{"version":3,"file":"backofficeLayoutTokens.js","names":[],"sources":["../../../../src/backoffice/layout/backofficeLayoutTokens.ts"],"sourcesContent":["import { screens } from '../../theme/common.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\n/**\n * Source of truth for backoffice layout dimensions and breakpoints.\n * Keep these values centralized to avoid drift between templates/pages.\n */\nexport const backofficeLayoutTokens = {\n  detail: {\n    asideWidth: '320px',\n    splitMinWidth: 'screen and (min-width: 1200px)',\n    collapseMaxWidth: screens.lg,\n    gap: vars.spacing[4],\n    stickyTop: vars.spacing[6],\n    tabsStickyTop: vars.spacing[4],\n  },\n} as const;\n\nexport default backofficeLayoutTokens;\n"],"mappings":";;;AAOA,IAAa,IAAyB,EACpC,QAAQ;CACN,YAAY;CACZ,eAAe;CACf,kBAAkB,EAAQ;CAC1B,KAAK,EAAK,QAAQ;CAClB,WAAW,EAAK,QAAQ;CACxB,eAAe,EAAK,QAAQ;CAC7B,EACF"}

package/lib/esm/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeFilterDrawer.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { ghostIconButton } from '../../../theme/styleRecipes.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const backdrop = style({\n  position: 'fixed',\n  inset: 0,\n  backgroundColor: 'rgb(15 23 42 / 0.35)',\n  zIndex: vars.zIndex.modal,\n});\n\nexport const drawerContainer = sprinkles({\n  position: 'fixed',\n  inset: 0,\n  display: 'flex',\n  justifyContent: 'flex-end',\n  zIndex: 'modal',\n});\n\nexport const drawer = sprinkles({\n  backgroundColor: 'surface',\n  borderLeftColor: 'borderSubtle',\n  borderLeftWidth: 'default',\n  borderStyle: 'solid',\n  boxShadow: 'xl',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  height: 'full',\n  maxWidth: '26rem',\n  overflowY: 'auto',\n  padding: 5,\n  width: 'full',\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n});\n\nexport const titleBlock = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const title = sprinkles({\n  fontSize: 'xl',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const subtitle = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const closeButton = style([\n  ghostIconButton,\n  sprinkles({\n    backgroundColor: 'surfaceMuted',\n    borderRadius: 'full',\n    height: 8,\n    width: 8,\n  }),\n  stateSprinkles({\n    backgroundColor: { hoverNotDisabled: 'surfaceSecondary' },\n  }),\n]);\n\nexport const searchRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const sections = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const section = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nexport const sectionHeader = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const sectionTitle = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'caps',\n  color: 'textMuted',\n  fontWeight: 'semibold',\n});\n\nexport const sectionDescription = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const sectionItems = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nexport const sectionItem = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const emptyState = sprinkles({\n  padding: 4,\n  borderRadius: 'md',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  backgroundColor: 'surfaceSecondary',\n  color: 'textSecondary',\n  fontSize: 'sm',\n  textAlign: 'center',\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeFilterDrawer.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { ghostIconButton } from '../../../theme/styleRecipes.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const backdrop = style({\n  position: 'fixed',\n  inset: 0,\n  backgroundColor: 'rgb(15 23 42 / 0.35)',\n  zIndex: vars.zIndex.modal,\n});\n\nexport const drawerContainer = sprinkles({\n  position: 'fixed',\n  inset: 0,\n  display: 'flex',\n  justifyContent: 'flex-end',\n  zIndex: 'modal',\n});\n\nexport const drawer = sprinkles({\n  backgroundColor: 'surface',\n  borderLeftColor: 'borderSubtle',\n  borderLeftWidth: 'default',\n  borderStyle: 'solid',\n  boxShadow: 'xl',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  height: 'full',\n  maxWidth: '26rem',\n  overflowY: 'auto',\n  padding: 5,\n  width: 'full',\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n});\n\nexport const titleBlock = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const title = sprinkles({\n  fontSize: 'xl',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const subtitle = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const closeButton = style([\n  ghostIconButton,\n  sprinkles({\n    backgroundColor: 'surfaceMuted',\n    borderRadius: 'full',\n    height: 8,\n    width: 8,\n  }),\n  stateSprinkles({\n    backgroundColor: { hoverNotDisabled: 'surfaceSecondary' },\n  }),\n]);\n\nexport const searchRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const sections = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n});\n\nexport const section = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nexport const sectionHeader = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const sectionTitle = sprinkles({\n  fontSize: 'xs',\n  textTransform: 'uppercase',\n  letterSpacing: 'caps',\n  color: 'textMuted',\n  fontWeight: 'semibold',\n});\n\nexport const sectionDescription = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const sectionItems = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nexport const sectionItem = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n});\n\nexport const emptyState = sprinkles({\n  padding: 4,\n  borderRadius: 'md',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  backgroundColor: 'surfaceSecondary',\n  color: 'textSecondary',\n  fontSize: 'sm',\n  textAlign: 'center',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_relations_menu/backofficeRelationsMenu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeRelationsMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_relations_menu/backofficeRelationsMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  position: 'relative',\n  display: 'inline-flex',\n});\n\nexport const triggerIcon = sprinkles({\n  transitionProperty: 'transform',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const triggerIconOpen = sprinkles({\n  rotate: 180,\n});\n\nexport const menu = sprinkles({\n  position: 'absolute',\n  right: 0,\n  top: 'full',\n  marginTop: 2,\n  minWidth: 64,\n  backgroundColor: 'surface',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  borderRadius: 'lg',\n  boxShadow: 'md',\n  padding: 2,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  zIndex: 20,\n});\n\nexport const menuItem = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 2,\n    paddingY: 2,\n    paddingX: 3,\n    borderRadius: 'md',\n    color: 'text',\n    textDecoration: 'none',\n    fontSize: 'sm',\n    outline: 'none',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceSecondary',\n    },\n  }),\n  {\n    selectors: {\n      '&:focus-visible': {\n        backgroundColor: vars.colors.surfaceSecondary,\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemLabel = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const count = sprinkles({\n  fontSize: 'xs',\n  color: 'textMuted',\n  flexShrink: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"backofficeRelationsMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_relations_menu/backofficeRelationsMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  position: 'relative',\n  display: 'inline-flex',\n});\n\nexport const triggerIcon = sprinkles({\n  transitionProperty: 'transform',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n});\n\nexport const triggerIconOpen = sprinkles({\n  rotate: 180,\n});\n\nexport const menu = sprinkles({\n  position: 'absolute',\n  right: 0,\n  top: 'full',\n  marginTop: 2,\n  minWidth: 64,\n  backgroundColor: 'surface',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  borderRadius: 'lg',\n  boxShadow: 'md',\n  padding: 2,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  zIndex: 20,\n});\n\nexport const menuItem = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 2,\n    paddingY: 2,\n    paddingX: 3,\n    borderRadius: 'md',\n    color: 'text',\n    textDecoration: 'none',\n    fontSize: 'sm',\n    outline: 'none',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceSecondary',\n    },\n  }),\n  {\n    selectors: {\n      '&:focus-visible': {\n        backgroundColor: vars.colors.surfaceSecondary,\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemLabel = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n  overflowWrap: 'anywhere',\n});\n\nexport const count = sprinkles({\n  fontSize: 'xs',\n  color: 'textMuted',\n  flexShrink: 0,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/backoffice_tabs/backofficeTabs.css.js

@@ -8,8 +8,8 @@ var e = "_4p4jiq0 txvbqbdsb txvbqbf8o txvbqbfet txvbqbs65 txvbqbuvn", t = {
 	pill: "_4p4jiq4 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqb2is txvbqb9j txvbqbik",
 	underline: "_4p4jiq5 txvbqbynf txvbqbzl0 txvbqb10jb txvbqbvve txvbqb2f6 txvbqb1g5 txvbqb8oi txvbqbik txvbqb9j"
 }, r = {
-	pill: "_4p4jiq6 txvbqb196b txvbqb17u txvbqb19c9 txvbqbcj6",
-	underline: "_4p4jiq7 txvbqb19c9 txvbqb512"
+	pill: "_4p4jiq6 txvbqb1963 txvbqb11p txvbqb19bj txvbqbcol",
+	underline: "_4p4jiq7 txvbqb19bj txvbqb512"
 }, i = "_4p4jiq9 _4p4jiq3 txvbqbdsb txvbqbf7y txvbqbey txvbqb1uy txvbqb2et txvbqb1933 txvbqb19cb txvbqbv txvbqbfcn _4p4jiq8 txvbqb1bs9 txvbqb1aeh";
 //#endregion
 export { r as activeVariant, i as tab, n as tabVariant, e as tabs, t as tabsVariant };

package/lib/esm/backoffice/molecules/backoffice_tabs/backofficeTabs.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"backofficeTabs.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const tabs = sprinkles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  gap: 1,\n  maxWidth: 'full',\n  overflowX: 'auto',\n});\n\nexport const tabsVariant = {\n  pill: sprinkles({\n    padding: 1,\n    borderRadius: 'full',\n    backgroundColor: 'surfaceMuted',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n  }),\n  underline: sprinkles({\n    gap: 3,\n    paddingX: 0,\n    paddingY: 0,\n    borderWidth: 0,\n    borderStyle: 'none',\n    backgroundColor: 'transparent',\n  }),\n};\n\nconst tabBase = sprinkles({\n  display: 'inline-flex',\n  flexShrink: 0,\n  alignItems: 'center',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  backgroundColor: 'transparent',\n  color: 'textSecondary',\n  cursor: 'pointer',\n  fontWeight: 'medium',\n});\n\nexport const tabVariant = {\n  pill: sprinkles({\n    paddingX: 3,\n    paddingY: 1.5,\n    borderRadius: 'full',\n    fontSize: 'sm',\n    borderColor: 'transparent',\n  }),\n  underline: sprinkles({\n    paddingX: 0,\n    paddingY: 2,\n    borderRadius: 'none',\n    borderWidth: 0,\n    borderBottomWidth: 'default',\n    borderColor: 'transparent',\n    fontSize: 'sm',\n  }),\n};\n\nexport const activeVariant = {\n  pill: sprinkles({\n    backgroundColor: 'surface',\n    borderColor: 'borderSubtle',\n    color: 'text',\n    boxShadow: 'sm',\n  }),\n  underline: sprinkles({\n    color: 'text',\n    borderBottomColor: 'primary',\n  }),\n};\n\nexport const tab = style([\n  tabBase,\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'surface',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors.primary}`,\n      outlineOffset: 2,\n    },\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"backofficeTabs.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_tabs/backofficeTabs.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const tabs = sprinkles({\n  display: 'inline-flex',\n  flexWrap: 'nowrap',\n  gap: 1,\n  maxWidth: 'full',\n  overflowX: 'auto',\n});\n\nexport const tabsVariant = {\n  pill: sprinkles({\n    padding: 1,\n    borderRadius: 'full',\n    backgroundColor: 'surfaceMuted',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'borderSubtle',\n  }),\n  underline: sprinkles({\n    gap: 3,\n    paddingX: 0,\n    paddingY: 0,\n    borderWidth: 0,\n    borderStyle: 'none',\n    backgroundColor: 'transparent',\n  }),\n};\n\nconst tabBase = sprinkles({\n  display: 'inline-flex',\n  flexShrink: 0,\n  alignItems: 'center',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  backgroundColor: 'transparent',\n  color: 'textSecondary',\n  cursor: 'pointer',\n  fontWeight: 'medium',\n});\n\nexport const tabVariant = {\n  pill: sprinkles({\n    paddingX: 3,\n    paddingY: 1.5,\n    borderRadius: 'full',\n    fontSize: 'sm',\n    borderColor: 'transparent',\n  }),\n  underline: sprinkles({\n    paddingX: 0,\n    paddingY: 2,\n    borderRadius: 'none',\n    borderWidth: 0,\n    borderBottomWidth: 'default',\n    borderColor: 'transparent',\n    fontSize: 'sm',\n  }),\n};\n\nexport const activeVariant = {\n  pill: sprinkles({\n    backgroundColor: 'primaryLight',\n    borderColor: 'primary',\n    color: 'primary',\n    boxShadow: 'primaryLightRing',\n  }),\n  underline: sprinkles({\n    color: 'primary',\n    borderBottomColor: 'primary',\n  }),\n};\n\nexport const tab = style([\n  tabBase,\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'surface',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors.primary}`,\n      outlineOffset: 2,\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/backoffice/molecules/filter_chip_row/filterChipRow.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"filterChipRow.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/filter_chip_row/filterChipRow.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const row = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingBottom: 1,\n    overflowX: 'auto',\n  }),\n  {\n    scrollbarWidth: 'thin',\n    scrollbarColor: `${vars.colors.border} transparent`,\n  },\n]);\n\nexport const chip = sprinkles({\n  flexShrink: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"filterChipRow.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/filter_chip_row/filterChipRow.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const row = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingBottom: 1,\n    overflowX: 'auto',\n  }),\n  {\n    scrollbarWidth: 'thin',\n    scrollbarColor: `${vars.colors.border} transparent`,\n  },\n]);\n\nexport const chip = sprinkles({\n  flexShrink: 0,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                              */
 //#region src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts
-var e = "_1nm2b9q0 txvbqbdsb txvbqbey txvbqbfet txvbqb7m txvbqb76 txvbqb7t txvbqbf7y txvbqb19dv txvbqb17f1 txvbqb2o", t = "_1nm2b9q1 txvbqb19ep txvbqb17fe txvbqb2p", n = "_1nm2b9q4 _1nm2b9q2 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqbdr8 txvbqbey txvbqbff6 txvbqb2gm txvbqb9j txvbqb7g txvbqb76 txvbqb7t txvbqbv txvbqb19cb _1nm2b9q3 txvbqb1aex txvbqb1bs9", r = "_1nm2b9q5 txvbqbyo5 txvbqbzlq txvbqbjtp", i = "_1nm2b9q6 txvbqbyo5 txvbqbzlq txvbqb11ed txvbqbwqg txvbqb2g9", a = "_1nm2b9q7 txvbqbfd0 txvbqb1963 txvbqb19c9 txvbqbcol", o = "_1nm2b9q9 _1nm2b9q8 txvbqb19cd txvbqbr", s = "_1nm2b9qa txvbqb19eb txvbqbj", c = "_1nm2b9qb txvbqbdr8 txvbqbey txvbqbff6 txvbqbdxd txvbqbt9i txvbqb3f txvbqb1933 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb16ex txvbqb198h txvbqb1p", l = "_1nm2b9qc txvbqbdsb txvbqbey", u = "_1nm2b9qf _1nm2b9qd txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqb2g9 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb1933 txvbqb19cb txvbqbi _1nm2b9qe txvbqb1aex txvbqb1bs9", d = "_1nm2b9qg txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqbf7y txvbqb198h", f = "_1nm2b9qh txvbqb17hk txvbqbhmz", p = "_1nm2b9qi txvbqbdxd txvbqbt9i", m = "_1nm2b9qj txvbqbdq5", h = "_1nm2b9qk txvbqbdsb txvbqbey txvbqbjtp txvbqbf7y", g = "_1nm2b9ql txvbqbdq5";
+var e = "_1nm2b9q0 txvbqbdsb txvbqbey txvbqbfet txvbqb7m txvbqb76 txvbqb7t txvbqbf7y txvbqb19dv txvbqb17f1 txvbqb2o", t = "_1nm2b9q1 txvbqb19ep txvbqb17fe txvbqb2p", n = "_1nm2b9q4 _1nm2b9q2 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqbdr8 txvbqbey txvbqbff6 txvbqb2gm txvbqb9j txvbqb7g txvbqb76 txvbqb7t txvbqbv txvbqb19cb _1nm2b9q3 txvbqb1aex txvbqb1bs9", r = "_1nm2b9q5 txvbqbyo5 txvbqbzlq txvbqbjtp", i = "_1nm2b9q6 txvbqbyo5 txvbqbzlq txvbqb11ed txvbqbwqg txvbqb2g9", a = "_1nm2b9q7 txvbqbfd0 txvbqb1963 txvbqb19bj txvbqbcoy", o = "_1nm2b9q9 _1nm2b9q8 txvbqb19cd txvbqbr", s = "_1nm2b9qa txvbqb19eb txvbqbj", c = "_1nm2b9qb txvbqbdr8 txvbqbey txvbqbff6 txvbqbdxd txvbqbt9i txvbqb3f txvbqb1933 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb16ex txvbqb198h txvbqb1p", l = "_1nm2b9qc txvbqbdsb txvbqbey", u = "_1nm2b9qf _1nm2b9qd txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqb2g9 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb1933 txvbqb19cb txvbqbi _1nm2b9qe txvbqb1aex txvbqb1bs9", d = "_1nm2b9qg txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqbf7y txvbqb198h", f = "_1nm2b9qh txvbqb17hk txvbqbhmz", p = "_1nm2b9qi txvbqbdxd txvbqbt9i", m = "_1nm2b9qj txvbqbdq5", h = "_1nm2b9qk txvbqbdsb txvbqbey txvbqbjtp txvbqbf7y", g = "_1nm2b9ql txvbqbdq5";
 //#endregion
 export { l as actionSlot, e as actions, t as actionsVisible, h as badge, g as badgeCollapsed, u as dragHandle, d as icon, f as iconNested, n as item, a as itemActive, r as itemCollapsed, o as itemDisabled, s as itemDragging, i as itemNested, p as label, m as labelCollapsed, c as link };
 

package/lib/esm/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebarNavItem.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst inlineFlex = 'inline-flex';\n\nexport const actions = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  gap: 1,\n  transitionProperty: 'opacity',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n  flexShrink: 0,\n  opacity: 0,\n  visibility: 'hidden',\n  pointerEvents: 'none',\n});\n\nexport const actionsVisible = sprinkles({\n  opacity: 100,\n  visibility: 'visible',\n  pointerEvents: 'auto',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:has(:focus-visible)': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemNested = sprinkles({\n  paddingX: 2,\n  paddingY: 1.5,\n  borderRadius: 'md',\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n  backgroundColor: 'primaryLight',\n  color: 'text',\n  boxShadow: 'primaryLightRing',\n});\n\nexport const itemDisabled = style([\n  sprinkles({\n    color: 'textMuted',\n    cursor: 'not-allowed',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n]);\n\nexport const itemDragging = sprinkles({\n  opacity: 50,\n  cursor: 'grabbing',\n});\n\nexport const link = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flex: 1,\n  minWidth: 0,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  borderWidth: 0,\n  borderStyle: 'none',\n  padding: 0,\n  textAlign: 'left',\n  color: 'inherit',\n  font: 'inherit',\n});\n\nexport const actionSlot = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n});\n\nexport const dragHandle = style([\n  sprinkles({\n    display: inlineFlex,\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    padding: 0,\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'grab',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:active': {\n        cursor: 'grabbing',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n  color: 'inherit',\n});\n\nexport const iconNested = sprinkles({\n  width: 5,\n  height: 5,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const badge = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nexport const badgeCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}
+{"version":3,"file":"sidebarNavItem.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nconst inlineFlex = 'inline-flex';\n\nexport const actions = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  gap: 1,\n  transitionProperty: 'opacity',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n  flexShrink: 0,\n  opacity: 0,\n  visibility: 'hidden',\n  pointerEvents: 'none',\n});\n\nexport const actionsVisible = sprinkles({\n  opacity: 100,\n  visibility: 'visible',\n  pointerEvents: 'auto',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:has(:focus-visible)': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemNested = sprinkles({\n  paddingX: 2,\n  paddingY: 1.5,\n  borderRadius: 'md',\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n  backgroundColor: 'primaryLight',\n  color: 'primary',\n  boxShadow: 'primaryLightRingStrong',\n});\n\nexport const itemDisabled = style([\n  sprinkles({\n    color: 'textMuted',\n    cursor: 'not-allowed',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n]);\n\nexport const itemDragging = sprinkles({\n  opacity: 50,\n  cursor: 'grabbing',\n});\n\nexport const link = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flex: 1,\n  minWidth: 0,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  borderWidth: 0,\n  borderStyle: 'none',\n  padding: 0,\n  textAlign: 'left',\n  color: 'inherit',\n  font: 'inherit',\n});\n\nexport const actionSlot = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n});\n\nexport const dragHandle = style([\n  sprinkles({\n    display: inlineFlex,\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    padding: 0,\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'grab',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:active': {\n        cursor: 'grabbing',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n  color: 'inherit',\n});\n\nexport const iconNested = sprinkles({\n  width: 5,\n  height: 5,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const badge = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nexport const badgeCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebarNavSection.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const section = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 2,\n  paddingX: 2,\n  paddingY: 0.5,\n  minHeight: 8,\n});\n\nexport const headerSidebarCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 0,\n});\n\nexport const headerButton = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 2,\n    width: 'full',\n    paddingX: 2,\n    paddingY: 0.5,\n    minHeight: 8,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n    textAlign: 'left',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n  }),\n  {\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const headerButtonSidebarCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 0,\n});\n\nexport const title = sprinkles({\n  fontSize: '2xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n  color: 'textMuted',\n  letterSpacing: 'wide',\n});\n\nexport const titleContent = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  minWidth: 0,\n  gap: 2,\n});\n\nexport const titleIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  flexShrink: 0,\n  color: 'textMuted',\n});\n\nexport const titleSidebarCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const toggleIcon = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 5,\n    height: 5,\n    borderRadius: 'sm',\n    color: 'textMuted',\n  }),\n  {\n    transition: 'transform 120ms ease',\n  },\n]);\n\nexport const toggleIconCollapsed = style({\n  transform: 'rotate(-90deg)',\n});\n\nexport const items = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n});\n\nexport const itemsNested = style([\n  sprinkles({\n    marginLeft: 4,\n    paddingLeft: 2,\n    borderLeftWidth: 'default',\n    borderLeftColor: 'border',\n  }),\n  {\n    borderLeftStyle: 'solid',\n  },\n]);\n\nexport const sortableItem = style({\n  position: 'relative',\n});\n\nexport const sortableItemDragging = style({\n  zIndex: 1,\n});\n\nexport const insertionIndicator = style([\n  sprinkles({\n    display: 'block',\n    marginY: 0.5,\n    borderRadius: 'full',\n    backgroundColor: 'primary',\n  }),\n  {\n    height: '2px',\n  },\n]);\n\nexport const dragOverlay = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n    backgroundColor: 'surface',\n    color: 'text',\n    borderWidth: 'default',\n    borderColor: 'border',\n    boxShadow: 'lg',\n  }),\n  {\n    borderStyle: 'solid',\n    cursor: 'grabbing',\n    minWidth: '12rem',\n    maxWidth: '18rem',\n  },\n]);\n\nexport const dragOverlayIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n});\n\nexport const dragOverlayLabel = style([\n  sprinkles({\n    minWidth: 0,\n  }),\n  {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"sidebarNavSection.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const section = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 2,\n  paddingX: 2,\n  paddingY: 0.5,\n  minHeight: 8,\n});\n\nexport const headerSidebarCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 0,\n});\n\nexport const headerButton = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: 2,\n    width: 'full',\n    paddingX: 2,\n    paddingY: 0.5,\n    minHeight: 8,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n    textAlign: 'left',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n  }),\n  {\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const headerButtonSidebarCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 0,\n});\n\nexport const title = sprinkles({\n  fontSize: '2xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n  color: 'textMuted',\n  letterSpacing: 'wide',\n});\n\nexport const titleContent = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  minWidth: 0,\n  gap: 2,\n});\n\nexport const titleIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  flexShrink: 0,\n  color: 'textMuted',\n});\n\nexport const titleSidebarCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const toggleIcon = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 5,\n    height: 5,\n    borderRadius: 'sm',\n    color: 'textMuted',\n  }),\n  {\n    transition: 'transform 120ms ease',\n  },\n]);\n\nexport const toggleIconCollapsed = style({\n  transform: 'rotate(-90deg)',\n});\n\nexport const items = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n});\n\nexport const itemsNested = style([\n  sprinkles({\n    marginLeft: 4,\n    paddingLeft: 2,\n    borderLeftWidth: 'default',\n    borderLeftColor: 'border',\n  }),\n  {\n    borderLeftStyle: 'solid',\n  },\n]);\n\nexport const sortableItem = style({\n  position: 'relative',\n});\n\nexport const sortableItemDragging = style({\n  zIndex: 1,\n});\n\nexport const insertionIndicator = style([\n  sprinkles({\n    display: 'block',\n    marginY: 0.5,\n    borderRadius: 'full',\n    backgroundColor: 'primary',\n  }),\n  {\n    height: '2px',\n  },\n]);\n\nexport const dragOverlay = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n    backgroundColor: 'surface',\n    color: 'text',\n    borderWidth: 'default',\n    borderColor: 'border',\n    boxShadow: 'lg',\n  }),\n  {\n    borderStyle: 'solid',\n    cursor: 'grabbing',\n    minWidth: '12rem',\n    maxWidth: '18rem',\n  },\n]);\n\nexport const dragOverlayIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n});\n\nexport const dragOverlayLabel = style([\n  sprinkles({\n    minWidth: 0,\n  }),\n  {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n]);\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebarProfileMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const title = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'textSecondary',\n  paddingX: 1,\n});\n\nexport const hidden = sprinkles({\n  display: 'none',\n});\n\nexport const trigger = recipe({\n  base: [\n    sprinkles({\n      display: 'flex',\n      alignItems: 'center',\n      width: 'full',\n      borderWidth: 'default',\n      borderStyle: 'solid',\n      borderColor: 'borderSubtle',\n      borderRadius: 'lg',\n      backgroundColor: 'surfaceSecondary',\n      transitionProperty: 'colors',\n      transitionDuration: 120,\n      transitionTimingFunction: 'ease',\n      cursor: 'pointer',\n    }),\n    {\n      selectors: {\n        '&:hover': {\n          backgroundColor: vars.colors.surfaceElevated,\n          borderColor: vars.colors.borderStrong,\n        },\n        '&:focus-visible': {\n          outline: `2px solid ${vars.colors.primary}`,\n          outlineOffset: '2px',\n        },\n      },\n    },\n  ],\n  variants: {\n    collapsed: {\n      true: sprinkles({\n        justifyContent: 'center',\n        padding: 2,\n      }),\n      false: sprinkles({\n        justifyContent: 'space-between',\n        gap: 2,\n        paddingY: 2,\n        paddingX: 3,\n      }),\n    },\n  },\n  defaultVariants: {\n    collapsed: false,\n  },\n});\n\nexport const triggerMain = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const avatar = sprinkles({\n  width: 8,\n  height: 8,\n  minWidth: 8,\n  minHeight: 8,\n  borderRadius: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'brandWhite',\n  backgroundImage: 'brandDiagonal',\n  textTransform: 'uppercase',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n});\n\nexport const displayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const email = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const chevron = sprinkles({\n  color: 'textSecondary',\n  transitionProperty: 'transform',\n  transitionDuration: 120,\n  transitionTimingFunction: 'ease',\n});\n\nexport const chevronOpen = sprinkles({\n  rotate: 180,\n});\n\nexport const menu = sprinkles({\n  minWidth: 56,\n  padding: 2,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const menuIdentity = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 0.5,\n    paddingX: 3,\n    paddingY: 2,\n    borderBottomWidth: 'px',\n    borderBottomColor: 'borderSubtle',\n    marginBottom: 1,\n  }),\n  {\n    borderBottomStyle: 'solid',\n  },\n]);\n\nexport const menuDisplayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuEmail = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuItem = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n    borderWidth: 0,\n    borderStyle: 'none',\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    color: 'text',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    textAlign: 'left',\n    cursor: 'pointer',\n    paddingY: 2,\n    paddingX: 3,\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.surfaceSecondary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n      },\n    },\n  },\n]);\n\nexport const menuIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  color: 'textSecondary',\n});\n"],"mappings":""}
+{"version":3,"file":"sidebarProfileMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const title = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'textSecondary',\n  paddingX: 1,\n});\n\nexport const hidden = sprinkles({\n  display: 'none',\n});\n\nexport const trigger = recipe({\n  base: [\n    sprinkles({\n      display: 'flex',\n      alignItems: 'center',\n      width: 'full',\n      borderWidth: 'default',\n      borderStyle: 'solid',\n      borderColor: 'borderSubtle',\n      borderRadius: 'lg',\n      backgroundColor: 'surfaceSecondary',\n      transitionProperty: 'colors',\n      transitionDuration: 120,\n      transitionTimingFunction: 'ease',\n      cursor: 'pointer',\n    }),\n    {\n      selectors: {\n        '&:hover': {\n          backgroundColor: vars.colors.surfaceElevated,\n          borderColor: vars.colors.borderStrong,\n        },\n        '&:focus-visible': {\n          outline: `2px solid ${vars.colors.primary}`,\n          outlineOffset: '2px',\n        },\n      },\n    },\n  ],\n  variants: {\n    collapsed: {\n      true: sprinkles({\n        justifyContent: 'center',\n        padding: 2,\n      }),\n      false: sprinkles({\n        justifyContent: 'space-between',\n        gap: 2,\n        paddingY: 2,\n        paddingX: 3,\n      }),\n    },\n  },\n  defaultVariants: {\n    collapsed: false,\n  },\n});\n\nexport const triggerMain = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const avatar = sprinkles({\n  width: 8,\n  height: 8,\n  minWidth: 8,\n  minHeight: 8,\n  borderRadius: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'brandWhite',\n  backgroundImage: 'brandDiagonal',\n  textTransform: 'uppercase',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n});\n\nexport const displayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const email = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const chevron = sprinkles({\n  color: 'textSecondary',\n  transitionProperty: 'transform',\n  transitionDuration: 120,\n  transitionTimingFunction: 'ease',\n});\n\nexport const chevronOpen = sprinkles({\n  rotate: 180,\n});\n\nexport const menu = sprinkles({\n  minWidth: 56,\n  padding: 2,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const menuIdentity = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 0.5,\n    paddingX: 3,\n    paddingY: 2,\n    borderBottomWidth: 'px',\n    borderBottomColor: 'borderSubtle',\n    marginBottom: 1,\n  }),\n  {\n    borderBottomStyle: 'solid',\n  },\n]);\n\nexport const menuDisplayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuEmail = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const menuItem = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n    borderWidth: 0,\n    borderStyle: 'none',\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    color: 'text',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    textAlign: 'left',\n    cursor: 'pointer',\n    paddingY: 2,\n    paddingX: 3,\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.surfaceSecondary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n      },\n    },\n  },\n]);\n\nexport const menuIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  color: 'textSecondary',\n});\n"],"mappings":""}

package/lib/esm/backoffice/templates/detail_page_template/detailPageTemplate.css.js

@@ -2,7 +2,7 @@
 /* empty css                                          */
 /* empty css                                   */
 /* empty css                                        */
-/* empty css                                       */
+/* empty css                                            */
 /* empty css                                  */
 /* empty css                                               */
 /* empty css                                               */

package/lib/esm/backoffice/templates/list_page_template/listPageTemplate.css.js

@@ -2,7 +2,7 @@
 /* empty css                                          */
 /* empty css                                   */
 /* empty css                                        */
-/* empty css                                       */
+/* empty css                                            */
 /* empty css                                  */
 /* empty css                                               */
 /* empty css                                               */

package/lib/esm/backoffice/templates/list_page_template/listPageTemplate.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"listPageTemplate.css.js","names":[],"sources":["../../../../../src/backoffice/templates/list_page_template/listPageTemplate.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'grid',\n});\n\nexport const containerContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const containerPresentation = {\n  framed: sprinkles({\n    gap: 3,\n  }),\n  flat: sprinkles({\n    gap: 2,\n  }),\n};\n\nexport const containerRows = recipe({\n  variants: {\n    scrollMode: {\n      page: {},\n      contained: {},\n    },\n    toolbar: {\n      true: {},\n      false: {},\n    },\n    status: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, 1fr)' },\n    },\n  ],\n});\n\nexport const headerCard = sprinkles({\n  minWidth: 0,\n});\n\nexport const headerPresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'panel',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'lg',\n    }),\n    {\n      backgroundImage: `linear-gradient(135deg, color-mix(in srgb, ${vars.colors.surface} 88%, ${vars.colors['blue-50']}) 0%, ${vars.colors.surface} 58%)`,\n    },\n  ]),\n  flat: sprinkles({\n    paddingX: 1,\n    paddingY: 1,\n  }),\n};\n\nexport const toolbarCard = sprinkles({\n  minWidth: 0,\n});\n\nexport const toolbarPresentation = {\n  framed: adminSurfaceRecipe({\n    level: 'toolbar',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'sm',\n  }),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'toolbar',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableCard = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  minHeight: 0,\n  minWidth: 0,\n});\n\nexport const tableCardContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const tablePresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderSubtle}`,\n    },\n  ]),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableScroll = style({\n  overflowX: 'auto',\n  overflowY: 'visible',\n  scrollbarWidth: 'thin',\n  scrollbarColor: `${vars.colors.border} transparent`,\n});\n\nexport const tableScrollContained = sprinkles({\n  flex: 1,\n  minHeight: 0,\n});\n\nexport const tableFooter = sprinkles({\n  marginTop: 0,\n});\n"],"mappings":""}
+{"version":3,"file":"listPageTemplate.css.js","names":[],"sources":["../../../../../src/backoffice/templates/list_page_template/listPageTemplate.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { adminSurfaceRecipe } from '../../../admin/theme/adminSurface.css.js';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const container = sprinkles({\n  display: 'grid',\n});\n\nexport const containerContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const containerPresentation = {\n  framed: sprinkles({\n    gap: 3,\n  }),\n  flat: sprinkles({\n    gap: 2,\n  }),\n};\n\nexport const containerRows = recipe({\n  variants: {\n    scrollMode: {\n      page: {},\n      contained: {},\n    },\n    toolbar: {\n      true: {},\n      false: {},\n    },\n    status: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'page', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, auto)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: true },\n      style: { gridTemplateRows: 'auto auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: true, status: false },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: true },\n      style: { gridTemplateRows: 'auto auto minmax(0, 1fr)' },\n    },\n    {\n      variants: { scrollMode: 'contained', toolbar: false, status: false },\n      style: { gridTemplateRows: 'auto minmax(0, 1fr)' },\n    },\n  ],\n});\n\nexport const headerCard = sprinkles({\n  minWidth: 0,\n});\n\nexport const headerPresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'panel',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'lg',\n    }),\n    {\n      backgroundImage: `linear-gradient(135deg, color-mix(in srgb, ${vars.colors.surface} 88%, ${vars.colors['blue-50']}) 0%, ${vars.colors.surface} 58%)`,\n    },\n  ]),\n  flat: sprinkles({\n    paddingX: 1,\n    paddingY: 1,\n  }),\n};\n\nexport const toolbarCard = sprinkles({\n  minWidth: 0,\n});\n\nexport const toolbarPresentation = {\n  framed: adminSurfaceRecipe({\n    level: 'toolbar',\n    radius: 'md',\n    border: 'subtle',\n    elevation: 'none',\n    padding: 'sm',\n  }),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'toolbar',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableCard = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  minHeight: 0,\n  minWidth: 0,\n});\n\nexport const tableCardContained = sprinkles({\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const tablePresentation = {\n  framed: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'lg',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderSubtle}`,\n    },\n  ]),\n  flat: style([\n    adminSurfaceRecipe({\n      level: 'table',\n      radius: 'md',\n      border: 'subtle',\n      elevation: 'none',\n      padding: 'sm',\n    }),\n    {\n      boxShadow: `0 1px 0 ${vars.colors.borderLight}`,\n    },\n  ]),\n};\n\nexport const tableScroll = style({\n  overflowX: 'auto',\n  overflowY: 'visible',\n  scrollbarWidth: 'thin',\n  scrollbarColor: `${vars.colors.border} transparent`,\n});\n\nexport const tableScrollContained = sprinkles({\n  flex: 1,\n  minHeight: 0,\n});\n\nexport const tableFooter = sprinkles({\n  marginTop: 0,\n});\n"],"mappings":""}

package/lib/esm/components/charts/MetricHistoryChart.js

@@ -1,4 +1,4 @@
-import { vars as e } from "../../theme/themeContract.js";
+import { vars as e } from "../../theme/themeContract.css.js";
 import { chartContainer as t, emptyState as n, tooltip as r, tooltipDate as i, tooltipRow as a, tooltipRowLabel as o, tooltipSwatch as s } from "./metricHistoryChart.css.js";
 import { formatAxisTimestamp as c, formatDefaultTimestamp as l, formatDefaultValue as u } from "../../internal/charts/metricHistoryChartHelpers.js";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";

package/lib/esm/components/charts/MetricHistoryChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricHistoryChart.js","names":[],"sources":["../../../../src/components/charts/MetricHistoryChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './metricHistoryChart.css.js';\nimport {\n  formatAxisTimestamp,\n  formatDefaultTimestamp,\n  formatDefaultValue,\n} from '../../internal/charts/metricHistoryChartHelpers.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type MetricHistoryChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type MetricHistoryChartSerie = {\n  id: string;\n  label: string;\n  color: string;\n  unit?: string;\n  data: readonly MetricHistoryChartPoint[];\n};\n\ntype SlicePointPayload = {\n  seriesId: string;\n  label: string;\n  value: number;\n  color: string;\n  unit?: string;\n};\n\nexport type MetricHistoryChartProps = {\n  series: readonly MetricHistoryChartSerie[];\n  ariaLabel: string;\n  formatValue?: (value: number, unit?: string) => string;\n  formatTimestamp?: (value: string) => string;\n  emptyMessage?: string;\n};\n\nexport const MetricHistoryChart = ({\n  ariaLabel,\n  emptyMessage = 'No data',\n  formatTimestamp = formatDefaultTimestamp,\n  formatValue = formatDefaultValue,\n  series,\n}: MetricHistoryChartProps): JSX.Element => {\n  const visibleSeries = series.filter((serie) => {\n    return serie.data.length > 0;\n  });\n\n  if (visibleSeries.length === 0) {\n    return <div className={styles.emptyState}>{emptyMessage}</div>;\n  }\n\n  const metadataById = Object.fromEntries(\n    visibleSeries.map((serie) => {\n      return [\n        serie.id,\n        {\n          color: serie.color,\n          label: serie.label,\n          unit: serie.unit,\n        },\n      ];\n    }),\n  );\n\n  const data = visibleSeries.map((serie) => {\n    return {\n      id: serie.id,\n      data: serie.data.map((point) => {\n        return {\n          x: new Date(point.x),\n          y: point.y,\n        };\n      }),\n    };\n  });\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 110,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: visibleSeries.map((serie) => {\n        return {\n          id: serie.id,\n          label: serie.label,\n          color: serie.color,\n        };\n      }),\n    },\n  ];\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<(typeof data)[number]>): JSX.Element => {\n    const firstPoint = slice.points[0];\n    let timestampValue = String(slice.id);\n    if (firstPoint?.data.x instanceof Date) {\n      timestampValue = firstPoint.data.x.toISOString();\n    }\n\n    const points = [...slice.points]\n      .map((point): SlicePointPayload | null => {\n        let value = Number(point.data.y);\n        if (typeof point.data.y === 'number') {\n          value = point.data.y;\n        }\n\n        if (Number.isNaN(value)) {\n          return null;\n        }\n\n        const seriesId = String(point.seriesId);\n        const metadata = metadataById[seriesId];\n\n        return {\n          seriesId,\n          label: metadata?.label ?? seriesId,\n          value,\n          color: point.seriesColor,\n          unit: metadata?.unit,\n        };\n      })\n      .filter((point): point is SlicePointPayload => {\n        return point != null;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatTimestamp(timestampValue)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${point.seriesId}-${timestampValue}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{point.label}</span>\n              </span>\n              <strong>{formatValue(point.value, point.unit)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={data}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={(serie) => {\n          return metadataById[String(serie.id)]?.color ?? vars.colors.primary;\n        }}\n        xScale={{\n          type: 'time',\n          format: 'native',\n          precision: 'minute',\n          useUTC: false,\n        }}\n        xFormat=\"time:%Y-%m-%dT%H:%M:%S.%LZ\"\n        yScale={{ type: 'linear', min: 'auto', max: 'auto' }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          format: (value) => {\n            if (!(value instanceof Date)) {\n              return '';\n            }\n\n            return formatAxisTimestamp(value);\n          },\n          tickSize: 0,\n          tickPadding: 10,\n          tickValues: 'every 15 minutes',\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: 5,\n          format: (value) => {\n            if (typeof value !== 'number') {\n              return '';\n            }\n\n            return new Intl.NumberFormat(undefined, {\n              notation: 'compact',\n              maximumFractionDigits: 1,\n            }).format(value);\n          },\n        }}\n        enablePoints\n        useMesh\n        legends={legends}\n        theme={{\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          axis: {\n            ticks: {\n              text: {\n                fill: vars.colors.textMuted,\n                fontSize: 12,\n              },\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.border,\n              strokeWidth: 1,\n              strokeDasharray: '4 4',\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n        }}\n        sliceTooltip={sliceTooltip}\n        enableSlices=\"x\"\n        role=\"img\"\n        ariaLabel={ariaLabel}\n      />\n    </div>\n  );\n};\n\nexport default MetricHistoryChart;\n"],"mappings":"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"}
+{"version":3,"file":"MetricHistoryChart.js","names":[],"sources":["../../../../src/components/charts/MetricHistoryChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './metricHistoryChart.css.js';\nimport {\n  formatAxisTimestamp,\n  formatDefaultTimestamp,\n  formatDefaultValue,\n} from '../../internal/charts/metricHistoryChartHelpers.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nexport type MetricHistoryChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type MetricHistoryChartSerie = {\n  id: string;\n  label: string;\n  color: string;\n  unit?: string;\n  data: readonly MetricHistoryChartPoint[];\n};\n\ntype SlicePointPayload = {\n  seriesId: string;\n  label: string;\n  value: number;\n  color: string;\n  unit?: string;\n};\n\nexport type MetricHistoryChartProps = {\n  series: readonly MetricHistoryChartSerie[];\n  ariaLabel: string;\n  formatValue?: (value: number, unit?: string) => string;\n  formatTimestamp?: (value: string) => string;\n  emptyMessage?: string;\n};\n\nexport const MetricHistoryChart = ({\n  ariaLabel,\n  emptyMessage = 'No data',\n  formatTimestamp = formatDefaultTimestamp,\n  formatValue = formatDefaultValue,\n  series,\n}: MetricHistoryChartProps): JSX.Element => {\n  const visibleSeries = series.filter((serie) => {\n    return serie.data.length > 0;\n  });\n\n  if (visibleSeries.length === 0) {\n    return <div className={styles.emptyState}>{emptyMessage}</div>;\n  }\n\n  const metadataById = Object.fromEntries(\n    visibleSeries.map((serie) => {\n      return [\n        serie.id,\n        {\n          color: serie.color,\n          label: serie.label,\n          unit: serie.unit,\n        },\n      ];\n    }),\n  );\n\n  const data = visibleSeries.map((serie) => {\n    return {\n      id: serie.id,\n      data: serie.data.map((point) => {\n        return {\n          x: new Date(point.x),\n          y: point.y,\n        };\n      }),\n    };\n  });\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 110,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: visibleSeries.map((serie) => {\n        return {\n          id: serie.id,\n          label: serie.label,\n          color: serie.color,\n        };\n      }),\n    },\n  ];\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<(typeof data)[number]>): JSX.Element => {\n    const firstPoint = slice.points[0];\n    let timestampValue = String(slice.id);\n    if (firstPoint?.data.x instanceof Date) {\n      timestampValue = firstPoint.data.x.toISOString();\n    }\n\n    const points = [...slice.points]\n      .map((point): SlicePointPayload | null => {\n        let value = Number(point.data.y);\n        if (typeof point.data.y === 'number') {\n          value = point.data.y;\n        }\n\n        if (Number.isNaN(value)) {\n          return null;\n        }\n\n        const seriesId = String(point.seriesId);\n        const metadata = metadataById[seriesId];\n\n        return {\n          seriesId,\n          label: metadata?.label ?? seriesId,\n          value,\n          color: point.seriesColor,\n          unit: metadata?.unit,\n        };\n      })\n      .filter((point): point is SlicePointPayload => {\n        return point != null;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatTimestamp(timestampValue)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${point.seriesId}-${timestampValue}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{point.label}</span>\n              </span>\n              <strong>{formatValue(point.value, point.unit)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={data}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={(serie) => {\n          return metadataById[String(serie.id)]?.color ?? vars.colors.primary;\n        }}\n        xScale={{\n          type: 'time',\n          format: 'native',\n          precision: 'minute',\n          useUTC: false,\n        }}\n        xFormat=\"time:%Y-%m-%dT%H:%M:%S.%LZ\"\n        yScale={{ type: 'linear', min: 'auto', max: 'auto' }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          format: (value) => {\n            if (!(value instanceof Date)) {\n              return '';\n            }\n\n            return formatAxisTimestamp(value);\n          },\n          tickSize: 0,\n          tickPadding: 10,\n          tickValues: 'every 15 minutes',\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: 5,\n          format: (value) => {\n            if (typeof value !== 'number') {\n              return '';\n            }\n\n            return new Intl.NumberFormat(undefined, {\n              notation: 'compact',\n              maximumFractionDigits: 1,\n            }).format(value);\n          },\n        }}\n        enablePoints\n        useMesh\n        legends={legends}\n        theme={{\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          axis: {\n            ticks: {\n              text: {\n                fill: vars.colors.textMuted,\n                fontSize: 12,\n              },\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.border,\n              strokeWidth: 1,\n              strokeDasharray: '4 4',\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n        }}\n        sliceTooltip={sliceTooltip}\n        enableSlices=\"x\"\n        role=\"img\"\n        ariaLabel={ariaLabel}\n      />\n    </div>\n  );\n};\n\nexport default MetricHistoryChart;\n"],"mappings":"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"}

package/lib/esm/components/charts/TimeSeriesLineChart.js

@@ -1,4 +1,4 @@
-import { vars as e } from "../../theme/themeContract.js";
+import { vars as e } from "../../theme/themeContract.css.js";
 import { chartContainer as t, tooltip as n, tooltipDate as r, tooltipRow as i, tooltipRowLabel as a, tooltipSwatch as o } from "./timeSeriesLineChart.css.js";
 import { formatDayTick as s, formatYAxisTick as c, getVisibleDayTicks as l, resolveYAxisState as u } from "../../internal/charts/timeSeriesLineChartHelpers.js";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";

package/lib/esm/components/charts/TimeSeriesLineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesLineChart.js","names":[],"sources":["../../../../src/components/charts/TimeSeriesLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './timeSeriesLineChart.css.js';\nimport {\n  formatDayTick,\n  formatYAxisTick,\n  getVisibleDayTicks,\n  resolveYAxisState,\n  type TimeSeriesYAxisConfig,\n} from '../../internal/charts/timeSeriesLineChartHelpers.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport type TimeSeriesLineChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type TimeSeriesLineChartSerie<Category extends string> = {\n  id: Category;\n  data: readonly TimeSeriesLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n  seriesId: Category;\n  data: {\n    y: number;\n  };\n  color: string;\n};\n\nexport type TimeSeriesLineChartProps<Category extends string> = {\n  series: readonly TimeSeriesLineChartSerie<Category>[];\n  categoryOrder: readonly Category[];\n  categoryColorById: Readonly<Record<Category, string>>;\n  categoryLabel: (category: Category) => string;\n  formatValue: (value: number) => string;\n  ariaLabel: string;\n  yAxis?: TimeSeriesYAxisConfig;\n};\n\nexport const TimeSeriesLineChart = <Category extends string>(\n  props: TimeSeriesLineChartProps<Category>,\n): JSX.Element => {\n  const {\n    ariaLabel,\n    categoryColorById,\n    categoryLabel,\n    categoryOrder,\n    formatValue,\n    series,\n    yAxis,\n  } = props;\n\n  const visibleTicks = getVisibleDayTicks(series);\n  let yAxisState = null;\n  if (yAxis != null) {\n    yAxisState = resolveYAxisState(series, yAxis);\n  }\n  const categoryOrderString = categoryOrder as readonly string[];\n  const isCategory = (value: string): value is Category => {\n    return categoryOrderString.includes(value);\n  };\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 90,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: categoryOrder.map((category) => {\n        return {\n          id: category,\n          label: categoryLabel(category),\n          color: categoryColorById[category],\n        };\n      }),\n    },\n  ];\n\n  const colorById = (serie: { id: string | number }): string => {\n    if (typeof serie.id !== 'string' || !isCategory(serie.id)) {\n      return vars.colors.primary;\n    }\n\n    return categoryColorById[serie.id];\n  };\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<TimeSeriesLineChartSerie<Category>>): JSX.Element => {\n    const dayKey = String(slice.id);\n    const fallbackCategory = categoryOrder[0] ?? null;\n    const points = [...slice.points]\n      .map((point): SlicePointPayload<Category> | null => {\n        let credits = 0;\n        if (typeof point.data.y === 'number') {\n          credits = point.data.y;\n        }\n\n        let seriesId = fallbackCategory;\n        if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n          seriesId = point.seriesId;\n        }\n        if (seriesId == null) {\n          return null;\n        }\n\n        return {\n          seriesId,\n          data: { y: credits },\n          color: point.seriesColor,\n        };\n      })\n      .filter((point): point is SlicePointPayload<Category> => {\n        return point != null;\n      })\n      .sort((left, right) => {\n        const leftIndex = categoryOrder.indexOf(left.seriesId);\n        const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n        return leftIndex - rightIndex;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${dayKey}-${point.seriesId}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{categoryLabel(point.seriesId)}</span>\n              </span>\n              <strong>{formatValue(point.data.y)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={series}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={colorById}\n        xScale={{ type: 'point' }}\n        yScale={{\n          type: 'linear',\n          min: yAxisState?.min ?? 0,\n          max: yAxisState?.max ?? 'auto',\n        }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        gridYValues={yAxisState?.tickValues}\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          tickValues: visibleTicks,\n          format: (value) => {\n            return formatDayTick(String(value));\n          },\n          tickSize: 0,\n          tickPadding: 10,\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: yAxisState?.tickValues ?? 5,\n          format: (value) => {\n            if (typeof value !== 'number') {\n              return '';\n            }\n\n            return yAxis?.formatValue?.(value) ?? formatYAxisTick(value);\n          },\n        }}\n        enablePoints\n        useMesh\n        legends={legends}\n        theme={{\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          axis: {\n            ticks: {\n              text: {\n                fill: vars.colors.textMuted,\n                fontSize: 12,\n              },\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.border,\n              strokeWidth: 1,\n              strokeDasharray: '4 4',\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n        }}\n        sliceTooltip={sliceTooltip}\n        enableSlices=\"x\"\n        role=\"img\"\n        ariaLabel={ariaLabel}\n      />\n    </div>\n  );\n};\n\nexport default TimeSeriesLineChart;\n"],"mappings":"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"}
+{"version":3,"file":"TimeSeriesLineChart.js","names":[],"sources":["../../../../src/components/charts/TimeSeriesLineChart.tsx"],"sourcesContent":["import { ResponsiveLine, type SliceTooltipProps } from '@nivo/line';\nimport type { JSX } from 'react';\n\nimport * as styles from './timeSeriesLineChart.css.js';\nimport {\n  formatDayTick,\n  formatYAxisTick,\n  getVisibleDayTicks,\n  resolveYAxisState,\n  type TimeSeriesYAxisConfig,\n} from '../../internal/charts/timeSeriesLineChartHelpers.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nexport type TimeSeriesLineChartPoint = {\n  x: string;\n  y: number;\n};\n\nexport type TimeSeriesLineChartSerie<Category extends string> = {\n  id: Category;\n  data: readonly TimeSeriesLineChartPoint[];\n};\n\ntype SlicePointPayload<Category extends string> = {\n  seriesId: Category;\n  data: {\n    y: number;\n  };\n  color: string;\n};\n\nexport type TimeSeriesLineChartProps<Category extends string> = {\n  series: readonly TimeSeriesLineChartSerie<Category>[];\n  categoryOrder: readonly Category[];\n  categoryColorById: Readonly<Record<Category, string>>;\n  categoryLabel: (category: Category) => string;\n  formatValue: (value: number) => string;\n  ariaLabel: string;\n  yAxis?: TimeSeriesYAxisConfig;\n};\n\nexport const TimeSeriesLineChart = <Category extends string>(\n  props: TimeSeriesLineChartProps<Category>,\n): JSX.Element => {\n  const {\n    ariaLabel,\n    categoryColorById,\n    categoryLabel,\n    categoryOrder,\n    formatValue,\n    series,\n    yAxis,\n  } = props;\n\n  const visibleTicks = getVisibleDayTicks(series);\n  let yAxisState = null;\n  if (yAxis != null) {\n    yAxisState = resolveYAxisState(series, yAxis);\n  }\n  const categoryOrderString = categoryOrder as readonly string[];\n  const isCategory = (value: string): value is Category => {\n    return categoryOrderString.includes(value);\n  };\n\n  const legends = [\n    {\n      anchor: 'bottom' as const,\n      direction: 'row' as const,\n      translateY: 56,\n      itemWidth: 90,\n      itemHeight: 16,\n      itemsSpacing: 8,\n      symbolSize: 10,\n      symbolShape: 'circle' as const,\n      itemTextColor: vars.colors.textSecondary,\n      data: categoryOrder.map((category) => {\n        return {\n          id: category,\n          label: categoryLabel(category),\n          color: categoryColorById[category],\n        };\n      }),\n    },\n  ];\n\n  const colorById = (serie: { id: string | number }): string => {\n    if (typeof serie.id !== 'string' || !isCategory(serie.id)) {\n      return vars.colors.primary;\n    }\n\n    return categoryColorById[serie.id];\n  };\n\n  const sliceTooltip = ({\n    slice,\n  }: SliceTooltipProps<TimeSeriesLineChartSerie<Category>>): JSX.Element => {\n    const dayKey = String(slice.id);\n    const fallbackCategory = categoryOrder[0] ?? null;\n    const points = [...slice.points]\n      .map((point): SlicePointPayload<Category> | null => {\n        let credits = 0;\n        if (typeof point.data.y === 'number') {\n          credits = point.data.y;\n        }\n\n        let seriesId = fallbackCategory;\n        if (typeof point.seriesId === 'string' && isCategory(point.seriesId)) {\n          seriesId = point.seriesId;\n        }\n        if (seriesId == null) {\n          return null;\n        }\n\n        return {\n          seriesId,\n          data: { y: credits },\n          color: point.seriesColor,\n        };\n      })\n      .filter((point): point is SlicePointPayload<Category> => {\n        return point != null;\n      })\n      .sort((left, right) => {\n        const leftIndex = categoryOrder.indexOf(left.seriesId);\n        const rightIndex = categoryOrder.indexOf(right.seriesId);\n\n        return leftIndex - rightIndex;\n      });\n\n    return (\n      <div className={styles.tooltip}>\n        <p className={styles.tooltipDate}>{formatDayTick(dayKey)}</p>\n        {points.map((point) => {\n          return (\n            <div\n              key={`${dayKey}-${point.seriesId}`}\n              className={styles.tooltipRow}\n            >\n              <span className={styles.tooltipRowLabel}>\n                <span\n                  className={styles.tooltipSwatch}\n                  style={{ backgroundColor: point.color }}\n                  aria-hidden\n                />\n                <span>{categoryLabel(point.seriesId)}</span>\n              </span>\n              <strong>{formatValue(point.data.y)}</strong>\n            </div>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={styles.chartContainer}>\n      <ResponsiveLine\n        data={series}\n        margin={{ top: 14, right: 16, bottom: 74, left: 52 }}\n        colors={colorById}\n        xScale={{ type: 'point' }}\n        yScale={{\n          type: 'linear',\n          min: yAxisState?.min ?? 0,\n          max: yAxisState?.max ?? 'auto',\n        }}\n        curve=\"monotoneX\"\n        lineWidth={2.5}\n        pointSize={4}\n        pointBorderWidth={2}\n        pointBorderColor={{ from: 'seriesColor', modifiers: [['darker', 0.2]] }}\n        enableArea\n        areaOpacity={0.1}\n        enableGridX={false}\n        enableGridY\n        gridYValues={yAxisState?.tickValues}\n        axisTop={null}\n        axisRight={null}\n        axisBottom={{\n          tickValues: visibleTicks,\n          format: (value) => {\n            return formatDayTick(String(value));\n          },\n          tickSize: 0,\n          tickPadding: 10,\n        }}\n        axisLeft={{\n          tickSize: 0,\n          tickPadding: 8,\n          tickValues: yAxisState?.tickValues ?? 5,\n          format: (value) => {\n            if (typeof value !== 'number') {\n              return '';\n            }\n\n            return yAxis?.formatValue?.(value) ?? formatYAxisTick(value);\n          },\n        }}\n        enablePoints\n        useMesh\n        legends={legends}\n        theme={{\n          grid: {\n            line: {\n              stroke: vars.colors.borderLight,\n            },\n          },\n          axis: {\n            ticks: {\n              text: {\n                fill: vars.colors.textMuted,\n                fontSize: 12,\n              },\n            },\n          },\n          crosshair: {\n            line: {\n              stroke: vars.colors.border,\n              strokeWidth: 1,\n              strokeDasharray: '4 4',\n            },\n          },\n          tooltip: {\n            container: {\n              background: 'transparent',\n              boxShadow: 'none',\n              padding: 0,\n            },\n          },\n        }}\n        sliceTooltip={sliceTooltip}\n        enableSlices=\"x\"\n        role=\"img\"\n        ariaLabel={ariaLabel}\n      />\n    </div>\n  );\n};\n\nexport default TimeSeriesLineChart;\n"],"mappings":"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"}

package/lib/esm/components/dashboard/section_nav/SectionNav.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.css.js","names":[],"sources":["../../../../../src/components/dashboard/section_nav/SectionNav.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  width: 'full',\n});\n\nconst reset = sprinkles({\n  all: 'unset',\n});\n\nexport const item = style([\n  reset,\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'full',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'textSecondary',\n    backgroundColor: 'surface',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'backgroundSecondary',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  color: 'white',\n  backgroundColor: 'primary',\n});\n"],"mappings":""}
+{"version":3,"file":"SectionNav.css.js","names":[],"sources":["../../../../../src/components/dashboard/section_nav/SectionNav.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  width: 'full',\n});\n\nconst reset = sprinkles({\n  all: 'unset',\n});\n\nexport const item = style([\n  reset,\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'full',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    color: 'textSecondary',\n    backgroundColor: 'surface',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'backgroundSecondary',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  color: 'white',\n  backgroundColor: 'primary',\n});\n"],"mappings":""}

package/lib/esm/components/dashboard/segmented_nav/SegmentedNav.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedNav.css.js","names":[],"sources":["../../../../../src/components/dashboard/segmented_nav/SegmentedNav.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  width: 'full',\n});\n\nconst reset = sprinkles({\n  all: 'unset',\n});\n\nexport const item = style([\n  reset,\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'full',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n    color: 'textSecondary',\n    backgroundColor: 'backgroundSecondary',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  color: 'white',\n  backgroundColor: 'primary',\n});\n"],"mappings":""}
+{"version":3,"file":"SegmentedNav.css.js","names":[],"sources":["../../../../../src/components/dashboard/segmented_nav/SegmentedNav.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const nav = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  width: 'full',\n});\n\nconst reset = sprinkles({\n  all: 'unset',\n});\n\nexport const item = style([\n  reset,\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'full',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n    color: 'textSecondary',\n    backgroundColor: 'backgroundSecondary',\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n    textDecoration: 'none',\n  }),\n  stateSprinkles({\n    color: {\n      hover: 'text',\n    },\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n  }),\n  {\n    ':focus-visible': {\n      outline: `2px solid ${vars.colors['blue-500']}`,\n      outlineOffset: '2px',\n    },\n  },\n]);\n\nexport const active = sprinkles({\n  color: 'white',\n  backgroundColor: 'primary',\n});\n"],"mappings":""}