@mantine/core 9.2.1 → 9.3.0

package/cjs/components/Tabs/Tabs.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.module.cjs","names":[],"sources":["../../../src/components/Tabs/Tabs.module.css"],"sourcesContent":[".root {\n  @mixin light {\n    --tab-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin dark {\n    --tab-border-color: var(--mantine-color-dark-4);\n  }\n\n  display: var(--tabs-display);\n  flex-direction: var(--tabs-flex-direction);\n\n  --tabs-list-direction: row;\n  --tabs-panel-grow: unset;\n  --tabs-display: block;\n  --tabs-flex-direction: row;\n  --tabs-list-border-width: 0;\n  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;\n  --tabs-list-gap: unset;\n\n  --tabs-list-line-bottom: 0;\n  --tabs-list-line-top: unset;\n  --tabs-list-line-start: 0;\n  --tabs-list-line-end: 0;\n\n  --tab-radius: var(--tabs-radius) var(--tabs-radius) 0 0;\n  --tab-border-width: 0 0 var(--tabs-list-border-width) 0;\n\n  &[data-inverted] {\n    --tabs-list-line-bottom: unset;\n    --tabs-list-line-top: 0;\n    --tab-radius: 0 0 var(--tabs-radius) var(--tabs-radius);\n    --tab-border-width: var(--tabs-list-border-width) 0 0 0;\n\n    & .list--default::before {\n      top: 0;\n      bottom: unset;\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    --tabs-list-line-start: unset;\n    --tabs-list-line-end: 0;\n    --tabs-list-line-top: 0;\n    --tabs-list-line-bottom: 0;\n    --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;\n    --tab-border-width: 0 var(--tabs-list-border-width) 0 0;\n    --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);\n    --tabs-list-direction: column;\n    --tabs-panel-grow: 1;\n    --tabs-display: flex;\n\n    @mixin rtl {\n      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);\n      --tab-border-width: 0 0 0 var(--tabs-list-border-width);\n      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;\n    }\n\n    &[data-placement='right'] {\n      --tabs-flex-direction: row-reverse;\n      --tabs-list-line-start: 0;\n      --tabs-list-line-end: unset;\n      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);\n      --tab-border-width: 0 0 0 var(--tabs-list-border-width);\n      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;\n\n      @mixin rtl {\n        --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;\n        --tab-border-width: 0 var(--tabs-list-border-width) 0 0;\n        --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);\n      }\n    }\n  }\n\n  &[data-variant='default'] {\n    --tabs-list-border-width: 2px;\n\n    @mixin light {\n      --tab-hover-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin dark {\n      --tab-hover-color: var(--mantine-color-dark-6);\n    }\n  }\n\n  &[data-variant='outline'] {\n    --tabs-list-border-width: 1px;\n  }\n\n  &[data-variant='pills'] {\n    --tabs-list-gap: calc(var(--mantine-spacing-sm) / 2);\n\n    @mixin light {\n      --tab-hover-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin dark {\n      --tab-hover-color: var(--mantine-color-dark-6);\n    }\n  }\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: var(--tabs-justify, flex-start);\n  flex-direction: var(--tabs-list-direction);\n  gap: var(--tabs-list-gap);\n\n  &:where([data-grow]) .tab {\n    flex: 1;\n  }\n}\n\n.panel {\n  flex-grow: var(--tabs-panel-grow);\n}\n\n.tab {\n  position: relative;\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n  font-size: var(--mantine-font-size-sm);\n  white-space: nowrap;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  line-height: 1;\n  user-select: none;\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    z-index: 1;\n  }\n}\n\n.tabSection {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:where([data-position='left']:not(:only-child)) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']:not(:only-child)) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.tabLabel {\n  flex: 1;\n  text-align: center;\n}\n\n/*************************************** default variant ***************************************/\n.list--default {\n  position: relative;\n\n  &::before {\n    content: '';\n    position: absolute;\n    border: 1px solid var(--tab-border-color);\n    bottom: var(--tabs-list-line-bottom);\n    inset-inline-start: var(--tabs-list-line-start);\n    inset-inline-end: var(--tabs-list-line-end);\n    top: var(--tabs-list-line-top);\n  }\n}\n\n.tab--default {\n  border-radius: var(--tab-radius);\n  border-width: var(--tab-border-width);\n  border-style: solid;\n  border-color: transparent;\n  background-color: transparent;\n\n  &:where([data-active]) {\n    border-color: var(--tabs-color);\n  }\n\n  @mixin hover {\n    background-color: var(--tab-hover-color);\n\n    &:where(:not([data-active])) {\n      border-color: var(--tab-border-color);\n    }\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    @mixin hover {\n      background-color: transparent;\n    }\n  }\n}\n\n/*************************************** outline variant ***************************************/\n.list--outline {\n  position: relative;\n\n  &::before {\n    content: '';\n    position: absolute;\n    border-color: var(--tab-border-color);\n    border-width: var(--tabs-list-border-size);\n    border-style: solid;\n    bottom: var(--tabs-list-line-bottom);\n    inset-inline-start: var(--tabs-list-line-start);\n    inset-inline-end: var(--tabs-list-line-end);\n    top: var(--tabs-list-line-top);\n  }\n}\n\n.tab--outline {\n  border-top: 1px solid transparent;\n  border-bottom: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-left: 1px solid transparent;\n  border-top-color: var(--tab-border-top-color);\n  border-bottom-color: var(--tab-border-bottom-color);\n  border-radius: var(--tab-radius);\n  position: relative;\n\n  --tab-border-bottom-color: transparent;\n  --tab-border-top-color: transparent;\n  --tab-border-inline-end-color: transparent;\n  --tab-border-inline-start-color: transparent;\n\n  &:where([data-active]) {\n    &::before {\n      content: '';\n      position: absolute;\n      background-color: var(--tab-border-color);\n      bottom: var(--tab-before-bottom, rem(-1px));\n      left: var(--tab-before-left, rem(-1px));\n      right: var(--tab-before-right, auto);\n      top: var(--tab-before-top, auto);\n      width: 1px;\n      height: 1px;\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      background-color: var(--tab-border-color);\n      bottom: var(--tab-after-bottom, rem(-1px));\n      right: var(--tab-after-right, rem(-1px));\n      left: var(--tab-after-left, auto);\n      top: var(--tab-after-top, auto);\n      width: 1px;\n      height: 1px;\n    }\n\n    border-top-color: var(--tab-border-top-color);\n    border-bottom-color: var(--tab-border-bottom-color);\n    border-inline-start-color: var(--tab-border-inline-start-color);\n    border-inline-end-color: var(--tab-border-inline-end-color);\n\n    --tab-border-top-color: var(--tab-border-color);\n    --tab-border-inline-start-color: var(--tab-border-color);\n    --tab-border-inline-end-color: var(--tab-border-color);\n    --tab-border-bottom-color: var(--mantine-color-body);\n\n    &[data-inverted] {\n      --tab-border-bottom-color: var(--tab-border-color);\n      --tab-border-top-color: var(--mantine-color-body);\n\n      --tab-before-bottom: auto;\n      --tab-before-top: -1px;\n      --tab-after-bottom: auto;\n      --tab-after-top: -1px;\n    }\n\n    &[data-orientation='vertical'] {\n      &[data-placement='left'] {\n        --tab-border-inline-end-color: var(--mantine-color-body);\n        --tab-border-inline-start-color: var(--tab-border-color);\n        --tab-border-bottom-color: var(--tab-border-color);\n\n        --tab-before-right: -1px;\n        --tab-before-left: auto;\n        --tab-before-bottom: auto;\n        --tab-before-top: -1px;\n        --tab-after-left: auto;\n        --tab-after-right: -1px;\n\n        @mixin rtl {\n          --tab-before-right: auto;\n          --tab-before-left: -1px;\n          --tab-after-left: -1px;\n          --tab-after-right: auto;\n        }\n      }\n\n      &[data-placement='right'] {\n        --tab-border-inline-start-color: var(--mantine-color-body);\n        --tab-border-inline-end-color: var(--tab-border-color);\n        --tab-border-bottom-color: var(--tab-border-color);\n\n        --tab-before-left: -1px;\n        --tab-before-right: auto;\n        --tab-before-bottom: auto;\n        --tab-before-top: -1px;\n        --tab-after-right: auto;\n        --tab-after-left: -1px;\n\n        @mixin rtl {\n          --tab-before-left: auto;\n          --tab-before-right: -1px;\n          --tab-after-right: -1px;\n          --tab-after-left: auto;\n        }\n      }\n    }\n  }\n}\n\n/*************************************** pills variant ***************************************/\n.tab--pills {\n  border-radius: var(--tabs-radius);\n  background-color: var(--tab-bg);\n  color: var(--tab-color);\n\n  --tab-bg: transparent;\n  --tab-color: inherit;\n\n  &:not([data-disabled]) {\n    @mixin hover {\n      --tab-bg: var(--tab-hover-color);\n    }\n  }\n\n  &[data-active][data-active] {\n    --tab-bg: var(--tabs-color);\n    --tab-color: var(--tabs-text-color, var(--mantine-color-white));\n\n    @mixin hover {\n      --tab-bg: var(--tabs-color);\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tabs.module.cjs","names":[],"sources":["../../../src/components/Tabs/Tabs.module.css"],"sourcesContent":[".root {\n  @mixin light {\n    --tab-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin dark {\n    --tab-border-color: var(--mantine-color-dark-4);\n  }\n\n  display: var(--tabs-display);\n  flex-direction: var(--tabs-flex-direction);\n\n  --tabs-list-direction: row;\n  --tabs-panel-grow: unset;\n  --tabs-display: block;\n  --tabs-flex-direction: row;\n  --tabs-list-border-width: 0;\n  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;\n  --tabs-list-gap: unset;\n\n  --tabs-list-line-bottom: 0;\n  --tabs-list-line-top: unset;\n  --tabs-list-line-start: 0;\n  --tabs-list-line-end: 0;\n\n  --tab-radius: var(--tabs-radius) var(--tabs-radius) 0 0;\n  --tab-border-width: 0 0 var(--tabs-list-border-width) 0;\n\n  &[data-inverted] {\n    --tabs-list-line-bottom: unset;\n    --tabs-list-line-top: 0;\n    --tab-radius: 0 0 var(--tabs-radius) var(--tabs-radius);\n    --tab-border-width: var(--tabs-list-border-width) 0 0 0;\n\n    & .list--default::before {\n      top: 0;\n      bottom: unset;\n    }\n  }\n\n  &[data-orientation='vertical'] {\n    --tabs-list-line-start: unset;\n    --tabs-list-line-end: 0;\n    --tabs-list-line-top: 0;\n    --tabs-list-line-bottom: 0;\n    --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;\n    --tab-border-width: 0 var(--tabs-list-border-width) 0 0;\n    --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);\n    --tabs-list-direction: column;\n    --tabs-panel-grow: 1;\n    --tabs-display: flex;\n\n    @mixin rtl {\n      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);\n      --tab-border-width: 0 0 0 var(--tabs-list-border-width);\n      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;\n    }\n\n    &[data-placement='right'] {\n      --tabs-flex-direction: row-reverse;\n      --tabs-list-line-start: 0;\n      --tabs-list-line-end: unset;\n      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);\n      --tab-border-width: 0 0 0 var(--tabs-list-border-width);\n      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;\n\n      @mixin rtl {\n        --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;\n        --tab-border-width: 0 var(--tabs-list-border-width) 0 0;\n        --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);\n      }\n    }\n  }\n\n  &[data-variant='default'] {\n    --tabs-list-border-width: 2px;\n\n    @mixin light {\n      --tab-hover-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin dark {\n      --tab-hover-color: var(--mantine-color-dark-6);\n    }\n  }\n\n  &[data-variant='outline'] {\n    --tabs-list-border-width: 1px;\n  }\n\n  &[data-variant='pills'] {\n    --tabs-list-gap: calc(var(--mantine-spacing-sm) / 2);\n\n    @mixin light {\n      --tab-hover-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin dark {\n      --tab-hover-color: var(--mantine-color-dark-6);\n    }\n  }\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: var(--tabs-justify, flex-start);\n  flex-direction: var(--tabs-list-direction);\n  gap: var(--tabs-list-gap);\n\n  &:where([data-grow]) .tab {\n    flex: 1;\n  }\n}\n\n.panel {\n  flex-grow: var(--tabs-panel-grow);\n}\n\n.tab {\n  position: relative;\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n  font-size: var(--mantine-font-size-sm);\n  white-space: nowrap;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  line-height: 1;\n  user-select: none;\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    z-index: 1;\n  }\n}\n\n.tabSection {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:where([data-position='left']:not(:only-child)) {\n    margin-inline-end: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-position='right']:not(:only-child)) {\n    margin-inline-start: var(--mantine-spacing-xs);\n  }\n}\n\n.tabLabel {\n  flex: 1;\n  text-align: center;\n}\n\n/*************************************** default variant ***************************************/\n.list--default {\n  position: relative;\n\n  &::before {\n    content: '';\n    position: absolute;\n    border: 1px solid var(--tab-border-color);\n    bottom: var(--tabs-list-line-bottom);\n    inset-inline-start: var(--tabs-list-line-start);\n    inset-inline-end: var(--tabs-list-line-end);\n    top: var(--tabs-list-line-top);\n  }\n}\n\n.tab--default {\n  border-radius: var(--tab-radius);\n  border-width: var(--tab-border-width);\n  border-style: solid;\n  border-color: transparent;\n  background-color: transparent;\n\n  &:where([data-active]) {\n    border-color: var(--tabs-color);\n  }\n\n  @mixin hover {\n    background-color: var(--tab-hover-color);\n\n    &:where(:not([data-active])) {\n      border-color: var(--tab-border-color);\n    }\n  }\n\n  &:disabled,\n  &[data-disabled] {\n    @mixin hover {\n      background-color: transparent;\n    }\n  }\n}\n\n/*************************************** outline variant ***************************************/\n.list--outline {\n  position: relative;\n\n  &::before {\n    content: '';\n    position: absolute;\n    border-color: var(--tab-border-color);\n    border-width: var(--tabs-list-border-size);\n    border-style: solid;\n    bottom: var(--tabs-list-line-bottom);\n    inset-inline-start: var(--tabs-list-line-start);\n    inset-inline-end: var(--tabs-list-line-end);\n    top: var(--tabs-list-line-top);\n  }\n}\n\n.tab--outline {\n  border-top: 1px solid transparent;\n  border-bottom: 1px solid transparent;\n  border-inline: 1px solid transparent;\n  border-top-color: var(--tab-border-top-color);\n  border-bottom-color: var(--tab-border-bottom-color);\n  border-radius: var(--tab-radius);\n  position: relative;\n\n  --tab-border-bottom-color: transparent;\n  --tab-border-top-color: transparent;\n  --tab-border-inline-end-color: transparent;\n  --tab-border-inline-start-color: transparent;\n\n  &:where([data-active]) {\n    &::before {\n      content: '';\n      position: absolute;\n      background-color: var(--tab-border-color);\n      bottom: var(--tab-before-bottom, rem(-1px));\n      inset-inline-start: var(--tab-before-start, rem(-1px));\n      inset-inline-end: var(--tab-before-end, auto);\n      top: var(--tab-before-top, auto);\n      width: 1px;\n      height: 1px;\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      background-color: var(--tab-border-color);\n      bottom: var(--tab-after-bottom, rem(-1px));\n      inset-inline-end: var(--tab-after-end, rem(-1px));\n      inset-inline-start: var(--tab-after-start, auto);\n      top: var(--tab-after-top, auto);\n      width: 1px;\n      height: 1px;\n    }\n\n    border-top-color: var(--tab-border-top-color);\n    border-bottom-color: var(--tab-border-bottom-color);\n    border-inline-start-color: var(--tab-border-inline-start-color);\n    border-inline-end-color: var(--tab-border-inline-end-color);\n\n    --tab-border-top-color: var(--tab-border-color);\n    --tab-border-inline-start-color: var(--tab-border-color);\n    --tab-border-inline-end-color: var(--tab-border-color);\n    --tab-border-bottom-color: var(--mantine-color-body);\n\n    &[data-inverted] {\n      --tab-border-bottom-color: var(--tab-border-color);\n      --tab-border-top-color: var(--mantine-color-body);\n\n      --tab-before-bottom: auto;\n      --tab-before-top: -1px;\n      --tab-after-bottom: auto;\n      --tab-after-top: -1px;\n    }\n\n    &[data-orientation='vertical'] {\n      &[data-placement='left'] {\n        --tab-border-inline-end-color: var(--mantine-color-body);\n        --tab-border-inline-start-color: var(--tab-border-color);\n        --tab-border-bottom-color: var(--tab-border-color);\n\n        --tab-before-end: -1px;\n        --tab-before-start: auto;\n        --tab-before-bottom: auto;\n        --tab-before-top: -1px;\n        --tab-after-start: auto;\n        --tab-after-end: -1px;\n      }\n\n      &[data-placement='right'] {\n        --tab-border-inline-start-color: var(--mantine-color-body);\n        --tab-border-inline-end-color: var(--tab-border-color);\n        --tab-border-bottom-color: var(--tab-border-color);\n\n        --tab-before-start: -1px;\n        --tab-before-end: auto;\n        --tab-before-bottom: auto;\n        --tab-before-top: -1px;\n        --tab-after-end: auto;\n        --tab-after-start: -1px;\n      }\n    }\n  }\n}\n\n/*************************************** pills variant ***************************************/\n.tab--pills {\n  border-radius: var(--tabs-radius);\n  background-color: var(--tab-bg);\n  color: var(--tab-color);\n\n  --tab-bg: transparent;\n  --tab-color: inherit;\n\n  &:not([data-disabled]) {\n    @mixin hover {\n      --tab-bg: var(--tab-hover-color);\n    }\n  }\n\n  &[data-active][data-active] {\n    --tab-bg: var(--tabs-color);\n    --tab-color: var(--tabs-text-color, var(--mantine-color-white));\n\n    @mixin hover {\n      --tab-bg: var(--tabs-color);\n    }\n  }\n}\n"],"mappings":""}

package/cjs/components/Tabs/TabsList/TabsList.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../../_virtual/_rolldown/runtime.cjs");
 const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
 const require_factory = require("../../../core/factory/factory.cjs");
 const require_Box = require("../../../core/Box/Box.cjs");

package/cjs/components/Tabs/TabsList/TabsList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsList.cjs","names":["factory","useProps","useTabsContext","Box","classes"],"sources":["../../../../src/components/Tabs/TabsList/TabsList.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsListStylesNames = 'list';\n\nexport interface TabsListProps\n  extends BoxProps, CompoundStylesApiProps<TabsListFactory>, ElementProps<'div'> {\n  /** `Tabs.Tab` components */\n  children: React.ReactNode;\n\n  /** Determines whether tabs should take all available space @default false */\n  grow?: boolean;\n\n  /** Tabs alignment @default flex-start */\n  justify?: React.CSSProperties['justifyContent'];\n}\n\nexport type TabsListFactory = Factory<{\n  props: TabsListProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsListStylesNames;\n  compound: true;\n}>;\n\nexport const TabsList = factory<TabsListFactory>((_props) => {\n  const props = useProps('TabsList', null, _props);\n  const { children, className, grow, justify, classNames, styles, style, mod, ...others } = props;\n\n  const ctx = useTabsContext();\n\n  return (\n    <Box\n      {...ctx.getStyles('list', {\n        className,\n        style,\n        classNames,\n        styles,\n        props,\n        variant: ctx.variant,\n      })}\n      role=\"tablist\"\n      variant={ctx.variant}\n      mod={[\n        {\n          grow,\n          orientation: ctx.orientation,\n          placement: ctx.orientation === 'vertical' && ctx.placement,\n          inverted: ctx.inverted,\n        },\n        mod,\n      ]}\n      aria-orientation={ctx.orientation}\n      __vars={{ '--tabs-justify': justify }}\n      {...others}\n    >\n      {children}\n    </Box>\n  );\n});\n\nTabsList.classes = classes;\nTabsList.displayName = '@mantine/core/TabsList';\n"],"mappings":";;;;;;;;;AAiCA,MAAa,WAAWA,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,MAAM,MAAM;CAC/C,MAAM,EAAE,UAAU,WAAW,MAAM,SAAS,YAAY,QAAQ,OAAO,KAAK,GAAG,WAAW;CAE1F,MAAM,MAAMC,qBAAAA,eAAe;CAE3B,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GACxB;GACA;GACA;GACA;GACA;GACA,SAAS,IAAI;EACf,CAAC;EACD,MAAK;EACL,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA,aAAa,IAAI;GACjB,WAAW,IAAI,gBAAgB,cAAc,IAAI;GACjD,UAAU,IAAI;EAChB,GACA,GACF;EACA,oBAAkB,IAAI;EACtB,QAAQ,EAAE,kBAAkB,QAAQ;EACpC,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,SAAS,UAAUC,oBAAAA;AACnB,SAAS,cAAc"}
+{"version":3,"file":"TabsList.cjs","names":["factory","useProps","useTabsContext","Box","classes"],"sources":["../../../../src/components/Tabs/TabsList/TabsList.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsListStylesNames = 'list';\n\nexport interface TabsListProps\n  extends BoxProps, CompoundStylesApiProps<TabsListFactory>, ElementProps<'div'> {\n  /** `Tabs.Tab` components */\n  children: React.ReactNode;\n\n  /** Determines whether tabs should take all available space @default false */\n  grow?: boolean;\n\n  /** Tabs alignment @default flex-start */\n  justify?: React.CSSProperties['justifyContent'];\n}\n\nexport type TabsListFactory = Factory<{\n  props: TabsListProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsListStylesNames;\n  compound: true;\n}>;\n\nexport const TabsList = factory<TabsListFactory>((_props) => {\n  const props = useProps('TabsList', null, _props);\n  const { children, className, grow, justify, classNames, styles, style, mod, ...others } = props;\n\n  const ctx = useTabsContext();\n\n  return (\n    <Box\n      {...ctx.getStyles('list', {\n        className,\n        style,\n        classNames,\n        styles,\n        props,\n        variant: ctx.variant,\n      })}\n      role=\"tablist\"\n      variant={ctx.variant}\n      mod={[\n        {\n          grow,\n          orientation: ctx.orientation,\n          placement: ctx.orientation === 'vertical' && ctx.placement,\n          inverted: ctx.inverted,\n        },\n        mod,\n      ]}\n      aria-orientation={ctx.orientation}\n      __vars={{ '--tabs-justify': justify }}\n      {...others}\n    >\n      {children}\n    </Box>\n  );\n});\n\nTabsList.classes = classes;\nTabsList.displayName = '@mantine/core/TabsList';\n"],"mappings":";;;;;;;;AAiCA,MAAa,WAAWA,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,MAAM,MAAM;CAC/C,MAAM,EAAE,UAAU,WAAW,MAAM,SAAS,YAAY,QAAQ,OAAO,KAAK,GAAG,WAAW;CAE1F,MAAM,MAAMC,qBAAAA,eAAe;CAE3B,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GACxB;GACA;GACA;GACA;GACA;GACA,SAAS,IAAI;EACf,CAAC;EACD,MAAK;EACL,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA,aAAa,IAAI;GACjB,WAAW,IAAI,gBAAgB,cAAc,IAAI;GACjD,UAAU,IAAI;EAChB,GACA,GACF;EACA,oBAAkB,IAAI;EACtB,QAAQ,EAAE,kBAAkB,QAAQ;EACpC,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,SAAS,UAAUC,oBAAAA;AACnB,SAAS,cAAc"}

package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Mantine_context = require("../../../core/MantineProvider/Mantine.context.cjs");
 const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
 const require_factory = require("../../../core/factory/factory.cjs");

package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsPanel.cjs","names":["factory","useProps","useMantineEnv","useTabsContext","Activity","Box","classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useMantineEnv,\n  useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n  extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n  /** Panel content */\n  children: React.ReactNode;\n\n  /** If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component */\n  keepMounted?: boolean;\n\n  /** Value of associated control */\n  value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n  props: TabsPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsPanelStylesNames;\n  compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n  const props = useProps('TabsPanel', null, _props);\n  const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n    props;\n\n  const env = useMantineEnv();\n  const ctx = useTabsContext();\n\n  const active = ctx.value === value;\n  const shouldKeepMounted = ctx.keepMounted || keepMounted;\n  const useActivity = ctx.keepMountedMode !== 'display-none';\n  const content =\n    shouldKeepMounted && useActivity && env !== 'test' ? (\n      <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n    ) : shouldKeepMounted ? (\n      children\n    ) : active ? (\n      children\n    ) : null;\n\n  return (\n    <Box\n      {...ctx.getStyles('panel', {\n        className,\n        classNames,\n        styles,\n        style: [style, !active ? { display: 'none' } : undefined],\n        props,\n      })}\n      mod={[{ orientation: ctx.orientation }, mod]}\n      role=\"tabpanel\"\n      id={ctx.getPanelId(value)}\n      aria-labelledby={ctx.getTabId(value)}\n      {...others}\n    >\n      {content}\n    </Box>\n  );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;;AAmCA,MAAa,YAAYA,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAMC,wBAAAA,cAAc;CAC1B,MAAM,MAAMC,qBAAAA,eAAe;CAE3B,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,cAAc,IAAI,oBAAoB;CAC5C,MAAM,UACJ,qBAAqB,eAAe,QAAQ,SAC1C,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;CAAmB,CAAA,IACjE,oBACF,WACE,SACF,WACE;CAEN,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,OAAO,IAAI,KAAA,CAAS;GACxD;EACF,CAAC;EACD,KAAK,CAAC,EAAE,aAAa,IAAI,YAAY,GAAG,GAAG;EAC3C,MAAK;EACL,IAAI,IAAI,WAAW,KAAK;EACxB,mBAAiB,IAAI,SAAS,KAAK;EACnC,GAAI;YAEH;CACE,CAAA;AAET,CAAC;AAED,UAAU,UAAUC,oBAAAA;AACpB,UAAU,cAAc"}
+{"version":3,"file":"TabsPanel.cjs","names":["factory","useProps","useMantineEnv","useTabsContext","Activity","Box","classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useMantineEnv,\n  useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n  extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n  /** Panel content */\n  children: React.ReactNode;\n\n  /** If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component */\n  keepMounted?: boolean;\n\n  /** Value of associated control */\n  value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n  props: TabsPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsPanelStylesNames;\n  compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n  const props = useProps('TabsPanel', null, _props);\n  const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n    props;\n\n  const env = useMantineEnv();\n  const ctx = useTabsContext();\n\n  const active = ctx.value === value;\n  const shouldKeepMounted = ctx.keepMounted || keepMounted;\n  const useActivity = ctx.keepMountedMode !== 'display-none';\n  const content =\n    shouldKeepMounted && useActivity && env !== 'test' ? (\n      <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n    ) : shouldKeepMounted ? (\n      children\n    ) : active ? (\n      children\n    ) : null;\n\n  return (\n    <Box\n      {...ctx.getStyles('panel', {\n        className,\n        classNames,\n        styles,\n        style: [style, !active ? { display: 'none' } : undefined],\n        props,\n      })}\n      mod={[{ orientation: ctx.orientation }, mod]}\n      role=\"tabpanel\"\n      id={ctx.getPanelId(value)}\n      aria-labelledby={ctx.getTabId(value)}\n      {...others}\n    >\n      {content}\n    </Box>\n  );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;AAmCA,MAAa,YAAYA,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAMC,wBAAAA,cAAc;CAC1B,MAAM,MAAMC,qBAAAA,eAAe;CAE3B,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,cAAc,IAAI,oBAAoB;CAC5C,MAAM,UACJ,qBAAqB,eAAe,QAAQ,SAC1C,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;CAAmB,CAAA,IACjE,oBACF,WACE,SACF,WACE;CAEN,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,OAAO,IAAI,KAAA,CAAS;GACxD;EACF,CAAC;EACD,KAAK,CAAC,EAAE,aAAa,IAAI,YAAY,GAAG,GAAG;EAC3C,MAAK;EACL,IAAI,IAAI,WAAW,KAAK;EACxB,mBAAiB,IAAI,SAAS,KAAK;EACnC,GAAI;YAEH;CACE,CAAA;AAET,CAAC;AAED,UAAU,UAAUC,oBAAAA;AACpB,UAAU,cAAc"}

package/cjs/components/Tabs/TabsTab/TabsTab.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../../_virtual/_rolldown/runtime.cjs");
 const require_create_scoped_keydown_handler = require("../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.cjs");
 const require_get_theme_color = require("../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
 const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");

package/cjs/components/Tabs/TabsTab/TabsTab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTab.cjs","names":["factory","useProps","useMantineTheme","useDirection","useTabsContext","UnstyledButton","getThemeColor","createScopedKeydownHandler","classes"],"sources":["../../../../src/components/Tabs/TabsTab/TabsTab.tsx"],"sourcesContent":["import {\n  CompoundStylesApiProps,\n  createScopedKeydownHandler,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useDirection,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsTabStylesNames = 'tab' | 'tabSection' | 'tabLabel';\n\nexport interface TabsTabProps\n  extends\n    Omit<UnstyledButtonProps, 'classNames' | 'styles' | 'vars'>,\n    CompoundStylesApiProps<TabsTabFactory>,\n    ElementProps<'button'> {\n  /** Value of associated panel */\n  value: string;\n\n  /** Tab label */\n  children?: React.ReactNode;\n\n  /** Content displayed on the right side of the label */\n  rightSection?: React.ReactNode;\n\n  /** Content displayed on the left side of the label */\n  leftSection?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` */\n  color?: MantineColor;\n}\n\nexport type TabsTabFactory = Factory<{\n  props: TabsTabProps;\n  ref: HTMLButtonElement;\n  stylesNames: TabsTabStylesNames;\n  compound: true;\n}>;\n\nexport const TabsTab = factory<TabsTabFactory>((_props) => {\n  const props = useProps('TabsTab', null, _props);\n  const {\n    className,\n    children,\n    rightSection,\n    leftSection,\n    value,\n    onClick,\n    onKeyDown,\n    disabled,\n    color,\n    style,\n    classNames,\n    styles,\n    vars,\n    mod,\n    tabIndex,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const { dir } = useDirection();\n  const ctx = useTabsContext();\n  const active = value === ctx.value;\n  const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n    onClick?.(event);\n  };\n\n  const stylesApiProps = { classNames, styles, props };\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('tab', { className, style, variant: ctx.variant, ...stylesApiProps })}\n      disabled={disabled}\n      unstyled={ctx.unstyled}\n      variant={ctx.variant}\n      mod={[\n        {\n          active,\n          disabled,\n          orientation: ctx.orientation,\n          inverted: ctx.inverted,\n          placement: ctx.orientation === 'vertical' && ctx.placement,\n        },\n        mod,\n      ]}\n      role=\"tab\"\n      id={ctx.getTabId(value)}\n      aria-selected={active}\n      tabIndex={tabIndex !== undefined ? tabIndex : active || ctx.value === null ? 0 : -1}\n      aria-controls={ctx.getPanelId(value)}\n      onClick={activateTab}\n      __vars={{ '--tabs-color': color ? getThemeColor(color, theme) : undefined }}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[role=\"tab\"]',\n        parentSelector: '[role=\"tablist\"]',\n        activateOnFocus: ctx.activateTabWithKeyboard,\n        loop: ctx.loop,\n        orientation: ctx.orientation || 'horizontal',\n        dir,\n        onKeyDown,\n      })}\n      {...others}\n    >\n      {leftSection && (\n        <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"left\">\n          {leftSection}\n        </span>\n      )}\n      {children && <span {...ctx.getStyles('tabLabel', stylesApiProps)}>{children}</span>}\n      {rightSection && (\n        <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"right\">\n          {rightSection}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nTabsTab.classes = classes;\nTabsTab.displayName = '@mantine/core/TabsTab';\n"],"mappings":";;;;;;;;;;;;;AA8CA,MAAa,UAAUA,gBAAAA,SAAyB,WAAW;CACzD,MAAM,QAAQC,kBAAAA,SAAS,WAAW,MAAM,MAAM;CAC9C,MAAM,EACJ,WACA,UACA,cACA,aACA,OACA,SACA,WACA,UACA,OACA,OACA,YACA,QACA,MACA,KACA,UACA,GAAG,WACD;CAEJ,MAAM,QAAQC,6BAAAA,gBAAgB;CAC9B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,MAAMC,qBAAAA,eAAe;CAC3B,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,eAAe,UAA2D;EAC9E,IAAI,SAAS,IAAI,uBAAwB,UAAU,IAAI,QAAQ,OAAO,QAAS,KAAK;EACpF,UAAU,KAAK;CACjB;CAEA,MAAM,iBAAiB;EAAE;EAAY;EAAQ;CAAM;CAEnD,OACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI,IAAI,UAAU,OAAO;GAAE;GAAW;GAAO,SAAS,IAAI;GAAS,GAAG;EAAe,CAAC;EAC5E;EACV,UAAU,IAAI;EACd,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA;GACA,aAAa,IAAI;GACjB,UAAU,IAAI;GACd,WAAW,IAAI,gBAAgB,cAAc,IAAI;EACnD,GACA,GACF;EACA,MAAK;EACL,IAAI,IAAI,SAAS,KAAK;EACtB,iBAAe;EACf,UAAU,aAAa,KAAA,IAAY,WAAW,UAAU,IAAI,UAAU,OAAO,IAAI;EACjF,iBAAe,IAAI,WAAW,KAAK;EACnC,SAAS;EACT,QAAQ,EAAE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;EAC1E,WAAWC,sCAAAA,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB,IAAI;GACrB,MAAM,IAAI;GACV,aAAa,IAAI,eAAe;GAChC;GACA;EACF,CAAC;EACD,GAAI;YA/BN;GAiCG,eACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;cAClE;GACG,CAAA;GAEP,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,cAAc;IAAI;GAAe,CAAA;GACjF,gBACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;cAClE;GACG,CAAA;EAEM;;AAEpB,CAAC;AAED,QAAQ,UAAUC,oBAAAA;AAClB,QAAQ,cAAc"}
+{"version":3,"file":"TabsTab.cjs","names":["factory","useProps","useMantineTheme","useDirection","useTabsContext","UnstyledButton","getThemeColor","createScopedKeydownHandler","classes"],"sources":["../../../../src/components/Tabs/TabsTab/TabsTab.tsx"],"sourcesContent":["import {\n  CompoundStylesApiProps,\n  createScopedKeydownHandler,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useDirection,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsTabStylesNames = 'tab' | 'tabSection' | 'tabLabel';\n\nexport interface TabsTabProps\n  extends\n    Omit<UnstyledButtonProps, 'classNames' | 'styles' | 'vars'>,\n    CompoundStylesApiProps<TabsTabFactory>,\n    ElementProps<'button'> {\n  /** Value of associated panel */\n  value: string;\n\n  /** Tab label */\n  children?: React.ReactNode;\n\n  /** Content displayed on the right side of the label */\n  rightSection?: React.ReactNode;\n\n  /** Content displayed on the left side of the label */\n  leftSection?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` */\n  color?: MantineColor;\n}\n\nexport type TabsTabFactory = Factory<{\n  props: TabsTabProps;\n  ref: HTMLButtonElement;\n  stylesNames: TabsTabStylesNames;\n  compound: true;\n}>;\n\nexport const TabsTab = factory<TabsTabFactory>((_props) => {\n  const props = useProps('TabsTab', null, _props);\n  const {\n    className,\n    children,\n    rightSection,\n    leftSection,\n    value,\n    onClick,\n    onKeyDown,\n    disabled,\n    color,\n    style,\n    classNames,\n    styles,\n    vars,\n    mod,\n    tabIndex,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const { dir } = useDirection();\n  const ctx = useTabsContext();\n  const active = value === ctx.value;\n  const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n    onClick?.(event);\n  };\n\n  const stylesApiProps = { classNames, styles, props };\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('tab', { className, style, variant: ctx.variant, ...stylesApiProps })}\n      disabled={disabled}\n      unstyled={ctx.unstyled}\n      variant={ctx.variant}\n      mod={[\n        {\n          active,\n          disabled,\n          orientation: ctx.orientation,\n          inverted: ctx.inverted,\n          placement: ctx.orientation === 'vertical' && ctx.placement,\n        },\n        mod,\n      ]}\n      role=\"tab\"\n      id={ctx.getTabId(value)}\n      aria-selected={active}\n      tabIndex={tabIndex !== undefined ? tabIndex : active || ctx.value === null ? 0 : -1}\n      aria-controls={ctx.getPanelId(value)}\n      onClick={activateTab}\n      __vars={{ '--tabs-color': color ? getThemeColor(color, theme) : undefined }}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[role=\"tab\"]',\n        parentSelector: '[role=\"tablist\"]',\n        activateOnFocus: ctx.activateTabWithKeyboard,\n        loop: ctx.loop,\n        orientation: ctx.orientation || 'horizontal',\n        dir,\n        onKeyDown,\n      })}\n      {...others}\n    >\n      {leftSection && (\n        <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"left\">\n          {leftSection}\n        </span>\n      )}\n      {children && <span {...ctx.getStyles('tabLabel', stylesApiProps)}>{children}</span>}\n      {rightSection && (\n        <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"right\">\n          {rightSection}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nTabsTab.classes = classes;\nTabsTab.displayName = '@mantine/core/TabsTab';\n"],"mappings":";;;;;;;;;;;;AA8CA,MAAa,UAAUA,gBAAAA,SAAyB,WAAW;CACzD,MAAM,QAAQC,kBAAAA,SAAS,WAAW,MAAM,MAAM;CAC9C,MAAM,EACJ,WACA,UACA,cACA,aACA,OACA,SACA,WACA,UACA,OACA,OACA,YACA,QACA,MACA,KACA,UACA,GAAG,WACD;CAEJ,MAAM,QAAQC,6BAAAA,gBAAgB;CAC9B,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,MAAMC,qBAAAA,eAAe;CAC3B,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,eAAe,UAA2D;EAC9E,IAAI,SAAS,IAAI,uBAAwB,UAAU,IAAI,QAAQ,OAAO,QAAS,KAAK;EACpF,UAAU,KAAK;CACjB;CAEA,MAAM,iBAAiB;EAAE;EAAY;EAAQ;CAAM;CAEnD,OACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI,IAAI,UAAU,OAAO;GAAE;GAAW;GAAO,SAAS,IAAI;GAAS,GAAG;EAAe,CAAC;EAC5E;EACV,UAAU,IAAI;EACd,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA;GACA,aAAa,IAAI;GACjB,UAAU,IAAI;GACd,WAAW,IAAI,gBAAgB,cAAc,IAAI;EACnD,GACA,GACF;EACA,MAAK;EACL,IAAI,IAAI,SAAS,KAAK;EACtB,iBAAe;EACf,UAAU,aAAa,KAAA,IAAY,WAAW,UAAU,IAAI,UAAU,OAAO,IAAI;EACjF,iBAAe,IAAI,WAAW,KAAK;EACnC,SAAS;EACT,QAAQ,EAAE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;EAC1E,WAAWC,sCAAAA,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB,IAAI;GACrB,MAAM,IAAI;GACV,aAAa,IAAI,eAAe;GAChC;GACA;EACF,CAAC;EACD,GAAI;YA/BN;GAiCG,eACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;cAClE;GACG,CAAA;GAEP,YAAY,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,cAAc;IAAI;GAAe,CAAA;GACjF,gBACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;cAClE;GACG,CAAA;EAEM;;AAEpB,CAAC;AAED,QAAQ,UAAUC,oBAAAA;AAClB,QAAQ,cAAc"}

package/cjs/components/TagsInput/TagsInput.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
 const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
 const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
@@ -34,7 +33,7 @@ const TagsInput = require_factory.factory((_props) => {
 		"InputWrapper",
 		"TagsInput"
 	], defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, maxTags, allowDuplicates, onDuplicate, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, splitChars, onFocus, onBlur, onPaste, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, required, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, hiddenInputValuesDivider, mod, renderOption, renderPill, onRemove, onClear, onMaxTags, scrollAreaProps, acceptValueOnBlur, isDuplicate, openOnFocus, attributes, ref, loading, loadingPosition, withPillsReorder, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, maxTags, allowDuplicates, onDuplicate, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, floatingHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, splitChars, onFocus, onBlur, onPaste, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, required, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, hiddenInputValuesDivider, mod, renderOption, renderPill, onRemove, onClear, onMaxTags, scrollAreaProps, acceptValueOnBlur, isDuplicate, openOnFocus, attributes, ref, loading, loadingPosition, withPillsReorder, ...others } = props;
 	const _id = (0, _mantine_hooks.useId)(id);
 	const parsedData = require_get_parsed_combobox_data.getParsedComboboxData(data);
 	const optionsLockup = require_get_options_lockup.getOptionsLockup(parsedData);
@@ -204,6 +203,7 @@ const TagsInput = require_factory.factory((_props) => {
 		readOnly,
 		__staticSelector: "TagsInput",
 		attributes,
+		floatingHeight,
 		onOptionSubmit: (val) => {
 			onOptionSubmit?.(val);
 			handleSearchChange("");

package/cjs/components/TagsInput/TagsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","usePillsReorder","useStyles","useResolvedStylesApi","getSplittedTags","Fragment","Pill","Combobox","PillsInput","OptionsDropdown","filterPickedTags","InputBase"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n  usePillsReorder,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface TagsInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<TagsInputFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Data displayed in the dropdown. Values must be unique. */\n  data?: ComboboxGenericData;\n\n  /** Controlled component value */\n  value?: string[];\n\n  /** Uncontrolled component default value */\n  defaultValue?: string[];\n\n  /** Called when value changes */\n  onChange?: (value: string[]) => void;\n\n  /** Called when tag is removed */\n  onRemove?: (value: string) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Maximum number of tags @default Infinity */\n  maxTags?: number;\n\n  /** Called when user tries to add more tags than maxTags */\n  onMaxTags?: (value: string) => void;\n\n  /** If set, duplicate tags are allowed @default false */\n  allowDuplicates?: boolean;\n\n  /** Called when user tries to submit a duplicated tag */\n  onDuplicate?: (value: string) => void;\n\n  /** Characters that should trigger tags split, `[',']` by default */\n  splitChars?: string[];\n\n  /** If set, the clear button is displayed in the right section when the component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n  /** A function to render content of the pill, replaces the default content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true */\n  acceptValueOnBlur?: boolean;\n\n  /** Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. */\n  isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n\n  /** If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n  withPillsReorder?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n  props: TagsInputProps;\n  ref: HTMLInputElement;\n  stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n  maxTags: Infinity,\n  acceptValueOnBlur: true,\n  splitChars: [','],\n  hiddenInputValuesDivider: ',',\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'TagsInput'], defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    maxTags,\n    allowDuplicates,\n    onDuplicate,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    splitChars,\n    onFocus,\n    onBlur,\n    onPaste,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    required,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    hiddenInputValuesDivider,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxTags,\n    scrollAreaProps,\n    acceptValueOnBlur,\n    isDuplicate,\n    openOnFocus,\n    attributes,\n    ref,\n    loading,\n    loadingPosition,\n    withPillsReorder,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const _ref = useMergedRef(inputRef, ref);\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n    value: _value,\n    onChange: setValue,\n    enabled: withPillsReorder && !disabled && !readOnly,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<TagsInputFactory>({\n    name: 'TagsInput',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleValueSelect = (val: string) => {\n    const isDuplicated = isDuplicate\n      ? isDuplicate(val, _value)\n      : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n    if (isDuplicated) {\n      onDuplicate?.(val);\n      if (!allowDuplicates) {\n        handleSearchChange('');\n        return;\n      }\n    }\n\n    if (_value.length >= maxTags) {\n      onMaxTags?.(val);\n      return;\n    }\n\n    onOptionSubmit?.(val);\n    handleSearchChange('');\n    if (val.length > 0) {\n      setValue([..._value, val]);\n    }\n  };\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || event.isPropagationStopped()) {\n      return;\n    }\n\n    const inputValue = _searchValue.trim();\n    const { length } = inputValue;\n\n    if (splitChars.includes(event.key) && length > 0) {\n      setValue(\n        getSplittedTags({\n          splitChars,\n          allowDuplicates,\n          maxTags,\n          value: _searchValue,\n          currentTags: _value,\n          isDuplicate,\n          onDuplicate,\n        })\n      );\n      handleSearchChange('');\n      event.preventDefault();\n    }\n\n    if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n      event.preventDefault();\n\n      const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n        `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n      );\n\n      if (hasActiveSelection) {\n        return;\n      }\n\n      handleValueSelect(inputValue);\n    }\n\n    if (\n      event.key === 'Backspace' &&\n      length === 0 &&\n      _value.length > 0 &&\n      !event.nativeEvent.isComposing &&\n      !readOnly\n    ) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n\n    handleInputKeyDown(event);\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    onPaste?.(event);\n    event.preventDefault();\n\n    if (event.clipboardData) {\n      const pastedText = event.clipboardData.getData('text/plain');\n      setValue(\n        getSplittedTags({\n          splitChars,\n          allowDuplicates,\n          maxTags,\n          value: `${_searchValue}${pastedText}`,\n          currentTags: _value,\n          isDuplicate,\n          onDuplicate,\n        })\n      );\n      handleSearchChange('');\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const onRemoveItem = () => {\n      const next_value = _value.slice();\n      next_value.splice(index, 1);\n      setValue(next_value);\n      onRemove?.(item);\n    };\n\n    const reorderProps = getPillProps(index);\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionsLockup[item] || { value: item, label: item, disabled: false },\n            value: item,\n            onRemove: onRemoveItem,\n            disabled: disabled || readOnly,\n            reorderProps,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly}\n        onRemove={onRemoveItem}\n        unstyled={unstyled}\n        disabled={disabled}\n        attributes={attributes}\n        {...getStyles('pill')}\n        {...reorderProps}\n      >\n        {item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue([]);\n        handleSearchChange('');\n        inputRef.current?.focus();\n        combobox.openDropdown();\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"TagsInput\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val);\n          handleSearchChange('');\n\n          if (_value.length >= maxTags) {\n            onMaxTags?.(val);\n          } else {\n            setValue([..._value, optionsLockup[val].value]);\n          }\n\n          combobox.resetSelectedOption();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"TagsInput\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            rightSection={rightSection}\n            __clearSection={clearButton}\n            __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n            __clearSectionMode={clearSectionMode}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionPointerEvents={rightSectionPointerEvents}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            loading={loading}\n            loadingPosition={loadingPosition}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            required={required}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{ ...props, multiline: true }}\n            id={_id}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList')}\n              {...getListProps()}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  ref={_ref}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onKeyDown={handleInputKeydown}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    acceptValueOnBlur && handleValueSelect(_searchValue);\n                    combobox.closeDropdown();\n                  }}\n                  onPaste={handlePaste}\n                  value={_searchValue}\n                  onChange={(event) => handleSearchChange(event.currentTarget.value)}\n                  required={required && _value.length === 0}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  id={_id}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={filterPickedTags({ data: parsedData, value: _value })}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        form={form}\n        value={_value}\n        valuesDivider={hiddenInputValuesDivider}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n\nexport namespace TagsInput {\n  export type Props = TagsInputProps;\n  export type StylesNames = TagsInputStylesNames;\n  export type Factory = TagsInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6IA,MAAM,eAAe;CACnB,SAAS;CACT,mBAAmB;CACnB,YAAY,CAAC,GAAG;CAChB,0BAA0B;CAC1B,aAAa;CACb,MAAM;AACR;AAEA,MAAa,YAAYA,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS;EAAC;EAAS;EAAgB;CAAW,GAAG,cAAc,MAAM;CACnF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,iBACA,aACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,aACA,oBACA,gBACA,UACA,UACA,YACA,SACA,QACA,SACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,UACA,YACA,kBACA,YACA,cACA,aACA,OACA,OACA,iBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,0BACA,KACA,cACA,YACA,UACA,SACA,WACA,iBACA,mBACA,aACA,aACA,YACA,KACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,OAAY,EAAE;CACpB,MAAM,aAAaC,iCAAAA,sBAAsB,IAAI;CAC7C,MAAM,gBAAgBC,2BAAAA,iBAAiB,UAAU;CACjD,MAAM,YAAA,GAAA,MAAA,QAAoC,IAAI;CAC9C,MAAM,QAAA,GAAA,eAAA,cAAoB,UAAU,GAAG;CAEvC,MAAM,WAAWC,qBAAAA,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7BC,4BAAAA,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,uBAAuBC,0BAAAA,gBAAgB;EACzE,OAAO;EACP,UAAU;EACV,SAAS,oBAAoB,CAAC,YAAY,CAAC;CAC7C,CAAC;CAED,MAAM,CAAC,cAAc,mBAAA,GAAA,eAAA,iBAAkC;EACrD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,sBAAsB,UAAkB;EAC5C,eAAe,KAAK;EACpB,SAAS,oBAAoB;CAC/B;CAEA,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAS,CAAC;EACH;EACP;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAuC;EACpF;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,QAAgB;EAKzC,IAJqB,cACjB,YAAY,KAAK,MAAM,IACvB,OAAO,MAAM,QAAQ,IAAI,YAAY,MAAM,IAAI,YAAY,CAAC,GAE9C;GAChB,cAAc,GAAG;GACjB,IAAI,CAAC,iBAAiB;IACpB,mBAAmB,EAAE;IACrB;GACF;EACF;EAEA,IAAI,OAAO,UAAU,SAAS;GAC5B,YAAY,GAAG;GACf;EACF;EAEA,iBAAiB,GAAG;EACpB,mBAAmB,EAAE;EACrB,IAAI,IAAI,SAAS,GACf,SAAS,CAAC,GAAG,QAAQ,GAAG,CAAC;CAE7B;CAEA,MAAM,sBAAsB,UAAiD;EAC3E,YAAY,KAAK;EAEjB,IAAI,MAAM,oBAAoB,MAAM,qBAAqB,GACvD;EAGF,MAAM,aAAa,aAAa,KAAK;EACrC,MAAM,EAAE,WAAW;EAEnB,IAAI,WAAW,SAAS,MAAM,GAAG,KAAK,SAAS,GAAG;GAChD,SACEC,0BAAAA,gBAAgB;IACd;IACA;IACA;IACA,OAAO;IACP,aAAa;IACb;IACA;GACF,CAAC,CACH;GACA,mBAAmB,EAAE;GACrB,MAAM,eAAe;EACvB;EAEA,IAAI,MAAM,QAAQ,WAAW,SAAS,KAAK,CAAC,MAAM,YAAY,aAAa;GACzE,MAAM,eAAe;GAMrB,IAAI,CAJwB,CAAC,SAAS,cACpC,IAAI,SAAS,OAAO,gDACtB,GAGE;GAGF,kBAAkB,UAAU;EAC9B;EAEA,IACE,MAAM,QAAQ,eACd,WAAW,KACX,OAAO,SAAS,KAChB,CAAC,MAAM,YAAY,eACnB,CAAC,UACD;GACA,WAAW,OAAO,OAAO,SAAS,EAAE;GACpC,SAAS,OAAO,MAAM,GAAG,OAAO,SAAS,CAAC,CAAC;EAC7C;EAEA,mBAAmB,KAAK;CAC1B;CAEA,MAAM,eAAe,UAAkD;EACrE,UAAU,KAAK;EACf,MAAM,eAAe;EAErB,IAAI,MAAM,eAAe;GAEvB,SACEA,0BAAAA,gBAAgB;IACd;IACA;IACA;IACA,OAAO,GAAG,eANK,MAAM,cAAc,QAAQ,YAMT;IAClC,aAAa;IACb;IACA;GACF,CAAC,CACH;GACA,mBAAmB,EAAE;EACvB;CACF;CAEA,MAAM,SAAS,OAAO,KAAK,MAAM,UAAU;EACzC,MAAM,qBAAqB;GACzB,MAAM,aAAa,OAAO,MAAM;GAChC,WAAW,OAAO,OAAO,CAAC;GAC1B,SAAS,UAAU;GACnB,WAAW,IAAI;EACjB;EAEA,MAAM,eAAe,aAAa,KAAK;EAEvC,IAAI,YACF,OACE,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD,EAAA,UACG,WAAW;GACV,QAAQ,cAAc,SAAS;IAAE,OAAO;IAAM,OAAO;IAAM,UAAU;GAAM;GAC3E,OAAO;GACP,UAAU;GACV,UAAU,YAAY;GACtB;EACF,CAAC,EACO,GARK,GAAG,KAAK,GAAG,OAQhB;EAId,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAEE,kBAAkB,CAAC;GACnB,UAAU;GACA;GACA;GACE;GACZ,GAAI,UAAU,MAAM;GACpB,GAAI;aAEH;EACG,GAVC,GAAG,KAAK,GAAG,OAUZ;CAEV,CAAC;CAED,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,2BACF,SAAS,kBAAkB;CAE/B,GAAG;EAAC;EAA2B;EAAQ;CAAY,CAAC;CAEpD,MAAM,cACJ,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;GACb,SAAS,CAAC,CAAC;GACX,mBAAmB,EAAE;GACrB,SAAS,SAAS,MAAM;GACxB,SAAS,aAAa;GACtB,UAAU;EACZ;CACD,CAAA;CAGH,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,MAACA,iBAAAA,UAAD;EACE,OAAO;EACP,YAAY;EACZ,QAAQ;EACE;EACJ;EACI;EACV,kBAAiB;EACL;EACZ,iBAAiB,QAAQ;GACvB,iBAAiB,GAAG;GACpB,mBAAmB,EAAE;GAErB,IAAI,OAAO,UAAU,SACnB,YAAY,GAAG;QAEf,SAAS,CAAC,GAAG,QAAQ,cAAc,KAAK,KAAK,CAAC;GAGhD,SAAS,oBAAoB;EAC/B;EACA,GAAI;YArBN,CAuBE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,SAAS,gBAAV,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,GAAI;GACJ,kBAAiB;GACjB,YAAY;GACZ,QAAQ;GACE;GACJ;GACK;GACJ;GACE;GACC;GACF;GACM;GACd,gBAAgB;GAChB,aAAa,aAAa,OAAO,SAAS,KAAK,CAAC,YAAY,CAAC;GAC7D,oBAAoB;GACD;GACQ;GACR;GACN;GACK;GACQ;GACR;GACT;GACQ;GACD;GACG;GACL;GACJ;GACE;GACM;GACN;GACE;GACD;GACN;GACA;GACU;GACjB,kBAAkB;IAAE,GAAG;IAAO,WAAW;GAAK;GAC9C,IAAI;GACC;GACO;aAEZ,iBAAA,GAAA,kBAAA,MAACF,aAAAA,KAAK,OAAN;IACY;IACA;IACV,GAAI,UAAU,WAAW;IACzB,GAAI,aAAa;cAJnB,CAMG,QACD,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAS,cAAV;KAAqC;KAAc,uBAAA;eACjD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,WAAW,OAAZ;MACE,GAAI;MACJ,KAAK;MACL,GAAI,UAAU,YAAY;MAChB;MACV,WAAW;MACX,UAAU,UAAU;OAClB,UAAU,KAAK;OACf,eAAe,SAAS,aAAa;MACvC;MACA,SAAS,UAAU;OACjB,SAAS,KAAK;OACd,qBAAqB,kBAAkB,YAAY;OACnD,SAAS,cAAc;MACzB;MACA,SAAS;MACT,OAAO;MACP,WAAW,UAAU,mBAAmB,MAAM,cAAc,KAAK;MACjE,UAAU,YAAY,OAAO,WAAW;MAC9B;MACA;MACV,IAAI;KACL,CAAA;IACoB,CAAA,CACb;;EACF,CAAA,EACW,CAAA,GAEzB,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD;GACE,MAAMC,2BAAAA,iBAAiB;IAAE,MAAM;IAAY,OAAO;GAAO,CAAC;GAC1D,QAAQ,YAAY;GACZ;GACR,QAAQ;GACD;GACP,iBAAA;GACgB;GACG;GACT;GACV,SAAS,QAAQ,GAAG,IAAI,UAAU,KAAA;GAClC,cAAY,QAAQ,KAAA,IAAY,OAAO;GACzB;GACG;EAClB,CAAA,CACO;KACV,iBAAA,GAAA,kBAAA,KAACH,iBAAAA,SAAS,aAAV;EACQ;EACA;EACN,OAAO;EACP,eAAe;EACL;EACV,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC;AAED,UAAU,UAAU;CAAE,GAAGI,kBAAAA,UAAU;CAAS,GAAGJ,iBAAAA,SAAS;AAAQ;AAChE,UAAU,cAAc"}
+{"version":3,"file":"TagsInput.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","usePillsReorder","useStyles","useResolvedStylesApi","getSplittedTags","Fragment","Pill","Combobox","PillsInput","OptionsDropdown","filterPickedTags","InputBase"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n  usePillsReorder,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface TagsInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<TagsInputFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Data displayed in the dropdown. Values must be unique. */\n  data?: ComboboxGenericData;\n\n  /** Controlled component value */\n  value?: string[];\n\n  /** Uncontrolled component default value */\n  defaultValue?: string[];\n\n  /** Called when value changes */\n  onChange?: (value: string[]) => void;\n\n  /** Called when tag is removed */\n  onRemove?: (value: string) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Maximum number of tags @default Infinity */\n  maxTags?: number;\n\n  /** Called when user tries to add more tags than maxTags */\n  onMaxTags?: (value: string) => void;\n\n  /** If set, duplicate tags are allowed @default false */\n  allowDuplicates?: boolean;\n\n  /** Called when user tries to submit a duplicated tag */\n  onDuplicate?: (value: string) => void;\n\n  /** Characters that should trigger tags split, `[',']` by default */\n  splitChars?: string[];\n\n  /** If set, the clear button is displayed in the right section when the component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n  /** A function to render content of the pill, replaces the default content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true */\n  acceptValueOnBlur?: boolean;\n\n  /** Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. */\n  isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n\n  /** If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n  withPillsReorder?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n  props: TagsInputProps;\n  ref: HTMLInputElement;\n  stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n  maxTags: Infinity,\n  acceptValueOnBlur: true,\n  splitChars: [','],\n  hiddenInputValuesDivider: ',',\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'TagsInput'], defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    maxTags,\n    allowDuplicates,\n    onDuplicate,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    floatingHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    splitChars,\n    onFocus,\n    onBlur,\n    onPaste,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    required,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    hiddenInputValuesDivider,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxTags,\n    scrollAreaProps,\n    acceptValueOnBlur,\n    isDuplicate,\n    openOnFocus,\n    attributes,\n    ref,\n    loading,\n    loadingPosition,\n    withPillsReorder,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const _ref = useMergedRef(inputRef, ref);\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n    value: _value,\n    onChange: setValue,\n    enabled: withPillsReorder && !disabled && !readOnly,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<TagsInputFactory>({\n    name: 'TagsInput',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleValueSelect = (val: string) => {\n    const isDuplicated = isDuplicate\n      ? isDuplicate(val, _value)\n      : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n    if (isDuplicated) {\n      onDuplicate?.(val);\n      if (!allowDuplicates) {\n        handleSearchChange('');\n        return;\n      }\n    }\n\n    if (_value.length >= maxTags) {\n      onMaxTags?.(val);\n      return;\n    }\n\n    onOptionSubmit?.(val);\n    handleSearchChange('');\n    if (val.length > 0) {\n      setValue([..._value, val]);\n    }\n  };\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || event.isPropagationStopped()) {\n      return;\n    }\n\n    const inputValue = _searchValue.trim();\n    const { length } = inputValue;\n\n    if (splitChars.includes(event.key) && length > 0) {\n      setValue(\n        getSplittedTags({\n          splitChars,\n          allowDuplicates,\n          maxTags,\n          value: _searchValue,\n          currentTags: _value,\n          isDuplicate,\n          onDuplicate,\n        })\n      );\n      handleSearchChange('');\n      event.preventDefault();\n    }\n\n    if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n      event.preventDefault();\n\n      const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n        `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n      );\n\n      if (hasActiveSelection) {\n        return;\n      }\n\n      handleValueSelect(inputValue);\n    }\n\n    if (\n      event.key === 'Backspace' &&\n      length === 0 &&\n      _value.length > 0 &&\n      !event.nativeEvent.isComposing &&\n      !readOnly\n    ) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n\n    handleInputKeyDown(event);\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    onPaste?.(event);\n    event.preventDefault();\n\n    if (event.clipboardData) {\n      const pastedText = event.clipboardData.getData('text/plain');\n      setValue(\n        getSplittedTags({\n          splitChars,\n          allowDuplicates,\n          maxTags,\n          value: `${_searchValue}${pastedText}`,\n          currentTags: _value,\n          isDuplicate,\n          onDuplicate,\n        })\n      );\n      handleSearchChange('');\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const onRemoveItem = () => {\n      const next_value = _value.slice();\n      next_value.splice(index, 1);\n      setValue(next_value);\n      onRemove?.(item);\n    };\n\n    const reorderProps = getPillProps(index);\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionsLockup[item] || { value: item, label: item, disabled: false },\n            value: item,\n            onRemove: onRemoveItem,\n            disabled: disabled || readOnly,\n            reorderProps,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly}\n        onRemove={onRemoveItem}\n        unstyled={unstyled}\n        disabled={disabled}\n        attributes={attributes}\n        {...getStyles('pill')}\n        {...reorderProps}\n      >\n        {item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue([]);\n        handleSearchChange('');\n        inputRef.current?.focus();\n        combobox.openDropdown();\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"TagsInput\"\n        attributes={attributes}\n        floatingHeight={floatingHeight}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val);\n          handleSearchChange('');\n\n          if (_value.length >= maxTags) {\n            onMaxTags?.(val);\n          } else {\n            setValue([..._value, optionsLockup[val].value]);\n          }\n\n          combobox.resetSelectedOption();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"TagsInput\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            rightSection={rightSection}\n            __clearSection={clearButton}\n            __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n            __clearSectionMode={clearSectionMode}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionPointerEvents={rightSectionPointerEvents}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            loading={loading}\n            loadingPosition={loadingPosition}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            required={required}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{ ...props, multiline: true }}\n            id={_id}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList')}\n              {...getListProps()}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  ref={_ref}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onKeyDown={handleInputKeydown}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    acceptValueOnBlur && handleValueSelect(_searchValue);\n                    combobox.closeDropdown();\n                  }}\n                  onPaste={handlePaste}\n                  value={_searchValue}\n                  onChange={(event) => handleSearchChange(event.currentTarget.value)}\n                  required={required && _value.length === 0}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  id={_id}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={filterPickedTags({ data: parsedData, value: _value })}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        form={form}\n        value={_value}\n        valuesDivider={hiddenInputValuesDivider}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n\nexport namespace TagsInput {\n  export type Props = TagsInputProps;\n  export type StylesNames = TagsInputStylesNames;\n  export type Factory = TagsInputFactory;\n}\n"],"mappings":"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"}

package/cjs/components/Text/Text.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_get_size = require("../../core/utils/get-size/get-size.cjs");
 const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
 const require_get_gradient = require("../../core/MantineProvider/color-functions/get-gradient/get-gradient.cjs");
@@ -15,15 +14,16 @@ function getTextTruncate(truncate) {
 	if (truncate === "end" || truncate) return "end";
 }
 const defaultProps = { inherit: false };
-const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { variant, lineClamp, gradient, size }) => ({ root: {
+const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { variant, lineClamp, gradient, size, textWrap }) => ({ root: {
 	"--text-fz": require_get_size.getFontSize(size),
 	"--text-lh": require_get_size.getLineHeight(size),
 	"--text-gradient": variant === "gradient" ? require_get_gradient.getGradient(gradient, theme) : void 0,
-	"--text-line-clamp": typeof lineClamp === "number" ? lineClamp.toString() : void 0
+	"--text-line-clamp": typeof lineClamp === "number" ? lineClamp.toString() : void 0,
+	"--text-text-wrap": textWrap
 } }));
 const Text = require_polymorphic_factory.polymorphicFactory((_props) => {
 	const props = require_use_props.useProps("Text", defaultProps, _props);
-	const { lineClamp, truncate, inline, inherit, gradient, span, __staticSelector, vars, className, style, classNames, styles, unstyled, variant, mod, size, attributes, ...others } = props;
+	const { lineClamp, truncate, inline, inherit, gradient, span, textWrap, __staticSelector, vars, className, style, classNames, styles, unstyled, variant, mod, size, attributes, ...others } = props;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		...require_use_styles.useStyles({
 			name: ["Text", __staticSelector],

package/cjs/components/Text/Text.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.cjs","names":["createVarsResolver","getFontSize","getLineHeight","getGradient","polymorphicFactory","useProps","Box","useStyles","classes"],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getFontSize,\n  getGradient,\n  getLineHeight,\n  MantineFontSize,\n  MantineGradient,\n  MantineLineHeight,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Text.module.css';\n\ntype TextTruncate = 'end' | 'start' | boolean;\n\nfunction getTextTruncate(truncate: TextTruncate | undefined) {\n  if (truncate === 'start') {\n    return 'start';\n  }\n\n  if (truncate === 'end' || truncate) {\n    return 'end';\n  }\n\n  return undefined;\n}\n\nexport type TextStylesNames = 'root';\nexport type TextVariant = 'text' | 'gradient';\nexport type TextCssVariables = {\n  root: '--text-gradient' | '--text-line-clamp' | '--text-fz' | '--text-lh';\n};\n\nexport interface TextProps extends BoxProps, StylesApiProps<TextFactory> {\n  __staticSelector?: string;\n\n  /** Controls `font-size` and `line-height` @default 'md' */\n  size?: MantineFontSize | MantineLineHeight;\n\n  /** Number of lines after which Text will be truncated */\n  lineClamp?: number;\n\n  /** Side on which Text must be truncated, if `true`, text is truncated from the start */\n  truncate?: TextTruncate;\n\n  /** Sets `line-height` to 1 for centering @default false */\n  inline?: boolean;\n\n  /** Determines whether font properties should be inherited from the parent @default false */\n  inherit?: boolean;\n\n  /** Gradient configuration, ignored when `variant` is not `gradient` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Shorthand for `component=\"span\"` */\n  span?: boolean;\n}\n\nexport type TextFactory = PolymorphicFactory<{\n  props: TextProps;\n  defaultComponent: 'p';\n  defaultRef: HTMLParagraphElement;\n  stylesNames: TextStylesNames;\n  vars: TextCssVariables;\n  variant: TextVariant;\n}>;\n\nconst defaultProps = {\n  inherit: false,\n} satisfies Partial<TextProps>;\n\nconst varsResolver = createVarsResolver<TextFactory>(\n  // Will be removed in 9.0\n\n  (theme, { variant, lineClamp, gradient, size }) => ({\n    root: {\n      '--text-fz': getFontSize(size),\n      '--text-lh': getLineHeight(size),\n      '--text-gradient': variant === 'gradient' ? getGradient(gradient, theme) : undefined,\n      '--text-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n    },\n  })\n);\n\nexport const Text = polymorphicFactory<TextFactory>((_props) => {\n  const props = useProps('Text', defaultProps, _props);\n  const {\n    lineClamp,\n    truncate,\n    inline,\n    inherit,\n    gradient,\n    span,\n    __staticSelector,\n    vars,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    mod,\n    size,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TextFactory>({\n    name: ['Text', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      {...getStyles('root', { focusable: true })}\n      component={span ? 'span' : 'p'}\n      variant={variant}\n      mod={[\n        {\n          'data-truncate': getTextTruncate(truncate),\n          'data-line-clamp': typeof lineClamp === 'number',\n          'data-inline': inline,\n          'data-inherit': inherit,\n        },\n        mod,\n      ]}\n      size={size}\n      {...others}\n    />\n  );\n});\n\nText.classes = classes;\nText.varsResolver = varsResolver;\nText.displayName = '@mantine/core/Text';\n\nexport namespace Text {\n  export type Props = TextProps;\n  export type StylesNames = TextStylesNames;\n  export type CssVariables = TextCssVariables;\n  export type Factory = TextFactory;\n  export type Variant = TextVariant;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAS,gBAAgB,UAAoC;CAC3D,IAAI,aAAa,SACf,OAAO;CAGT,IAAI,aAAa,SAAS,UACxB,OAAO;AAIX;AA0CA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,MAAM,eAAeA,6BAAAA,oBAGlB,OAAO,EAAE,SAAS,WAAW,UAAU,YAAY,EAClD,MAAM;CACJ,aAAaC,iBAAAA,YAAY,IAAI;CAC7B,aAAaC,iBAAAA,cAAc,IAAI;CAC/B,mBAAmB,YAAY,aAAaC,qBAAAA,YAAY,UAAU,KAAK,IAAI,KAAA;CAC3E,qBAAqB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;AAC9E,EACF,EACF;AAEA,MAAa,OAAOC,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,WACA,UACA,QACA,SACA,UACA,MACA,kBACA,MACA,WACA,OACA,YACA,QACA,UACA,SACA,KACA,MACA,YACA,GAAG,WACD;CAgBJ,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAhBcC,mBAAAA,UAAuB;GACvC,MAAM,CAAC,QAAQ,gBAAgB;GAC/B;GACA,SAAA,oBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAIgB,EAAE,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,WAAW,OAAO,SAAS;EAClB;EACT,KAAK,CACH;GACE,iBAAiB,gBAAgB,QAAQ;GACzC,mBAAmB,OAAO,cAAc;GACxC,eAAe;GACf,gBAAgB;EAClB,GACA,GACF;EACM;EACN,GAAI;CACL,CAAA;AAEL,CAAC;AAED,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}
+{"version":3,"file":"Text.cjs","names":["createVarsResolver","getFontSize","getLineHeight","getGradient","polymorphicFactory","useProps","Box","useStyles","classes"],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getFontSize,\n  getGradient,\n  getLineHeight,\n  MantineFontSize,\n  MantineGradient,\n  MantineLineHeight,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Text.module.css';\n\ntype TextTruncate = 'end' | 'start' | boolean;\n\nfunction getTextTruncate(truncate: TextTruncate | undefined) {\n  if (truncate === 'start') {\n    return 'start';\n  }\n\n  if (truncate === 'end' || truncate) {\n    return 'end';\n  }\n\n  return undefined;\n}\n\nexport type TextStylesNames = 'root';\nexport type TextVariant = 'text' | 'gradient';\nexport type TextCssVariables = {\n  root: '--text-gradient' | '--text-line-clamp' | '--text-fz' | '--text-lh' | '--text-text-wrap';\n};\n\nexport interface TextProps extends BoxProps, StylesApiProps<TextFactory> {\n  __staticSelector?: string;\n\n  /** Controls `font-size` and `line-height` @default 'md' */\n  size?: MantineFontSize | MantineLineHeight;\n\n  /** Number of lines after which Text will be truncated */\n  lineClamp?: number;\n\n  /** Side on which Text must be truncated, if `true`, text is truncated from the start */\n  truncate?: TextTruncate;\n\n  /** Sets `line-height` to 1 for centering @default false */\n  inline?: boolean;\n\n  /** Determines whether font properties should be inherited from the parent @default false */\n  inherit?: boolean;\n\n  /** Gradient configuration, ignored when `variant` is not `gradient` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Shorthand for `component=\"span\"` */\n  span?: boolean;\n\n  /** Controls `text-wrap` CSS property */\n  textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';\n}\n\nexport type TextFactory = PolymorphicFactory<{\n  props: TextProps;\n  defaultComponent: 'p';\n  defaultRef: HTMLParagraphElement;\n  stylesNames: TextStylesNames;\n  vars: TextCssVariables;\n  variant: TextVariant;\n}>;\n\nconst defaultProps = {\n  inherit: false,\n} satisfies Partial<TextProps>;\n\nconst varsResolver = createVarsResolver<TextFactory>(\n  // Will be removed in 9.0\n\n  (theme, { variant, lineClamp, gradient, size, textWrap }) => ({\n    root: {\n      '--text-fz': getFontSize(size),\n      '--text-lh': getLineHeight(size),\n      '--text-gradient': variant === 'gradient' ? getGradient(gradient, theme) : undefined,\n      '--text-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n      '--text-text-wrap': textWrap,\n    },\n  })\n);\n\nexport const Text = polymorphicFactory<TextFactory>((_props) => {\n  const props = useProps('Text', defaultProps, _props);\n  const {\n    lineClamp,\n    truncate,\n    inline,\n    inherit,\n    gradient,\n    span,\n    textWrap,\n    __staticSelector,\n    vars,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    mod,\n    size,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TextFactory>({\n    name: ['Text', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      {...getStyles('root', { focusable: true })}\n      component={span ? 'span' : 'p'}\n      variant={variant}\n      mod={[\n        {\n          'data-truncate': getTextTruncate(truncate),\n          'data-line-clamp': typeof lineClamp === 'number',\n          'data-inline': inline,\n          'data-inherit': inherit,\n        },\n        mod,\n      ]}\n      size={size}\n      {...others}\n    />\n  );\n});\n\nText.classes = classes;\nText.varsResolver = varsResolver;\nText.displayName = '@mantine/core/Text';\n\nexport namespace Text {\n  export type Props = TextProps;\n  export type StylesNames = TextStylesNames;\n  export type CssVariables = TextCssVariables;\n  export type Factory = TextFactory;\n  export type Variant = TextVariant;\n}\n"],"mappings":";;;;;;;;;;;AAoBA,SAAS,gBAAgB,UAAoC;CAC3D,IAAI,aAAa,SACf,OAAO;CAGT,IAAI,aAAa,SAAS,UACxB,OAAO;AAIX;AA6CA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,MAAM,eAAeA,6BAAAA,oBAGlB,OAAO,EAAE,SAAS,WAAW,UAAU,MAAM,gBAAgB,EAC5D,MAAM;CACJ,aAAaC,iBAAAA,YAAY,IAAI;CAC7B,aAAaC,iBAAAA,cAAc,IAAI;CAC/B,mBAAmB,YAAY,aAAaC,qBAAAA,YAAY,UAAU,KAAK,IAAI,KAAA;CAC3E,qBAAqB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;CAC5E,oBAAoB;AACtB,EACF,EACF;AAEA,MAAa,OAAOC,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,WACA,UACA,QACA,SACA,UACA,MACA,UACA,kBACA,MACA,WACA,OACA,YACA,QACA,UACA,SACA,KACA,MACA,YACA,GAAG,WACD;CAgBJ,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAhBcC,mBAAAA,UAAuB;GACvC,MAAM,CAAC,QAAQ,gBAAgB;GAC/B;GACA,SAAA,oBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAIgB,EAAE,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,WAAW,OAAO,SAAS;EAClB;EACT,KAAK,CACH;GACE,iBAAiB,gBAAgB,QAAQ;GACzC,mBAAmB,OAAO,cAAc;GACxC,eAAe;GACf,gBAAgB;EAClB,GACA,GACF;EACM;EACN,GAAI;CACL,CAAA;AAEL,CAAC;AAED,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}

package/cjs/components/Text/Text.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Text.module.cjs","names":[],"sources":["../../../src/components/Text/Text.module.css"],"sourcesContent":[".root {\n  -webkit-tap-highlight-color: transparent;\n  text-decoration: none;\n  font-size: var(--text-fz, var(--mantine-font-size-md));\n  line-height: var(--text-lh, var(--mantine-line-height-md));\n  font-weight: var(--mantine-font-weight-regular);\n  margin: 0;\n  padding: 0;\n\n  &:where([data-truncate]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate='start']) {\n    direction: rtl;\n    text-align: right;\n\n    @mixin where-rtl {\n      direction: ltr;\n      text-align: left;\n    }\n  }\n\n  &:where([data-variant='gradient']) {\n    background-image: var(--text-gradient);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  &:where([data-line-clamp]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: var(--text-line-clamp);\n    -webkit-box-orient: vertical;\n  }\n\n  &:where([data-inherit]) {\n    line-height: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n  }\n\n  &:where([data-inline]) {\n    line-height: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Text.module.cjs","names":[],"sources":["../../../src/components/Text/Text.module.css"],"sourcesContent":[".root {\n  -webkit-tap-highlight-color: transparent;\n  text-decoration: none;\n  font-size: var(--text-fz, var(--mantine-font-size-md));\n  line-height: var(--text-lh, var(--mantine-line-height-md));\n  font-weight: var(--mantine-font-weight-regular);\n  text-wrap: var(--text-text-wrap, var(--mantine-text-wrap, wrap));\n  margin: 0;\n  padding: 0;\n\n  &:where([data-truncate]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &:where([data-truncate='start']) {\n    direction: rtl;\n    text-align: end;\n\n    @mixin where-rtl {\n      direction: ltr;\n      text-align: start;\n    }\n  }\n\n  &:where([data-variant='gradient']) {\n    background-image: var(--text-gradient);\n    background-clip: text;\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  &:where([data-line-clamp]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-line-clamp: var(--text-line-clamp);\n    -webkit-box-orient: vertical;\n  }\n\n  &:where([data-inherit]) {\n    line-height: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n  }\n\n  &:where([data-inline]) {\n    line-height: 1;\n  }\n}\n"],"mappings":""}

package/cjs/components/TextInput/TextInput.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
 const require_factory = require("../../core/factory/factory.cjs");
 const require_InputBase = require("../InputBase/InputBase.cjs");

package/cjs/components/TextInput/TextInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.cjs","names":["factory","InputBase","useProps"],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\n\nexport interface TextInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TextInputFactory>,\n    ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n  props: TextInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nexport const TextInput = factory<TextInputFactory>((props) => {\n  const _props = useProps(['Input', 'InputWrapper', 'TextInput'], null, props);\n  return <InputBase component=\"input\" {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.classes = InputBase.classes;\nTextInput.displayName = '@mantine/core/TextInput';\n\nexport namespace TextInput {\n  export type Props = TextInputProps;\n  export type Factory = TextInputFactory;\n}\n"],"mappings":";;;;;;;AAkBA,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAE5D,OAAO,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EAAW,WAAU;EAAQ,GADrBC,kBAAAA,SAAS;GAAC;GAAS;GAAgB;EAAW,GAAG,MAAM,KACzB;EAAG,kBAAiB;CAAa,CAAA;AAChF,CAAC;AAED,UAAU,UAAUD,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}
+{"version":3,"file":"TextInput.cjs","names":["factory","InputBase","useProps"],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\n\nexport interface TextInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TextInputFactory>,\n    ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n  props: TextInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nexport const TextInput = factory<TextInputFactory>((props) => {\n  const _props = useProps(['Input', 'InputWrapper', 'TextInput'], null, props);\n  return <InputBase component=\"input\" {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.classes = InputBase.classes;\nTextInput.displayName = '@mantine/core/TextInput';\n\nexport namespace TextInput {\n  export type Props = TextInputProps;\n  export type Factory = TextInputFactory;\n}\n"],"mappings":";;;;;;AAkBA,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAE5D,OAAO,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EAAW,WAAU;EAAQ,GADrBC,kBAAAA,SAAS;GAAC;GAAS;GAAgB;EAAW,GAAG,MAAM,KACzB;EAAG,kBAAiB;CAAa,CAAA;AAChF,CAAC;AAED,UAAU,UAAUD,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}

package/cjs/components/Textarea/Textarea.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_get_env = require("../../core/utils/get-env/get-env.cjs");
 const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
 const require_factory = require("../../core/factory/factory.cjs");
@@ -8,7 +7,7 @@ const require_Autosize = require("./Autosize.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Textarea/Textarea.tsx
 const Textarea = require_factory.factory((props) => {
-	const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = require_use_props.useProps([
+	const { autosize, maxRows, minRows, __staticSelector, resize, bottomSection, bottomSectionProps, ...others } = require_use_props.useProps([
 		"Input",
 		"InputWrapper",
 		"Textarea"
@@ -22,6 +21,8 @@ const Textarea = require_factory.factory((props) => {
 		component: shouldAutosize ? require_Autosize.TextareaAutosize : "textarea",
 		...others,
 		__staticSelector: __staticSelector || "Textarea",
+		__bottomSection: bottomSection,
+		__bottomSectionProps: bottomSectionProps,
 		multiline: true,
 		"data-no-overflow": autosize && maxRows === void 0 || void 0,
 		__vars: { "--input-resize": resize },

package/cjs/components/Textarea/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","names":["factory","useProps","getEnv","InputBase","TextareaAutosize"],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getEnv,\n  StylesApiProps,\n  useProps,\n} from '../../core';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { TextareaAutosize } from './Autosize';\n\nexport interface TextareaProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TextareaFactory>,\n    ElementProps<'textarea', 'size'> {\n  __staticSelector?: string;\n\n  /** If set, enables textarea height growing with its content @default false */\n  autosize?: boolean;\n\n  /** Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set */\n  maxRows?: number;\n\n  /** Minimum rows of autosize textarea, ignored if `autosize` prop is not set */\n  minRows?: number;\n\n  /** Controls `resize` CSS property @default 'none' */\n  resize?: React.CSSProperties['resize'];\n}\n\nexport type TextareaFactory = Factory<{\n  props: TextareaProps;\n  ref: HTMLTextAreaElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nexport const Textarea = factory<TextareaFactory>((props) => {\n  const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = useProps(\n    ['Input', 'InputWrapper', 'Textarea'],\n    null,\n    props\n  );\n\n  const shouldAutosize = autosize && getEnv() !== 'test';\n  const autosizeProps = shouldAutosize ? { maxRows, minRows } : {};\n\n  return (\n    <InputBase<any>\n      component={shouldAutosize ? TextareaAutosize : 'textarea'}\n      {...others}\n      __staticSelector={__staticSelector || 'Textarea'}\n      multiline\n      data-no-overflow={(autosize && maxRows === undefined) || undefined}\n      __vars={{ '--input-resize': resize }}\n      {...autosizeProps}\n    />\n  );\n});\n\nTextarea.classes = InputBase.classes;\nTextarea.displayName = '@mantine/core/Textarea';\n\nexport namespace Textarea {\n  export type Props = TextareaProps;\n  export type Factory = TextareaFactory;\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAa,WAAWA,gBAAAA,SAA0B,UAAU;CAC1D,MAAM,EAAE,UAAU,SAAS,SAAS,kBAAkB,QAAQ,GAAG,WAAWC,kBAAAA,SAC1E;EAAC;EAAS;EAAgB;CAAU,GACpC,MACA,KACF;CAEA,MAAM,iBAAiB,YAAYC,gBAAAA,OAAO,MAAM;CAChD,MAAM,gBAAgB,iBAAiB;EAAE;EAAS;CAAQ,IAAI,CAAC;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,WAAW,iBAAiBC,iBAAAA,mBAAmB;EAC/C,GAAI;EACJ,kBAAkB,oBAAoB;EACtC,WAAA;EACA,oBAAmB,YAAY,YAAY,KAAA,KAAc,KAAA;EACzD,QAAQ,EAAE,kBAAkB,OAAO;EACnC,GAAI;CACL,CAAA;AAEL,CAAC;AAED,SAAS,UAAUD,kBAAAA,UAAU;AAC7B,SAAS,cAAc"}
+{"version":3,"file":"Textarea.cjs","names":["factory","useProps","getEnv","InputBase","TextareaAutosize"],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getEnv,\n  StylesApiProps,\n  useProps,\n} from '../../core';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { TextareaAutosize } from './Autosize';\n\nexport interface TextareaProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TextareaFactory>,\n    ElementProps<'textarea', 'size'> {\n  __staticSelector?: string;\n\n  /** If set, enables textarea height growing with its content @default false */\n  autosize?: boolean;\n\n  /** Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set */\n  maxRows?: number;\n\n  /** Minimum rows of autosize textarea, ignored if `autosize` prop is not set */\n  minRows?: number;\n\n  /** Controls `resize` CSS property @default 'none' */\n  resize?: React.CSSProperties['resize'];\n\n  /** Content rendered at the bottom of the input, inside the border */\n  bottomSection?: React.ReactNode;\n\n  /** Props passed down to the `bottomSection` element */\n  bottomSectionProps?: React.ComponentProps<'div'>;\n}\n\nexport type TextareaFactory = Factory<{\n  props: TextareaProps;\n  ref: HTMLTextAreaElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nexport const Textarea = factory<TextareaFactory>((props) => {\n  const {\n    autosize,\n    maxRows,\n    minRows,\n    __staticSelector,\n    resize,\n    bottomSection,\n    bottomSectionProps,\n    ...others\n  } = useProps(['Input', 'InputWrapper', 'Textarea'], null, props);\n\n  const shouldAutosize = autosize && getEnv() !== 'test';\n  const autosizeProps = shouldAutosize ? { maxRows, minRows } : {};\n\n  return (\n    <InputBase<any>\n      component={shouldAutosize ? TextareaAutosize : 'textarea'}\n      {...others}\n      __staticSelector={__staticSelector || 'Textarea'}\n      __bottomSection={bottomSection}\n      __bottomSectionProps={bottomSectionProps}\n      multiline\n      data-no-overflow={(autosize && maxRows === undefined) || undefined}\n      __vars={{ '--input-resize': resize }}\n      {...autosizeProps}\n    />\n  );\n});\n\nTextarea.classes = InputBase.classes;\nTextarea.displayName = '@mantine/core/Textarea';\n\nexport namespace Textarea {\n  export type Props = TextareaProps;\n  export type Factory = TextareaFactory;\n}\n"],"mappings":";;;;;;;;AA8CA,MAAa,WAAWA,gBAAAA,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,SACA,SACA,kBACA,QACA,eACA,oBACA,GAAG,WACDC,kBAAAA,SAAS;EAAC;EAAS;EAAgB;CAAU,GAAG,MAAM,KAAK;CAE/D,MAAM,iBAAiB,YAAYC,gBAAAA,OAAO,MAAM;CAChD,MAAM,gBAAgB,iBAAiB;EAAE;EAAS;CAAQ,IAAI,CAAC;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,WAAW,iBAAiBC,iBAAAA,mBAAmB;EAC/C,GAAI;EACJ,kBAAkB,oBAAoB;EACtC,iBAAiB;EACjB,sBAAsB;EACtB,WAAA;EACA,oBAAmB,YAAY,YAAY,KAAA,KAAc,KAAA;EACzD,QAAQ,EAAE,kBAAkB,OAAO;EACnC,GAAI;CACL,CAAA;AAEL,CAAC;AAED,SAAS,UAAUD,kBAAAA,UAAU;AAC7B,SAAS,cAAc"}

package/cjs/components/ThemeIcon/ThemeIcon.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_get_size = require("../../core/utils/get-size/get-size.cjs");
 const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
 const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");

package/cjs/components/ThemeIcon/ThemeIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeIcon.cjs","names":["createVarsResolver","getSize","getRadius","factory","useProps","Box","useStyles","classes"],"sources":["../../../src/components/ThemeIcon/ThemeIcon.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './ThemeIcon.module.css';\n\nexport type ThemeIconStylesNames = 'root';\nexport type ThemeIconVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'transparent'\n  | 'white'\n  | 'default'\n  | 'gradient';\n\nexport type ThemeIconCssVariables = {\n  root: '--ti-radius' | '--ti-size' | '--ti-bg' | '--ti-color' | '--ti-bd';\n};\n\nexport interface ThemeIconProps\n  extends BoxProps, StylesApiProps<ThemeIconFactory>, ElementProps<'div'> {\n  /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient data used when `variant=\"gradient\"` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Icon displayed inside the component */\n  children?: React.ReactNode;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ThemeIconFactory = Factory<{\n  props: ThemeIconProps;\n  ref: HTMLDivElement;\n  stylesNames: ThemeIconStylesNames;\n  vars: ThemeIconCssVariables;\n  variant: ThemeIconVariant;\n}>;\n\nconst varsResolver = createVarsResolver<ThemeIconFactory>(\n  (theme, { size, radius, variant, gradient, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--ti-size': getSize(size, 'ti-size'),\n        '--ti-radius': radius === undefined ? undefined : getRadius(radius),\n        '--ti-bg': color || variant ? colors.background : undefined,\n        '--ti-color': color || variant ? colors.color : undefined,\n        '--ti-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const ThemeIcon = factory<ThemeIconFactory>((_props) => {\n  const props = useProps('ThemeIcon', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ThemeIconFactory>({\n    name: 'ThemeIcon',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return <Box {...getStyles('root')} {...others} />;\n});\n\nThemeIcon.classes = classes;\nThemeIcon.varsResolver = varsResolver;\nThemeIcon.displayName = '@mantine/core/ThemeIcon';\n\nexport namespace ThemeIcon {\n  export type Props = ThemeIconProps;\n  export type StylesNames = ThemeIconStylesNames;\n  export type Factory = ThemeIconFactory;\n  export type Variant = ThemeIconVariant;\n  export type CssVariables = ThemeIconCssVariables;\n}\n"],"mappings":";;;;;;;;;;;AA8DA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,OAAO,mBAAmB;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,aAAaC,iBAAAA,QAAQ,MAAM,SAAS;EACpC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EAClE,WAAW,SAAS,UAAU,OAAO,aAAa,KAAA;EAClD,cAAc,SAAS,UAAU,OAAO,QAAQ,KAAA;EAChD,WAAW,SAAS,UAAU,OAAO,SAAS,KAAA;CAChD,EACF;AACF,CACF;AAEA,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,YACA,GAAG,WACD;CAgBJ,OAAO,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAdMC,mBAAAA,UAA4B;GAC5C,MAAM;GACN,SAAA,yBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEwB,EAAE,MAAM;EAAG,GAAI;CAAS,CAAA;AAClD,CAAC;AAED,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}
+{"version":3,"file":"ThemeIcon.cjs","names":["createVarsResolver","getSize","getRadius","factory","useProps","Box","useStyles","classes"],"sources":["../../../src/components/ThemeIcon/ThemeIcon.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './ThemeIcon.module.css';\n\nexport type ThemeIconStylesNames = 'root';\nexport type ThemeIconVariant =\n  | 'filled'\n  | 'light'\n  | 'outline'\n  | 'transparent'\n  | 'white'\n  | 'default'\n  | 'gradient';\n\nexport type ThemeIconCssVariables = {\n  root: '--ti-radius' | '--ti-size' | '--ti-bg' | '--ti-color' | '--ti-bd';\n};\n\nexport interface ThemeIconProps\n  extends BoxProps, StylesApiProps<ThemeIconFactory>, ElementProps<'div'> {\n  /** Controls width and height of the button. Numbers are converted to rem. @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.colors` or any valid CSS color. @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Gradient data used when `variant=\"gradient\"` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Icon displayed inside the component */\n  children?: React.ReactNode;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type ThemeIconFactory = Factory<{\n  props: ThemeIconProps;\n  ref: HTMLDivElement;\n  stylesNames: ThemeIconStylesNames;\n  vars: ThemeIconCssVariables;\n  variant: ThemeIconVariant;\n}>;\n\nconst varsResolver = createVarsResolver<ThemeIconFactory>(\n  (theme, { size, radius, variant, gradient, color, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      gradient,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--ti-size': getSize(size, 'ti-size'),\n        '--ti-radius': radius === undefined ? undefined : getRadius(radius),\n        '--ti-bg': color || variant ? colors.background : undefined,\n        '--ti-color': color || variant ? colors.color : undefined,\n        '--ti-bd': color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const ThemeIcon = factory<ThemeIconFactory>((_props) => {\n  const props = useProps('ThemeIcon', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ThemeIconFactory>({\n    name: 'ThemeIcon',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return <Box {...getStyles('root')} {...others} />;\n});\n\nThemeIcon.classes = classes;\nThemeIcon.varsResolver = varsResolver;\nThemeIcon.displayName = '@mantine/core/ThemeIcon';\n\nexport namespace ThemeIcon {\n  export type Props = ThemeIconProps;\n  export type StylesNames = ThemeIconStylesNames;\n  export type Factory = ThemeIconFactory;\n  export type Variant = ThemeIconVariant;\n  export type CssVariables = ThemeIconCssVariables;\n}\n"],"mappings":";;;;;;;;;;AA8DA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,OAAO,mBAAmB;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,aAAaC,iBAAAA,QAAQ,MAAM,SAAS;EACpC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EAClE,WAAW,SAAS,UAAU,OAAO,aAAa,KAAA;EAClD,cAAc,SAAS,UAAU,OAAO,QAAQ,KAAA;EAChD,WAAW,SAAS,UAAU,OAAO,SAAS,KAAA;CAChD,EACF;AACF,CACF;AAEA,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,YACA,GAAG,WACD;CAgBJ,OAAO,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAdMC,mBAAAA,UAA4B;GAC5C,MAAM;GACN,SAAA,yBAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEwB,EAAE,MAAM;EAAG,GAAI;CAAS,CAAA;AAClD,CAAC;AAED,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}

package/cjs/components/Timeline/Timeline.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_rem = require("../../core/utils/units-converters/rem.cjs");
 const require_get_size = require("../../core/utils/get-size/get-size.cjs");
 const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.cjs","names":["createVarsResolver","rem","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","Children","TimelineProvider","Box","classes","TimelineItem"],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TimelineProvider } from './Timeline.context';\nimport {\n  TimelineItem,\n  TimelineItemStylesNames,\n  type TimelineItemProps,\n  type TimelineItemFactory,\n} from './TimelineItem/TimelineItem';\nimport classes from './Timeline.module.css';\nexport type TimelineStylesNames = 'root' | TimelineItemStylesNames;\nexport type TimelineCssVariables = {\n  root: '--tl-line-width' | '--tl-bullet-size' | '--tl-color' | '--tl-icon-color' | '--tl-radius';\n};\n\nexport interface TimelineProps\n  extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {\n  /** `Timeline.Item` components */\n  children?: React.ReactNode;\n\n  /** Index of the active element */\n  active?: number;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\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  /** Size of the bullet @default 20 */\n  bulletSize?: number | string;\n\n  /** Position of content relative to the bullet @default 'left' */\n  align?: 'right' | 'left';\n\n  /** Control width of the line */\n  lineWidth?: number | string;\n\n  /** If set, the active items direction is reversed without reversing items order @default false */\n  reverseActive?: boolean;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type TimelineFactory = Factory<{\n  props: TimelineProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineStylesNames;\n  vars: TimelineCssVariables;\n  staticComponents: {\n    Item: typeof TimelineItem;\n  };\n}>;\n\nconst defaultProps = {\n  active: -1,\n  align: 'left',\n} satisfies Partial<TimelineProps>;\n\nconst varsResolver = createVarsResolver<TimelineFactory>(\n  (theme, { bulletSize, lineWidth, radius, color, autoContrast }) => ({\n    root: {\n      '--tl-bullet-size': rem(bulletSize),\n      '--tl-line-width': rem(lineWidth),\n      '--tl-radius': radius === undefined ? undefined : getRadius(radius),\n      '--tl-color': color ? getThemeColor(color, theme) : undefined,\n      '--tl-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const Timeline = factory<TimelineFactory>((_props) => {\n  const props = useProps('Timeline', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    active,\n    color,\n    radius,\n    bulletSize,\n    align,\n    lineWidth,\n    reverseActive,\n    mod,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TimelineFactory>({\n    name: 'Timeline',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const items = _children.map((item: any, index) =>\n    cloneElement(item, {\n      unstyled,\n      __align: align,\n      __active:\n        item.props?.active ||\n        (reverseActive ? active >= _children.length - index - 1 : active >= index),\n      __lineActive:\n        item.props?.lineActive ||\n        (reverseActive ? active >= _children.length - index - 1 : active - 1 >= index),\n    })\n  );\n\n  return (\n    <TimelineProvider value={{ getStyles }}>\n      <Box {...getStyles('root')} mod={[{ align }, mod]} {...others}>\n        {items}\n      </Box>\n    </TimelineProvider>\n  );\n});\n\nTimeline.classes = classes;\nTimeline.varsResolver = varsResolver;\nTimeline.displayName = '@mantine/core/Timeline';\nTimeline.Item = TimelineItem;\n\nexport namespace Timeline {\n  export type Props = TimelineProps;\n  export type StylesNames = TimelineStylesNames;\n  export type CssVariables = TimelineCssVariables;\n  export type Factory = TimelineFactory;\n\n  export namespace Item {\n    export type Props = TimelineItemProps;\n    export type StylesNames = TimelineItemStylesNames;\n    export type Factory = TimelineItemFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwEA,MAAM,eAAe;CACnB,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoBC,YAAAA,IAAI,UAAU;CAClC,mBAAmBA,YAAAA,IAAI,SAAS;CAChC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CAClE,cAAc,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;CACpD,mBAAmBC,gCAAAA,qBAAqB,cAAc,KAAK,IACvDC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,QACA,OACA,QACA,YACA,OACA,WACA,eACA,KACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAYC,MAAAA,SAAS,QAAQ,QAAQ;CAC3C,MAAM,QAAQ,UAAU,KAAK,MAAW,WAAA,GAAA,MAAA,cACzB,MAAM;EACjB;EACA,SAAS;EACT,UACE,KAAK,OAAO,WACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,UAAU;EACtE,cACE,KAAK,OAAO,eACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,SAAS,KAAK;CAC5E,CAAC,CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG;GAAG,GAAI;aACpD;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAOC,qBAAAA"}
+{"version":3,"file":"Timeline.cjs","names":["createVarsResolver","rem","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","Children","TimelineProvider","Box","classes","TimelineItem"],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TimelineProvider } from './Timeline.context';\nimport {\n  TimelineItem,\n  TimelineItemStylesNames,\n  type TimelineItemProps,\n  type TimelineItemFactory,\n} from './TimelineItem/TimelineItem';\nimport classes from './Timeline.module.css';\nexport type TimelineStylesNames = 'root' | TimelineItemStylesNames;\nexport type TimelineCssVariables = {\n  root: '--tl-line-width' | '--tl-bullet-size' | '--tl-color' | '--tl-icon-color' | '--tl-radius';\n};\n\nexport interface TimelineProps\n  extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {\n  /** `Timeline.Item` components */\n  children?: React.ReactNode;\n\n  /** Index of the active element */\n  active?: number;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\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  /** Size of the bullet @default 20 */\n  bulletSize?: number | string;\n\n  /** Position of content relative to the bullet @default 'left' */\n  align?: 'right' | 'left';\n\n  /** Control width of the line */\n  lineWidth?: number | string;\n\n  /** If set, the active items direction is reversed without reversing items order @default false */\n  reverseActive?: boolean;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type TimelineFactory = Factory<{\n  props: TimelineProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineStylesNames;\n  vars: TimelineCssVariables;\n  staticComponents: {\n    Item: typeof TimelineItem;\n  };\n}>;\n\nconst defaultProps = {\n  active: -1,\n  align: 'left',\n} satisfies Partial<TimelineProps>;\n\nconst varsResolver = createVarsResolver<TimelineFactory>(\n  (theme, { bulletSize, lineWidth, radius, color, autoContrast }) => ({\n    root: {\n      '--tl-bullet-size': rem(bulletSize),\n      '--tl-line-width': rem(lineWidth),\n      '--tl-radius': radius === undefined ? undefined : getRadius(radius),\n      '--tl-color': color ? getThemeColor(color, theme) : undefined,\n      '--tl-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const Timeline = factory<TimelineFactory>((_props) => {\n  const props = useProps('Timeline', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    active,\n    color,\n    radius,\n    bulletSize,\n    align,\n    lineWidth,\n    reverseActive,\n    mod,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TimelineFactory>({\n    name: 'Timeline',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const items = _children.map((item: any, index) =>\n    cloneElement(item, {\n      unstyled,\n      __align: align,\n      __active:\n        item.props?.active ||\n        (reverseActive ? active >= _children.length - index - 1 : active >= index),\n      __lineActive:\n        item.props?.lineActive ||\n        (reverseActive ? active >= _children.length - index - 1 : active - 1 >= index),\n    })\n  );\n\n  return (\n    <TimelineProvider value={{ getStyles }}>\n      <Box {...getStyles('root')} mod={[{ align }, mod]} {...others}>\n        {items}\n      </Box>\n    </TimelineProvider>\n  );\n});\n\nTimeline.classes = classes;\nTimeline.varsResolver = varsResolver;\nTimeline.displayName = '@mantine/core/Timeline';\nTimeline.Item = TimelineItem;\n\nexport namespace Timeline {\n  export type Props = TimelineProps;\n  export type StylesNames = TimelineStylesNames;\n  export type CssVariables = TimelineCssVariables;\n  export type Factory = TimelineFactory;\n\n  export namespace Item {\n    export type Props = TimelineItemProps;\n    export type StylesNames = TimelineItemStylesNames;\n    export type Factory = TimelineItemFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwEA,MAAM,eAAe;CACnB,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoBC,YAAAA,IAAI,UAAU;CAClC,mBAAmBA,YAAAA,IAAI,SAAS;CAChC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CAClE,cAAc,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;CACpD,mBAAmBC,gCAAAA,qBAAqB,cAAc,KAAK,IACvDC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,QACA,OACA,QACA,YACA,OACA,WACA,eACA,KACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAYC,MAAAA,SAAS,QAAQ,QAAQ;CAC3C,MAAM,QAAQ,UAAU,KAAK,MAAW,WAAA,GAAA,MAAA,cACzB,MAAM;EACjB;EACA,SAAS;EACT,UACE,KAAK,OAAO,WACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,UAAU;EACtE,cACE,KAAK,OAAO,eACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,SAAS,KAAK;CAC5E,CAAC,CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG;GAAG,GAAI;aACpD;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAOC,qBAAAA"}

package/cjs/components/Timeline/Timeline.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.module.cjs","names":[],"sources":["../../../src/components/Timeline/Timeline.module.css"],"sourcesContent":[".root {\n  --offset: calc(var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2);\n  --tl-bullet-size: 20px;\n  --tl-line-width: 4px;\n  --tl-radius: 1000px;\n  --tl-color: var(--mantine-primary-color-filled);\n\n  &:where([data-align='left']) {\n    padding-inline-start: var(--offset);\n  }\n\n  &:where([data-align='right']) {\n    padding-inline-end: var(--offset);\n  }\n}\n\n.itemTitle {\n  font-weight: var(--mantine-font-weight-medium);\n  line-height: 1;\n  margin-bottom: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.item {\n  --item-border: var(--tl-line-width) var(--tli-border-style, solid) var(--item-border-color);\n\n  position: relative;\n  color: var(--mantine-color-text);\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: var(--timeline-line-left, 0);\n    right: var(--timeline-line-right, 0);\n    bottom: calc(var(--mantine-spacing-xl) * -1);\n    border-inline-start: var(--item-border);\n    display: var(--timeline-line-display, none);\n\n    .root[data-align='left'] & {\n      --timeline-line-left: calc(var(--tl-line-width) * -1);\n      --timeline-line-right: auto;\n\n      @mixin rtl {\n        --timeline-line-left: auto;\n        --timeline-line-right: calc(var(--tl-line-width) * -1);\n      }\n    }\n\n    .root[data-align='right'] & {\n      --timeline-line-left: auto;\n      --timeline-line-right: calc(var(--tl-line-width) * -1);\n\n      @mixin rtl {\n        --timeline-line-left: calc(var(--tl-line-width) * -1);\n        --timeline-line-right: auto;\n      }\n    }\n  }\n\n  .root:where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: left;\n  }\n\n  .root:where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: right;\n  }\n\n  @mixin where-light {\n    --item-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --item-border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-line-active]) {\n    &::before {\n      border-color: var(--tli-color, var(--tl-color));\n    }\n  }\n\n  &:where(:not(:last-of-type)) {\n    --timeline-line-display: block;\n  }\n\n  &:where(:not(:first-of-type)) {\n    margin-top: var(--mantine-spacing-xl);\n  }\n}\n\n.itemBullet {\n  width: var(--tl-bullet-size);\n  height: var(--tl-bullet-size);\n  border-radius: var(--tli-radius, var(--tl-radius));\n  border: var(--tl-line-width) solid;\n  background-color: var(--mantine-color-body);\n  position: absolute;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  .root:where([data-align='left']) & {\n    left: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n    right: auto;\n\n    @mixin where-rtl {\n      left: auto;\n      right: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n    }\n  }\n\n  .root:where([data-align='right']) & {\n    left: auto;\n    right: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n\n    @mixin where-rtl {\n      left: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n      right: auto;\n    }\n  }\n\n  &:where([data-with-child]) {\n    border-width: var(--tl-line-width);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-active]) {\n    border-color: var(--tli-color, var(--tl-color));\n    background-color: var(--mantine-color-white);\n    color: var(--tl-icon-color, var(--mantine-color-white));\n\n    &:where([data-with-child]) {\n      background-color: var(--tli-color, var(--tl-color));\n      color: var(--tl-icon-color, var(--mantine-color-white));\n    }\n  }\n}\n\n.itemBody {\n  .root:where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: left;\n\n    @mixin where-rtl {\n      text-align: right;\n    }\n  }\n\n  .root:where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: right;\n\n    @mixin where-rtl {\n      text-align: left;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Timeline.module.cjs","names":[],"sources":["../../../src/components/Timeline/Timeline.module.css"],"sourcesContent":[".root {\n  --offset: calc(var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2);\n  --tl-bullet-size: 20px;\n  --tl-line-width: 4px;\n  --tl-radius: 1000px;\n  --tl-color: var(--mantine-primary-color-filled);\n\n  &:where([data-align='left']) {\n    padding-inline-start: var(--offset);\n  }\n\n  &:where([data-align='right']) {\n    padding-inline-end: var(--offset);\n  }\n}\n\n.itemTitle {\n  font-weight: var(--mantine-font-weight-medium);\n  line-height: 1;\n  margin-bottom: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.item {\n  --item-border: var(--tl-line-width) var(--tli-border-style, solid) var(--item-border-color);\n\n  position: relative;\n  color: var(--mantine-color-text);\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    inset-inline-start: var(--timeline-line-start, 0);\n    inset-inline-end: var(--timeline-line-end, 0);\n    bottom: calc(var(--mantine-spacing-xl) * -1);\n    border-inline-start: var(--item-border);\n    display: var(--timeline-line-display, none);\n\n    .root[data-align='left'] & {\n      --timeline-line-start: calc(var(--tl-line-width) * -1);\n      --timeline-line-end: auto;\n    }\n\n    .root[data-align='right'] & {\n      --timeline-line-start: auto;\n      --timeline-line-end: calc(var(--tl-line-width) * -1);\n    }\n  }\n\n  .root:where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n\n  @mixin where-light {\n    --item-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --item-border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-line-active]) {\n    &::before {\n      border-color: var(--tli-color, var(--tl-color));\n    }\n  }\n\n  &:where(:not(:last-of-type)) {\n    --timeline-line-display: block;\n  }\n\n  &:where(:not(:first-of-type)) {\n    margin-top: var(--mantine-spacing-xl);\n  }\n}\n\n.itemBullet {\n  width: var(--tl-bullet-size);\n  height: var(--tl-bullet-size);\n  border-radius: var(--tli-radius, var(--tl-radius));\n  border: var(--tl-line-width) solid;\n  background-color: var(--mantine-color-body);\n  position: absolute;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  .root:where([data-align='left']) & {\n    inset-inline-start: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n    inset-inline-end: auto;\n  }\n\n  .root:where([data-align='right']) & {\n    inset-inline-start: auto;\n    inset-inline-end: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n  }\n\n  &:where([data-with-child]) {\n    border-width: var(--tl-line-width);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-active]) {\n    border-color: var(--tli-color, var(--tl-color));\n    background-color: var(--mantine-color-white);\n    color: var(--tl-icon-color, var(--mantine-color-white));\n\n    &:where([data-with-child]) {\n      background-color: var(--tli-color, var(--tl-color));\n      color: var(--tl-icon-color, var(--mantine-color-white));\n    }\n  }\n}\n\n.itemBody {\n  .root:where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n}\n"],"mappings":""}

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

@@ -1,5 +1,4 @@
 "use client";
-require("../../../_virtual/_rolldown/runtime.cjs");
 const require_get_size = require("../../../core/utils/get-size/get-size.cjs");
 const require_get_theme_color = require("../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
 const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");

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 !== 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,MAmBrC;CAER,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,QAAQC,6BAAAA,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,OACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;EAAS,GAAG,GAAG;EAC5D,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAYC,iBAAAA,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,KAACF,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,cAAc;GAC9C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;GAAS;aAE/D;EACE,CAAA,GAEL,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,cAAc;aAAjD,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,cAAc;cAAI;GAAW,CAAA,GAC3E,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,cAAc;IAAI;GAAc,CAAA,CACnE;IACF;;AAET,CAAC;AAED,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,MAmBrC;CAER,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,QAAQC,6BAAAA,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,OACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;EAAS,GAAG,GAAG;EAC5D,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAYC,iBAAAA,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,KAACF,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,cAAc;GAC9C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;GAAS;aAE/D;EACE,CAAA,GAEL,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,cAAc;aAAjD,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,cAAc;cAAI;GAAW,CAAA,GAC3E,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,cAAc;IAAI;GAAc,CAAA,CACnE;IACF;;AAET,CAAC;AAED,aAAa,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}

package/cjs/components/Title/Title.cjs

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
 const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
 const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");

package/cjs/components/Title/Title.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.cjs","names":["createVarsResolver","getTitleSize","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getTitleSize } from './get-title-size';\nimport classes from './Title.module.css';\n\nexport type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;\nexport type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'] | MantineFontSize;\n\nexport type TitleStylesNames = 'root';\nexport type TitleCssVariables = {\n  root: '--title-fw' | '--title-lh' | '--title-fz' | '--title-line-clamp' | '--title-text-wrap';\n};\n\nexport interface TitleProps\n  extends BoxProps, StylesApiProps<TitleFactory>, ElementProps<'h1', 'color'> {\n  /** Heading order (1-6), controls `font-size` style if `size` prop is not set @default 1 */\n  order?: TitleOrder;\n\n  /** Changes title size, if not set, then size is controlled by `order` prop */\n  size?: TitleSize;\n\n  /** Number of lines after which heading will be truncated */\n  lineClamp?: number;\n\n  /** Heading `text-wrap` CSS property @default 'wrap' */\n  textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';\n}\n\nexport type TitleFactory = Factory<{\n  props: TitleProps;\n  ref: HTMLHeadingElement;\n  stylesNames: TitleStylesNames;\n  vars: TitleCssVariables;\n}>;\n\nconst defaultProps = {\n  order: 1,\n} satisfies Partial<TitleProps>;\n\nconst varsResolver = createVarsResolver<TitleFactory>((_, { order, size, lineClamp, textWrap }) => {\n  const sizeVariables = getTitleSize(order || 1, size);\n  return {\n    root: {\n      '--title-fw': sizeVariables.fontWeight,\n      '--title-lh': sizeVariables.lineHeight,\n      '--title-fz': sizeVariables.fontSize,\n      '--title-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n      '--title-text-wrap': textWrap,\n    },\n  };\n});\n\nexport const Title = factory<TitleFactory>((_props) => {\n  const props = useProps('Title', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    order,\n    vars,\n    size,\n    variant,\n    lineClamp,\n    textWrap,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TitleFactory>({\n    name: 'Title',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  if (![1, 2, 3, 4, 5, 6].includes(order)) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('root')}\n      component={`h${order}`}\n      variant={variant}\n      mod={[{ order, 'data-line-clamp': typeof lineClamp === 'number' }, mod]}\n      size={size}\n      {...others}\n    />\n  );\n});\n\nTitle.classes = classes;\nTitle.varsResolver = varsResolver;\nTitle.displayName = '@mantine/core/Title';\n\nexport namespace Title {\n  export type Props = TitleProps;\n  export type Order = TitleOrder;\n  export type Size = TitleSize;\n  export type StylesNames = TitleStylesNames;\n  export type CssVariables = TitleCssVariables;\n  export type Factory = TitleFactory;\n}\n"],"mappings":";;;;;;;;;;;AA6CA,MAAM,eAAe,EACnB,OAAO,EACT;AAEA,MAAM,eAAeA,6BAAAA,oBAAkC,GAAG,EAAE,OAAO,MAAM,WAAW,eAAe;CACjG,MAAM,gBAAgBC,uBAAAA,aAAa,SAAS,GAAG,IAAI;CACnD,OAAO,EACL,MAAM;EACJ,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,sBAAsB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;EAC7E,qBAAqB;CACvB,EACF;AACF,CAAC;AAED,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,OACA,MACA,MACA,SACA,WACA,UACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC;EAAC;EAAG;EAAG;EAAG;EAAG;EAAG;CAAC,EAAE,SAAS,KAAK,GACpC,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,WAAW,IAAI;EACN;EACT,KAAK,CAAC;GAAE;GAAO,mBAAmB,OAAO,cAAc;EAAS,GAAG,GAAG;EAChE;EACN,GAAI;CACL,CAAA;AAEL,CAAC;AAED,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}
+{"version":3,"file":"Title.cjs","names":["createVarsResolver","getTitleSize","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getTitleSize } from './get-title-size';\nimport classes from './Title.module.css';\n\nexport type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;\nexport type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'] | MantineFontSize;\n\nexport type TitleStylesNames = 'root';\nexport type TitleCssVariables = {\n  root: '--title-fw' | '--title-lh' | '--title-fz' | '--title-line-clamp' | '--title-text-wrap';\n};\n\nexport interface TitleProps\n  extends BoxProps, StylesApiProps<TitleFactory>, ElementProps<'h1', 'color'> {\n  /** Heading order (1-6), controls `font-size` style if `size` prop is not set @default 1 */\n  order?: TitleOrder;\n\n  /** Changes title size, if not set, then size is controlled by `order` prop */\n  size?: TitleSize;\n\n  /** Number of lines after which heading will be truncated */\n  lineClamp?: number;\n\n  /** Heading `text-wrap` CSS property @default 'wrap' */\n  textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';\n}\n\nexport type TitleFactory = Factory<{\n  props: TitleProps;\n  ref: HTMLHeadingElement;\n  stylesNames: TitleStylesNames;\n  vars: TitleCssVariables;\n}>;\n\nconst defaultProps = {\n  order: 1,\n} satisfies Partial<TitleProps>;\n\nconst varsResolver = createVarsResolver<TitleFactory>((_, { order, size, lineClamp, textWrap }) => {\n  const sizeVariables = getTitleSize(order || 1, size);\n  return {\n    root: {\n      '--title-fw': sizeVariables.fontWeight,\n      '--title-lh': sizeVariables.lineHeight,\n      '--title-fz': sizeVariables.fontSize,\n      '--title-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n      '--title-text-wrap': textWrap,\n    },\n  };\n});\n\nexport const Title = factory<TitleFactory>((_props) => {\n  const props = useProps('Title', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    order,\n    vars,\n    size,\n    variant,\n    lineClamp,\n    textWrap,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TitleFactory>({\n    name: 'Title',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  if (![1, 2, 3, 4, 5, 6].includes(order)) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('root')}\n      component={`h${order}`}\n      variant={variant}\n      mod={[{ order, 'data-line-clamp': typeof lineClamp === 'number' }, mod]}\n      size={size}\n      {...others}\n    />\n  );\n});\n\nTitle.classes = classes;\nTitle.varsResolver = varsResolver;\nTitle.displayName = '@mantine/core/Title';\n\nexport namespace Title {\n  export type Props = TitleProps;\n  export type Order = TitleOrder;\n  export type Size = TitleSize;\n  export type StylesNames = TitleStylesNames;\n  export type CssVariables = TitleCssVariables;\n  export type Factory = TitleFactory;\n}\n"],"mappings":";;;;;;;;;;AA6CA,MAAM,eAAe,EACnB,OAAO,EACT;AAEA,MAAM,eAAeA,6BAAAA,oBAAkC,GAAG,EAAE,OAAO,MAAM,WAAW,eAAe;CACjG,MAAM,gBAAgBC,uBAAAA,aAAa,SAAS,GAAG,IAAI;CACnD,OAAO,EACL,MAAM;EACJ,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,sBAAsB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;EAC7E,qBAAqB;CACvB,EACF;AACF,CAAC;AAED,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,OACA,MACA,MACA,SACA,WACA,UACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC;EAAC;EAAG;EAAG;EAAG;EAAG;EAAG;CAAC,EAAE,SAAS,KAAK,GACpC,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,WAAW,IAAI;EACN;EACT,KAAK,CAAC;GAAE;GAAO,mBAAmB,OAAO,cAAc;EAAS,GAAG,GAAG;EAChE;EACN,GAAI;CACL,CAAA;AAEL,CAAC;AAED,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}