@mantine/core 9.0.0-alpha.7 → 9.0.0

package/cjs/components/Badge/Badge.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".root {\n  --badge-height-xs: 16px;\n  --badge-height-sm: 18px;\n  --badge-height-md: 20px;\n  --badge-height-lg: 26px;\n  --badge-height-xl: 32px;\n\n  --badge-fz-xs: 9px;\n  --badge-fz-sm: 10px;\n  --badge-fz-md: 11px;\n  --badge-fz-lg: 13px;\n  --badge-fz-xl: 16px;\n\n  --badge-padding-x-xs: 6px;\n  --badge-padding-x-sm: 8px;\n  --badge-padding-x-md: 10px;\n  --badge-padding-x-lg: 12px;\n  --badge-padding-x-xl: 16px;\n\n  --badge-height: var(--badge-height-md);\n  --badge-fz: var(--badge-fz-md);\n  --badge-padding-x: var(--badge-padding-x-md);\n  --badge-radius: 1000px;\n  --badge-lh: calc(var(--badge-height) - rem(2px));\n  --badge-color: var(--mantine-color-white);\n  --badge-bg: var(--mantine-primary-color-filled);\n  --badge-border-width: 1px;\n  --badge-bd: var(--badge-border-width) solid transparent;\n\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--badge-fz);\n  border-radius: var(--badge-radius);\n  height: var(--badge-height);\n  line-height: var(--badge-lh);\n  text-decoration: none;\n  padding: 0 var(--badge-padding-x);\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-transform: uppercase;\n  font-weight: var(--mantine-font-weight-bold);\n  letter-spacing: 0.25px;\n  cursor: default;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: var(--badge-color);\n  background: var(--badge-bg);\n  border: var(--badge-bd);\n\n  &:where([data-with-left-section], [data-variant='dot']) {\n    grid-template-columns: auto 1fr;\n  }\n\n  &:where([data-with-right-section]) {\n    grid-template-columns: 1fr auto;\n  }\n\n  &:where(\n    [data-with-left-section][data-with-right-section],\n    [data-variant='dot'][data-with-right-section]\n  ) {\n    grid-template-columns: auto 1fr auto;\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n  }\n\n  &:where([data-circle]) {\n    padding-inline: 2px;\n    display: flex;\n    width: var(--badge-height);\n  }\n}\n\n.root--dot {\n  --badge-dot-size: calc(var(--badge-height) / 3.4);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n    border-color: var(--mantine-color-dark-5);\n    color: var(--mantine-color-white);\n  }\n\n  &::before {\n    content: '';\n    display: block;\n    width: var(--badge-dot-size);\n    height: var(--badge-dot-size);\n    border-radius: var(--badge-dot-size);\n    background-color: var(--badge-dot-color);\n    margin-inline-end: var(--badge-dot-size);\n  }\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  cursor: inherit;\n}\n\n.section {\n  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--badge-section-margin);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--badge-section-margin);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.cjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".root {\n  --badge-height-xs: 16px;\n  --badge-height-sm: 18px;\n  --badge-height-md: 20px;\n  --badge-height-lg: 26px;\n  --badge-height-xl: 32px;\n\n  --badge-fz-xs: 9px;\n  --badge-fz-sm: 10px;\n  --badge-fz-md: 11px;\n  --badge-fz-lg: 13px;\n  --badge-fz-xl: 16px;\n\n  --badge-padding-x-xs: 6px;\n  --badge-padding-x-sm: 8px;\n  --badge-padding-x-md: 10px;\n  --badge-padding-x-lg: 12px;\n  --badge-padding-x-xl: 16px;\n\n  --badge-height: var(--badge-height-md);\n  --badge-fz: var(--badge-fz-md);\n  --badge-padding-x: var(--badge-padding-x-md);\n  --badge-radius: 1000px;\n  --badge-lh: calc(var(--badge-height) - rem(2px));\n  --badge-color: var(--mantine-color-white);\n  --badge-bg: var(--mantine-primary-color-filled);\n  --badge-border-width: 1px;\n  --badge-bd: var(--badge-border-width) solid transparent;\n\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--badge-fz);\n  border-radius: var(--badge-radius);\n  height: var(--badge-height);\n  line-height: var(--badge-lh);\n  text-decoration: none;\n  padding: 0 var(--badge-padding-x);\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-transform: uppercase;\n  font-weight: var(--mantine-font-weight-bold);\n  letter-spacing: 0.25px;\n  cursor: default;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: var(--badge-color);\n  background: var(--badge-bg);\n  border: var(--badge-bd);\n\n  &:where([data-with-left-section], [data-variant='dot']) {\n    grid-template-columns: auto 1fr;\n  }\n\n  &:where([data-with-right-section]) {\n    grid-template-columns: 1fr auto;\n  }\n\n  &:where(\n    [data-with-left-section][data-with-right-section],\n    [data-variant='dot'][data-with-right-section]\n  ) {\n    grid-template-columns: auto 1fr auto;\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n  }\n\n  &:where([data-circle]) {\n    padding-inline: 2px;\n    display: flex;\n    width: var(--badge-height);\n  }\n}\n\n.root--dot {\n  --badge-dot-size: calc(var(--badge-height) / 3.4);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n    border-color: var(--mantine-color-dark-5);\n    color: var(--mantine-color-white);\n  }\n\n  &::before {\n    content: '';\n    display: block;\n    width: var(--badge-dot-size);\n    height: var(--badge-dot-size);\n    border-radius: var(--badge-dot-size);\n    background-color: var(--badge-dot-color);\n    margin-inline-end: var(--badge-dot-size);\n  }\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  cursor: inherit;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n}\n\n.section {\n  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--badge-section-margin);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--badge-section-margin);\n  }\n}\n"],"mappings":""}

package/cjs/components/Button/Button.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".root {\n  --button-height-xs: 30px;\n  --button-height-sm: 36px;\n  --button-height-md: 42px;\n  --button-height-lg: 50px;\n  --button-height-xl: 60px;\n\n  --button-height-compact-xs: 22px;\n  --button-height-compact-sm: 26px;\n  --button-height-compact-md: 30px;\n  --button-height-compact-lg: 34px;\n  --button-height-compact-xl: 40px;\n\n  --button-padding-x-xs: 14px;\n  --button-padding-x-sm: 18px;\n  --button-padding-x-md: 22px;\n  --button-padding-x-lg: 26px;\n  --button-padding-x-xl: 32px;\n\n  --button-padding-x-compact-xs: 7px;\n  --button-padding-x-compact-sm: 8px;\n  --button-padding-x-compact-md: 10px;\n  --button-padding-x-compact-lg: 12px;\n  --button-padding-x-compact-xl: 14px;\n\n  --button-height: var(--button-height-sm);\n  --button-padding-x: var(--button-padding-x-sm);\n  --button-color: var(--mantine-color-white);\n\n  user-select: none;\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n\n  width: auto;\n  cursor: pointer;\n  display: inline-block;\n  border-radius: var(--button-radius, var(--mantine-radius-default));\n  font-size: var(--button-fz, var(--mantine-font-size-sm));\n  background: var(--button-bg, var(--mantine-primary-color-filled));\n  border: var(--button-bd, rem(1px) solid transparent);\n  color: var(--button-color, var(--mantine-color-white));\n  height: var(--button-height, var(--button-height-sm));\n  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n  vertical-align: middle;\n\n  &:where([data-block]) {\n    display: block;\n    width: 100%;\n  }\n\n  &:where([data-with-left-section]) {\n    padding-inline-start: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where([data-with-right-section]) {\n    padding-inline-end: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n    cursor: not-allowed;\n    border: 1px solid transparent;\n    transform: none;\n    color: var(--mantine-color-disabled-color);\n    background: var(--mantine-color-disabled);\n  }\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    inset: -1px;\n    border-radius: var(--button-radius, var(--mantine-radius-default));\n    transform: translateY(-100%);\n    opacity: 0;\n    filter: blur(12px);\n    transition:\n      transform 150ms ease,\n      opacity 100ms ease;\n\n    @mixin where-light {\n      background-color: rgba(255, 255, 255, 0.15);\n    }\n\n    @mixin where-dark {\n      background-color: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  &:where([data-loading]) {\n    cursor: not-allowed;\n    transform: none;\n\n    &::before {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    & .inner {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  @mixin hover {\n    &:where(:not([data-loading], :disabled, [data-disabled])) {\n      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));\n      color: var(--button-hover-color, var(--button-color));\n    }\n  }\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  justify-content: var(--button-justify, center);\n  height: 100%;\n  overflow: visible;\n  transition:\n    transform 150ms ease,\n    opacity 100ms ease;\n}\n\n.label {\n  white-space: nowrap;\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  opacity: 1;\n\n  &:where([data-loading]) {\n    opacity: 0.2;\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}\n\n.group {\n  --button-border-width: 1px;\n  display: flex;\n\n  & :where(.root) {\n    &:focus {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    flex-direction: row;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n        border-inline-end-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-end-start-radius: 0;\n        border-start-start-radius: 0;\n        border-inline-start-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n}\n\n.groupSection {\n  --section-height-xs: 30px;\n  --section-height-sm: 36px;\n  --section-height-md: 42px;\n  --section-height-lg: 50px;\n  --section-height-xl: 60px;\n\n  --section-height-compact-xs: 22px;\n  --section-height-compact-sm: 26px;\n  --section-height-compact-md: 30px;\n  --section-height-compact-lg: 34px;\n  --section-height-compact-xl: 40px;\n\n  --section-padding-x-xs: 14px;\n  --section-padding-x-sm: 18px;\n  --section-padding-x-md: 22px;\n  --section-padding-x-lg: 26px;\n  --section-padding-x-xl: 32px;\n\n  --section-padding-x-compact-xs: 7px;\n  --section-padding-x-compact-sm: 8px;\n  --section-padding-x-compact-md: 10px;\n  --section-padding-x-compact-lg: 12px;\n  --section-padding-x-compact-xl: 14px;\n\n  --section-height: var(--section-height-sm);\n  --section-padding-x: var(--section-padding-x-sm);\n  --section-color: var(--mantine-color-white);\n\n  font-weight: var(--mantine-font-weight-medium);\n  width: auto;\n  border-radius: var(--section-radius, var(--mantine-radius-default));\n  font-size: var(--section-fz, var(--mantine-font-size-sm));\n  background: var(--section-bg, var(--mantine-primary-color-filled));\n  border: var(--section-bd, rem(1px) solid transparent);\n  color: var(--section-color, var(--mantine-color-white));\n  height: var(--section-height, var(--section-height-sm));\n  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n  vertical-align: middle;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".root {\n  --button-height-xs: 30px;\n  --button-height-sm: 36px;\n  --button-height-md: 42px;\n  --button-height-lg: 50px;\n  --button-height-xl: 60px;\n\n  --button-height-compact-xs: 22px;\n  --button-height-compact-sm: 26px;\n  --button-height-compact-md: 30px;\n  --button-height-compact-lg: 34px;\n  --button-height-compact-xl: 40px;\n\n  --button-padding-x-xs: 14px;\n  --button-padding-x-sm: 18px;\n  --button-padding-x-md: 22px;\n  --button-padding-x-lg: 26px;\n  --button-padding-x-xl: 32px;\n\n  --button-padding-x-compact-xs: 7px;\n  --button-padding-x-compact-sm: 8px;\n  --button-padding-x-compact-md: 10px;\n  --button-padding-x-compact-lg: 12px;\n  --button-padding-x-compact-xl: 14px;\n\n  --button-height: var(--button-height-sm);\n  --button-padding-x: var(--button-padding-x-sm);\n  --button-color: var(--mantine-color-white);\n\n  user-select: none;\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n\n  width: auto;\n  cursor: pointer;\n  display: inline-block;\n  border-radius: var(--button-radius, var(--mantine-radius-default));\n  font-size: var(--button-fz, var(--mantine-font-size-sm));\n  background: var(--button-bg, var(--mantine-primary-color-filled));\n  border: var(--button-bd, rem(1px) solid transparent);\n  color: var(--button-color, var(--mantine-color-white));\n  height: var(--button-height, var(--button-height-sm));\n  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n  vertical-align: middle;\n\n  &:where([data-block]) {\n    display: block;\n    width: 100%;\n  }\n\n  &:where([data-with-left-section]) {\n    padding-inline-start: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where([data-with-right-section]) {\n    padding-inline-end: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n    cursor: not-allowed;\n    border: 1px solid transparent;\n    transform: none;\n    color: var(--mantine-color-disabled-color);\n    background: var(--mantine-color-disabled);\n  }\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    inset: -1px;\n    border-radius: var(--button-radius, var(--mantine-radius-default));\n    transform: translateY(-100%);\n    opacity: 0;\n    filter: blur(12px);\n    transition:\n      transform 150ms ease,\n      opacity 100ms ease;\n\n    @mixin where-light {\n      background-color: rgba(255, 255, 255, 0.15);\n    }\n\n    @mixin where-dark {\n      background-color: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  &:where([data-loading]) {\n    cursor: not-allowed;\n    transform: none;\n\n    &::before {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    & .inner {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  @mixin hover {\n    &:where(:not([data-loading], :disabled, [data-disabled])) {\n      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));\n      color: var(--button-hover-color, var(--button-color));\n    }\n  }\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  justify-content: var(--button-justify, center);\n  height: 100%;\n  overflow: visible;\n  transition:\n    transform 150ms ease,\n    opacity 100ms ease;\n}\n\n.label {\n  white-space: nowrap;\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  opacity: 1;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-loading]) {\n    opacity: 0.2;\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}\n\n.group {\n  --button-border-width: 1px;\n  display: flex;\n\n  & :where(.root) {\n    &:focus {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    flex-direction: row;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n        border-inline-end-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-end-start-radius: 0;\n        border-start-start-radius: 0;\n        border-inline-start-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n}\n\n.groupSection {\n  --section-height-xs: 30px;\n  --section-height-sm: 36px;\n  --section-height-md: 42px;\n  --section-height-lg: 50px;\n  --section-height-xl: 60px;\n\n  --section-height-compact-xs: 22px;\n  --section-height-compact-sm: 26px;\n  --section-height-compact-md: 30px;\n  --section-height-compact-lg: 34px;\n  --section-height-compact-xl: 40px;\n\n  --section-padding-x-xs: 14px;\n  --section-padding-x-sm: 18px;\n  --section-padding-x-md: 22px;\n  --section-padding-x-lg: 26px;\n  --section-padding-x-xl: 32px;\n\n  --section-padding-x-compact-xs: 7px;\n  --section-padding-x-compact-sm: 8px;\n  --section-padding-x-compact-md: 10px;\n  --section-padding-x-compact-lg: 12px;\n  --section-padding-x-compact-xl: 14px;\n\n  --section-height: var(--section-height-sm);\n  --section-padding-x: var(--section-padding-x-sm);\n  --section-color: var(--mantine-color-white);\n\n  font-weight: var(--mantine-font-weight-medium);\n  width: auto;\n  border-radius: var(--section-radius, var(--mantine-radius-default));\n  font-size: var(--section-fz, var(--mantine-font-size-sm));\n  background: var(--section-bg, var(--mantine-primary-color-filled));\n  border: var(--section-bd, rem(1px) solid transparent);\n  color: var(--section-color, var(--mantine-color-white));\n  height: var(--section-height, var(--section-height-sm));\n  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n  vertical-align: middle;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":""}

package/cjs/components/Checkbox/Checkbox.cjs

@@ -25,7 +25,8 @@ const defaultProps = {
 	labelPosition: "right",
 	icon: require_CheckIcon.CheckboxIcon,
 	withErrorStyles: true,
-	variant: "filled"
+	variant: "filled",
+	radius: "sm"
 };
 const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, size, iconColor, variant, autoContrast }) => {
 	const parsedColor = require_parse_theme_color.parseThemeColor({

package/cjs/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","CheckboxGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { CheckboxCard } from './CheckboxCard/CheckboxCard';\nimport { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';\nimport { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","CheckboxGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { CheckboxCard } from './CheckboxCard/CheckboxCard';\nimport { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';\nimport { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n"],"mappings":"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"}

package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs

@@ -18,7 +18,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx
 const defaultProps = {
 	icon: require_CheckIcon.CheckboxIcon,
-	variant: "filled"
+	variant: "filled",
+	radius: "sm"
 };
 const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, size, iconColor, variant, autoContrast }) => {
 	const parsedColor = require_parse_theme_color.parseThemeColor({

package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIndicator.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","CheckboxCardContext","Box","classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAMA,kBAAAA;CACN,SAAS;CACV;AAED,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAeC,wBAAAA,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrBA,wBAAAA,cAAc,WAAW,MAAM,GAC/BC,gCAAAA,qBAAqB,cAAc,MAAM,GACvCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,OAAA,GAAA,MAAA,KAAUC,qBAAAA,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}
+{"version":3,"file":"CheckboxIndicator.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","CheckboxCardContext","Box","classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' | 'icon';\nexport type CheckboxIndicatorVariant = 'filled' | 'outline';\nexport type CheckboxIndicatorCssVariables = {\n  indicator: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n  extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Determines whether the component should have checked styles */\n  checked?: boolean;\n\n  /** Indicates disabled state */\n  disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n  props: CheckboxIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CheckboxIndicatorStylesNames;\n  vars: CheckboxIndicatorCssVariables;\n  variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: CheckboxIcon,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n  const props = useProps('CheckboxIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    indeterminate,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CheckboxIndicatorFactory>({\n    name: 'CheckboxIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(CheckboxCardContext);\n  const _checked =\n    typeof checked === 'boolean' || typeof indeterminate === 'boolean'\n      ? checked || indeterminate\n      : ctx?.checked || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAMA,kBAAAA;CACN,SAAS;CACT,QAAQ;CACT;AAED,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAeC,wBAAAA,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrBA,wBAAAA,cAAc,WAAW,MAAM,GAC/BC,gCAAAA,qBAAqB,cAAc,MAAM,GACvCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,OAAA,GAAA,MAAA,KAAUC,qBAAAA,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}

package/cjs/components/Chip/Chip.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.module.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n  --chip-size-xs: 23px;\n  --chip-size-sm: 28px;\n  --chip-size-md: 32px;\n  --chip-size-lg: 36px;\n  --chip-size-xl: 40px;\n\n  --chip-icon-size-xs: 9px;\n  --chip-icon-size-sm: 12px;\n  --chip-icon-size-md: 14px;\n  --chip-icon-size-lg: 16px;\n  --chip-icon-size-xl: 18px;\n\n  --chip-padding-xs: 16px;\n  --chip-padding-sm: 20px;\n  --chip-padding-md: 24px;\n  --chip-padding-lg: 28px;\n  --chip-padding-xl: 32px;\n\n  --chip-checked-padding-xs: 8.2px;\n  --chip-checked-padding-sm: 10px;\n  --chip-checked-padding-md: 11.7px;\n  --chip-checked-padding-lg: 13.5px;\n  --chip-checked-padding-xl: 15.7px;\n\n  --chip-spacing-xs: 10px;\n  --chip-spacing-sm: 12px;\n  --chip-spacing-md: 16px;\n  --chip-spacing-lg: 20px;\n  --chip-spacing-xl: 22px;\n\n  --chip-size: var(--chip-size-sm);\n  --chip-icon-size: var(--chip-icon-size-sm);\n  --chip-padding: var(--chip-padding-sm);\n  --chip-spacing: var(--chip-spacing-sm);\n  --chip-checked-padding: var(--chip-checked-padding-sm);\n  --chip-bg: var(--mantine-primary-color-filled);\n  --chip-hover: var(--mantine-primary-color-filled-hover);\n  --chip-color: var(--mantine-color-white);\n  --chip-bd: 1px solid transparent;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  border-radius: var(--chip-radius, 1000rem);\n  height: var(--chip-size);\n  font-size: var(--chip-fz, var(--mantine-font-size-sm));\n  line-height: calc(var(--chip-size) - rem(2px));\n  padding-inline: var(--chip-padding);\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  &:where([data-checked]) {\n    padding-inline: var(--chip-checked-padding);\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    color: var(--mantine-color-disabled-color);\n  }\n}\n\n.label--outline:not([data-disabled]) {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    border: var(--chip-bd);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    color: var(--chip-color);\n    background-color: var(--chip-bg);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.iconWrapper {\n  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  height: var(--chip-icon-size);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.checkIcon {\n  width: var(--chip-icon-size);\n  height: var(--chip-icon-size);\n  display: block;\n  color: var(--chip-icon-color, inherit);\n}\n\n.input {\n  width: 0;\n  height: 0;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus-visible + .label {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chip.module.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n  --chip-size-xs: 23px;\n  --chip-size-sm: 28px;\n  --chip-size-md: 32px;\n  --chip-size-lg: 36px;\n  --chip-size-xl: 40px;\n\n  --chip-icon-size-xs: 9px;\n  --chip-icon-size-sm: 12px;\n  --chip-icon-size-md: 14px;\n  --chip-icon-size-lg: 16px;\n  --chip-icon-size-xl: 18px;\n\n  --chip-padding-xs: 16px;\n  --chip-padding-sm: 20px;\n  --chip-padding-md: 24px;\n  --chip-padding-lg: 28px;\n  --chip-padding-xl: 32px;\n\n  --chip-checked-padding-xs: 8.2px;\n  --chip-checked-padding-sm: 10px;\n  --chip-checked-padding-md: 11.7px;\n  --chip-checked-padding-lg: 13.5px;\n  --chip-checked-padding-xl: 15.7px;\n\n  --chip-spacing-xs: 10px;\n  --chip-spacing-sm: 12px;\n  --chip-spacing-md: 16px;\n  --chip-spacing-lg: 20px;\n  --chip-spacing-xl: 22px;\n\n  --chip-size: var(--chip-size-sm);\n  --chip-icon-size: var(--chip-icon-size-sm);\n  --chip-padding: var(--chip-padding-sm);\n  --chip-spacing: var(--chip-spacing-sm);\n  --chip-checked-padding: var(--chip-checked-padding-sm);\n  --chip-bg: var(--mantine-primary-color-filled);\n  --chip-hover: var(--mantine-primary-color-filled-hover);\n  --chip-color: var(--mantine-color-white);\n  --chip-bd: 1px solid transparent;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n  user-select: none;\n  border-radius: var(--chip-radius, 1000rem);\n  height: var(--chip-size);\n  font-size: var(--chip-fz, var(--mantine-font-size-sm));\n  line-height: calc(var(--chip-size) - rem(2px));\n  padding-inline: var(--chip-padding);\n  cursor: pointer;\n  white-space: nowrap;\n  -webkit-tap-highlight-color: transparent;\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-checked]) {\n    padding-inline: var(--chip-checked-padding);\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    color: var(--mantine-color-disabled-color);\n  }\n}\n\n.label--outline:not([data-disabled]) {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: 1px solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border: 1px solid var(--mantine-color-dark-4);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    border: var(--chip-bd);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n  border: 1px solid transparent;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-checked]) {\n    --chip-icon-color: var(--chip-color);\n    color: var(--chip-color);\n    background-color: var(--chip-bg);\n\n    @mixin hover {\n      background-color: var(--chip-hover);\n    }\n  }\n}\n\n.iconWrapper {\n  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n  height: var(--chip-icon-size);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n.checkIcon {\n  width: var(--chip-icon-size);\n  height: var(--chip-icon-size);\n  display: block;\n  color: var(--chip-icon-color, inherit);\n}\n\n.input {\n  width: 0;\n  height: 0;\n  padding: 0;\n  opacity: 0;\n  margin: 0;\n\n  &:focus-visible + .label {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n}\n"],"mappings":""}

package/cjs/components/Pill/Pill.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.module.cjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n  --pill-fz-xs: 10px;\n  --pill-fz-sm: 12px;\n  --pill-fz-md: 14px;\n  --pill-fz-lg: 16px;\n  --pill-fz-xl: 18px;\n\n  --pill-height-xs: 18px;\n  --pill-height-sm: 22px;\n  --pill-height-md: 25px;\n  --pill-height-lg: 28px;\n  --pill-height-xl: 32px;\n\n  --pill-fz: var(--pill-fz-sm);\n  --pill-height: var(--pill-height-sm);\n\n  font-size: var(--pill-fz);\n  flex: 0;\n  height: var(--pill-height);\n  padding-inline: 0.8em;\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--pill-radius, 1000rem);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n  max-width: 100%;\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    color: var(--mantine-color-dark-0);\n  }\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  &:where([data-with-remove]:not(:has(button:disabled))) {\n    padding-inline-end: 0;\n  }\n\n  &:where([data-disabled], :has(button:disabled)) {\n    cursor: not-allowed;\n  }\n}\n\n.root--default {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.root--contrast {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.label {\n  cursor: inherit;\n  overflow: hidden;\n  height: 100%;\n  line-height: var(--pill-height);\n  text-overflow: ellipsis;\n}\n\n.remove {\n  color: inherit;\n  font-size: inherit;\n  height: 100%;\n  min-height: unset;\n  min-width: 2em;\n  width: unset;\n  border-radius: 0;\n  padding-inline-start: 0.1em;\n  padding-inline-end: 0.3em;\n  flex: 0;\n  border-end-end-radius: var(--pill-radius, 50%);\n  border-start-end-radius: var(--pill-radius, 50%);\n\n  .root[data-disabled] > &,\n  &:disabled {\n    display: none;\n    background-color: transparent;\n    width: 0.8em;\n    min-width: 0.8em;\n    padding: 0;\n    cursor: not-allowed;\n\n    & > svg {\n      display: none;\n    }\n  }\n\n  & > svg {\n    pointer-events: none;\n  }\n}\n\n.group {\n  --pg-gap-xs: 6px;\n  --pg-gap-sm: 8px;\n  --pg-gap-md: 10px;\n  --pg-gap-lg: 12px;\n  --pg-gap-xl: 12px;\n  --pg-gap: var(--pg-gap-sm);\n\n  display: flex;\n  align-items: center;\n  gap: var(--pg-gap);\n  flex-wrap: wrap;\n}\n"],"mappings":""}
+{"version":3,"file":"Pill.module.cjs","names":[],"sources":["../../../src/components/Pill/Pill.module.css"],"sourcesContent":[".root {\n  --pill-fz-xs: 10px;\n  --pill-fz-sm: 12px;\n  --pill-fz-md: 14px;\n  --pill-fz-lg: 16px;\n  --pill-fz-xl: 18px;\n\n  --pill-height-xs: 18px;\n  --pill-height-sm: 22px;\n  --pill-height-md: 25px;\n  --pill-height-lg: 28px;\n  --pill-height-xl: 32px;\n\n  --pill-fz: var(--pill-fz-sm);\n  --pill-height: var(--pill-height-sm);\n\n  font-size: var(--pill-fz);\n  flex: 0;\n  height: var(--pill-height);\n  padding-inline: 0.8em;\n  display: inline-flex;\n  align-items: center;\n  border-radius: var(--pill-radius, 1000rem);\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n  max-width: 100%;\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-7);\n    color: var(--mantine-color-dark-0);\n  }\n\n  @mixin where-light {\n    color: var(--mantine-color-black);\n  }\n\n  &:where([data-with-remove]:not(:has(button:disabled))) {\n    padding-inline-end: 0;\n  }\n\n  &:where([data-disabled], :has(button:disabled)) {\n    cursor: not-allowed;\n  }\n}\n\n.root--default {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.root--contrast {\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n\n    &:where([data-disabled], :has(button:disabled)) {\n      background-color: var(--mantine-color-disabled);\n    }\n  }\n}\n\n.label {\n  cursor: inherit;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n}\n\n.remove {\n  color: inherit;\n  font-size: inherit;\n  height: 100%;\n  min-height: unset;\n  min-width: 2em;\n  width: unset;\n  border-radius: 0;\n  padding-inline-start: 0.1em;\n  padding-inline-end: 0.3em;\n  flex: 0;\n  border-end-end-radius: var(--pill-radius, 50%);\n  border-start-end-radius: var(--pill-radius, 50%);\n\n  .root[data-disabled] > &,\n  &:disabled {\n    display: none;\n    background-color: transparent;\n    width: 0.8em;\n    min-width: 0.8em;\n    padding: 0;\n    cursor: not-allowed;\n\n    & > svg {\n      display: none;\n    }\n  }\n\n  & > svg {\n    pointer-events: none;\n  }\n}\n\n.group {\n  --pg-gap-xs: 6px;\n  --pg-gap-sm: 8px;\n  --pg-gap-md: 10px;\n  --pg-gap-lg: 12px;\n  --pg-gap-xl: 12px;\n  --pg-gap: var(--pg-gap-sm);\n\n  display: flex;\n  align-items: center;\n  gap: var(--pg-gap);\n  flex-wrap: wrap;\n}\n"],"mappings":""}

package/cjs/components/SegmentedControl/SegmentedControl.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n  --sc-padding-xs: 2px 6px;\n  --sc-padding-sm: 3px 10px;\n  --sc-padding-md: 4px 14px;\n  --sc-padding-lg: 7px 16px;\n  --sc-padding-xl: 10px 20px;\n\n  --sc-transition-duration: 200ms;\n  --sc-padding: var(--sc-padding-sm);\n  --sc-transition-timing-function: ease;\n  --sc-font-size: var(--mantine-font-size-sm);\n\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  width: auto;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  overflow: hidden;\n  padding: 4px;\n\n  &:where([data-full-width]) {\n    display: flex;\n  }\n\n  &:where([data-orientation='vertical']) {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n\n    &:where([data-full-width]) {\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-8);\n  }\n}\n\n.indicator {\n  position: absolute;\n  display: block;\n  z-index: 1;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n  @mixin where-light {\n    box-shadow: var(--sc-shadow, none);\n    background-color: var(--sc-color, var(--mantine-color-white));\n  }\n\n  @mixin where-dark {\n    box-shadow: none;\n    background-color: var(--sc-color, var(--mantine-color-dark-5));\n  }\n}\n\n.label {\n  -webkit-tap-highlight-color: transparent;\n  font-weight: var(--mantine-font-weight-medium);\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  font-size: var(--sc-font-size);\n  padding: var(--sc-padding);\n  transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  cursor: pointer;\n\n  /* outline is controlled by .input */\n  outline: var(--segmented-control-outline, none);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-read-only]) {\n    cursor: default;\n  }\n\n  fieldset:disabled &,\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n  }\n\n  &:where([data-active]) {\n    @mixin where-light {\n      color: var(--sc-label-color, var(--mantine-color-black));\n    }\n\n    @mixin where-dark {\n      color: var(--sc-label-color, var(--mantine-color-white));\n    }\n\n    &::before {\n      .root:where([data-initialized]) & {\n        display: none;\n      }\n      content: '';\n      inset: 0;\n      z-index: 0;\n      position: absolute;\n      border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n      @mixin where-light {\n        box-shadow: var(--sc-shadow, none);\n        background-color: var(--sc-color, var(--mantine-color-white));\n      }\n\n      @mixin where-dark {\n        box-shadow: none;\n        background-color: var(--sc-color, var(--mantine-color-dark-5));\n      }\n    }\n  }\n\n  &:where(:not([data-disabled], [data-active], [data-read-only])) {\n    @mixin hover {\n      @mixin where-light {\n        color: var(--mantine-color-black);\n      }\n\n      @mixin where-dark {\n        color: var(--mantine-color-white);\n      }\n    }\n  }\n\n  fieldset:disabled & {\n    @mixin hover {\n      color: var(--mantine-color-disabled-color) !important;\n    }\n  }\n}\n\n.input {\n  height: 0;\n  width: 0;\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n\n  &[data-focus-ring='auto'] {\n    &:focus:focus-visible {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n\n  &[data-focus-ring='always'] {\n    &:focus {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n}\n\n.control {\n  position: relative;\n  flex: 1;\n  z-index: 2;\n  transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n  .root[data-with-items-borders] :where(&)::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    inset-inline-start: 0;\n    background-color: var(--separator-color);\n    width: 1px;\n    transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  }\n\n  &[data-orientation='vertical'] {\n    &::before {\n      top: 0;\n      inset-inline: 0;\n      bottom: auto;\n      height: 1px;\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    --separator-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --separator-color: var(--mantine-color-dark-4);\n  }\n\n  &:first-of-type {\n    &::before {\n      --separator-color: transparent;\n    }\n  }\n\n  &[data-active] {\n    [data-mantine-color-scheme] & {\n      &,\n      & + .control {\n        &::before {\n          --separator-color: transparent;\n        }\n      }\n    }\n  }\n}\n\n.innerLabel {\n  position: relative;\n  z-index: 2;\n}\n"],"mappings":""}
+{"version":3,"file":"SegmentedControl.module.cjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n  --sc-padding-xs: 2px 6px;\n  --sc-padding-sm: 3px 10px;\n  --sc-padding-md: 4px 14px;\n  --sc-padding-lg: 7px 16px;\n  --sc-padding-xl: 10px 20px;\n\n  --sc-transition-duration: 200ms;\n  --sc-padding: var(--sc-padding-sm);\n  --sc-transition-timing-function: ease;\n  --sc-font-size: var(--mantine-font-size-sm);\n\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  width: auto;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  overflow: hidden;\n  padding: 4px;\n\n  &:where([data-full-width]) {\n    display: flex;\n  }\n\n  &:where([data-orientation='vertical']) {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n\n    &:where([data-full-width]) {\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-8);\n  }\n}\n\n.indicator {\n  position: absolute;\n  display: block;\n  z-index: 1;\n  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n  @mixin where-light {\n    box-shadow: var(--sc-shadow, none);\n    background-color: var(--sc-color, var(--mantine-color-white));\n  }\n\n  @mixin where-dark {\n    box-shadow: none;\n    background-color: var(--sc-color, var(--mantine-color-dark-5));\n  }\n}\n\n.label {\n  -webkit-tap-highlight-color: transparent;\n  font-weight: var(--mantine-font-weight-medium);\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n  font-size: var(--sc-font-size);\n  padding: var(--sc-padding);\n  transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  cursor: pointer;\n\n  /* outline is controlled by .input */\n  outline: var(--segmented-control-outline, none);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-read-only]) {\n    cursor: default;\n  }\n\n  fieldset:disabled &,\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n  }\n\n  &:where([data-active]) {\n    @mixin where-light {\n      color: var(--sc-label-color, var(--mantine-color-black));\n    }\n\n    @mixin where-dark {\n      color: var(--sc-label-color, var(--mantine-color-white));\n    }\n\n    &::before {\n      .root:where([data-initialized]) & {\n        display: none;\n      }\n      content: '';\n      inset: 0;\n      z-index: 0;\n      position: absolute;\n      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n      @mixin where-light {\n        box-shadow: var(--sc-shadow, none);\n        background-color: var(--sc-color, var(--mantine-color-white));\n      }\n\n      @mixin where-dark {\n        box-shadow: none;\n        background-color: var(--sc-color, var(--mantine-color-dark-5));\n      }\n    }\n  }\n\n  &:where(:not([data-disabled], [data-active], [data-read-only])) {\n    @mixin hover {\n      @mixin where-light {\n        color: var(--mantine-color-black);\n      }\n\n      @mixin where-dark {\n        color: var(--mantine-color-white);\n      }\n    }\n  }\n\n  fieldset:disabled & {\n    @mixin hover {\n      color: var(--mantine-color-disabled-color) !important;\n    }\n  }\n}\n\n.input {\n  height: 0;\n  width: 0;\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n\n  &[data-focus-ring='auto'] {\n    &:focus:focus-visible {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n\n  &[data-focus-ring='always'] {\n    &:focus {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n}\n\n.control {\n  position: relative;\n  flex: 1;\n  z-index: 2;\n  transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n  .root[data-with-items-borders] :where(&)::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    inset-inline-start: 0;\n    background-color: var(--separator-color);\n    width: 1px;\n    transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  }\n\n  &[data-orientation='vertical'] {\n    &::before {\n      top: 0;\n      inset-inline: 0;\n      bottom: auto;\n      height: 1px;\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    --separator-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --separator-color: var(--mantine-color-dark-4);\n  }\n\n  &:first-of-type {\n    &::before {\n      --separator-color: transparent;\n    }\n  }\n\n  &[data-active] {\n    [data-mantine-color-scheme] & {\n      &,\n      & + .control {\n        &::before {\n          --separator-color: transparent;\n        }\n      }\n    }\n  }\n}\n\n.innerLabel {\n  position: relative;\n  z-index: 2;\n}\n"],"mappings":""}

package/cjs/components/Stepper/Stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs","names":["createVarsResolver","getThemeColor","getAutoContrastValue","getContrastColor","getSize","rem","getSpacing","getRadius","getFontSize","factory","useProps","useStyles","Children","StepperCompleted","Activity","StepperProvider","Box","classes","StepperStep"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { StepperProvider } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\n\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n  | 'root'\n  | 'separator'\n  | 'steps'\n  | 'content'\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport type StepperCssVariables = {\n  root:\n    | '--stepper-color'\n    | '--stepper-icon-color'\n    | '--stepper-icon-size'\n    | '--stepper-content-padding'\n    | '--stepper-radius'\n    | '--stepper-fz'\n    | '--stepper-spacing';\n};\n\nexport interface StepperProps\n  extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n  /** `Stepper.Step` components */\n  children: React.ReactNode;\n\n  /** Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. */\n  onStepClick?: (stepIndex: number) => void;\n\n  /** Index of the active step */\n  active: number;\n\n  /** Step icon @default step index + 1 */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed @default CheckIcon */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress @default step index + 1 */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the step icon, by default icon size is inferred from `size` prop */\n  iconSize?: number | string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' */\n  contentPadding?: MantineSpacing;\n\n  /** Stepper orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Icon position relative to the step body @default 'left' */\n  iconPosition?: 'right' | 'left';\n\n  /** Controls size of various Stepper elements */\n  size?: MantineSize;\n\n  /** Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" */\n  radius?: MantineRadius;\n\n  /** When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true */\n  allowNextStepsSelect?: boolean;\n\n  /** Determines whether steps should wrap to the next line if no space is available @default true */\n  wrap?: boolean;\n\n  /** When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color */\n  autoContrast?: boolean;\n\n  /** If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n  keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n  props: StepperProps;\n  ref: HTMLDivElement;\n  stylesNames: StepperStylesNames;\n  vars: StepperCssVariables;\n  staticComponents: {\n    Step: typeof StepperStep;\n    Completed: typeof StepperCompleted;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n  wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n  (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n    root: {\n      '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n      '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n      '--stepper-icon-size':\n        iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n      '--stepper-content-padding': getSpacing(contentPadding),\n      '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n      '--stepper-fz': getFontSize(size),\n      '--stepper-spacing': getSpacing(size),\n    },\n  })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n  const props = useProps('Stepper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    orientation,\n    iconPosition,\n    size,\n    radius,\n    allowNextStepsSelect,\n    wrap,\n    autoContrast,\n    keepMounted,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StepperFactory>({\n    name: 'Stepper',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter(\n    (child) => child.type !== StepperCompleted\n  ) as React.ReactElement<StepperStepProps>[];\n  const completedStep = convertedChildren.find(\n    (item) => item.type === StepperCompleted\n  ) as React.ReactElement<StepperCompletedProps>;\n\n  const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n    (acc, item: React.ReactElement<StepperStepProps>, index) => {\n      const state =\n        active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n      const shouldAllowSelect = () => {\n        if (typeof onStepClick !== 'function') {\n          return false;\n        }\n\n        if (typeof item.props.allowStepSelect === 'boolean') {\n          return item.props.allowStepSelect;\n        }\n\n        return state === 'stepCompleted' || allowNextStepsSelect;\n      };\n\n      const isStepSelectionEnabled = shouldAllowSelect();\n\n      acc.push(\n        cloneElement(item, {\n          icon: item.props.icon || icon || index + 1,\n          key: index,\n          step: index,\n          state,\n          onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n          allowStepClick: isStepSelectionEnabled,\n          completedIcon: item.props.completedIcon || completedIcon,\n          progressIcon: item.props.progressIcon || progressIcon,\n          color: item.props.color || color,\n          iconSize,\n          iconPosition: item.props.iconPosition || iconPosition,\n          orientation,\n        })\n      );\n\n      if (orientation === 'horizontal' && index !== _children.length - 1) {\n        acc.push(\n          <div\n            {...getStyles('separator')}\n            data-active={index < active || undefined}\n            data-orientation={orientation}\n            key={`separator-${index}`}\n          />\n        );\n      }\n\n      return acc;\n    },\n    []\n  );\n\n  const stepContent = _children[active]?.props?.children;\n  const completedContent = completedStep?.props?.children;\n  const content = active > _children.length - 1 ? completedContent : stepContent;\n\n  const contentSection = keepMounted ? (\n    <>\n      {_children.map((child, index) => (\n        <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{child.props.children}</div>\n        </Activity>\n      ))}\n      {completedStep && (\n        <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{completedStep.props.children}</div>\n        </Activity>\n      )}\n    </>\n  ) : (\n    content && <div {...getStyles('content')}>{content}</div>\n  );\n\n  return (\n    <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n      <Box {...getStyles('root')} size={size} {...others}>\n        <Box\n          {...getStyles('steps')}\n          mod={{\n            orientation,\n            'icon-position': iconPosition,\n            wrap: wrap && orientation !== 'vertical',\n          }}\n        >\n          {items}\n        </Box>\n        {contentSection}\n      </Box>\n    </StepperProvider>\n  );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n"],"mappings":"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"}
+{"version":3,"file":"Stepper.cjs","names":["createVarsResolver","getThemeColor","getAutoContrastValue","getContrastColor","getSize","rem","getSpacing","getRadius","getFontSize","factory","useProps","useStyles","Children","StepperCompleted","Activity","StepperProvider","Box","classes","StepperStep"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { StepperProvider } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\n\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n  | 'root'\n  | 'separator'\n  | 'steps'\n  | 'content'\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport type StepperCssVariables = {\n  root:\n    | '--stepper-color'\n    | '--stepper-icon-color'\n    | '--stepper-icon-size'\n    | '--stepper-content-padding'\n    | '--stepper-radius'\n    | '--stepper-fz'\n    | '--stepper-spacing';\n};\n\nexport interface StepperProps\n  extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n  /** `Stepper.Step` components */\n  children: React.ReactNode;\n\n  /** Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. */\n  onStepClick?: (stepIndex: number) => void;\n\n  /** Index of the active step */\n  active: number;\n\n  /** Step icon @default step index + 1 */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed @default CheckIcon */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress @default step index + 1 */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the step icon, by default icon size is inferred from `size` prop */\n  iconSize?: number | string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' */\n  contentPadding?: MantineSpacing;\n\n  /** Stepper orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Icon position relative to the step body @default 'left' */\n  iconPosition?: 'right' | 'left';\n\n  /** Controls size of various Stepper elements */\n  size?: MantineSize;\n\n  /** Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" */\n  radius?: MantineRadius;\n\n  /** When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true */\n  allowNextStepsSelect?: boolean;\n\n  /** Determines whether steps should wrap to the next line if no space is available @default true */\n  wrap?: boolean;\n\n  /** When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color */\n  autoContrast?: boolean;\n\n  /** If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n  keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n  props: StepperProps;\n  ref: HTMLDivElement;\n  stylesNames: StepperStylesNames;\n  vars: StepperCssVariables;\n  staticComponents: {\n    Step: typeof StepperStep;\n    Completed: typeof StepperCompleted;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n  wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n  (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n    root: {\n      '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n      '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n      '--stepper-icon-size':\n        iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n      '--stepper-content-padding': getSpacing(contentPadding),\n      '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n      '--stepper-fz': getFontSize(size),\n      '--stepper-spacing': getSpacing(size),\n    },\n  })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n  const props = useProps('Stepper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    orientation,\n    iconPosition,\n    size,\n    radius,\n    allowNextStepsSelect,\n    wrap,\n    autoContrast,\n    keepMounted,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StepperFactory>({\n    name: 'Stepper',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter(\n    (child) => child.type !== StepperCompleted\n  ) as React.ReactElement<StepperStepProps>[];\n  const completedStep = convertedChildren.find(\n    (item) => item.type === StepperCompleted\n  ) as React.ReactElement<StepperCompletedProps>;\n\n  const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n    (acc, item: React.ReactElement<StepperStepProps>, index) => {\n      const state =\n        active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n      const shouldAllowSelect = () => {\n        if (typeof onStepClick !== 'function') {\n          return false;\n        }\n\n        if (typeof item.props.allowStepSelect === 'boolean') {\n          return item.props.allowStepSelect;\n        }\n\n        return state === 'stepCompleted' || allowNextStepsSelect;\n      };\n\n      const isStepSelectionEnabled = shouldAllowSelect();\n\n      acc.push(\n        cloneElement(item, {\n          icon: item.props.icon || icon || index + 1,\n          key: index,\n          step: index,\n          state,\n          onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n          allowStepClick: isStepSelectionEnabled,\n          completedIcon: item.props.completedIcon || completedIcon,\n          progressIcon: item.props.progressIcon || progressIcon,\n          color: item.props.color || color,\n          iconSize,\n          iconPosition: item.props.iconPosition || iconPosition,\n          orientation,\n        })\n      );\n\n      if (orientation === 'horizontal' && index !== _children.length - 1) {\n        acc.push(\n          <div\n            {...getStyles('separator')}\n            data-active={index < active || undefined}\n            data-orientation={orientation}\n            key={`separator-${index}`}\n          />\n        );\n      }\n\n      return acc;\n    },\n    []\n  );\n\n  const stepContent = _children[active]?.props?.children;\n  const completedContent = completedStep?.props?.children;\n  const content = active > _children.length - 1 ? completedContent : stepContent;\n\n  const contentSection = keepMounted ? (\n    <>\n      {_children.map((child, index) => (\n        <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{child.props.children}</div>\n        </Activity>\n      ))}\n      {completedStep && (\n        <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{completedStep.props.children}</div>\n        </Activity>\n      )}\n    </>\n  ) : (\n    content && <div {...getStyles('content')}>{content}</div>\n  );\n\n  return (\n    <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n      <Box {...getStyles('root')} size={size} {...others}>\n        <Box\n          {...getStyles('steps')}\n          mod={{\n            orientation,\n            'icon-position': iconPosition,\n            wrap: wrap && orientation !== 'vertical',\n          }}\n        >\n          {items}\n        </Box>\n        {contentSection}\n      </Box>\n    </StepperProvider>\n  );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n"],"mappings":"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"}

package/cjs/components/Stepper/Stepper.module.cjs

@@ -11,6 +11,7 @@ var Stepper_module_default = {
 	"verticalSeparator": "m_6496b3f3",
 	"stepWrapper": "m_818e70b",
 	"stepIcon": "m_1959ad01",
+	"stepIconContent": "m_8faaac38",
 	"stepCompletedIcon": "m_a79331dc",
 	"stepBody": "m_1956aa2a",
 	"stepLabel": "m_12051f6c",

package/cjs/components/Stepper/Stepper.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.module.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".root {\n  --stepper-icon-size-xs: 34px;\n  --stepper-icon-size-sm: 36px;\n  --stepper-icon-size-md: 42px;\n  --stepper-icon-size-lg: 48px;\n  --stepper-icon-size-xl: 52px;\n\n  --stepper-icon-size: var(--stepper-icon-size-md);\n  --stepper-color: var(--mantine-primary-color-filled);\n  --stepper-content-padding: var(--mantine-spacing-md);\n  --stepper-spacing: var(--mantine-spacing-md);\n  --stepper-radius: 1000px;\n  --stepper-fz: var(--mantine-font-size-md);\n  --stepper-outline-thickness: 2px;\n\n  @mixin light {\n    --stepper-outline-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin dark {\n    --stepper-outline-color: var(--mantine-color-dark-5);\n  }\n}\n\n.steps {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  &:where([data-wrap]) {\n    flex-wrap: wrap;\n    gap: var(--mantine-spacing-md) 0;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n\n    &:where([data-icon-position='left']) {\n      align-items: flex-start;\n    }\n\n    &:where([data-icon-position='right']) {\n      align-items: flex-end;\n    }\n  }\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n}\n\n.separator {\n  transition: background-color 150ms ease;\n  flex: 1;\n  height: var(--stepper-outline-thickness);\n  margin-inline: var(--mantine-spacing-md);\n  background-color: var(--stepper-outline-color);\n\n  &:where([data-active]) {\n    background-color: var(--stepper-color);\n  }\n}\n\n.content {\n  padding-top: var(--stepper-content-padding);\n}\n\n.step {\n  --step-color: var(--stepper-color);\n\n  display: flex;\n  cursor: default;\n\n  &:where([data-allow-click]) {\n    cursor: pointer;\n  }\n\n  &:where([data-icon-position='left']) {\n    flex-direction: row;\n  }\n\n  &:where([data-icon-position='right']) {\n    flex-direction: row-reverse;\n  }\n}\n\n.step--horizontal {\n  align-items: center;\n}\n\n.step--vertical {\n  --separator-spacing: calc(var(--mantine-spacing-xs) / 2);\n\n  justify-content: flex-start;\n  min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));\n  margin-top: var(--separator-spacing);\n  overflow: hidden;\n\n  &:where(:first-of-type) {\n    margin-top: 0;\n  }\n\n  &:where(:last-of-type) {\n    min-height: auto;\n\n    & .verticalSeparator {\n      display: none;\n    }\n  }\n}\n\n.stepWrapper {\n  position: relative;\n}\n\n.verticalSeparator {\n  top: calc(var(--stepper-icon-size) + var(--separator-spacing));\n  inset-inline-start: calc(var(--stepper-icon-size) / 2);\n  height: 100vh;\n  position: absolute;\n  border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n\n  &:where([data-active]) {\n    border-color: var(--stepper-color);\n  }\n}\n\n.stepIcon {\n  height: var(--stepper-icon-size);\n  width: var(--stepper-icon-size);\n  min-height: var(--stepper-icon-size);\n  min-width: var(--stepper-icon-size);\n  border-radius: var(--stepper-radius);\n  font-size: var(--stepper-fz);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  font-weight: bold;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease;\n  border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n  background-color: var(--stepper-outline-color);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-progress]) {\n    border-color: var(--step-color);\n  }\n\n  &:where([data-completed]) {\n    color: var(--stepper-icon-color, var(--mantine-color-white));\n    background-color: var(--step-color);\n    border-color: var(--step-color);\n  }\n}\n\n.stepCompletedIcon {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--stepper-icon-color, var(--mantine-color-white));\n}\n\n.stepBody {\n  display: flex;\n  flex-direction: column;\n\n  &:where([data-icon-position='left']) {\n    margin-inline-start: var(--mantine-spacing-sm);\n  }\n\n  &:where([data-icon-position='right']) {\n    text-align: right;\n    margin-inline-end: var(--mantine-spacing-sm);\n\n    @mixin where-rtl {\n      text-align: left;\n    }\n  }\n}\n\n.stepLabel {\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: var(--stepper-fz);\n  line-height: 1;\n}\n\n.stepDescription {\n  margin-top: calc(var(--stepper-spacing) / 3);\n  margin-bottom: calc(var(--stepper-spacing) / 3);\n  font-size: calc(var(--stepper-fz) - rem(2px));\n  line-height: 1;\n  color: var(--mantine-color-dimmed);\n}\n"],"mappings":""}
+{"version":3,"file":"Stepper.module.cjs","names":[],"sources":["../../../src/components/Stepper/Stepper.module.css"],"sourcesContent":[".root {\n  --stepper-icon-size-xs: 34px;\n  --stepper-icon-size-sm: 36px;\n  --stepper-icon-size-md: 42px;\n  --stepper-icon-size-lg: 48px;\n  --stepper-icon-size-xl: 52px;\n\n  --stepper-icon-size: var(--stepper-icon-size-md);\n  --stepper-color: var(--mantine-primary-color-filled);\n  --stepper-content-padding: var(--mantine-spacing-md);\n  --stepper-spacing: var(--mantine-spacing-md);\n  --stepper-radius: 1000px;\n  --stepper-fz: var(--mantine-font-size-md);\n  --stepper-outline-thickness: 2px;\n\n  @mixin light {\n    --stepper-outline-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin dark {\n    --stepper-outline-color: var(--mantine-color-dark-5);\n  }\n}\n\n.steps {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  &:where([data-wrap]) {\n    flex-wrap: wrap;\n    gap: var(--mantine-spacing-md) 0;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n\n    &:where([data-icon-position='left']) {\n      align-items: flex-start;\n    }\n\n    &:where([data-icon-position='right']) {\n      align-items: flex-end;\n    }\n  }\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n}\n\n.separator {\n  transition: background-color 150ms ease;\n  flex: 1;\n  height: var(--stepper-outline-thickness);\n  margin-inline: var(--mantine-spacing-md);\n  background-color: var(--stepper-outline-color);\n\n  &:where([data-active]) {\n    background-color: var(--stepper-color);\n  }\n}\n\n.content {\n  padding-top: var(--stepper-content-padding);\n}\n\n.step {\n  --step-color: var(--stepper-color);\n\n  display: flex;\n  cursor: default;\n\n  &:where([data-allow-click]) {\n    cursor: pointer;\n  }\n\n  &:where([data-icon-position='left']) {\n    flex-direction: row;\n  }\n\n  &:where([data-icon-position='right']) {\n    flex-direction: row-reverse;\n  }\n}\n\n.step--horizontal {\n  align-items: center;\n}\n\n.step--vertical {\n  --separator-spacing: calc(var(--mantine-spacing-xs) / 2);\n\n  justify-content: flex-start;\n  min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));\n  margin-top: var(--separator-spacing);\n  overflow: hidden;\n\n  &:where(:first-of-type) {\n    margin-top: 0;\n  }\n\n  &:where(:last-of-type) {\n    min-height: auto;\n\n    & .verticalSeparator {\n      display: none;\n    }\n  }\n}\n\n.stepWrapper {\n  position: relative;\n}\n\n.verticalSeparator {\n  top: calc(var(--stepper-icon-size) + var(--separator-spacing));\n  inset-inline-start: calc(var(--stepper-icon-size) / 2);\n  height: 100vh;\n  position: absolute;\n  border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n\n  &:where([data-active]) {\n    border-color: var(--stepper-color);\n  }\n}\n\n.stepIcon {\n  height: var(--stepper-icon-size);\n  width: var(--stepper-icon-size);\n  min-height: var(--stepper-icon-size);\n  min-width: var(--stepper-icon-size);\n  border-radius: var(--stepper-radius);\n  font-size: var(--stepper-fz);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  font-weight: bold;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease;\n  border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);\n  background-color: var(--stepper-outline-color);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-progress]) {\n    border-color: var(--step-color);\n  }\n\n  &:where([data-completed]) {\n    color: var(--stepper-icon-color, var(--mantine-color-white));\n    background-color: var(--step-color);\n    border-color: var(--step-color);\n  }\n}\n\n.stepIconContent {\n  display: flex;\n}\n\n.stepCompletedIcon {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--stepper-icon-color, var(--mantine-color-white));\n}\n\n.stepBody {\n  display: flex;\n  flex-direction: column;\n\n  &:where([data-icon-position='left']) {\n    margin-inline-start: var(--mantine-spacing-sm);\n  }\n\n  &:where([data-icon-position='right']) {\n    text-align: right;\n    margin-inline-end: var(--mantine-spacing-sm);\n\n    @mixin where-rtl {\n      text-align: left;\n    }\n  }\n}\n\n.stepLabel {\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: var(--stepper-fz);\n  line-height: 1;\n}\n\n.stepDescription {\n  margin-top: calc(var(--stepper-spacing) / 3);\n  margin-bottom: calc(var(--stepper-spacing) / 3);\n  font-size: calc(var(--stepper-fz) - rem(2px));\n  line-height: 1;\n  color: var(--mantine-color-dimmed);\n}\n"],"mappings":""}

package/cjs/components/Stepper/StepperStep/StepperStep.cjs

@@ -69,11 +69,14 @@ const StepperStep = require_factory.factory((props) => {
 							...ctx.getStyles("stepLoader", stylesApi)
 						}) : getStepFragment(completedIcon, step) || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckIcon.CheckIcon, { size: "60%" })
 					})
-				}), state !== "stepCompleted" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, {
-					...ctx.getStyles("stepLoader", stylesApi),
-					size: "calc(var(--stepper-icon-size) / 2)",
-					color
-				}) : getStepFragment(_icon || icon, step) }) : null]
+				}), state !== "stepCompleted" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...ctx.getStyles("stepIconContent", stylesApi),
+					children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, {
+						...ctx.getStyles("stepLoader", stylesApi),
+						size: "calc(var(--stepper-icon-size) / 2)",
+						color
+					}) : getStepFragment(_icon || icon, step)
+				}) : null]
 			}), orientation === "vertical" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				...ctx.getStyles("verticalSeparator", stylesApi),
 				"data-active": state === "stepCompleted" || void 0

package/cjs/components/Stepper/StepperStep/StepperStep.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStep.cjs","names":["factory","useProps","useStepperContext","useMantineTheme","UnstyledButton","getThemeColor","Transition","Loader","CheckIcon","classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n  Fragment: StepFragmentComponent | React.ReactNode,\n  step: number | undefined\n) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step || 0} />;\n  }\n\n  return Fragment;\n};\n\nexport type StepperStepStylesNames =\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport interface StepperStepProps\n  extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n  /** 0-based step index, automatically set by Stepper component */\n  step?: number;\n\n  /** Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Key of `theme.colors`, by default controlled by Stepper component */\n  color?: MantineColor;\n\n  /** When false, hides the step icon. Useful for creating compact steppers with only labels @default true */\n  withIcon?: boolean;\n\n  /** Step icon, defaults to `step index + 1` when rendered within Stepper */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step label, render after icon */\n  label?: React.ReactNode | StepFragmentComponent;\n\n  /** Step description */\n  description?: React.ReactNode | StepFragmentComponent;\n\n  /** Icon wrapper size */\n  iconSize?: string | number;\n\n  /** Icon position relative to step body, controlled by Stepper component */\n  iconPosition?: 'right' | 'left';\n\n  /** Indicates loading state of the step */\n  loading?: boolean;\n\n  /** Set to false to disable clicks on step */\n  allowStepClick?: boolean;\n\n  /** Should step selection be allowed */\n  allowStepSelect?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nexport type StepperStepFactory = Factory<{\n  props: StepperStepProps;\n  ref: HTMLButtonElement;\n  stylesNames: StepperStepStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withIcon: true,\n  allowStepClick: true,\n  iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    orientation,\n    mod,\n    ...others\n  } = useProps('StepperStep', defaultProps, props);\n\n  const ctx = useStepperContext();\n  const theme = useMantineTheme();\n  const stylesApi = { classNames, styles };\n\n  const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n  const dataAttributes = {\n    'data-progress': state === 'stepProgress' || undefined,\n    'data-completed': state === 'stepCompleted' || undefined,\n  };\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n      mod={[\n        { 'icon-position': iconPosition || ctx.iconPosition, 'allow-click': allowStepClick },\n        mod,\n      ]}\n      {...dataAttributes}\n      {...others}\n      __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n      tabIndex={allowStepClick ? 0 : -1}\n    >\n      {withIcon && (\n        <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n          <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <span\n                  {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n                >\n                  {loading ? (\n                    <Loader\n                      color=\"var(--mantine-color-white)\"\n                      size=\"calc(var(--stepper-icon-size) / 2)\"\n                      {...ctx.getStyles('stepLoader', stylesApi)}\n                    />\n                  ) : (\n                    getStepFragment(completedIcon, step) || <CheckIcon size=\"60%\" />\n                  )}\n                </span>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              <span>\n                {loading ? (\n                  <Loader\n                    {...ctx.getStyles('stepLoader', stylesApi)}\n                    size=\"calc(var(--stepper-icon-size) / 2)\"\n                    color={color}\n                  />\n                ) : (\n                  getStepFragment(_icon || icon, step)\n                )}\n              </span>\n            ) : null}\n          </span>\n          {orientation === 'vertical' && (\n            <span\n              {...ctx.getStyles('verticalSeparator', stylesApi)}\n              data-active={state === 'stepCompleted' || undefined}\n            />\n          )}\n        </span>\n      )}\n\n      {(label || description) && (\n        <span\n          {...ctx.getStyles('stepBody', stylesApi)}\n          data-orientation={ctx.orientation}\n          data-icon-position={iconPosition || ctx.iconPosition}\n        >\n          {label && (\n            <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n          )}\n          {description && (\n            <span {...ctx.getStyles('stepDescription', stylesApi)}>\n              {getStepFragment(description, step)}\n            </span>\n          )}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":"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"}
+{"version":3,"file":"StepperStep.cjs","names":["factory","useProps","useStepperContext","useMantineTheme","UnstyledButton","getThemeColor","Transition","Loader","CheckIcon","classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n  Fragment: StepFragmentComponent | React.ReactNode,\n  step: number | undefined\n) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step || 0} />;\n  }\n\n  return Fragment;\n};\n\nexport type StepperStepStylesNames =\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport interface StepperStepProps\n  extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n  /** 0-based step index, automatically set by Stepper component */\n  step?: number;\n\n  /** Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Key of `theme.colors`, by default controlled by Stepper component */\n  color?: MantineColor;\n\n  /** When false, hides the step icon. Useful for creating compact steppers with only labels @default true */\n  withIcon?: boolean;\n\n  /** Step icon, defaults to `step index + 1` when rendered within Stepper */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step label, render after icon */\n  label?: React.ReactNode | StepFragmentComponent;\n\n  /** Step description */\n  description?: React.ReactNode | StepFragmentComponent;\n\n  /** Icon wrapper size */\n  iconSize?: string | number;\n\n  /** Icon position relative to step body, controlled by Stepper component */\n  iconPosition?: 'right' | 'left';\n\n  /** Indicates loading state of the step */\n  loading?: boolean;\n\n  /** Set to false to disable clicks on step */\n  allowStepClick?: boolean;\n\n  /** Should step selection be allowed */\n  allowStepSelect?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nexport type StepperStepFactory = Factory<{\n  props: StepperStepProps;\n  ref: HTMLButtonElement;\n  stylesNames: StepperStepStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withIcon: true,\n  allowStepClick: true,\n  iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    orientation,\n    mod,\n    ...others\n  } = useProps('StepperStep', defaultProps, props);\n\n  const ctx = useStepperContext();\n  const theme = useMantineTheme();\n  const stylesApi = { classNames, styles };\n\n  const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n  const dataAttributes = {\n    'data-progress': state === 'stepProgress' || undefined,\n    'data-completed': state === 'stepCompleted' || undefined,\n  };\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n      mod={[\n        { 'icon-position': iconPosition || ctx.iconPosition, 'allow-click': allowStepClick },\n        mod,\n      ]}\n      {...dataAttributes}\n      {...others}\n      __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n      tabIndex={allowStepClick ? 0 : -1}\n    >\n      {withIcon && (\n        <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n          <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <span\n                  {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n                >\n                  {loading ? (\n                    <Loader\n                      color=\"var(--mantine-color-white)\"\n                      size=\"calc(var(--stepper-icon-size) / 2)\"\n                      {...ctx.getStyles('stepLoader', stylesApi)}\n                    />\n                  ) : (\n                    getStepFragment(completedIcon, step) || <CheckIcon size=\"60%\" />\n                  )}\n                </span>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              <span {...ctx.getStyles('stepIconContent', stylesApi)}>\n                {loading ? (\n                  <Loader\n                    {...ctx.getStyles('stepLoader', stylesApi)}\n                    size=\"calc(var(--stepper-icon-size) / 2)\"\n                    color={color}\n                  />\n                ) : (\n                  getStepFragment(_icon || icon, step)\n                )}\n              </span>\n            ) : null}\n          </span>\n          {orientation === 'vertical' && (\n            <span\n              {...ctx.getStyles('verticalSeparator', stylesApi)}\n              data-active={state === 'stepCompleted' || undefined}\n            />\n          )}\n        </span>\n      )}\n\n      {(label || description) && (\n        <span\n          {...ctx.getStyles('stepBody', stylesApi)}\n          data-orientation={ctx.orientation}\n          data-icon-position={iconPosition || ctx.iconPosition}\n        >\n          {label && (\n            <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n          )}\n          {description && (\n            <span {...ctx.getStyles('stepDescription', stylesApi)}>\n              {getStepFragment(description, step)}\n            </span>\n          )}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":"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"}

package/cjs/components/Timeline/TimelineItem/TimelineItem.cjs

@@ -29,7 +29,7 @@ const TimelineItem = require_factory.factory((_props) => {
 			active: __active
 		}, mod],
 		__vars: {
-			"--tli-radius": radius ? require_get_size.getRadius(radius) : void 0,
+			"--tli-radius": radius !== void 0 ? require_get_size.getRadius(radius) : void 0,
 			"--tli-color": color ? require_get_theme_color.getThemeColor(color, theme) : void 0,
 			"--tli-border-style": lineVariant || void 0
 		},

package/cjs/components/Timeline/TimelineItem/TimelineItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.cjs","names":["factory","useProps","useTimelineContext","useMantineTheme","Box","getRadius","getThemeColor","classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n  | 'itemBody'\n  | 'itemContent'\n  | 'itemBullet'\n  | 'item'\n  | 'itemTitle';\n\nexport interface TimelineItemProps\n  extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n  __active?: boolean;\n  __lineActive?: boolean;\n  __align?: 'right' | 'left';\n\n  /** Item title, displayed next to the bullet */\n  title?: React.ReactNode;\n\n  /** Content displayed below the title */\n  children?: React.ReactNode;\n\n  /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */\n  bullet?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls line border style @default 'solid' */\n  lineVariant?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n  props: TimelineItemProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineItemStylesNames;\n  compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n  const props = useProps('TimelineItem', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    __active,\n    __align,\n    __lineActive,\n    __vars,\n    bullet,\n    radius,\n    color,\n    lineVariant,\n    children,\n    title,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useTimelineContext();\n  const theme = useMantineTheme();\n\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box\n      {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n      mod={[{ 'line-active': __lineActive, active: __active }, mod]}\n      __vars={{\n        '--tli-radius': radius ? getRadius(radius) : undefined,\n        '--tli-color': color ? getThemeColor(color, theme) : undefined,\n        '--tli-border-style': lineVariant || undefined,\n      }}\n      {...others}\n    >\n      <Box\n        {...ctx.getStyles('itemBullet', stylesApiProps)}\n        mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n      >\n        {bullet}\n      </Box>\n\n      <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n        {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n        <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n      </div>\n    </Box>\n  );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;;AAwDA,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBSC,kBAAAA,SAAS,gBAAgB,MAAM,OAAO;CAqBpD,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,QAAQC,6BAAAA,iBAAiB;CAE/B,MAAM,iBAAiB;EAAE;EAAY;EAAQ;AAE7C,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;GAAO,CAAC;EAClE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU,EAAE,IAAI;EAC7D,QAAQ;GACN,gBAAgB,SAASC,iBAAAA,UAAU,OAAO,GAAG,KAAA;GAC7C,eAAe,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;GACrD,sBAAsB,eAAe,KAAA;GACtC;EACD,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,KAACF,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,eAAe;GAC/C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;IAAU;aAEhE;GACG,CAAA,EAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,eAAe;aAAlD,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,eAAe;cAAG;IAAY,CAAA,EAC5E,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,eAAe;IAAG;IAAe,CAAA,CACnE;KACF;;EAER;AAEF,aAAa,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}
+{"version":3,"file":"TimelineItem.cjs","names":["factory","useProps","useTimelineContext","useMantineTheme","Box","getRadius","getThemeColor","classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n  | 'itemBody'\n  | 'itemContent'\n  | 'itemBullet'\n  | 'item'\n  | 'itemTitle';\n\nexport interface TimelineItemProps\n  extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n  __active?: boolean;\n  __lineActive?: boolean;\n  __align?: 'right' | 'left';\n\n  /** Item title, displayed next to the bullet */\n  title?: React.ReactNode;\n\n  /** Content displayed below the title */\n  children?: React.ReactNode;\n\n  /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */\n  bullet?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls line border style @default 'solid' */\n  lineVariant?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n  props: TimelineItemProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineItemStylesNames;\n  compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n  const props = useProps('TimelineItem', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    __active,\n    __align,\n    __lineActive,\n    __vars,\n    bullet,\n    radius,\n    color,\n    lineVariant,\n    children,\n    title,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useTimelineContext();\n  const theme = useMantineTheme();\n\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box\n      {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n      mod={[{ 'line-active': __lineActive, active: __active }, mod]}\n      __vars={{\n        '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n        '--tli-color': color ? getThemeColor(color, theme) : undefined,\n        '--tli-border-style': lineVariant || undefined,\n      }}\n      {...others}\n    >\n      <Box\n        {...ctx.getStyles('itemBullet', stylesApiProps)}\n        mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n      >\n        {bullet}\n      </Box>\n\n      <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n        {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n        <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n      </div>\n    </Box>\n  );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;;AAwDA,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBSC,kBAAAA,SAAS,gBAAgB,MAAM,OAAO;CAqBpD,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,QAAQC,6BAAAA,iBAAiB;CAE/B,MAAM,iBAAiB;EAAE;EAAY;EAAQ;AAE7C,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;GAAO,CAAC;EAClE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU,EAAE,IAAI;EAC7D,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAYC,iBAAAA,UAAU,OAAO,GAAG,KAAA;GAC3D,eAAe,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;GACrD,sBAAsB,eAAe,KAAA;GACtC;EACD,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,KAACF,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,eAAe;GAC/C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;IAAU;aAEhE;GACG,CAAA,EAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,eAAe;aAAlD,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,eAAe;cAAG;IAAY,CAAA,EAC5E,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,eAAe;IAAG;IAAe,CAAA,CACnE;KACF;;EAER;AAEF,aAAa,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}

package/cjs/core/MantineProvider/default-theme.cjs

@@ -27,7 +27,7 @@ const DEFAULT_THEME = {
 		to: "cyan",
 		deg: 45
 	},
-	defaultRadius: "sm",
+	defaultRadius: "md",
 	activeClassName: "mantine-active",
 	focusClassName: "",
 	headings: {

package/cjs/core/MantineProvider/default-theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"default-theme.cjs","names":["DEFAULT_COLORS","defaultVariantColorsResolver","rem"],"sources":["../../../src/core/MantineProvider/default-theme.ts"],"sourcesContent":["import { rem } from '../utils';\nimport { defaultVariantColorsResolver } from './color-functions';\nimport { DEFAULT_COLORS } from './default-colors';\nimport type { MantineTheme } from './theme.types';\n\nconst DEFAULT_FONT_FAMILY =\n  '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji';\n\nexport const DEFAULT_THEME: MantineTheme = {\n  scale: 1,\n  fontSmoothing: true,\n  focusRing: 'auto',\n  white: '#fff',\n  black: '#000',\n  colors: DEFAULT_COLORS,\n  primaryShade: { light: 6, dark: 8 },\n  primaryColor: 'blue',\n  variantColorResolver: defaultVariantColorsResolver,\n  autoContrast: false,\n  luminanceThreshold: 0.3,\n  fontFamily: DEFAULT_FONT_FAMILY,\n  fontFamilyMonospace:\n    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',\n  respectReducedMotion: false,\n  cursorType: 'default',\n  defaultGradient: { from: 'blue', to: 'cyan', deg: 45 },\n  defaultRadius: 'sm',\n  activeClassName: 'mantine-active',\n  focusClassName: '',\n\n  headings: {\n    fontFamily: DEFAULT_FONT_FAMILY,\n    fontWeight: '700',\n    textWrap: 'wrap',\n    sizes: {\n      h1: { fontSize: rem(34), lineHeight: '1.3' },\n      h2: { fontSize: rem(26), lineHeight: '1.35' },\n      h3: { fontSize: rem(22), lineHeight: '1.4' },\n      h4: { fontSize: rem(18), lineHeight: '1.45' },\n      h5: { fontSize: rem(16), lineHeight: '1.5' },\n      h6: { fontSize: rem(14), lineHeight: '1.5' },\n    },\n  },\n\n  fontSizes: {\n    xs: rem(12),\n    sm: rem(14),\n    md: rem(16),\n    lg: rem(18),\n    xl: rem(20),\n  },\n\n  lineHeights: {\n    xs: '1.4',\n    sm: '1.45',\n    md: '1.55',\n    lg: '1.6',\n    xl: '1.65',\n  },\n\n  fontWeights: {\n    regular: '400',\n    medium: '600',\n    bold: '700',\n  },\n\n  radius: {\n    xs: rem(2),\n    sm: rem(4),\n    md: rem(8),\n    lg: rem(16),\n    xl: rem(32),\n  },\n\n  spacing: {\n    xs: rem(10),\n    sm: rem(12),\n    md: rem(16),\n    lg: rem(20),\n    xl: rem(32),\n  },\n\n  breakpoints: {\n    xs: '36em',\n    sm: '48em',\n    md: '62em',\n    lg: '75em',\n    xl: '88em',\n  },\n\n  shadows: {\n    xs: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), 0 ${rem(1)} ${rem(2)} rgba(0, 0, 0, 0.1)`,\n    sm: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(10)} ${rem(\n      15\n    )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(7)} ${rem(7)} ${rem(-5)}`,\n    md: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(20)} ${rem(\n      25\n    )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(10)} ${rem(10)} ${rem(-5)}`,\n    lg: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(28)} ${rem(\n      23\n    )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(12)} ${rem(12)} ${rem(-7)}`,\n    xl: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(36)} ${rem(\n      28\n    )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(17)} ${rem(17)} ${rem(-7)}`,\n  },\n\n  other: {},\n  components: {},\n};\n"],"mappings":"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"}
+{"version":3,"file":"default-theme.cjs","names":["DEFAULT_COLORS","defaultVariantColorsResolver","rem"],"sources":["../../../src/core/MantineProvider/default-theme.ts"],"sourcesContent":["import { rem } from '../utils';\nimport { defaultVariantColorsResolver } from './color-functions';\nimport { DEFAULT_COLORS } from './default-colors';\nimport type { MantineTheme } from './theme.types';\n\nconst DEFAULT_FONT_FAMILY =\n  '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji';\n\nexport const DEFAULT_THEME: MantineTheme = {\n  scale: 1,\n  fontSmoothing: true,\n  focusRing: 'auto',\n  white: '#fff',\n  black: '#000',\n  colors: DEFAULT_COLORS,\n  primaryShade: { light: 6, dark: 8 },\n  primaryColor: 'blue',\n  variantColorResolver: defaultVariantColorsResolver,\n  autoContrast: false,\n  luminanceThreshold: 0.3,\n  fontFamily: DEFAULT_FONT_FAMILY,\n  fontFamilyMonospace:\n    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',\n  respectReducedMotion: false,\n  cursorType: 'default',\n  defaultGradient: { from: 'blue', to: 'cyan', deg: 45 },\n  defaultRadius: 'md',\n  activeClassName: 'mantine-active',\n  focusClassName: '',\n\n  headings: {\n    fontFamily: DEFAULT_FONT_FAMILY,\n    fontWeight: '700',\n    textWrap: 'wrap',\n    sizes: {\n      h1: { fontSize: rem(34), lineHeight: '1.3' },\n      h2: { fontSize: rem(26), lineHeight: '1.35' },\n      h3: { fontSize: rem(22), lineHeight: '1.4' },\n      h4: { fontSize: rem(18), lineHeight: '1.45' },\n      h5: { fontSize: rem(16), lineHeight: '1.5' },\n      h6: { fontSize: rem(14), lineHeight: '1.5' },\n    },\n  },\n\n  fontSizes: {\n    xs: rem(12),\n    sm: rem(14),\n    md: rem(16),\n    lg: rem(18),\n    xl: rem(20),\n  },\n\n  lineHeights: {\n    xs: '1.4',\n    sm: '1.45',\n    md: '1.55',\n    lg: '1.6',\n    xl: '1.65',\n  },\n\n  fontWeights: {\n    regular: '400',\n    medium: '600',\n    bold: '700',\n  },\n\n  radius: {\n    xs: rem(2),\n    sm: rem(4),\n    md: rem(8),\n    lg: rem(16),\n    xl: rem(32),\n  },\n\n  spacing: {\n    xs: rem(10),\n    sm: rem(12),\n    md: rem(16),\n    lg: rem(20),\n    xl: rem(32),\n  },\n\n  breakpoints: {\n    xs: '36em',\n    sm: '48em',\n    md: '62em',\n    lg: '75em',\n    xl: '88em',\n  },\n\n  shadows: {\n    xs: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), 0 ${rem(1)} ${rem(2)} rgba(0, 0, 0, 0.1)`,\n    sm: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(10)} ${rem(\n      15\n    )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(7)} ${rem(7)} ${rem(-5)}`,\n    md: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(20)} ${rem(\n      25\n    )} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(10)} ${rem(10)} ${rem(-5)}`,\n    lg: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(28)} ${rem(\n      23\n    )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(12)} ${rem(12)} ${rem(-7)}`,\n    xl: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(36)} ${rem(\n      28\n    )} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(17)} ${rem(17)} ${rem(-7)}`,\n  },\n\n  other: {},\n  components: {},\n};\n"],"mappings":";;;;AAKA,MAAM,sBACJ;AAEF,MAAa,gBAA8B;CACzC,OAAO;CACP,eAAe;CACf,WAAW;CACX,OAAO;CACP,OAAO;CACP,QAAQA,uBAAAA;CACR,cAAc;EAAE,OAAO;EAAG,MAAM;EAAG;CACnC,cAAc;CACd,sBAAsBC,wCAAAA;CACtB,cAAc;CACd,oBAAoB;CACpB,YAAY;CACZ,qBACE;CACF,sBAAsB;CACtB,YAAY;CACZ,iBAAiB;EAAE,MAAM;EAAQ,IAAI;EAAQ,KAAK;EAAI;CACtD,eAAe;CACf,iBAAiB;CACjB,gBAAgB;CAEhB,UAAU;EACR,YAAY;EACZ,YAAY;EACZ,UAAU;EACV,OAAO;GACL,IAAI;IAAE,UAAUC,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAQ;GAC7C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAQ;GAC7C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAO;GAC5C,IAAI;IAAE,UAAUA,YAAAA,IAAI,GAAG;IAAE,YAAY;IAAO;GAC7C;EACF;CAED,WAAW;EACT,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACZ;CAED,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,aAAa;EACX,SAAS;EACT,QAAQ;EACR,MAAM;EACP;CAED,QAAQ;EACN,IAAIA,YAAAA,IAAI,EAAE;EACV,IAAIA,YAAAA,IAAI,EAAE;EACV,IAAIA,YAAAA,IAAI,EAAE;EACV,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACZ;CAED,SAAS;EACP,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACX,IAAIA,YAAAA,IAAI,GAAG;EACZ;CAED,aAAa;EACX,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,SAAS;EACP,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,0BAA0BA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC;EACrE,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,8CAA8CA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IACjF,GACD,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,0BAA0BA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,GAAG;EAClE,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,8CAA8CA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IACjF,GACD,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,0BAA0BA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG;EACpE,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,8CAA8CA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IACjF,GACD,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,0BAA0BA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG;EACpE,IAAI,KAAKA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE,CAAC,8CAA8CA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IACjF,GACD,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,0BAA0BA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,GAAGA,YAAAA,IAAI,GAAG;EACrE;CAED,OAAO,EAAE;CACT,YAAY,EAAE;CACf"}

package/esm/components/Badge/Badge.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".root {\n  --badge-height-xs: 16px;\n  --badge-height-sm: 18px;\n  --badge-height-md: 20px;\n  --badge-height-lg: 26px;\n  --badge-height-xl: 32px;\n\n  --badge-fz-xs: 9px;\n  --badge-fz-sm: 10px;\n  --badge-fz-md: 11px;\n  --badge-fz-lg: 13px;\n  --badge-fz-xl: 16px;\n\n  --badge-padding-x-xs: 6px;\n  --badge-padding-x-sm: 8px;\n  --badge-padding-x-md: 10px;\n  --badge-padding-x-lg: 12px;\n  --badge-padding-x-xl: 16px;\n\n  --badge-height: var(--badge-height-md);\n  --badge-fz: var(--badge-fz-md);\n  --badge-padding-x: var(--badge-padding-x-md);\n  --badge-radius: 1000px;\n  --badge-lh: calc(var(--badge-height) - rem(2px));\n  --badge-color: var(--mantine-color-white);\n  --badge-bg: var(--mantine-primary-color-filled);\n  --badge-border-width: 1px;\n  --badge-bd: var(--badge-border-width) solid transparent;\n\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--badge-fz);\n  border-radius: var(--badge-radius);\n  height: var(--badge-height);\n  line-height: var(--badge-lh);\n  text-decoration: none;\n  padding: 0 var(--badge-padding-x);\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-transform: uppercase;\n  font-weight: var(--mantine-font-weight-bold);\n  letter-spacing: 0.25px;\n  cursor: default;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: var(--badge-color);\n  background: var(--badge-bg);\n  border: var(--badge-bd);\n\n  &:where([data-with-left-section], [data-variant='dot']) {\n    grid-template-columns: auto 1fr;\n  }\n\n  &:where([data-with-right-section]) {\n    grid-template-columns: 1fr auto;\n  }\n\n  &:where(\n    [data-with-left-section][data-with-right-section],\n    [data-variant='dot'][data-with-right-section]\n  ) {\n    grid-template-columns: auto 1fr auto;\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n  }\n\n  &:where([data-circle]) {\n    padding-inline: 2px;\n    display: flex;\n    width: var(--badge-height);\n  }\n}\n\n.root--dot {\n  --badge-dot-size: calc(var(--badge-height) / 3.4);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n    border-color: var(--mantine-color-dark-5);\n    color: var(--mantine-color-white);\n  }\n\n  &::before {\n    content: '';\n    display: block;\n    width: var(--badge-dot-size);\n    height: var(--badge-dot-size);\n    border-radius: var(--badge-dot-size);\n    background-color: var(--badge-dot-color);\n    margin-inline-end: var(--badge-dot-size);\n  }\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  cursor: inherit;\n}\n\n.section {\n  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--badge-section-margin);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--badge-section-margin);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../src/components/Badge/Badge.module.css"],"sourcesContent":[".root {\n  --badge-height-xs: 16px;\n  --badge-height-sm: 18px;\n  --badge-height-md: 20px;\n  --badge-height-lg: 26px;\n  --badge-height-xl: 32px;\n\n  --badge-fz-xs: 9px;\n  --badge-fz-sm: 10px;\n  --badge-fz-md: 11px;\n  --badge-fz-lg: 13px;\n  --badge-fz-xl: 16px;\n\n  --badge-padding-x-xs: 6px;\n  --badge-padding-x-sm: 8px;\n  --badge-padding-x-md: 10px;\n  --badge-padding-x-lg: 12px;\n  --badge-padding-x-xl: 16px;\n\n  --badge-height: var(--badge-height-md);\n  --badge-fz: var(--badge-fz-md);\n  --badge-padding-x: var(--badge-padding-x-md);\n  --badge-radius: 1000px;\n  --badge-lh: calc(var(--badge-height) - rem(2px));\n  --badge-color: var(--mantine-color-white);\n  --badge-bg: var(--mantine-primary-color-filled);\n  --badge-border-width: 1px;\n  --badge-bd: var(--badge-border-width) solid transparent;\n\n  -webkit-tap-highlight-color: transparent;\n  font-size: var(--badge-fz);\n  border-radius: var(--badge-radius);\n  height: var(--badge-height);\n  line-height: var(--badge-lh);\n  text-decoration: none;\n  padding: 0 var(--badge-padding-x);\n  display: inline-grid;\n  align-items: center;\n  justify-content: center;\n  width: fit-content;\n  text-transform: uppercase;\n  font-weight: var(--mantine-font-weight-bold);\n  letter-spacing: 0.25px;\n  cursor: default;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: var(--badge-color);\n  background: var(--badge-bg);\n  border: var(--badge-bd);\n\n  &:where([data-with-left-section], [data-variant='dot']) {\n    grid-template-columns: auto 1fr;\n  }\n\n  &:where([data-with-right-section]) {\n    grid-template-columns: 1fr auto;\n  }\n\n  &:where(\n    [data-with-left-section][data-with-right-section],\n    [data-variant='dot'][data-with-right-section]\n  ) {\n    grid-template-columns: auto 1fr auto;\n  }\n\n  &:where([data-block]) {\n    display: flex;\n    width: 100%;\n  }\n\n  &:where([data-circle]) {\n    padding-inline: 2px;\n    display: flex;\n    width: var(--badge-height);\n  }\n}\n\n.root--dot {\n  --badge-dot-size: calc(var(--badge-height) / 3.4);\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-5);\n    border-color: var(--mantine-color-dark-5);\n    color: var(--mantine-color-white);\n  }\n\n  &::before {\n    content: '';\n    display: block;\n    width: var(--badge-dot-size);\n    height: var(--badge-dot-size);\n    border-radius: var(--badge-dot-size);\n    background-color: var(--badge-dot-color);\n    margin-inline-end: var(--badge-dot-size);\n  }\n}\n\n.label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n  cursor: inherit;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n}\n\n.section {\n  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--badge-section-margin);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--badge-section-margin);\n  }\n}\n"],"mappings":""}

package/esm/components/Button/Button.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".root {\n  --button-height-xs: 30px;\n  --button-height-sm: 36px;\n  --button-height-md: 42px;\n  --button-height-lg: 50px;\n  --button-height-xl: 60px;\n\n  --button-height-compact-xs: 22px;\n  --button-height-compact-sm: 26px;\n  --button-height-compact-md: 30px;\n  --button-height-compact-lg: 34px;\n  --button-height-compact-xl: 40px;\n\n  --button-padding-x-xs: 14px;\n  --button-padding-x-sm: 18px;\n  --button-padding-x-md: 22px;\n  --button-padding-x-lg: 26px;\n  --button-padding-x-xl: 32px;\n\n  --button-padding-x-compact-xs: 7px;\n  --button-padding-x-compact-sm: 8px;\n  --button-padding-x-compact-md: 10px;\n  --button-padding-x-compact-lg: 12px;\n  --button-padding-x-compact-xl: 14px;\n\n  --button-height: var(--button-height-sm);\n  --button-padding-x: var(--button-padding-x-sm);\n  --button-color: var(--mantine-color-white);\n\n  user-select: none;\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n\n  width: auto;\n  cursor: pointer;\n  display: inline-block;\n  border-radius: var(--button-radius, var(--mantine-radius-default));\n  font-size: var(--button-fz, var(--mantine-font-size-sm));\n  background: var(--button-bg, var(--mantine-primary-color-filled));\n  border: var(--button-bd, rem(1px) solid transparent);\n  color: var(--button-color, var(--mantine-color-white));\n  height: var(--button-height, var(--button-height-sm));\n  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n  vertical-align: middle;\n\n  &:where([data-block]) {\n    display: block;\n    width: 100%;\n  }\n\n  &:where([data-with-left-section]) {\n    padding-inline-start: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where([data-with-right-section]) {\n    padding-inline-end: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n    cursor: not-allowed;\n    border: 1px solid transparent;\n    transform: none;\n    color: var(--mantine-color-disabled-color);\n    background: var(--mantine-color-disabled);\n  }\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    inset: -1px;\n    border-radius: var(--button-radius, var(--mantine-radius-default));\n    transform: translateY(-100%);\n    opacity: 0;\n    filter: blur(12px);\n    transition:\n      transform 150ms ease,\n      opacity 100ms ease;\n\n    @mixin where-light {\n      background-color: rgba(255, 255, 255, 0.15);\n    }\n\n    @mixin where-dark {\n      background-color: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  &:where([data-loading]) {\n    cursor: not-allowed;\n    transform: none;\n\n    &::before {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    & .inner {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  @mixin hover {\n    &:where(:not([data-loading], :disabled, [data-disabled])) {\n      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));\n      color: var(--button-hover-color, var(--button-color));\n    }\n  }\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  justify-content: var(--button-justify, center);\n  height: 100%;\n  overflow: visible;\n  transition:\n    transform 150ms ease,\n    opacity 100ms ease;\n}\n\n.label {\n  white-space: nowrap;\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  opacity: 1;\n\n  &:where([data-loading]) {\n    opacity: 0.2;\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}\n\n.group {\n  --button-border-width: 1px;\n  display: flex;\n\n  & :where(.root) {\n    &:focus {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    flex-direction: row;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n        border-inline-end-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-end-start-radius: 0;\n        border-start-start-radius: 0;\n        border-inline-start-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n}\n\n.groupSection {\n  --section-height-xs: 30px;\n  --section-height-sm: 36px;\n  --section-height-md: 42px;\n  --section-height-lg: 50px;\n  --section-height-xl: 60px;\n\n  --section-height-compact-xs: 22px;\n  --section-height-compact-sm: 26px;\n  --section-height-compact-md: 30px;\n  --section-height-compact-lg: 34px;\n  --section-height-compact-xl: 40px;\n\n  --section-padding-x-xs: 14px;\n  --section-padding-x-sm: 18px;\n  --section-padding-x-md: 22px;\n  --section-padding-x-lg: 26px;\n  --section-padding-x-xl: 32px;\n\n  --section-padding-x-compact-xs: 7px;\n  --section-padding-x-compact-sm: 8px;\n  --section-padding-x-compact-md: 10px;\n  --section-padding-x-compact-lg: 12px;\n  --section-padding-x-compact-xl: 14px;\n\n  --section-height: var(--section-height-sm);\n  --section-padding-x: var(--section-padding-x-sm);\n  --section-color: var(--mantine-color-white);\n\n  font-weight: var(--mantine-font-weight-medium);\n  width: auto;\n  border-radius: var(--section-radius, var(--mantine-radius-default));\n  font-size: var(--section-fz, var(--mantine-font-size-sm));\n  background: var(--section-bg, var(--mantine-primary-color-filled));\n  border: var(--section-bd, rem(1px) solid transparent);\n  color: var(--section-color, var(--mantine-color-white));\n  height: var(--section-height, var(--section-height-sm));\n  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n  vertical-align: middle;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".root {\n  --button-height-xs: 30px;\n  --button-height-sm: 36px;\n  --button-height-md: 42px;\n  --button-height-lg: 50px;\n  --button-height-xl: 60px;\n\n  --button-height-compact-xs: 22px;\n  --button-height-compact-sm: 26px;\n  --button-height-compact-md: 30px;\n  --button-height-compact-lg: 34px;\n  --button-height-compact-xl: 40px;\n\n  --button-padding-x-xs: 14px;\n  --button-padding-x-sm: 18px;\n  --button-padding-x-md: 22px;\n  --button-padding-x-lg: 26px;\n  --button-padding-x-xl: 32px;\n\n  --button-padding-x-compact-xs: 7px;\n  --button-padding-x-compact-sm: 8px;\n  --button-padding-x-compact-md: 10px;\n  --button-padding-x-compact-lg: 12px;\n  --button-padding-x-compact-xl: 14px;\n\n  --button-height: var(--button-height-sm);\n  --button-padding-x: var(--button-padding-x-sm);\n  --button-color: var(--mantine-color-white);\n\n  user-select: none;\n  font-weight: var(--mantine-font-weight-medium);\n  position: relative;\n  line-height: 1;\n  text-align: center;\n  overflow: hidden;\n\n  width: auto;\n  cursor: pointer;\n  display: inline-block;\n  border-radius: var(--button-radius, var(--mantine-radius-default));\n  font-size: var(--button-fz, var(--mantine-font-size-sm));\n  background: var(--button-bg, var(--mantine-primary-color-filled));\n  border: var(--button-bd, rem(1px) solid transparent);\n  color: var(--button-color, var(--mantine-color-white));\n  height: var(--button-height, var(--button-height-sm));\n  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n  vertical-align: middle;\n\n  &:where([data-block]) {\n    display: block;\n    width: 100%;\n  }\n\n  &:where([data-with-left-section]) {\n    padding-inline-start: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where([data-with-right-section]) {\n    padding-inline-end: calc(var(--button-padding-x) / 1.5);\n  }\n\n  &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n    cursor: not-allowed;\n    border: 1px solid transparent;\n    transform: none;\n    color: var(--mantine-color-disabled-color);\n    background: var(--mantine-color-disabled);\n  }\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    inset: -1px;\n    border-radius: var(--button-radius, var(--mantine-radius-default));\n    transform: translateY(-100%);\n    opacity: 0;\n    filter: blur(12px);\n    transition:\n      transform 150ms ease,\n      opacity 100ms ease;\n\n    @mixin where-light {\n      background-color: rgba(255, 255, 255, 0.15);\n    }\n\n    @mixin where-dark {\n      background-color: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  &:where([data-loading]) {\n    cursor: not-allowed;\n    transform: none;\n\n    &::before {\n      transform: translateY(0);\n      opacity: 1;\n    }\n\n    & .inner {\n      opacity: 0;\n      transform: translateY(100%);\n    }\n  }\n\n  @mixin hover {\n    &:where(:not([data-loading], :disabled, [data-disabled])) {\n      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));\n      color: var(--button-hover-color, var(--button-color));\n    }\n  }\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  justify-content: var(--button-justify, center);\n  height: 100%;\n  overflow: visible;\n  transition:\n    transform 150ms ease,\n    opacity 100ms ease;\n}\n\n.label {\n  white-space: nowrap;\n  height: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  opacity: 1;\n  text-box-trim: trim-both;\n  text-box-edge: cap alphabetic;\n\n  &:where([data-loading]) {\n    opacity: 0.2;\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.loader {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n}\n\n.group {\n  --button-border-width: 1px;\n  display: flex;\n\n  & :where(.root) {\n    &:focus {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  &[data-orientation='horizontal'] {\n    flex-direction: row;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n        border-inline-end-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-end-start-radius: 0;\n        border-start-start-radius: 0;\n        border-inline-start-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    flex-direction: column;\n\n    & .root,\n    & .groupSection {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-bottom-width: calc(var(--button-border-width) / 2);\n        border-top-width: calc(var(--button-border-width) / 2);\n      }\n    }\n  }\n}\n\n.groupSection {\n  --section-height-xs: 30px;\n  --section-height-sm: 36px;\n  --section-height-md: 42px;\n  --section-height-lg: 50px;\n  --section-height-xl: 60px;\n\n  --section-height-compact-xs: 22px;\n  --section-height-compact-sm: 26px;\n  --section-height-compact-md: 30px;\n  --section-height-compact-lg: 34px;\n  --section-height-compact-xl: 40px;\n\n  --section-padding-x-xs: 14px;\n  --section-padding-x-sm: 18px;\n  --section-padding-x-md: 22px;\n  --section-padding-x-lg: 26px;\n  --section-padding-x-xl: 32px;\n\n  --section-padding-x-compact-xs: 7px;\n  --section-padding-x-compact-sm: 8px;\n  --section-padding-x-compact-md: 10px;\n  --section-padding-x-compact-lg: 12px;\n  --section-padding-x-compact-xl: 14px;\n\n  --section-height: var(--section-height-sm);\n  --section-padding-x: var(--section-padding-x-sm);\n  --section-color: var(--mantine-color-white);\n\n  font-weight: var(--mantine-font-weight-medium);\n  width: auto;\n  border-radius: var(--section-radius, var(--mantine-radius-default));\n  font-size: var(--section-fz, var(--mantine-font-size-sm));\n  background: var(--section-bg, var(--mantine-primary-color-filled));\n  border: var(--section-bd, rem(1px) solid transparent);\n  color: var(--section-color, var(--mantine-color-white));\n  height: var(--section-height, var(--section-height-sm));\n  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n  vertical-align: middle;\n  line-height: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n"],"mappings":""}

package/esm/components/Checkbox/Checkbox.mjs

@@ -24,7 +24,8 @@ const defaultProps = {
 	labelPosition: "right",
 	icon: CheckboxIcon,
 	withErrorStyles: true,
-	variant: "filled"
+	variant: "filled",
+	radius: "sm"
 };
 const varsResolver = createVarsResolver((theme, { radius, color, size, iconColor, variant, autoContrast }) => {
 	const parsedColor = parseThemeColor({