@mirohq/design-system-toolbar 2.5.2-colors.1 → 2.5.2-combobox.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +1 -1
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +1 -1
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +92 -244
  6. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -83,7 +83,7 @@ const StyledItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
83
83
  height: "$10",
84
84
  ...designSystemStyles.focus.css({
85
85
  boxShadow: "$focus-small-outline",
86
- borderColor: "$blue-400 !important"
86
+ borderColor: "$blue-500 !important"
87
87
  }),
88
88
  [disabledSelector]: {
89
89
  pointerEvents: "none",
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$10',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-400 !important',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n unstyled = true,\n active = false,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n padding: 0,\n border: 'none',\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","focus","React","usePress","booleanify","useHover","mergeProps","jsx","Separator"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$10',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n unstyled = true,\n active = false,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n padding: 0,\n border: 'none',\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","focus","React","usePress","booleanify","useHover","mergeProps","jsx","Separator"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -57,7 +57,7 @@ const StyledItem = styled(RadixToolbar.Button, {
57
57
  height: "$10",
58
58
  ...focus.css({
59
59
  boxShadow: "$focus-small-outline",
60
- borderColor: "$blue-400 !important"
60
+ borderColor: "$blue-500 !important"
61
61
  }),
62
62
  [disabledSelector]: {
63
63
  pointerEvents: "none",
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$10',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-400 !important',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n unstyled = true,\n active = false,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n padding: 0,\n border: 'none',\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$10',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n unstyled = true,\n active = false,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n padding: 0,\n border: 'none',\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -17,103 +17,63 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
17
17
  };
18
18
  colors: {
19
19
  readonly black: any;
20
- readonly 'blue-50': any;
21
20
  readonly 'blue-100': any;
22
- readonly 'blue-150': any;
23
21
  readonly 'blue-200': any;
24
- readonly 'blue-250': any;
25
22
  readonly 'blue-300': any;
26
- readonly 'blue-350': any;
27
23
  readonly 'blue-400': any;
28
- readonly 'blue-450': any;
29
24
  readonly 'blue-500': any;
30
- readonly 'blue-550': any;
31
25
  readonly 'blue-600': any;
32
- readonly 'blue-650': any;
33
26
  readonly 'blue-700': any;
34
- readonly 'blue-750': any;
35
27
  readonly 'blue-800': any;
36
- readonly 'blue-850': any;
37
28
  readonly 'blue-900': any;
38
- readonly 'blue-950': any;
39
- readonly 'gray-50': any;
29
+ readonly 'blue-1000': any;
40
30
  readonly 'gray-100': any;
41
- readonly 'gray-150': any;
42
31
  readonly 'gray-200': any;
43
- readonly 'gray-250': any;
44
32
  readonly 'gray-300': any;
45
- readonly 'gray-350': any;
46
33
  readonly 'gray-400': any;
47
- readonly 'gray-450': any;
48
34
  readonly 'gray-500': any;
49
- readonly 'gray-550': any;
50
35
  readonly 'gray-600': any;
51
- readonly 'gray-650': any;
52
36
  readonly 'gray-700': any;
53
- readonly 'gray-750': any;
54
37
  readonly 'gray-800': any;
55
- readonly 'gray-850': any;
56
38
  readonly 'gray-900': any;
57
- readonly 'gray-950': any;
58
- readonly 'green-50': any;
59
39
  readonly 'green-100': any;
60
- readonly 'green-150': any;
61
40
  readonly 'green-200': any;
62
- readonly 'green-250': any;
63
41
  readonly 'green-300': any;
64
- readonly 'green-350': any;
65
42
  readonly 'green-400': any;
66
- readonly 'green-450': any;
67
43
  readonly 'green-500': any;
68
- readonly 'green-550': any;
69
44
  readonly 'green-600': any;
70
- readonly 'green-650': any;
71
45
  readonly 'green-700': any;
72
- readonly 'green-750': any;
73
46
  readonly 'green-800': any;
74
- readonly 'green-850': any;
75
47
  readonly 'green-900': any;
76
- readonly 'green-950': any;
77
- readonly 'red-50': any;
48
+ readonly 'indigo-100': any;
49
+ readonly 'indigo-200': any;
50
+ readonly 'indigo-300': any;
51
+ readonly 'indigo-400': any;
52
+ readonly 'indigo-500': any;
53
+ readonly 'indigo-600': any;
54
+ readonly 'indigo-700': any;
55
+ readonly 'indigo-800': any;
56
+ readonly 'indigo-900': any;
78
57
  readonly 'red-100': any;
79
- readonly 'red-150': any;
80
58
  readonly 'red-200': any;
81
- readonly 'red-250': any;
82
59
  readonly 'red-300': any;
83
- readonly 'red-350': any;
84
60
  readonly 'red-400': any;
85
- readonly 'red-450': any;
86
61
  readonly 'red-500': any;
87
- readonly 'red-550': any;
88
62
  readonly 'red-600': any;
89
- readonly 'red-650': any;
90
63
  readonly 'red-700': any;
91
- readonly 'red-750': any;
92
64
  readonly 'red-800': any;
93
- readonly 'red-850': any;
94
65
  readonly 'red-900': any;
95
- readonly 'red-950': any;
96
66
  readonly transparent: any;
97
67
  readonly white: any;
98
- readonly 'yellow-50': any;
99
68
  readonly 'yellow-100': any;
100
- readonly 'yellow-150': any;
101
69
  readonly 'yellow-200': any;
102
- readonly 'yellow-250': any;
103
70
  readonly 'yellow-300': any;
104
- readonly 'yellow-350': any;
105
71
  readonly 'yellow-400': any;
106
- readonly 'yellow-450': any;
107
72
  readonly 'yellow-500': any;
108
- readonly 'yellow-550': any;
109
73
  readonly 'yellow-600': any;
110
- readonly 'yellow-650': any;
111
74
  readonly 'yellow-700': any;
112
- readonly 'yellow-750': any;
113
75
  readonly 'yellow-800': any;
114
- readonly 'yellow-850': any;
115
76
  readonly 'yellow-900': any;
116
- readonly 'yellow-950': any;
117
77
  "background-alpha-active"?: any;
118
78
  "background-alpha-hover"?: any;
119
79
  "background-danger-prominent"?: any;
@@ -134,19 +94,27 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
134
94
  "background-neutrals-inverted-subtle"?: any;
135
95
  "background-neutrals-page"?: any;
136
96
  "background-neutrals-page-subtle"?: any;
137
- "background-neutrals-scrollbar"?: any;
138
- "background-neutrals-scrollbar-active"?: any;
139
- "background-neutrals-scrollbar-hover"?: any;
97
+ "background-neutrals-scrolls"?: any;
98
+ "background-neutrals-scrolls-expanded"?: any;
99
+ "background-neutrals-scrolls-hover"?: any;
100
+ "background-neutrals-scrolls-pressed"?: any;
101
+ "background-neutrals-scrolls-pressed-hover"?: any;
140
102
  "background-neutrals-subtle"?: any;
141
103
  "background-neutrals-subtle-active"?: any;
142
104
  "background-neutrals-subtle-hover"?: any;
143
105
  "background-primary-prominent"?: any;
144
106
  "background-primary-prominent-active"?: any;
107
+ "background-primary-prominent-expanded"?: any;
145
108
  "background-primary-prominent-hover"?: any;
109
+ "background-primary-prominent-pressed"?: any;
110
+ "background-primary-prominent-pressed-hover"?: any;
146
111
  "background-primary-prominent-selected"?: any;
147
112
  "background-primary-subtle"?: any;
148
113
  "background-primary-subtle-active"?: any;
114
+ "background-primary-subtle-expanded"?: any;
149
115
  "background-primary-subtle-hover"?: any;
116
+ "background-primary-subtle-pressed"?: any;
117
+ "background-primary-subtle-pressed-hover"?: any;
150
118
  "background-primary-subtle-selected"?: any;
151
119
  "background-success"?: any;
152
120
  "background-success-prominent"?: any;
@@ -157,15 +125,9 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
157
125
  "border-danger"?: any;
158
126
  "border-danger-active"?: any;
159
127
  "border-danger-hover"?: any;
160
- "border-focus-error-inner"?: any;
161
- "border-focus-error-middle"?: any;
162
- "border-focus-error-outer"?: any;
163
128
  "border-focus-inner"?: any;
164
129
  "border-focus-middle"?: any;
165
130
  "border-focus-outer"?: any;
166
- "border-focus-success-inner"?: any;
167
- "border-focus-success-middle"?: any;
168
- "border-focus-success-outer"?: any;
169
131
  "border-neutrals"?: any;
170
132
  "border-neutrals-active"?: any;
171
133
  "border-neutrals-controls"?: any;
@@ -258,13 +220,13 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
258
220
  readonly body: "Open Sans, sans-serif";
259
221
  };
260
222
  radii: {
223
+ readonly none: 0;
224
+ readonly half: "999em";
261
225
  readonly 25: "2px";
262
226
  readonly 50: "4px";
263
227
  readonly 75: "6px";
264
228
  readonly 100: "8px";
265
229
  readonly 200: "16px";
266
- readonly half: "999px";
267
- readonly none: "0px";
268
230
  };
269
231
  shadows: {
270
232
  readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
@@ -550,103 +512,63 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
550
512
  };
551
513
  colors: {
552
514
  readonly black: any;
553
- readonly 'blue-50': any;
554
515
  readonly 'blue-100': any;
555
- readonly 'blue-150': any;
556
516
  readonly 'blue-200': any;
557
- readonly 'blue-250': any;
558
517
  readonly 'blue-300': any;
559
- readonly 'blue-350': any;
560
518
  readonly 'blue-400': any;
561
- readonly 'blue-450': any;
562
519
  readonly 'blue-500': any;
563
- readonly 'blue-550': any;
564
520
  readonly 'blue-600': any;
565
- readonly 'blue-650': any;
566
521
  readonly 'blue-700': any;
567
- readonly 'blue-750': any;
568
522
  readonly 'blue-800': any;
569
- readonly 'blue-850': any;
570
523
  readonly 'blue-900': any;
571
- readonly 'blue-950': any;
572
- readonly 'gray-50': any;
524
+ readonly 'blue-1000': any;
573
525
  readonly 'gray-100': any;
574
- readonly 'gray-150': any;
575
526
  readonly 'gray-200': any;
576
- readonly 'gray-250': any;
577
527
  readonly 'gray-300': any;
578
- readonly 'gray-350': any;
579
528
  readonly 'gray-400': any;
580
- readonly 'gray-450': any;
581
529
  readonly 'gray-500': any;
582
- readonly 'gray-550': any;
583
530
  readonly 'gray-600': any;
584
- readonly 'gray-650': any;
585
531
  readonly 'gray-700': any;
586
- readonly 'gray-750': any;
587
532
  readonly 'gray-800': any;
588
- readonly 'gray-850': any;
589
533
  readonly 'gray-900': any;
590
- readonly 'gray-950': any;
591
- readonly 'green-50': any;
592
534
  readonly 'green-100': any;
593
- readonly 'green-150': any;
594
535
  readonly 'green-200': any;
595
- readonly 'green-250': any;
596
536
  readonly 'green-300': any;
597
- readonly 'green-350': any;
598
537
  readonly 'green-400': any;
599
- readonly 'green-450': any;
600
538
  readonly 'green-500': any;
601
- readonly 'green-550': any;
602
539
  readonly 'green-600': any;
603
- readonly 'green-650': any;
604
540
  readonly 'green-700': any;
605
- readonly 'green-750': any;
606
541
  readonly 'green-800': any;
607
- readonly 'green-850': any;
608
542
  readonly 'green-900': any;
609
- readonly 'green-950': any;
610
- readonly 'red-50': any;
543
+ readonly 'indigo-100': any;
544
+ readonly 'indigo-200': any;
545
+ readonly 'indigo-300': any;
546
+ readonly 'indigo-400': any;
547
+ readonly 'indigo-500': any;
548
+ readonly 'indigo-600': any;
549
+ readonly 'indigo-700': any;
550
+ readonly 'indigo-800': any;
551
+ readonly 'indigo-900': any;
611
552
  readonly 'red-100': any;
612
- readonly 'red-150': any;
613
553
  readonly 'red-200': any;
614
- readonly 'red-250': any;
615
554
  readonly 'red-300': any;
616
- readonly 'red-350': any;
617
555
  readonly 'red-400': any;
618
- readonly 'red-450': any;
619
556
  readonly 'red-500': any;
620
- readonly 'red-550': any;
621
557
  readonly 'red-600': any;
622
- readonly 'red-650': any;
623
558
  readonly 'red-700': any;
624
- readonly 'red-750': any;
625
559
  readonly 'red-800': any;
626
- readonly 'red-850': any;
627
560
  readonly 'red-900': any;
628
- readonly 'red-950': any;
629
561
  readonly transparent: any;
630
562
  readonly white: any;
631
- readonly 'yellow-50': any;
632
563
  readonly 'yellow-100': any;
633
- readonly 'yellow-150': any;
634
564
  readonly 'yellow-200': any;
635
- readonly 'yellow-250': any;
636
565
  readonly 'yellow-300': any;
637
- readonly 'yellow-350': any;
638
566
  readonly 'yellow-400': any;
639
- readonly 'yellow-450': any;
640
567
  readonly 'yellow-500': any;
641
- readonly 'yellow-550': any;
642
568
  readonly 'yellow-600': any;
643
- readonly 'yellow-650': any;
644
569
  readonly 'yellow-700': any;
645
- readonly 'yellow-750': any;
646
570
  readonly 'yellow-800': any;
647
- readonly 'yellow-850': any;
648
571
  readonly 'yellow-900': any;
649
- readonly 'yellow-950': any;
650
572
  "background-alpha-active"?: any;
651
573
  "background-alpha-hover"?: any;
652
574
  "background-danger-prominent"?: any;
@@ -667,19 +589,27 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
667
589
  "background-neutrals-inverted-subtle"?: any;
668
590
  "background-neutrals-page"?: any;
669
591
  "background-neutrals-page-subtle"?: any;
670
- "background-neutrals-scrollbar"?: any;
671
- "background-neutrals-scrollbar-active"?: any;
672
- "background-neutrals-scrollbar-hover"?: any;
592
+ "background-neutrals-scrolls"?: any;
593
+ "background-neutrals-scrolls-expanded"?: any;
594
+ "background-neutrals-scrolls-hover"?: any;
595
+ "background-neutrals-scrolls-pressed"?: any;
596
+ "background-neutrals-scrolls-pressed-hover"?: any;
673
597
  "background-neutrals-subtle"?: any;
674
598
  "background-neutrals-subtle-active"?: any;
675
599
  "background-neutrals-subtle-hover"?: any;
676
600
  "background-primary-prominent"?: any;
677
601
  "background-primary-prominent-active"?: any;
602
+ "background-primary-prominent-expanded"?: any;
678
603
  "background-primary-prominent-hover"?: any;
604
+ "background-primary-prominent-pressed"?: any;
605
+ "background-primary-prominent-pressed-hover"?: any;
679
606
  "background-primary-prominent-selected"?: any;
680
607
  "background-primary-subtle"?: any;
681
608
  "background-primary-subtle-active"?: any;
609
+ "background-primary-subtle-expanded"?: any;
682
610
  "background-primary-subtle-hover"?: any;
611
+ "background-primary-subtle-pressed"?: any;
612
+ "background-primary-subtle-pressed-hover"?: any;
683
613
  "background-primary-subtle-selected"?: any;
684
614
  "background-success"?: any;
685
615
  "background-success-prominent"?: any;
@@ -690,15 +620,9 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
690
620
  "border-danger"?: any;
691
621
  "border-danger-active"?: any;
692
622
  "border-danger-hover"?: any;
693
- "border-focus-error-inner"?: any;
694
- "border-focus-error-middle"?: any;
695
- "border-focus-error-outer"?: any;
696
623
  "border-focus-inner"?: any;
697
624
  "border-focus-middle"?: any;
698
625
  "border-focus-outer"?: any;
699
- "border-focus-success-inner"?: any;
700
- "border-focus-success-middle"?: any;
701
- "border-focus-success-outer"?: any;
702
626
  "border-neutrals"?: any;
703
627
  "border-neutrals-active"?: any;
704
628
  "border-neutrals-controls"?: any;
@@ -791,13 +715,13 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
791
715
  readonly body: "Open Sans, sans-serif";
792
716
  };
793
717
  radii: {
718
+ readonly none: 0;
719
+ readonly half: "999em";
794
720
  readonly 25: "2px";
795
721
  readonly 50: "4px";
796
722
  readonly 75: "6px";
797
723
  readonly 100: "8px";
798
724
  readonly 200: "16px";
799
- readonly half: "999px";
800
- readonly none: "0px";
801
725
  };
802
726
  shadows: {
803
727
  readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
@@ -1108,103 +1032,63 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
1108
1032
  };
1109
1033
  colors: {
1110
1034
  readonly black: any;
1111
- readonly 'blue-50': any;
1112
1035
  readonly 'blue-100': any;
1113
- readonly 'blue-150': any;
1114
1036
  readonly 'blue-200': any;
1115
- readonly 'blue-250': any;
1116
1037
  readonly 'blue-300': any;
1117
- readonly 'blue-350': any;
1118
1038
  readonly 'blue-400': any;
1119
- readonly 'blue-450': any;
1120
1039
  readonly 'blue-500': any;
1121
- readonly 'blue-550': any;
1122
1040
  readonly 'blue-600': any;
1123
- readonly 'blue-650': any;
1124
1041
  readonly 'blue-700': any;
1125
- readonly 'blue-750': any;
1126
1042
  readonly 'blue-800': any;
1127
- readonly 'blue-850': any;
1128
1043
  readonly 'blue-900': any;
1129
- readonly 'blue-950': any;
1130
- readonly 'gray-50': any;
1044
+ readonly 'blue-1000': any;
1131
1045
  readonly 'gray-100': any;
1132
- readonly 'gray-150': any;
1133
1046
  readonly 'gray-200': any;
1134
- readonly 'gray-250': any;
1135
1047
  readonly 'gray-300': any;
1136
- readonly 'gray-350': any;
1137
1048
  readonly 'gray-400': any;
1138
- readonly 'gray-450': any;
1139
1049
  readonly 'gray-500': any;
1140
- readonly 'gray-550': any;
1141
1050
  readonly 'gray-600': any;
1142
- readonly 'gray-650': any;
1143
1051
  readonly 'gray-700': any;
1144
- readonly 'gray-750': any;
1145
1052
  readonly 'gray-800': any;
1146
- readonly 'gray-850': any;
1147
1053
  readonly 'gray-900': any;
1148
- readonly 'gray-950': any;
1149
- readonly 'green-50': any;
1150
1054
  readonly 'green-100': any;
1151
- readonly 'green-150': any;
1152
1055
  readonly 'green-200': any;
1153
- readonly 'green-250': any;
1154
1056
  readonly 'green-300': any;
1155
- readonly 'green-350': any;
1156
1057
  readonly 'green-400': any;
1157
- readonly 'green-450': any;
1158
1058
  readonly 'green-500': any;
1159
- readonly 'green-550': any;
1160
1059
  readonly 'green-600': any;
1161
- readonly 'green-650': any;
1162
1060
  readonly 'green-700': any;
1163
- readonly 'green-750': any;
1164
1061
  readonly 'green-800': any;
1165
- readonly 'green-850': any;
1166
1062
  readonly 'green-900': any;
1167
- readonly 'green-950': any;
1168
- readonly 'red-50': any;
1063
+ readonly 'indigo-100': any;
1064
+ readonly 'indigo-200': any;
1065
+ readonly 'indigo-300': any;
1066
+ readonly 'indigo-400': any;
1067
+ readonly 'indigo-500': any;
1068
+ readonly 'indigo-600': any;
1069
+ readonly 'indigo-700': any;
1070
+ readonly 'indigo-800': any;
1071
+ readonly 'indigo-900': any;
1169
1072
  readonly 'red-100': any;
1170
- readonly 'red-150': any;
1171
1073
  readonly 'red-200': any;
1172
- readonly 'red-250': any;
1173
1074
  readonly 'red-300': any;
1174
- readonly 'red-350': any;
1175
1075
  readonly 'red-400': any;
1176
- readonly 'red-450': any;
1177
1076
  readonly 'red-500': any;
1178
- readonly 'red-550': any;
1179
1077
  readonly 'red-600': any;
1180
- readonly 'red-650': any;
1181
1078
  readonly 'red-700': any;
1182
- readonly 'red-750': any;
1183
1079
  readonly 'red-800': any;
1184
- readonly 'red-850': any;
1185
1080
  readonly 'red-900': any;
1186
- readonly 'red-950': any;
1187
1081
  readonly transparent: any;
1188
1082
  readonly white: any;
1189
- readonly 'yellow-50': any;
1190
1083
  readonly 'yellow-100': any;
1191
- readonly 'yellow-150': any;
1192
1084
  readonly 'yellow-200': any;
1193
- readonly 'yellow-250': any;
1194
1085
  readonly 'yellow-300': any;
1195
- readonly 'yellow-350': any;
1196
1086
  readonly 'yellow-400': any;
1197
- readonly 'yellow-450': any;
1198
1087
  readonly 'yellow-500': any;
1199
- readonly 'yellow-550': any;
1200
1088
  readonly 'yellow-600': any;
1201
- readonly 'yellow-650': any;
1202
1089
  readonly 'yellow-700': any;
1203
- readonly 'yellow-750': any;
1204
1090
  readonly 'yellow-800': any;
1205
- readonly 'yellow-850': any;
1206
1091
  readonly 'yellow-900': any;
1207
- readonly 'yellow-950': any;
1208
1092
  "background-alpha-active"?: any;
1209
1093
  "background-alpha-hover"?: any;
1210
1094
  "background-danger-prominent"?: any;
@@ -1225,19 +1109,27 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
1225
1109
  "background-neutrals-inverted-subtle"?: any;
1226
1110
  "background-neutrals-page"?: any;
1227
1111
  "background-neutrals-page-subtle"?: any;
1228
- "background-neutrals-scrollbar"?: any;
1229
- "background-neutrals-scrollbar-active"?: any;
1230
- "background-neutrals-scrollbar-hover"?: any;
1112
+ "background-neutrals-scrolls"?: any;
1113
+ "background-neutrals-scrolls-expanded"?: any;
1114
+ "background-neutrals-scrolls-hover"?: any;
1115
+ "background-neutrals-scrolls-pressed"?: any;
1116
+ "background-neutrals-scrolls-pressed-hover"?: any;
1231
1117
  "background-neutrals-subtle"?: any;
1232
1118
  "background-neutrals-subtle-active"?: any;
1233
1119
  "background-neutrals-subtle-hover"?: any;
1234
1120
  "background-primary-prominent"?: any;
1235
1121
  "background-primary-prominent-active"?: any;
1122
+ "background-primary-prominent-expanded"?: any;
1236
1123
  "background-primary-prominent-hover"?: any;
1124
+ "background-primary-prominent-pressed"?: any;
1125
+ "background-primary-prominent-pressed-hover"?: any;
1237
1126
  "background-primary-prominent-selected"?: any;
1238
1127
  "background-primary-subtle"?: any;
1239
1128
  "background-primary-subtle-active"?: any;
1129
+ "background-primary-subtle-expanded"?: any;
1240
1130
  "background-primary-subtle-hover"?: any;
1131
+ "background-primary-subtle-pressed"?: any;
1132
+ "background-primary-subtle-pressed-hover"?: any;
1241
1133
  "background-primary-subtle-selected"?: any;
1242
1134
  "background-success"?: any;
1243
1135
  "background-success-prominent"?: any;
@@ -1248,15 +1140,9 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
1248
1140
  "border-danger"?: any;
1249
1141
  "border-danger-active"?: any;
1250
1142
  "border-danger-hover"?: any;
1251
- "border-focus-error-inner"?: any;
1252
- "border-focus-error-middle"?: any;
1253
- "border-focus-error-outer"?: any;
1254
1143
  "border-focus-inner"?: any;
1255
1144
  "border-focus-middle"?: any;
1256
1145
  "border-focus-outer"?: any;
1257
- "border-focus-success-inner"?: any;
1258
- "border-focus-success-middle"?: any;
1259
- "border-focus-success-outer"?: any;
1260
1146
  "border-neutrals"?: any;
1261
1147
  "border-neutrals-active"?: any;
1262
1148
  "border-neutrals-controls"?: any;
@@ -1349,13 +1235,13 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
1349
1235
  readonly body: "Open Sans, sans-serif";
1350
1236
  };
1351
1237
  radii: {
1238
+ readonly none: 0;
1239
+ readonly half: "999em";
1352
1240
  readonly 25: "2px";
1353
1241
  readonly 50: "4px";
1354
1242
  readonly 75: "6px";
1355
1243
  readonly 100: "8px";
1356
1244
  readonly 200: "16px";
1357
- readonly half: "999px";
1358
- readonly none: "0px";
1359
1245
  };
1360
1246
  shadows: {
1361
1247
  readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
@@ -1641,103 +1527,63 @@ declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
1641
1527
  };
1642
1528
  colors: {
1643
1529
  readonly black: any;
1644
- readonly 'blue-50': any;
1645
1530
  readonly 'blue-100': any;
1646
- readonly 'blue-150': any;
1647
1531
  readonly 'blue-200': any;
1648
- readonly 'blue-250': any;
1649
1532
  readonly 'blue-300': any;
1650
- readonly 'blue-350': any;
1651
1533
  readonly 'blue-400': any;
1652
- readonly 'blue-450': any;
1653
1534
  readonly 'blue-500': any;
1654
- readonly 'blue-550': any;
1655
1535
  readonly 'blue-600': any;
1656
- readonly 'blue-650': any;
1657
1536
  readonly 'blue-700': any;
1658
- readonly 'blue-750': any;
1659
1537
  readonly 'blue-800': any;
1660
- readonly 'blue-850': any;
1661
1538
  readonly 'blue-900': any;
1662
- readonly 'blue-950': any;
1663
- readonly 'gray-50': any;
1539
+ readonly 'blue-1000': any;
1664
1540
  readonly 'gray-100': any;
1665
- readonly 'gray-150': any;
1666
1541
  readonly 'gray-200': any;
1667
- readonly 'gray-250': any;
1668
1542
  readonly 'gray-300': any;
1669
- readonly 'gray-350': any;
1670
1543
  readonly 'gray-400': any;
1671
- readonly 'gray-450': any;
1672
1544
  readonly 'gray-500': any;
1673
- readonly 'gray-550': any;
1674
1545
  readonly 'gray-600': any;
1675
- readonly 'gray-650': any;
1676
1546
  readonly 'gray-700': any;
1677
- readonly 'gray-750': any;
1678
1547
  readonly 'gray-800': any;
1679
- readonly 'gray-850': any;
1680
1548
  readonly 'gray-900': any;
1681
- readonly 'gray-950': any;
1682
- readonly 'green-50': any;
1683
1549
  readonly 'green-100': any;
1684
- readonly 'green-150': any;
1685
1550
  readonly 'green-200': any;
1686
- readonly 'green-250': any;
1687
1551
  readonly 'green-300': any;
1688
- readonly 'green-350': any;
1689
1552
  readonly 'green-400': any;
1690
- readonly 'green-450': any;
1691
1553
  readonly 'green-500': any;
1692
- readonly 'green-550': any;
1693
1554
  readonly 'green-600': any;
1694
- readonly 'green-650': any;
1695
1555
  readonly 'green-700': any;
1696
- readonly 'green-750': any;
1697
1556
  readonly 'green-800': any;
1698
- readonly 'green-850': any;
1699
1557
  readonly 'green-900': any;
1700
- readonly 'green-950': any;
1701
- readonly 'red-50': any;
1558
+ readonly 'indigo-100': any;
1559
+ readonly 'indigo-200': any;
1560
+ readonly 'indigo-300': any;
1561
+ readonly 'indigo-400': any;
1562
+ readonly 'indigo-500': any;
1563
+ readonly 'indigo-600': any;
1564
+ readonly 'indigo-700': any;
1565
+ readonly 'indigo-800': any;
1566
+ readonly 'indigo-900': any;
1702
1567
  readonly 'red-100': any;
1703
- readonly 'red-150': any;
1704
1568
  readonly 'red-200': any;
1705
- readonly 'red-250': any;
1706
1569
  readonly 'red-300': any;
1707
- readonly 'red-350': any;
1708
1570
  readonly 'red-400': any;
1709
- readonly 'red-450': any;
1710
1571
  readonly 'red-500': any;
1711
- readonly 'red-550': any;
1712
1572
  readonly 'red-600': any;
1713
- readonly 'red-650': any;
1714
1573
  readonly 'red-700': any;
1715
- readonly 'red-750': any;
1716
1574
  readonly 'red-800': any;
1717
- readonly 'red-850': any;
1718
1575
  readonly 'red-900': any;
1719
- readonly 'red-950': any;
1720
1576
  readonly transparent: any;
1721
1577
  readonly white: any;
1722
- readonly 'yellow-50': any;
1723
1578
  readonly 'yellow-100': any;
1724
- readonly 'yellow-150': any;
1725
1579
  readonly 'yellow-200': any;
1726
- readonly 'yellow-250': any;
1727
1580
  readonly 'yellow-300': any;
1728
- readonly 'yellow-350': any;
1729
1581
  readonly 'yellow-400': any;
1730
- readonly 'yellow-450': any;
1731
1582
  readonly 'yellow-500': any;
1732
- readonly 'yellow-550': any;
1733
1583
  readonly 'yellow-600': any;
1734
- readonly 'yellow-650': any;
1735
1584
  readonly 'yellow-700': any;
1736
- readonly 'yellow-750': any;
1737
1585
  readonly 'yellow-800': any;
1738
- readonly 'yellow-850': any;
1739
1586
  readonly 'yellow-900': any;
1740
- readonly 'yellow-950': any;
1741
1587
  "background-alpha-active"?: any;
1742
1588
  "background-alpha-hover"?: any;
1743
1589
  "background-danger-prominent"?: any;
@@ -1758,19 +1604,27 @@ declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
1758
1604
  "background-neutrals-inverted-subtle"?: any;
1759
1605
  "background-neutrals-page"?: any;
1760
1606
  "background-neutrals-page-subtle"?: any;
1761
- "background-neutrals-scrollbar"?: any;
1762
- "background-neutrals-scrollbar-active"?: any;
1763
- "background-neutrals-scrollbar-hover"?: any;
1607
+ "background-neutrals-scrolls"?: any;
1608
+ "background-neutrals-scrolls-expanded"?: any;
1609
+ "background-neutrals-scrolls-hover"?: any;
1610
+ "background-neutrals-scrolls-pressed"?: any;
1611
+ "background-neutrals-scrolls-pressed-hover"?: any;
1764
1612
  "background-neutrals-subtle"?: any;
1765
1613
  "background-neutrals-subtle-active"?: any;
1766
1614
  "background-neutrals-subtle-hover"?: any;
1767
1615
  "background-primary-prominent"?: any;
1768
1616
  "background-primary-prominent-active"?: any;
1617
+ "background-primary-prominent-expanded"?: any;
1769
1618
  "background-primary-prominent-hover"?: any;
1619
+ "background-primary-prominent-pressed"?: any;
1620
+ "background-primary-prominent-pressed-hover"?: any;
1770
1621
  "background-primary-prominent-selected"?: any;
1771
1622
  "background-primary-subtle"?: any;
1772
1623
  "background-primary-subtle-active"?: any;
1624
+ "background-primary-subtle-expanded"?: any;
1773
1625
  "background-primary-subtle-hover"?: any;
1626
+ "background-primary-subtle-pressed"?: any;
1627
+ "background-primary-subtle-pressed-hover"?: any;
1774
1628
  "background-primary-subtle-selected"?: any;
1775
1629
  "background-success"?: any;
1776
1630
  "background-success-prominent"?: any;
@@ -1781,15 +1635,9 @@ declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
1781
1635
  "border-danger"?: any;
1782
1636
  "border-danger-active"?: any;
1783
1637
  "border-danger-hover"?: any;
1784
- "border-focus-error-inner"?: any;
1785
- "border-focus-error-middle"?: any;
1786
- "border-focus-error-outer"?: any;
1787
1638
  "border-focus-inner"?: any;
1788
1639
  "border-focus-middle"?: any;
1789
1640
  "border-focus-outer"?: any;
1790
- "border-focus-success-inner"?: any;
1791
- "border-focus-success-middle"?: any;
1792
- "border-focus-success-outer"?: any;
1793
1641
  "border-neutrals"?: any;
1794
1642
  "border-neutrals-active"?: any;
1795
1643
  "border-neutrals-controls"?: any;
@@ -1882,13 +1730,13 @@ declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
1882
1730
  readonly body: "Open Sans, sans-serif";
1883
1731
  };
1884
1732
  radii: {
1733
+ readonly none: 0;
1734
+ readonly half: "999em";
1885
1735
  readonly 25: "2px";
1886
1736
  readonly 50: "4px";
1887
1737
  readonly 75: "6px";
1888
1738
  readonly 100: "8px";
1889
1739
  readonly 200: "16px";
1890
- readonly half: "999px";
1891
- readonly none: "0px";
1892
1740
  };
1893
1741
  shadows: {
1894
1742
  readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-toolbar",
3
- "version": "2.5.2-colors.1",
3
+ "version": "2.5.2-combobox.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -31,9 +31,9 @@
31
31
  "@react-aria/interactions": "^3.13.0",
32
32
  "@react-aria/utils": "^3.13.0",
33
33
  "@react-types/shared": "^3.16.0",
34
- "@mirohq/design-system-stitches": "^2.6.1-colors.1",
34
+ "@mirohq/design-system-stitches": "^2.6.0",
35
+ "@mirohq/design-system-styles": "^1.1.20-combobox.0",
35
36
  "@mirohq/design-system-use-press": "^0.3.1",
36
- "@mirohq/design-system-styles": "^1.1.20-colors.1",
37
37
  "@mirohq/design-system-utils": "^0.15.0"
38
38
  },
39
39
  "scripts": {