@mirohq/design-system-form 0.1.1-colors.0 → 0.1.1

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 +7 -0
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +7 -0
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +138 -366
  6. package/package.json +4 -4
package/dist/main.js CHANGED
@@ -100,6 +100,11 @@ const Root = React__default["default"].forwardRef(
100
100
  if (((_a = formElementRef.current) == null ? void 0 : _a.value) !== void 0 && initialValueRef.current === void 0) {
101
101
  initialValueRef.current = formElementRef.current.value;
102
102
  }
103
+ React.useEffect(() => {
104
+ if (statusProps !== void 0) {
105
+ setStatus(statusProps);
106
+ }
107
+ }, [statusProps, setStatus]);
103
108
  return /* @__PURE__ */ jsxRuntime.jsx(
104
109
  StyledField,
105
110
  {
@@ -120,6 +125,8 @@ const Root = React__default["default"].forwardRef(
120
125
  setStatus(
121
126
  initialValueRef.current !== ((_a2 = formElementRef.current) == null ? void 0 : _a2.value) ? designSystemBaseForm.FORM_FIELD_STATUS.dirty : designSystemBaseForm.FORM_FIELD_STATUS.touched
122
127
  );
128
+ } else {
129
+ setStatus(statusProps);
123
130
  }
124
131
  setFocused(false);
125
132
  onBlur == null ? void 0 : onBlur(e);
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/partials/label.tsx","../src/partials/description.styled.tsx","../src/partials/helper.styled.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n all: 'unset',\n width: '100%',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n fontSize: '$200',\n lineHeight: 1.5,\n marginBottom: '$100',\n display: 'block',\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","import React, { useMemo, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\n\nexport interface LabelProps extends StyledLabelProps {\n /**\n * The content\n */\n children: React.ReactNode\n /**\n * Whether the label should float above the input\n * @default true\n */\n floating?: boolean\n}\n\nexport const Label = React.forwardRef<\n ElementRef<typeof StyledLabel>,\n LabelProps\n>(({ floating = true, children, ...restProps }, forwardRef) => {\n const {\n setLabel,\n setIsFloatingLabel,\n formElementId,\n required = false,\n } = useFormFieldContext()\n\n const label = useMemo(\n () => (\n <>\n {children}\n {required && <StyledAsterisk>*</StyledAsterisk>}\n </>\n ),\n [children, required]\n )\n\n useEffect(() => {\n setLabel(label)\n }, [setLabel, label])\n\n useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating])\n\n // floating labels are managed in the form elements\n if (floating) {\n return null\n }\n\n return (\n <StyledLabel htmlFor={formElementId} {...restProps} ref={forwardRef}>\n {label}\n </StyledLabel>\n )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n fontSize: '$175',\n lineHeight: 1.5,\n margin: 0,\n marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n typeof StyledDescription\n>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledLabel } from './label.styled'\nimport { StyledDescription } from './description.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport const StyledField = styled(Primitive.div, {\n marginBottom: '$300',\n position: 'relative',\n '&[data-disabled]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-disabled',\n },\n },\n '&[data-readonly]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-subtle',\n },\n },\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React, { useRef } from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanishAttrValue } from '@mirohq/design-system-utils'\nimport {\n useFormFieldContext,\n FormFieldProvider,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldProviderProps } from '@mirohq/design-system-base-form'\n\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {\n const {\n id,\n status: formFieldStatus,\n setStatus,\n required,\n focused,\n setFocused,\n disabled,\n ariaDisabled,\n readOnly,\n formElementRef,\n } = useFormFieldContext()\n\n const status = statusProps ?? formFieldStatus\n const initialValueRef = useRef<string>()\n\n if (\n formElementRef.current?.value !== undefined &&\n initialValueRef.current === undefined\n ) {\n initialValueRef.current = formElementRef.current.value\n }\n\n return (\n <StyledField\n data-status={status}\n data-required={booleanishAttrValue(required)}\n data-focused={booleanishAttrValue(focused)}\n data-disabled={booleanishAttrValue(\n disabled === true || ariaDisabled === true\n )}\n data-readonly={booleanishAttrValue(readOnly)}\n onFocus={e => {\n setFocused(true)\n onFocus?.(e)\n }}\n onBlur={e => {\n if (statusProps === undefined) {\n setStatus(\n initialValueRef.current !== formElementRef.current?.value\n ? FORM_FIELD_STATUS.dirty\n : FORM_FIELD_STATUS.touched\n )\n }\n\n setFocused(false)\n onBlur?.(e)\n }}\n {...restProps}\n id={id}\n ref={forwardRef}\n />\n )\n }\n)\n\nexport const Field = React.forwardRef<\n ElementRef<typeof StyledField>,\n FieldProps\n>(({ id, status, ...restProps }, forwardRef) => (\n <FormFieldProvider status={status} id={id}>\n {/* explicit use status as props because the provider will add a default */}\n <Root status={status} {...restProps} ref={forwardRef} />\n </FormFieldProvider>\n))\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n ElementRef<typeof StyledHelper>,\n HelperProps\n>((props, forwardRef) => {\n const { helperId, setHelperId } = useFormFieldContext()\n\n const id = props.id ?? helperId\n useEffect(() => setHelperId(id), [setHelperId, id])\n\n return <StyledHelper {...props} id={id} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledMessage = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n variants: {\n status: {\n valid: {\n color: '$text-success',\n },\n invalid: {\n color: '$text-danger',\n },\n dirty: {},\n pristine: {},\n touched: {},\n },\n },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n useFormFieldContext,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldStatus } from '@mirohq/design-system-base-form'\n\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n status?: FormFieldStatus\n chidren?: React.ReactNode\n}\n\nexport const Message = React.forwardRef<\n ElementRef<typeof StyledMessage>,\n MessageProps\n>((props, forwardRef) => {\n const { messageId, setMessageId, status } = useFormFieldContext()\n\n const id = props.id ?? messageId\n useEffect(() => setMessageId(id), [setMessageId, id])\n\n if (\n status !== FORM_FIELD_STATUS.invalid &&\n status !== FORM_FIELD_STATUS.valid\n ) {\n return null\n }\n\n return (\n <StyledMessage\n role='alert'\n {...props}\n id={id}\n status={status}\n ref={forwardRef}\n />\n )\n})\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n ElementRef<typeof StyledDescription>,\n DescriptionProps\n>((props, forwardRef) => {\n const { descriptionId, setDescriptionId } = useFormFieldContext()\n\n const id = props.id ?? descriptionId\n useEffect(() => setDescriptionId(id), [setDescriptionId, id])\n\n return <StyledDescription {...props} id={id} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Label: typeof Label\n Field: typeof Field\n Helper: typeof Helper\n Message: typeof Message\n Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":["styled","Primitive","React","useFormFieldContext","useMemo","jsxs","Fragment","jsx","useEffect","useRef","booleanishAttrValue","_a","FORM_FIELD_STATUS","FormFieldProvider"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/partials/label.tsx","../src/partials/description.styled.tsx","../src/partials/helper.styled.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n all: 'unset',\n width: '100%',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n fontSize: '$200',\n lineHeight: 1.5,\n marginBottom: '$100',\n display: 'block',\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","import React, { useMemo, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\n\nexport interface LabelProps extends StyledLabelProps {\n /**\n * The content\n */\n children: React.ReactNode\n /**\n * Whether the label should float above the input\n * @default true\n */\n floating?: boolean\n}\n\nexport const Label = React.forwardRef<\n ElementRef<typeof StyledLabel>,\n LabelProps\n>(({ floating = true, children, ...restProps }, forwardRef) => {\n const {\n setLabel,\n setIsFloatingLabel,\n formElementId,\n required = false,\n } = useFormFieldContext()\n\n const label = useMemo(\n () => (\n <>\n {children}\n {required && <StyledAsterisk>*</StyledAsterisk>}\n </>\n ),\n [children, required]\n )\n\n useEffect(() => {\n setLabel(label)\n }, [setLabel, label])\n\n useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating])\n\n // floating labels are managed in the form elements\n if (floating) {\n return null\n }\n\n return (\n <StyledLabel htmlFor={formElementId} {...restProps} ref={forwardRef}>\n {label}\n </StyledLabel>\n )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n fontSize: '$175',\n lineHeight: 1.5,\n margin: 0,\n marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n typeof StyledDescription\n>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledLabel } from './label.styled'\nimport { StyledDescription } from './description.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport const StyledField = styled(Primitive.div, {\n marginBottom: '$300',\n position: 'relative',\n '&[data-disabled]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-disabled',\n },\n },\n '&[data-readonly]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-subtle',\n },\n },\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React, { useEffect, useRef } from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanishAttrValue } from '@mirohq/design-system-utils'\nimport {\n useFormFieldContext,\n FormFieldProvider,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldProviderProps } from '@mirohq/design-system-base-form'\n\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {\n const {\n id,\n status: formFieldStatus,\n setStatus,\n required,\n focused,\n setFocused,\n disabled,\n ariaDisabled,\n readOnly,\n formElementRef,\n } = useFormFieldContext()\n\n const status = statusProps ?? formFieldStatus\n const initialValueRef = useRef<string>()\n\n if (\n formElementRef.current?.value !== undefined &&\n initialValueRef.current === undefined\n ) {\n initialValueRef.current = formElementRef.current.value\n }\n\n useEffect(() => {\n if (statusProps !== undefined) {\n setStatus(statusProps)\n }\n }, [statusProps, setStatus])\n\n return (\n <StyledField\n data-status={status}\n data-required={booleanishAttrValue(required)}\n data-focused={booleanishAttrValue(focused)}\n data-disabled={booleanishAttrValue(\n disabled === true || ariaDisabled === true\n )}\n data-readonly={booleanishAttrValue(readOnly)}\n onFocus={e => {\n setFocused(true)\n onFocus?.(e)\n }}\n onBlur={e => {\n if (statusProps === undefined) {\n setStatus(\n initialValueRef.current !== formElementRef.current?.value\n ? FORM_FIELD_STATUS.dirty\n : FORM_FIELD_STATUS.touched\n )\n } else {\n setStatus(statusProps)\n }\n\n setFocused(false)\n onBlur?.(e)\n }}\n {...restProps}\n id={id}\n ref={forwardRef}\n />\n )\n }\n)\n\nexport const Field = React.forwardRef<\n ElementRef<typeof StyledField>,\n FieldProps\n>(({ id, status, ...restProps }, forwardRef) => (\n <FormFieldProvider status={status} id={id}>\n {/* explicit use status as props because the provider will add a default */}\n <Root status={status} {...restProps} ref={forwardRef} />\n </FormFieldProvider>\n))\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n ElementRef<typeof StyledHelper>,\n HelperProps\n>((props, forwardRef) => {\n const { helperId, setHelperId } = useFormFieldContext()\n\n const id = props.id ?? helperId\n useEffect(() => setHelperId(id), [setHelperId, id])\n\n return <StyledHelper {...props} id={id} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledMessage = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n variants: {\n status: {\n valid: {\n color: '$text-success',\n },\n invalid: {\n color: '$text-danger',\n },\n dirty: {},\n pristine: {},\n touched: {},\n },\n },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n useFormFieldContext,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldStatus } from '@mirohq/design-system-base-form'\n\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n status?: FormFieldStatus\n chidren?: React.ReactNode\n}\n\nexport const Message = React.forwardRef<\n ElementRef<typeof StyledMessage>,\n MessageProps\n>((props, forwardRef) => {\n const { messageId, setMessageId, status } = useFormFieldContext()\n\n const id = props.id ?? messageId\n useEffect(() => setMessageId(id), [setMessageId, id])\n\n if (\n status !== FORM_FIELD_STATUS.invalid &&\n status !== FORM_FIELD_STATUS.valid\n ) {\n return null\n }\n\n return (\n <StyledMessage\n role='alert'\n {...props}\n id={id}\n status={status}\n ref={forwardRef}\n />\n )\n})\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n ElementRef<typeof StyledDescription>,\n DescriptionProps\n>((props, forwardRef) => {\n const { descriptionId, setDescriptionId } = useFormFieldContext()\n\n const id = props.id ?? descriptionId\n useEffect(() => setDescriptionId(id), [setDescriptionId, id])\n\n return <StyledDescription {...props} id={id} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Label: typeof Label\n Field: typeof Field\n Helper: typeof Helper\n Message: typeof Message\n Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":["styled","Primitive","React","useFormFieldContext","useMemo","jsxs","Fragment","jsx","useEffect","useRef","booleanishAttrValue","_a","FORM_FIELD_STATUS","FormFieldProvider"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -92,6 +92,11 @@ const Root = React.forwardRef(
92
92
  if (((_a = formElementRef.current) == null ? void 0 : _a.value) !== void 0 && initialValueRef.current === void 0) {
93
93
  initialValueRef.current = formElementRef.current.value;
94
94
  }
95
+ useEffect(() => {
96
+ if (statusProps !== void 0) {
97
+ setStatus(statusProps);
98
+ }
99
+ }, [statusProps, setStatus]);
95
100
  return /* @__PURE__ */ jsx(
96
101
  StyledField,
97
102
  {
@@ -112,6 +117,8 @@ const Root = React.forwardRef(
112
117
  setStatus(
113
118
  initialValueRef.current !== ((_a2 = formElementRef.current) == null ? void 0 : _a2.value) ? FORM_FIELD_STATUS.dirty : FORM_FIELD_STATUS.touched
114
119
  );
120
+ } else {
121
+ setStatus(statusProps);
115
122
  }
116
123
  setFocused(false);
117
124
  onBlur == null ? void 0 : onBlur(e);
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/partials/label.tsx","../src/partials/description.styled.tsx","../src/partials/helper.styled.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n all: 'unset',\n width: '100%',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n fontSize: '$200',\n lineHeight: 1.5,\n marginBottom: '$100',\n display: 'block',\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","import React, { useMemo, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\n\nexport interface LabelProps extends StyledLabelProps {\n /**\n * The content\n */\n children: React.ReactNode\n /**\n * Whether the label should float above the input\n * @default true\n */\n floating?: boolean\n}\n\nexport const Label = React.forwardRef<\n ElementRef<typeof StyledLabel>,\n LabelProps\n>(({ floating = true, children, ...restProps }, forwardRef) => {\n const {\n setLabel,\n setIsFloatingLabel,\n formElementId,\n required = false,\n } = useFormFieldContext()\n\n const label = useMemo(\n () => (\n <>\n {children}\n {required && <StyledAsterisk>*</StyledAsterisk>}\n </>\n ),\n [children, required]\n )\n\n useEffect(() => {\n setLabel(label)\n }, [setLabel, label])\n\n useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating])\n\n // floating labels are managed in the form elements\n if (floating) {\n return null\n }\n\n return (\n <StyledLabel htmlFor={formElementId} {...restProps} ref={forwardRef}>\n {label}\n </StyledLabel>\n )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n fontSize: '$175',\n lineHeight: 1.5,\n margin: 0,\n marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n typeof StyledDescription\n>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledLabel } from './label.styled'\nimport { StyledDescription } from './description.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport const StyledField = styled(Primitive.div, {\n marginBottom: '$300',\n position: 'relative',\n '&[data-disabled]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-disabled',\n },\n },\n '&[data-readonly]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-subtle',\n },\n },\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React, { useRef } from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanishAttrValue } from '@mirohq/design-system-utils'\nimport {\n useFormFieldContext,\n FormFieldProvider,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldProviderProps } from '@mirohq/design-system-base-form'\n\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {\n const {\n id,\n status: formFieldStatus,\n setStatus,\n required,\n focused,\n setFocused,\n disabled,\n ariaDisabled,\n readOnly,\n formElementRef,\n } = useFormFieldContext()\n\n const status = statusProps ?? formFieldStatus\n const initialValueRef = useRef<string>()\n\n if (\n formElementRef.current?.value !== undefined &&\n initialValueRef.current === undefined\n ) {\n initialValueRef.current = formElementRef.current.value\n }\n\n return (\n <StyledField\n data-status={status}\n data-required={booleanishAttrValue(required)}\n data-focused={booleanishAttrValue(focused)}\n data-disabled={booleanishAttrValue(\n disabled === true || ariaDisabled === true\n )}\n data-readonly={booleanishAttrValue(readOnly)}\n onFocus={e => {\n setFocused(true)\n onFocus?.(e)\n }}\n onBlur={e => {\n if (statusProps === undefined) {\n setStatus(\n initialValueRef.current !== formElementRef.current?.value\n ? FORM_FIELD_STATUS.dirty\n : FORM_FIELD_STATUS.touched\n )\n }\n\n setFocused(false)\n onBlur?.(e)\n }}\n {...restProps}\n id={id}\n ref={forwardRef}\n />\n )\n }\n)\n\nexport const Field = React.forwardRef<\n ElementRef<typeof StyledField>,\n FieldProps\n>(({ id, status, ...restProps }, forwardRef) => (\n <FormFieldProvider status={status} id={id}>\n {/* explicit use status as props because the provider will add a default */}\n <Root status={status} {...restProps} ref={forwardRef} />\n </FormFieldProvider>\n))\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n ElementRef<typeof StyledHelper>,\n HelperProps\n>((props, forwardRef) => {\n const { helperId, setHelperId } = useFormFieldContext()\n\n const id = props.id ?? helperId\n useEffect(() => setHelperId(id), [setHelperId, id])\n\n return <StyledHelper {...props} id={id} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledMessage = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n variants: {\n status: {\n valid: {\n color: '$text-success',\n },\n invalid: {\n color: '$text-danger',\n },\n dirty: {},\n pristine: {},\n touched: {},\n },\n },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n useFormFieldContext,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldStatus } from '@mirohq/design-system-base-form'\n\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n status?: FormFieldStatus\n chidren?: React.ReactNode\n}\n\nexport const Message = React.forwardRef<\n ElementRef<typeof StyledMessage>,\n MessageProps\n>((props, forwardRef) => {\n const { messageId, setMessageId, status } = useFormFieldContext()\n\n const id = props.id ?? messageId\n useEffect(() => setMessageId(id), [setMessageId, id])\n\n if (\n status !== FORM_FIELD_STATUS.invalid &&\n status !== FORM_FIELD_STATUS.valid\n ) {\n return null\n }\n\n return (\n <StyledMessage\n role='alert'\n {...props}\n id={id}\n status={status}\n ref={forwardRef}\n />\n )\n})\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n ElementRef<typeof StyledDescription>,\n DescriptionProps\n>((props, forwardRef) => {\n const { descriptionId, setDescriptionId } = useFormFieldContext()\n\n const id = props.id ?? descriptionId\n useEffect(() => setDescriptionId(id), [setDescriptionId, id])\n\n return <StyledDescription {...props} id={id} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Label: typeof Label\n Field: typeof Field\n Helper: typeof Helper\n Message: typeof Message\n Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":["_a"],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/form.styled.tsx","../src/partials/label.styled.tsx","../src/partials/label.tsx","../src/partials/description.styled.tsx","../src/partials/helper.styled.tsx","../src/partials/field.styled.tsx","../src/partials/field.tsx","../src/partials/helper.tsx","../src/partials/message.styled.tsx","../src/partials/message.tsx","../src/partials/description.tsx","../src/form.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledForm = styled(Primitive.form, {\n all: 'unset',\n width: '100%',\n})\n\nexport type StyledFormProps = ComponentPropsWithRef<typeof StyledForm>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledLabel = styled(Primitive.label, {\n fontSize: '$200',\n lineHeight: 1.5,\n marginBottom: '$100',\n display: 'block',\n})\n\nexport const StyledAsterisk = styled(Primitive.span, {\n color: '$text-danger',\n})\n\nexport type StyledLabelProps = ComponentPropsWithRef<typeof StyledLabel>\n","import React, { useMemo, useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport { StyledAsterisk, StyledLabel } from './label.styled'\nimport type { StyledLabelProps } from './label.styled'\n\nexport interface LabelProps extends StyledLabelProps {\n /**\n * The content\n */\n children: React.ReactNode\n /**\n * Whether the label should float above the input\n * @default true\n */\n floating?: boolean\n}\n\nexport const Label = React.forwardRef<\n ElementRef<typeof StyledLabel>,\n LabelProps\n>(({ floating = true, children, ...restProps }, forwardRef) => {\n const {\n setLabel,\n setIsFloatingLabel,\n formElementId,\n required = false,\n } = useFormFieldContext()\n\n const label = useMemo(\n () => (\n <>\n {children}\n {required && <StyledAsterisk>*</StyledAsterisk>}\n </>\n ),\n [children, required]\n )\n\n useEffect(() => {\n setLabel(label)\n }, [setLabel, label])\n\n useEffect(() => setIsFloatingLabel(floating), [setIsFloatingLabel, floating])\n\n // floating labels are managed in the form elements\n if (floating) {\n return null\n }\n\n return (\n <StyledLabel htmlFor={formElementId} {...restProps} ref={forwardRef}>\n {label}\n </StyledLabel>\n )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledDescription = styled(Primitive.p, {\n fontSize: '$175',\n lineHeight: 1.5,\n margin: 0,\n marginBottom: '$150',\n})\n\nexport type StyledDescriptionProps = ComponentPropsWithRef<\n typeof StyledDescription\n>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledHelper = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n})\n\nexport type StyledHelperProps = ComponentPropsWithRef<typeof StyledHelper>\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledLabel } from './label.styled'\nimport { StyledDescription } from './description.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport const StyledField = styled(Primitive.div, {\n marginBottom: '$300',\n position: 'relative',\n '&[data-disabled]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-disabled',\n },\n },\n '&[data-readonly]': {\n [`${StyledLabel}, ${StyledDescription}, ${StyledHelper}`]: {\n color: '$text-neutrals-subtle',\n },\n },\n})\n\nexport type StyledFieldProps = ComponentPropsWithRef<typeof StyledField>\n","import React, { useEffect, useRef } from 'react'\nimport type { ElementRef } from 'react'\nimport { booleanishAttrValue } from '@mirohq/design-system-utils'\nimport {\n useFormFieldContext,\n FormFieldProvider,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldProviderProps } from '@mirohq/design-system-base-form'\n\nimport type { StyledFieldProps } from './field.styled'\nimport { StyledField } from './field.styled'\n\nexport interface FieldProps extends StyledFieldProps, FormFieldProviderProps {}\n\nconst Root = React.forwardRef<ElementRef<typeof StyledField>, FieldProps>(\n ({ onFocus, onBlur, status: statusProps, ...restProps }, forwardRef) => {\n const {\n id,\n status: formFieldStatus,\n setStatus,\n required,\n focused,\n setFocused,\n disabled,\n ariaDisabled,\n readOnly,\n formElementRef,\n } = useFormFieldContext()\n\n const status = statusProps ?? formFieldStatus\n const initialValueRef = useRef<string>()\n\n if (\n formElementRef.current?.value !== undefined &&\n initialValueRef.current === undefined\n ) {\n initialValueRef.current = formElementRef.current.value\n }\n\n useEffect(() => {\n if (statusProps !== undefined) {\n setStatus(statusProps)\n }\n }, [statusProps, setStatus])\n\n return (\n <StyledField\n data-status={status}\n data-required={booleanishAttrValue(required)}\n data-focused={booleanishAttrValue(focused)}\n data-disabled={booleanishAttrValue(\n disabled === true || ariaDisabled === true\n )}\n data-readonly={booleanishAttrValue(readOnly)}\n onFocus={e => {\n setFocused(true)\n onFocus?.(e)\n }}\n onBlur={e => {\n if (statusProps === undefined) {\n setStatus(\n initialValueRef.current !== formElementRef.current?.value\n ? FORM_FIELD_STATUS.dirty\n : FORM_FIELD_STATUS.touched\n )\n } else {\n setStatus(statusProps)\n }\n\n setFocused(false)\n onBlur?.(e)\n }}\n {...restProps}\n id={id}\n ref={forwardRef}\n />\n )\n }\n)\n\nexport const Field = React.forwardRef<\n ElementRef<typeof StyledField>,\n FieldProps\n>(({ id, status, ...restProps }, forwardRef) => (\n <FormFieldProvider status={status} id={id}>\n {/* explicit use status as props because the provider will add a default */}\n <Root status={status} {...restProps} ref={forwardRef} />\n </FormFieldProvider>\n))\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledHelperProps } from './helper.styled'\nimport { StyledHelper } from './helper.styled'\n\nexport interface HelperProps extends StyledHelperProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Helper = React.forwardRef<\n ElementRef<typeof StyledHelper>,\n HelperProps\n>((props, forwardRef) => {\n const { helperId, setHelperId } = useFormFieldContext()\n\n const id = props.id ?? helperId\n useEffect(() => setHelperId(id), [setHelperId, id])\n\n return <StyledHelper {...props} id={id} ref={forwardRef} />\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledMessage = styled(Primitive.div, {\n fontSize: '$150',\n lineHeight: 1.5,\n marginTop: '$50',\n variants: {\n status: {\n valid: {\n color: '$text-success',\n },\n invalid: {\n color: '$text-danger',\n },\n dirty: {},\n pristine: {},\n touched: {},\n },\n },\n})\n\nexport type StyledMessageProps = ComponentPropsWithRef<typeof StyledMessage>\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport {\n useFormFieldContext,\n FORM_FIELD_STATUS,\n} from '@mirohq/design-system-base-form'\nimport type { FormFieldStatus } from '@mirohq/design-system-base-form'\n\nimport type { StyledMessageProps } from './message.styled'\nimport { StyledMessage } from './message.styled'\n\nexport interface MessageProps extends Omit<StyledMessageProps, 'status'> {\n status?: FormFieldStatus\n chidren?: React.ReactNode\n}\n\nexport const Message = React.forwardRef<\n ElementRef<typeof StyledMessage>,\n MessageProps\n>((props, forwardRef) => {\n const { messageId, setMessageId, status } = useFormFieldContext()\n\n const id = props.id ?? messageId\n useEffect(() => setMessageId(id), [setMessageId, id])\n\n if (\n status !== FORM_FIELD_STATUS.invalid &&\n status !== FORM_FIELD_STATUS.valid\n ) {\n return null\n }\n\n return (\n <StyledMessage\n role='alert'\n {...props}\n id={id}\n status={status}\n ref={forwardRef}\n />\n )\n})\n","import React, { useEffect } from 'react'\nimport type { ElementRef } from 'react'\nimport { useFormFieldContext } from '@mirohq/design-system-base-form'\n\nimport type { StyledDescriptionProps } from './description.styled'\nimport { StyledDescription } from './description.styled'\n\nexport interface DescriptionProps extends StyledDescriptionProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Description = React.forwardRef<\n ElementRef<typeof StyledDescription>,\n DescriptionProps\n>((props, forwardRef) => {\n const { descriptionId, setDescriptionId } = useFormFieldContext()\n\n const id = props.id ?? descriptionId\n useEffect(() => setDescriptionId(id), [setDescriptionId, id])\n\n return <StyledDescription {...props} id={id} ref={forwardRef} />\n})\n","import type { ForwardRefExoticComponent } from 'react'\n\nimport { StyledForm } from './form.styled'\nimport type { StyledFormProps } from './form.styled'\nimport { Label } from './partials/label'\nimport { Field } from './partials/field'\nimport { Helper } from './partials/helper'\nimport { Message } from './partials/message'\nimport { Description } from './partials/description'\n\nexport interface FormProps extends StyledFormProps {\n /**\n * The content\n */\n children: React.ReactNode\n}\n\nexport const Form = StyledForm as any as ForwardRefExoticComponent<FormProps> &\n Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Label: typeof Label\n Field: typeof Field\n Helper: typeof Helper\n Message: typeof Message\n Description: typeof Description\n}\n\nForm.Label = Label\nForm.Field = Field\nForm.Helper = Helper\nForm.Message = Message\nForm.Description = Description\n"],"names":["_a"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -15,103 +15,63 @@ declare const StyledForm: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
15
15
  };
16
16
  colors: {
17
17
  readonly black: any;
18
- readonly 'blue-50': any;
19
18
  readonly 'blue-100': any;
20
- readonly 'blue-150': any;
21
19
  readonly 'blue-200': any;
22
- readonly 'blue-250': any;
23
20
  readonly 'blue-300': any;
24
- readonly 'blue-350': any;
25
21
  readonly 'blue-400': any;
26
- readonly 'blue-450': any;
27
22
  readonly 'blue-500': any;
28
- readonly 'blue-550': any;
29
23
  readonly 'blue-600': any;
30
- readonly 'blue-650': any;
31
24
  readonly 'blue-700': any;
32
- readonly 'blue-750': any;
33
25
  readonly 'blue-800': any;
34
- readonly 'blue-850': any;
35
26
  readonly 'blue-900': any;
36
- readonly 'blue-950': any;
37
- readonly 'gray-50': any;
27
+ readonly 'blue-1000': any;
38
28
  readonly 'gray-100': any;
39
- readonly 'gray-150': any;
40
29
  readonly 'gray-200': any;
41
- readonly 'gray-250': any;
42
30
  readonly 'gray-300': any;
43
- readonly 'gray-350': any;
44
31
  readonly 'gray-400': any;
45
- readonly 'gray-450': any;
46
32
  readonly 'gray-500': any;
47
- readonly 'gray-550': any;
48
33
  readonly 'gray-600': any;
49
- readonly 'gray-650': any;
50
34
  readonly 'gray-700': any;
51
- readonly 'gray-750': any;
52
35
  readonly 'gray-800': any;
53
- readonly 'gray-850': any;
54
36
  readonly 'gray-900': any;
55
- readonly 'gray-950': any;
56
- readonly 'green-50': any;
57
37
  readonly 'green-100': any;
58
- readonly 'green-150': any;
59
38
  readonly 'green-200': any;
60
- readonly 'green-250': any;
61
39
  readonly 'green-300': any;
62
- readonly 'green-350': any;
63
40
  readonly 'green-400': any;
64
- readonly 'green-450': any;
65
41
  readonly 'green-500': any;
66
- readonly 'green-550': any;
67
42
  readonly 'green-600': any;
68
- readonly 'green-650': any;
69
43
  readonly 'green-700': any;
70
- readonly 'green-750': any;
71
44
  readonly 'green-800': any;
72
- readonly 'green-850': any;
73
45
  readonly 'green-900': any;
74
- readonly 'green-950': any;
75
- readonly 'red-50': any;
46
+ readonly 'indigo-100': any;
47
+ readonly 'indigo-200': any;
48
+ readonly 'indigo-300': any;
49
+ readonly 'indigo-400': any;
50
+ readonly 'indigo-500': any;
51
+ readonly 'indigo-600': any;
52
+ readonly 'indigo-700': any;
53
+ readonly 'indigo-800': any;
54
+ readonly 'indigo-900': any;
76
55
  readonly 'red-100': any;
77
- readonly 'red-150': any;
78
56
  readonly 'red-200': any;
79
- readonly 'red-250': any;
80
57
  readonly 'red-300': any;
81
- readonly 'red-350': any;
82
58
  readonly 'red-400': any;
83
- readonly 'red-450': any;
84
59
  readonly 'red-500': any;
85
- readonly 'red-550': any;
86
60
  readonly 'red-600': any;
87
- readonly 'red-650': any;
88
61
  readonly 'red-700': any;
89
- readonly 'red-750': any;
90
62
  readonly 'red-800': any;
91
- readonly 'red-850': any;
92
63
  readonly 'red-900': any;
93
- readonly 'red-950': any;
94
64
  readonly transparent: any;
95
65
  readonly white: any;
96
- readonly 'yellow-50': any;
97
66
  readonly 'yellow-100': any;
98
- readonly 'yellow-150': any;
99
67
  readonly 'yellow-200': any;
100
- readonly 'yellow-250': any;
101
68
  readonly 'yellow-300': any;
102
- readonly 'yellow-350': any;
103
69
  readonly 'yellow-400': any;
104
- readonly 'yellow-450': any;
105
70
  readonly 'yellow-500': any;
106
- readonly 'yellow-550': any;
107
71
  readonly 'yellow-600': any;
108
- readonly 'yellow-650': any;
109
72
  readonly 'yellow-700': any;
110
- readonly 'yellow-750': any;
111
73
  readonly 'yellow-800': any;
112
- readonly 'yellow-850': any;
113
74
  readonly 'yellow-900': any;
114
- readonly 'yellow-950': any;
115
75
  "background-alpha-active"?: any;
116
76
  "background-alpha-hover"?: any;
117
77
  "background-danger-prominent"?: any;
@@ -132,19 +92,27 @@ declare const StyledForm: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
132
92
  "background-neutrals-inverted-subtle"?: any;
133
93
  "background-neutrals-page"?: any;
134
94
  "background-neutrals-page-subtle"?: any;
135
- "background-neutrals-scrollbar"?: any;
136
- "background-neutrals-scrollbar-active"?: any;
137
- "background-neutrals-scrollbar-hover"?: any;
95
+ "background-neutrals-scrolls"?: any;
96
+ "background-neutrals-scrolls-expanded"?: any;
97
+ "background-neutrals-scrolls-hover"?: any;
98
+ "background-neutrals-scrolls-pressed"?: any;
99
+ "background-neutrals-scrolls-pressed-hover"?: any;
138
100
  "background-neutrals-subtle"?: any;
139
101
  "background-neutrals-subtle-active"?: any;
140
102
  "background-neutrals-subtle-hover"?: any;
141
103
  "background-primary-prominent"?: any;
142
104
  "background-primary-prominent-active"?: any;
105
+ "background-primary-prominent-expanded"?: any;
143
106
  "background-primary-prominent-hover"?: any;
107
+ "background-primary-prominent-pressed"?: any;
108
+ "background-primary-prominent-pressed-hover"?: any;
144
109
  "background-primary-prominent-selected"?: any;
145
110
  "background-primary-subtle"?: any;
146
111
  "background-primary-subtle-active"?: any;
112
+ "background-primary-subtle-expanded"?: any;
147
113
  "background-primary-subtle-hover"?: any;
114
+ "background-primary-subtle-pressed"?: any;
115
+ "background-primary-subtle-pressed-hover"?: any;
148
116
  "background-primary-subtle-selected"?: any;
149
117
  "background-success"?: any;
150
118
  "background-success-prominent"?: any;
@@ -155,15 +123,9 @@ declare const StyledForm: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
155
123
  "border-danger"?: any;
156
124
  "border-danger-active"?: any;
157
125
  "border-danger-hover"?: any;
158
- "border-focus-error-inner"?: any;
159
- "border-focus-error-middle"?: any;
160
- "border-focus-error-outer"?: any;
161
126
  "border-focus-inner"?: any;
162
127
  "border-focus-middle"?: any;
163
128
  "border-focus-outer"?: any;
164
- "border-focus-success-inner"?: any;
165
- "border-focus-success-middle"?: any;
166
- "border-focus-success-outer"?: any;
167
129
  "border-neutrals"?: any;
168
130
  "border-neutrals-active"?: any;
169
131
  "border-neutrals-controls"?: any;
@@ -256,13 +218,13 @@ declare const StyledForm: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
256
218
  readonly body: "Open Sans, sans-serif";
257
219
  };
258
220
  radii: {
221
+ readonly none: 0;
222
+ readonly half: "999em";
259
223
  readonly 25: "2px";
260
224
  readonly 50: "4px";
261
225
  readonly 75: "6px";
262
226
  readonly 100: "8px";
263
227
  readonly 200: "16px";
264
- readonly half: "999px";
265
- readonly none: "0px";
266
228
  };
267
229
  shadows: {
268
230
  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";
@@ -544,103 +506,63 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
544
506
  };
545
507
  colors: {
546
508
  readonly black: any;
547
- readonly 'blue-50': any;
548
509
  readonly 'blue-100': any;
549
- readonly 'blue-150': any;
550
510
  readonly 'blue-200': any;
551
- readonly 'blue-250': any;
552
511
  readonly 'blue-300': any;
553
- readonly 'blue-350': any;
554
512
  readonly 'blue-400': any;
555
- readonly 'blue-450': any;
556
513
  readonly 'blue-500': any;
557
- readonly 'blue-550': any;
558
514
  readonly 'blue-600': any;
559
- readonly 'blue-650': any;
560
515
  readonly 'blue-700': any;
561
- readonly 'blue-750': any;
562
516
  readonly 'blue-800': any;
563
- readonly 'blue-850': any;
564
517
  readonly 'blue-900': any;
565
- readonly 'blue-950': any;
566
- readonly 'gray-50': any;
518
+ readonly 'blue-1000': any;
567
519
  readonly 'gray-100': any;
568
- readonly 'gray-150': any;
569
520
  readonly 'gray-200': any;
570
- readonly 'gray-250': any;
571
521
  readonly 'gray-300': any;
572
- readonly 'gray-350': any;
573
522
  readonly 'gray-400': any;
574
- readonly 'gray-450': any;
575
523
  readonly 'gray-500': any;
576
- readonly 'gray-550': any;
577
524
  readonly 'gray-600': any;
578
- readonly 'gray-650': any;
579
525
  readonly 'gray-700': any;
580
- readonly 'gray-750': any;
581
526
  readonly 'gray-800': any;
582
- readonly 'gray-850': any;
583
527
  readonly 'gray-900': any;
584
- readonly 'gray-950': any;
585
- readonly 'green-50': any;
586
528
  readonly 'green-100': any;
587
- readonly 'green-150': any;
588
529
  readonly 'green-200': any;
589
- readonly 'green-250': any;
590
530
  readonly 'green-300': any;
591
- readonly 'green-350': any;
592
531
  readonly 'green-400': any;
593
- readonly 'green-450': any;
594
532
  readonly 'green-500': any;
595
- readonly 'green-550': any;
596
533
  readonly 'green-600': any;
597
- readonly 'green-650': any;
598
534
  readonly 'green-700': any;
599
- readonly 'green-750': any;
600
535
  readonly 'green-800': any;
601
- readonly 'green-850': any;
602
536
  readonly 'green-900': any;
603
- readonly 'green-950': any;
604
- readonly 'red-50': any;
537
+ readonly 'indigo-100': any;
538
+ readonly 'indigo-200': any;
539
+ readonly 'indigo-300': any;
540
+ readonly 'indigo-400': any;
541
+ readonly 'indigo-500': any;
542
+ readonly 'indigo-600': any;
543
+ readonly 'indigo-700': any;
544
+ readonly 'indigo-800': any;
545
+ readonly 'indigo-900': any;
605
546
  readonly 'red-100': any;
606
- readonly 'red-150': any;
607
547
  readonly 'red-200': any;
608
- readonly 'red-250': any;
609
548
  readonly 'red-300': any;
610
- readonly 'red-350': any;
611
549
  readonly 'red-400': any;
612
- readonly 'red-450': any;
613
550
  readonly 'red-500': any;
614
- readonly 'red-550': any;
615
551
  readonly 'red-600': any;
616
- readonly 'red-650': any;
617
552
  readonly 'red-700': any;
618
- readonly 'red-750': any;
619
553
  readonly 'red-800': any;
620
- readonly 'red-850': any;
621
554
  readonly 'red-900': any;
622
- readonly 'red-950': any;
623
555
  readonly transparent: any;
624
556
  readonly white: any;
625
- readonly 'yellow-50': any;
626
557
  readonly 'yellow-100': any;
627
- readonly 'yellow-150': any;
628
558
  readonly 'yellow-200': any;
629
- readonly 'yellow-250': any;
630
559
  readonly 'yellow-300': any;
631
- readonly 'yellow-350': any;
632
560
  readonly 'yellow-400': any;
633
- readonly 'yellow-450': any;
634
561
  readonly 'yellow-500': any;
635
- readonly 'yellow-550': any;
636
562
  readonly 'yellow-600': any;
637
- readonly 'yellow-650': any;
638
563
  readonly 'yellow-700': any;
639
- readonly 'yellow-750': any;
640
564
  readonly 'yellow-800': any;
641
- readonly 'yellow-850': any;
642
565
  readonly 'yellow-900': any;
643
- readonly 'yellow-950': any;
644
566
  "background-alpha-active"?: any;
645
567
  "background-alpha-hover"?: any;
646
568
  "background-danger-prominent"?: any;
@@ -661,19 +583,27 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
661
583
  "background-neutrals-inverted-subtle"?: any;
662
584
  "background-neutrals-page"?: any;
663
585
  "background-neutrals-page-subtle"?: any;
664
- "background-neutrals-scrollbar"?: any;
665
- "background-neutrals-scrollbar-active"?: any;
666
- "background-neutrals-scrollbar-hover"?: any;
586
+ "background-neutrals-scrolls"?: any;
587
+ "background-neutrals-scrolls-expanded"?: any;
588
+ "background-neutrals-scrolls-hover"?: any;
589
+ "background-neutrals-scrolls-pressed"?: any;
590
+ "background-neutrals-scrolls-pressed-hover"?: any;
667
591
  "background-neutrals-subtle"?: any;
668
592
  "background-neutrals-subtle-active"?: any;
669
593
  "background-neutrals-subtle-hover"?: any;
670
594
  "background-primary-prominent"?: any;
671
595
  "background-primary-prominent-active"?: any;
596
+ "background-primary-prominent-expanded"?: any;
672
597
  "background-primary-prominent-hover"?: any;
598
+ "background-primary-prominent-pressed"?: any;
599
+ "background-primary-prominent-pressed-hover"?: any;
673
600
  "background-primary-prominent-selected"?: any;
674
601
  "background-primary-subtle"?: any;
675
602
  "background-primary-subtle-active"?: any;
603
+ "background-primary-subtle-expanded"?: any;
676
604
  "background-primary-subtle-hover"?: any;
605
+ "background-primary-subtle-pressed"?: any;
606
+ "background-primary-subtle-pressed-hover"?: any;
677
607
  "background-primary-subtle-selected"?: any;
678
608
  "background-success"?: any;
679
609
  "background-success-prominent"?: any;
@@ -684,15 +614,9 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
684
614
  "border-danger"?: any;
685
615
  "border-danger-active"?: any;
686
616
  "border-danger-hover"?: any;
687
- "border-focus-error-inner"?: any;
688
- "border-focus-error-middle"?: any;
689
- "border-focus-error-outer"?: any;
690
617
  "border-focus-inner"?: any;
691
618
  "border-focus-middle"?: any;
692
619
  "border-focus-outer"?: any;
693
- "border-focus-success-inner"?: any;
694
- "border-focus-success-middle"?: any;
695
- "border-focus-success-outer"?: any;
696
620
  "border-neutrals"?: any;
697
621
  "border-neutrals-active"?: any;
698
622
  "border-neutrals-controls"?: any;
@@ -785,13 +709,13 @@ declare const StyledLabel: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
785
709
  readonly body: "Open Sans, sans-serif";
786
710
  };
787
711
  radii: {
712
+ readonly none: 0;
713
+ readonly half: "999em";
788
714
  readonly 25: "2px";
789
715
  readonly 50: "4px";
790
716
  readonly 75: "6px";
791
717
  readonly 100: "8px";
792
718
  readonly 200: "16px";
793
- readonly half: "999px";
794
- readonly none: "0px";
795
719
  };
796
720
  shadows: {
797
721
  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";
@@ -1086,103 +1010,63 @@ declare const StyledField: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
1086
1010
  };
1087
1011
  colors: {
1088
1012
  readonly black: any;
1089
- readonly 'blue-50': any;
1090
1013
  readonly 'blue-100': any;
1091
- readonly 'blue-150': any;
1092
1014
  readonly 'blue-200': any;
1093
- readonly 'blue-250': any;
1094
1015
  readonly 'blue-300': any;
1095
- readonly 'blue-350': any;
1096
1016
  readonly 'blue-400': any;
1097
- readonly 'blue-450': any;
1098
1017
  readonly 'blue-500': any;
1099
- readonly 'blue-550': any;
1100
1018
  readonly 'blue-600': any;
1101
- readonly 'blue-650': any;
1102
1019
  readonly 'blue-700': any;
1103
- readonly 'blue-750': any;
1104
1020
  readonly 'blue-800': any;
1105
- readonly 'blue-850': any;
1106
1021
  readonly 'blue-900': any;
1107
- readonly 'blue-950': any;
1108
- readonly 'gray-50': any;
1022
+ readonly 'blue-1000': any;
1109
1023
  readonly 'gray-100': any;
1110
- readonly 'gray-150': any;
1111
1024
  readonly 'gray-200': any;
1112
- readonly 'gray-250': any;
1113
1025
  readonly 'gray-300': any;
1114
- readonly 'gray-350': any;
1115
1026
  readonly 'gray-400': any;
1116
- readonly 'gray-450': any;
1117
1027
  readonly 'gray-500': any;
1118
- readonly 'gray-550': any;
1119
1028
  readonly 'gray-600': any;
1120
- readonly 'gray-650': any;
1121
1029
  readonly 'gray-700': any;
1122
- readonly 'gray-750': any;
1123
1030
  readonly 'gray-800': any;
1124
- readonly 'gray-850': any;
1125
1031
  readonly 'gray-900': any;
1126
- readonly 'gray-950': any;
1127
- readonly 'green-50': any;
1128
1032
  readonly 'green-100': any;
1129
- readonly 'green-150': any;
1130
1033
  readonly 'green-200': any;
1131
- readonly 'green-250': any;
1132
1034
  readonly 'green-300': any;
1133
- readonly 'green-350': any;
1134
1035
  readonly 'green-400': any;
1135
- readonly 'green-450': any;
1136
1036
  readonly 'green-500': any;
1137
- readonly 'green-550': any;
1138
1037
  readonly 'green-600': any;
1139
- readonly 'green-650': any;
1140
1038
  readonly 'green-700': any;
1141
- readonly 'green-750': any;
1142
1039
  readonly 'green-800': any;
1143
- readonly 'green-850': any;
1144
1040
  readonly 'green-900': any;
1145
- readonly 'green-950': any;
1146
- readonly 'red-50': any;
1041
+ readonly 'indigo-100': any;
1042
+ readonly 'indigo-200': any;
1043
+ readonly 'indigo-300': any;
1044
+ readonly 'indigo-400': any;
1045
+ readonly 'indigo-500': any;
1046
+ readonly 'indigo-600': any;
1047
+ readonly 'indigo-700': any;
1048
+ readonly 'indigo-800': any;
1049
+ readonly 'indigo-900': any;
1147
1050
  readonly 'red-100': any;
1148
- readonly 'red-150': any;
1149
1051
  readonly 'red-200': any;
1150
- readonly 'red-250': any;
1151
1052
  readonly 'red-300': any;
1152
- readonly 'red-350': any;
1153
1053
  readonly 'red-400': any;
1154
- readonly 'red-450': any;
1155
1054
  readonly 'red-500': any;
1156
- readonly 'red-550': any;
1157
1055
  readonly 'red-600': any;
1158
- readonly 'red-650': any;
1159
1056
  readonly 'red-700': any;
1160
- readonly 'red-750': any;
1161
1057
  readonly 'red-800': any;
1162
- readonly 'red-850': any;
1163
1058
  readonly 'red-900': any;
1164
- readonly 'red-950': any;
1165
1059
  readonly transparent: any;
1166
1060
  readonly white: any;
1167
- readonly 'yellow-50': any;
1168
1061
  readonly 'yellow-100': any;
1169
- readonly 'yellow-150': any;
1170
1062
  readonly 'yellow-200': any;
1171
- readonly 'yellow-250': any;
1172
1063
  readonly 'yellow-300': any;
1173
- readonly 'yellow-350': any;
1174
1064
  readonly 'yellow-400': any;
1175
- readonly 'yellow-450': any;
1176
1065
  readonly 'yellow-500': any;
1177
- readonly 'yellow-550': any;
1178
1066
  readonly 'yellow-600': any;
1179
- readonly 'yellow-650': any;
1180
1067
  readonly 'yellow-700': any;
1181
- readonly 'yellow-750': any;
1182
1068
  readonly 'yellow-800': any;
1183
- readonly 'yellow-850': any;
1184
1069
  readonly 'yellow-900': any;
1185
- readonly 'yellow-950': any;
1186
1070
  "background-alpha-active"?: any;
1187
1071
  "background-alpha-hover"?: any;
1188
1072
  "background-danger-prominent"?: any;
@@ -1203,19 +1087,27 @@ declare const StyledField: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
1203
1087
  "background-neutrals-inverted-subtle"?: any;
1204
1088
  "background-neutrals-page"?: any;
1205
1089
  "background-neutrals-page-subtle"?: any;
1206
- "background-neutrals-scrollbar"?: any;
1207
- "background-neutrals-scrollbar-active"?: any;
1208
- "background-neutrals-scrollbar-hover"?: any;
1090
+ "background-neutrals-scrolls"?: any;
1091
+ "background-neutrals-scrolls-expanded"?: any;
1092
+ "background-neutrals-scrolls-hover"?: any;
1093
+ "background-neutrals-scrolls-pressed"?: any;
1094
+ "background-neutrals-scrolls-pressed-hover"?: any;
1209
1095
  "background-neutrals-subtle"?: any;
1210
1096
  "background-neutrals-subtle-active"?: any;
1211
1097
  "background-neutrals-subtle-hover"?: any;
1212
1098
  "background-primary-prominent"?: any;
1213
1099
  "background-primary-prominent-active"?: any;
1100
+ "background-primary-prominent-expanded"?: any;
1214
1101
  "background-primary-prominent-hover"?: any;
1102
+ "background-primary-prominent-pressed"?: any;
1103
+ "background-primary-prominent-pressed-hover"?: any;
1215
1104
  "background-primary-prominent-selected"?: any;
1216
1105
  "background-primary-subtle"?: any;
1217
1106
  "background-primary-subtle-active"?: any;
1107
+ "background-primary-subtle-expanded"?: any;
1218
1108
  "background-primary-subtle-hover"?: any;
1109
+ "background-primary-subtle-pressed"?: any;
1110
+ "background-primary-subtle-pressed-hover"?: any;
1219
1111
  "background-primary-subtle-selected"?: any;
1220
1112
  "background-success"?: any;
1221
1113
  "background-success-prominent"?: any;
@@ -1226,15 +1118,9 @@ declare const StyledField: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
1226
1118
  "border-danger"?: any;
1227
1119
  "border-danger-active"?: any;
1228
1120
  "border-danger-hover"?: any;
1229
- "border-focus-error-inner"?: any;
1230
- "border-focus-error-middle"?: any;
1231
- "border-focus-error-outer"?: any;
1232
1121
  "border-focus-inner"?: any;
1233
1122
  "border-focus-middle"?: any;
1234
1123
  "border-focus-outer"?: any;
1235
- "border-focus-success-inner"?: any;
1236
- "border-focus-success-middle"?: any;
1237
- "border-focus-success-outer"?: any;
1238
1124
  "border-neutrals"?: any;
1239
1125
  "border-neutrals-active"?: any;
1240
1126
  "border-neutrals-controls"?: any;
@@ -1327,13 +1213,13 @@ declare const StyledField: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
1327
1213
  readonly body: "Open Sans, sans-serif";
1328
1214
  };
1329
1215
  radii: {
1216
+ readonly none: 0;
1217
+ readonly half: "999em";
1330
1218
  readonly 25: "2px";
1331
1219
  readonly 50: "4px";
1332
1220
  readonly 75: "6px";
1333
1221
  readonly 100: "8px";
1334
1222
  readonly 200: "16px";
1335
- readonly half: "999px";
1336
- readonly none: "0px";
1337
1223
  };
1338
1224
  shadows: {
1339
1225
  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";
@@ -1619,103 +1505,63 @@ declare const StyledHelper: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_de
1619
1505
  };
1620
1506
  colors: {
1621
1507
  readonly black: any;
1622
- readonly 'blue-50': any;
1623
1508
  readonly 'blue-100': any;
1624
- readonly 'blue-150': any;
1625
1509
  readonly 'blue-200': any;
1626
- readonly 'blue-250': any;
1627
1510
  readonly 'blue-300': any;
1628
- readonly 'blue-350': any;
1629
1511
  readonly 'blue-400': any;
1630
- readonly 'blue-450': any;
1631
1512
  readonly 'blue-500': any;
1632
- readonly 'blue-550': any;
1633
1513
  readonly 'blue-600': any;
1634
- readonly 'blue-650': any;
1635
1514
  readonly 'blue-700': any;
1636
- readonly 'blue-750': any;
1637
1515
  readonly 'blue-800': any;
1638
- readonly 'blue-850': any;
1639
1516
  readonly 'blue-900': any;
1640
- readonly 'blue-950': any;
1641
- readonly 'gray-50': any;
1517
+ readonly 'blue-1000': any;
1642
1518
  readonly 'gray-100': any;
1643
- readonly 'gray-150': any;
1644
1519
  readonly 'gray-200': any;
1645
- readonly 'gray-250': any;
1646
1520
  readonly 'gray-300': any;
1647
- readonly 'gray-350': any;
1648
1521
  readonly 'gray-400': any;
1649
- readonly 'gray-450': any;
1650
1522
  readonly 'gray-500': any;
1651
- readonly 'gray-550': any;
1652
1523
  readonly 'gray-600': any;
1653
- readonly 'gray-650': any;
1654
1524
  readonly 'gray-700': any;
1655
- readonly 'gray-750': any;
1656
1525
  readonly 'gray-800': any;
1657
- readonly 'gray-850': any;
1658
1526
  readonly 'gray-900': any;
1659
- readonly 'gray-950': any;
1660
- readonly 'green-50': any;
1661
1527
  readonly 'green-100': any;
1662
- readonly 'green-150': any;
1663
1528
  readonly 'green-200': any;
1664
- readonly 'green-250': any;
1665
1529
  readonly 'green-300': any;
1666
- readonly 'green-350': any;
1667
1530
  readonly 'green-400': any;
1668
- readonly 'green-450': any;
1669
1531
  readonly 'green-500': any;
1670
- readonly 'green-550': any;
1671
1532
  readonly 'green-600': any;
1672
- readonly 'green-650': any;
1673
1533
  readonly 'green-700': any;
1674
- readonly 'green-750': any;
1675
1534
  readonly 'green-800': any;
1676
- readonly 'green-850': any;
1677
1535
  readonly 'green-900': any;
1678
- readonly 'green-950': any;
1679
- readonly 'red-50': any;
1536
+ readonly 'indigo-100': any;
1537
+ readonly 'indigo-200': any;
1538
+ readonly 'indigo-300': any;
1539
+ readonly 'indigo-400': any;
1540
+ readonly 'indigo-500': any;
1541
+ readonly 'indigo-600': any;
1542
+ readonly 'indigo-700': any;
1543
+ readonly 'indigo-800': any;
1544
+ readonly 'indigo-900': any;
1680
1545
  readonly 'red-100': any;
1681
- readonly 'red-150': any;
1682
1546
  readonly 'red-200': any;
1683
- readonly 'red-250': any;
1684
1547
  readonly 'red-300': any;
1685
- readonly 'red-350': any;
1686
1548
  readonly 'red-400': any;
1687
- readonly 'red-450': any;
1688
1549
  readonly 'red-500': any;
1689
- readonly 'red-550': any;
1690
1550
  readonly 'red-600': any;
1691
- readonly 'red-650': any;
1692
1551
  readonly 'red-700': any;
1693
- readonly 'red-750': any;
1694
1552
  readonly 'red-800': any;
1695
- readonly 'red-850': any;
1696
1553
  readonly 'red-900': any;
1697
- readonly 'red-950': any;
1698
1554
  readonly transparent: any;
1699
1555
  readonly white: any;
1700
- readonly 'yellow-50': any;
1701
1556
  readonly 'yellow-100': any;
1702
- readonly 'yellow-150': any;
1703
1557
  readonly 'yellow-200': any;
1704
- readonly 'yellow-250': any;
1705
1558
  readonly 'yellow-300': any;
1706
- readonly 'yellow-350': any;
1707
1559
  readonly 'yellow-400': any;
1708
- readonly 'yellow-450': any;
1709
1560
  readonly 'yellow-500': any;
1710
- readonly 'yellow-550': any;
1711
1561
  readonly 'yellow-600': any;
1712
- readonly 'yellow-650': any;
1713
1562
  readonly 'yellow-700': any;
1714
- readonly 'yellow-750': any;
1715
1563
  readonly 'yellow-800': any;
1716
- readonly 'yellow-850': any;
1717
1564
  readonly 'yellow-900': any;
1718
- readonly 'yellow-950': any;
1719
1565
  "background-alpha-active"?: any;
1720
1566
  "background-alpha-hover"?: any;
1721
1567
  "background-danger-prominent"?: any;
@@ -1736,19 +1582,27 @@ declare const StyledHelper: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_de
1736
1582
  "background-neutrals-inverted-subtle"?: any;
1737
1583
  "background-neutrals-page"?: any;
1738
1584
  "background-neutrals-page-subtle"?: any;
1739
- "background-neutrals-scrollbar"?: any;
1740
- "background-neutrals-scrollbar-active"?: any;
1741
- "background-neutrals-scrollbar-hover"?: any;
1585
+ "background-neutrals-scrolls"?: any;
1586
+ "background-neutrals-scrolls-expanded"?: any;
1587
+ "background-neutrals-scrolls-hover"?: any;
1588
+ "background-neutrals-scrolls-pressed"?: any;
1589
+ "background-neutrals-scrolls-pressed-hover"?: any;
1742
1590
  "background-neutrals-subtle"?: any;
1743
1591
  "background-neutrals-subtle-active"?: any;
1744
1592
  "background-neutrals-subtle-hover"?: any;
1745
1593
  "background-primary-prominent"?: any;
1746
1594
  "background-primary-prominent-active"?: any;
1595
+ "background-primary-prominent-expanded"?: any;
1747
1596
  "background-primary-prominent-hover"?: any;
1597
+ "background-primary-prominent-pressed"?: any;
1598
+ "background-primary-prominent-pressed-hover"?: any;
1748
1599
  "background-primary-prominent-selected"?: any;
1749
1600
  "background-primary-subtle"?: any;
1750
1601
  "background-primary-subtle-active"?: any;
1602
+ "background-primary-subtle-expanded"?: any;
1751
1603
  "background-primary-subtle-hover"?: any;
1604
+ "background-primary-subtle-pressed"?: any;
1605
+ "background-primary-subtle-pressed-hover"?: any;
1752
1606
  "background-primary-subtle-selected"?: any;
1753
1607
  "background-success"?: any;
1754
1608
  "background-success-prominent"?: any;
@@ -1759,15 +1613,9 @@ declare const StyledHelper: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_de
1759
1613
  "border-danger"?: any;
1760
1614
  "border-danger-active"?: any;
1761
1615
  "border-danger-hover"?: any;
1762
- "border-focus-error-inner"?: any;
1763
- "border-focus-error-middle"?: any;
1764
- "border-focus-error-outer"?: any;
1765
1616
  "border-focus-inner"?: any;
1766
1617
  "border-focus-middle"?: any;
1767
1618
  "border-focus-outer"?: any;
1768
- "border-focus-success-inner"?: any;
1769
- "border-focus-success-middle"?: any;
1770
- "border-focus-success-outer"?: any;
1771
1619
  "border-neutrals"?: any;
1772
1620
  "border-neutrals-active"?: any;
1773
1621
  "border-neutrals-controls"?: any;
@@ -1860,13 +1708,13 @@ declare const StyledHelper: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_de
1860
1708
  readonly body: "Open Sans, sans-serif";
1861
1709
  };
1862
1710
  radii: {
1711
+ readonly none: 0;
1712
+ readonly half: "999em";
1863
1713
  readonly 25: "2px";
1864
1714
  readonly 50: "4px";
1865
1715
  readonly 75: "6px";
1866
1716
  readonly 100: "8px";
1867
1717
  readonly 200: "16px";
1868
- readonly half: "999px";
1869
- readonly none: "0px";
1870
1718
  };
1871
1719
  shadows: {
1872
1720
  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";
@@ -2156,103 +2004,63 @@ declare const StyledMessage: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
2156
2004
  };
2157
2005
  colors: {
2158
2006
  readonly black: any;
2159
- readonly 'blue-50': any;
2160
2007
  readonly 'blue-100': any;
2161
- readonly 'blue-150': any;
2162
2008
  readonly 'blue-200': any;
2163
- readonly 'blue-250': any;
2164
2009
  readonly 'blue-300': any;
2165
- readonly 'blue-350': any;
2166
2010
  readonly 'blue-400': any;
2167
- readonly 'blue-450': any;
2168
2011
  readonly 'blue-500': any;
2169
- readonly 'blue-550': any;
2170
2012
  readonly 'blue-600': any;
2171
- readonly 'blue-650': any;
2172
2013
  readonly 'blue-700': any;
2173
- readonly 'blue-750': any;
2174
2014
  readonly 'blue-800': any;
2175
- readonly 'blue-850': any;
2176
2015
  readonly 'blue-900': any;
2177
- readonly 'blue-950': any;
2178
- readonly 'gray-50': any;
2016
+ readonly 'blue-1000': any;
2179
2017
  readonly 'gray-100': any;
2180
- readonly 'gray-150': any;
2181
2018
  readonly 'gray-200': any;
2182
- readonly 'gray-250': any;
2183
2019
  readonly 'gray-300': any;
2184
- readonly 'gray-350': any;
2185
2020
  readonly 'gray-400': any;
2186
- readonly 'gray-450': any;
2187
2021
  readonly 'gray-500': any;
2188
- readonly 'gray-550': any;
2189
2022
  readonly 'gray-600': any;
2190
- readonly 'gray-650': any;
2191
2023
  readonly 'gray-700': any;
2192
- readonly 'gray-750': any;
2193
2024
  readonly 'gray-800': any;
2194
- readonly 'gray-850': any;
2195
2025
  readonly 'gray-900': any;
2196
- readonly 'gray-950': any;
2197
- readonly 'green-50': any;
2198
2026
  readonly 'green-100': any;
2199
- readonly 'green-150': any;
2200
2027
  readonly 'green-200': any;
2201
- readonly 'green-250': any;
2202
2028
  readonly 'green-300': any;
2203
- readonly 'green-350': any;
2204
2029
  readonly 'green-400': any;
2205
- readonly 'green-450': any;
2206
2030
  readonly 'green-500': any;
2207
- readonly 'green-550': any;
2208
2031
  readonly 'green-600': any;
2209
- readonly 'green-650': any;
2210
2032
  readonly 'green-700': any;
2211
- readonly 'green-750': any;
2212
2033
  readonly 'green-800': any;
2213
- readonly 'green-850': any;
2214
2034
  readonly 'green-900': any;
2215
- readonly 'green-950': any;
2216
- readonly 'red-50': any;
2035
+ readonly 'indigo-100': any;
2036
+ readonly 'indigo-200': any;
2037
+ readonly 'indigo-300': any;
2038
+ readonly 'indigo-400': any;
2039
+ readonly 'indigo-500': any;
2040
+ readonly 'indigo-600': any;
2041
+ readonly 'indigo-700': any;
2042
+ readonly 'indigo-800': any;
2043
+ readonly 'indigo-900': any;
2217
2044
  readonly 'red-100': any;
2218
- readonly 'red-150': any;
2219
2045
  readonly 'red-200': any;
2220
- readonly 'red-250': any;
2221
2046
  readonly 'red-300': any;
2222
- readonly 'red-350': any;
2223
2047
  readonly 'red-400': any;
2224
- readonly 'red-450': any;
2225
2048
  readonly 'red-500': any;
2226
- readonly 'red-550': any;
2227
2049
  readonly 'red-600': any;
2228
- readonly 'red-650': any;
2229
2050
  readonly 'red-700': any;
2230
- readonly 'red-750': any;
2231
2051
  readonly 'red-800': any;
2232
- readonly 'red-850': any;
2233
2052
  readonly 'red-900': any;
2234
- readonly 'red-950': any;
2235
2053
  readonly transparent: any;
2236
2054
  readonly white: any;
2237
- readonly 'yellow-50': any;
2238
2055
  readonly 'yellow-100': any;
2239
- readonly 'yellow-150': any;
2240
2056
  readonly 'yellow-200': any;
2241
- readonly 'yellow-250': any;
2242
2057
  readonly 'yellow-300': any;
2243
- readonly 'yellow-350': any;
2244
2058
  readonly 'yellow-400': any;
2245
- readonly 'yellow-450': any;
2246
2059
  readonly 'yellow-500': any;
2247
- readonly 'yellow-550': any;
2248
2060
  readonly 'yellow-600': any;
2249
- readonly 'yellow-650': any;
2250
2061
  readonly 'yellow-700': any;
2251
- readonly 'yellow-750': any;
2252
2062
  readonly 'yellow-800': any;
2253
- readonly 'yellow-850': any;
2254
2063
  readonly 'yellow-900': any;
2255
- readonly 'yellow-950': any;
2256
2064
  "background-alpha-active"?: any;
2257
2065
  "background-alpha-hover"?: any;
2258
2066
  "background-danger-prominent"?: any;
@@ -2273,19 +2081,27 @@ declare const StyledMessage: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
2273
2081
  "background-neutrals-inverted-subtle"?: any;
2274
2082
  "background-neutrals-page"?: any;
2275
2083
  "background-neutrals-page-subtle"?: any;
2276
- "background-neutrals-scrollbar"?: any;
2277
- "background-neutrals-scrollbar-active"?: any;
2278
- "background-neutrals-scrollbar-hover"?: any;
2084
+ "background-neutrals-scrolls"?: any;
2085
+ "background-neutrals-scrolls-expanded"?: any;
2086
+ "background-neutrals-scrolls-hover"?: any;
2087
+ "background-neutrals-scrolls-pressed"?: any;
2088
+ "background-neutrals-scrolls-pressed-hover"?: any;
2279
2089
  "background-neutrals-subtle"?: any;
2280
2090
  "background-neutrals-subtle-active"?: any;
2281
2091
  "background-neutrals-subtle-hover"?: any;
2282
2092
  "background-primary-prominent"?: any;
2283
2093
  "background-primary-prominent-active"?: any;
2094
+ "background-primary-prominent-expanded"?: any;
2284
2095
  "background-primary-prominent-hover"?: any;
2096
+ "background-primary-prominent-pressed"?: any;
2097
+ "background-primary-prominent-pressed-hover"?: any;
2285
2098
  "background-primary-prominent-selected"?: any;
2286
2099
  "background-primary-subtle"?: any;
2287
2100
  "background-primary-subtle-active"?: any;
2101
+ "background-primary-subtle-expanded"?: any;
2288
2102
  "background-primary-subtle-hover"?: any;
2103
+ "background-primary-subtle-pressed"?: any;
2104
+ "background-primary-subtle-pressed-hover"?: any;
2289
2105
  "background-primary-subtle-selected"?: any;
2290
2106
  "background-success"?: any;
2291
2107
  "background-success-prominent"?: any;
@@ -2296,15 +2112,9 @@ declare const StyledMessage: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
2296
2112
  "border-danger"?: any;
2297
2113
  "border-danger-active"?: any;
2298
2114
  "border-danger-hover"?: any;
2299
- "border-focus-error-inner"?: any;
2300
- "border-focus-error-middle"?: any;
2301
- "border-focus-error-outer"?: any;
2302
2115
  "border-focus-inner"?: any;
2303
2116
  "border-focus-middle"?: any;
2304
2117
  "border-focus-outer"?: any;
2305
- "border-focus-success-inner"?: any;
2306
- "border-focus-success-middle"?: any;
2307
- "border-focus-success-outer"?: any;
2308
2118
  "border-neutrals"?: any;
2309
2119
  "border-neutrals-active"?: any;
2310
2120
  "border-neutrals-controls"?: any;
@@ -2397,13 +2207,13 @@ declare const StyledMessage: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
2397
2207
  readonly body: "Open Sans, sans-serif";
2398
2208
  };
2399
2209
  radii: {
2210
+ readonly none: 0;
2211
+ readonly half: "999em";
2400
2212
  readonly 25: "2px";
2401
2213
  readonly 50: "4px";
2402
2214
  readonly 75: "6px";
2403
2215
  readonly 100: "8px";
2404
2216
  readonly 200: "16px";
2405
- readonly half: "999px";
2406
- readonly none: "0px";
2407
2217
  };
2408
2218
  shadows: {
2409
2219
  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";
@@ -2695,103 +2505,63 @@ declare const StyledDescription: react.ForwardRefExoticComponent<Omit<Omit<_miro
2695
2505
  };
2696
2506
  colors: {
2697
2507
  readonly black: any;
2698
- readonly 'blue-50': any;
2699
2508
  readonly 'blue-100': any;
2700
- readonly 'blue-150': any;
2701
2509
  readonly 'blue-200': any;
2702
- readonly 'blue-250': any;
2703
2510
  readonly 'blue-300': any;
2704
- readonly 'blue-350': any;
2705
2511
  readonly 'blue-400': any;
2706
- readonly 'blue-450': any;
2707
2512
  readonly 'blue-500': any;
2708
- readonly 'blue-550': any;
2709
2513
  readonly 'blue-600': any;
2710
- readonly 'blue-650': any;
2711
2514
  readonly 'blue-700': any;
2712
- readonly 'blue-750': any;
2713
2515
  readonly 'blue-800': any;
2714
- readonly 'blue-850': any;
2715
2516
  readonly 'blue-900': any;
2716
- readonly 'blue-950': any;
2717
- readonly 'gray-50': any;
2517
+ readonly 'blue-1000': any;
2718
2518
  readonly 'gray-100': any;
2719
- readonly 'gray-150': any;
2720
2519
  readonly 'gray-200': any;
2721
- readonly 'gray-250': any;
2722
2520
  readonly 'gray-300': any;
2723
- readonly 'gray-350': any;
2724
2521
  readonly 'gray-400': any;
2725
- readonly 'gray-450': any;
2726
2522
  readonly 'gray-500': any;
2727
- readonly 'gray-550': any;
2728
2523
  readonly 'gray-600': any;
2729
- readonly 'gray-650': any;
2730
2524
  readonly 'gray-700': any;
2731
- readonly 'gray-750': any;
2732
2525
  readonly 'gray-800': any;
2733
- readonly 'gray-850': any;
2734
2526
  readonly 'gray-900': any;
2735
- readonly 'gray-950': any;
2736
- readonly 'green-50': any;
2737
2527
  readonly 'green-100': any;
2738
- readonly 'green-150': any;
2739
2528
  readonly 'green-200': any;
2740
- readonly 'green-250': any;
2741
2529
  readonly 'green-300': any;
2742
- readonly 'green-350': any;
2743
2530
  readonly 'green-400': any;
2744
- readonly 'green-450': any;
2745
2531
  readonly 'green-500': any;
2746
- readonly 'green-550': any;
2747
2532
  readonly 'green-600': any;
2748
- readonly 'green-650': any;
2749
2533
  readonly 'green-700': any;
2750
- readonly 'green-750': any;
2751
2534
  readonly 'green-800': any;
2752
- readonly 'green-850': any;
2753
2535
  readonly 'green-900': any;
2754
- readonly 'green-950': any;
2755
- readonly 'red-50': any;
2536
+ readonly 'indigo-100': any;
2537
+ readonly 'indigo-200': any;
2538
+ readonly 'indigo-300': any;
2539
+ readonly 'indigo-400': any;
2540
+ readonly 'indigo-500': any;
2541
+ readonly 'indigo-600': any;
2542
+ readonly 'indigo-700': any;
2543
+ readonly 'indigo-800': any;
2544
+ readonly 'indigo-900': any;
2756
2545
  readonly 'red-100': any;
2757
- readonly 'red-150': any;
2758
2546
  readonly 'red-200': any;
2759
- readonly 'red-250': any;
2760
2547
  readonly 'red-300': any;
2761
- readonly 'red-350': any;
2762
2548
  readonly 'red-400': any;
2763
- readonly 'red-450': any;
2764
2549
  readonly 'red-500': any;
2765
- readonly 'red-550': any;
2766
2550
  readonly 'red-600': any;
2767
- readonly 'red-650': any;
2768
2551
  readonly 'red-700': any;
2769
- readonly 'red-750': any;
2770
2552
  readonly 'red-800': any;
2771
- readonly 'red-850': any;
2772
2553
  readonly 'red-900': any;
2773
- readonly 'red-950': any;
2774
2554
  readonly transparent: any;
2775
2555
  readonly white: any;
2776
- readonly 'yellow-50': any;
2777
2556
  readonly 'yellow-100': any;
2778
- readonly 'yellow-150': any;
2779
2557
  readonly 'yellow-200': any;
2780
- readonly 'yellow-250': any;
2781
2558
  readonly 'yellow-300': any;
2782
- readonly 'yellow-350': any;
2783
2559
  readonly 'yellow-400': any;
2784
- readonly 'yellow-450': any;
2785
2560
  readonly 'yellow-500': any;
2786
- readonly 'yellow-550': any;
2787
2561
  readonly 'yellow-600': any;
2788
- readonly 'yellow-650': any;
2789
2562
  readonly 'yellow-700': any;
2790
- readonly 'yellow-750': any;
2791
2563
  readonly 'yellow-800': any;
2792
- readonly 'yellow-850': any;
2793
2564
  readonly 'yellow-900': any;
2794
- readonly 'yellow-950': any;
2795
2565
  "background-alpha-active"?: any;
2796
2566
  "background-alpha-hover"?: any;
2797
2567
  "background-danger-prominent"?: any;
@@ -2812,19 +2582,27 @@ declare const StyledDescription: react.ForwardRefExoticComponent<Omit<Omit<_miro
2812
2582
  "background-neutrals-inverted-subtle"?: any;
2813
2583
  "background-neutrals-page"?: any;
2814
2584
  "background-neutrals-page-subtle"?: any;
2815
- "background-neutrals-scrollbar"?: any;
2816
- "background-neutrals-scrollbar-active"?: any;
2817
- "background-neutrals-scrollbar-hover"?: any;
2585
+ "background-neutrals-scrolls"?: any;
2586
+ "background-neutrals-scrolls-expanded"?: any;
2587
+ "background-neutrals-scrolls-hover"?: any;
2588
+ "background-neutrals-scrolls-pressed"?: any;
2589
+ "background-neutrals-scrolls-pressed-hover"?: any;
2818
2590
  "background-neutrals-subtle"?: any;
2819
2591
  "background-neutrals-subtle-active"?: any;
2820
2592
  "background-neutrals-subtle-hover"?: any;
2821
2593
  "background-primary-prominent"?: any;
2822
2594
  "background-primary-prominent-active"?: any;
2595
+ "background-primary-prominent-expanded"?: any;
2823
2596
  "background-primary-prominent-hover"?: any;
2597
+ "background-primary-prominent-pressed"?: any;
2598
+ "background-primary-prominent-pressed-hover"?: any;
2824
2599
  "background-primary-prominent-selected"?: any;
2825
2600
  "background-primary-subtle"?: any;
2826
2601
  "background-primary-subtle-active"?: any;
2602
+ "background-primary-subtle-expanded"?: any;
2827
2603
  "background-primary-subtle-hover"?: any;
2604
+ "background-primary-subtle-pressed"?: any;
2605
+ "background-primary-subtle-pressed-hover"?: any;
2828
2606
  "background-primary-subtle-selected"?: any;
2829
2607
  "background-success"?: any;
2830
2608
  "background-success-prominent"?: any;
@@ -2835,15 +2613,9 @@ declare const StyledDescription: react.ForwardRefExoticComponent<Omit<Omit<_miro
2835
2613
  "border-danger"?: any;
2836
2614
  "border-danger-active"?: any;
2837
2615
  "border-danger-hover"?: any;
2838
- "border-focus-error-inner"?: any;
2839
- "border-focus-error-middle"?: any;
2840
- "border-focus-error-outer"?: any;
2841
2616
  "border-focus-inner"?: any;
2842
2617
  "border-focus-middle"?: any;
2843
2618
  "border-focus-outer"?: any;
2844
- "border-focus-success-inner"?: any;
2845
- "border-focus-success-middle"?: any;
2846
- "border-focus-success-outer"?: any;
2847
2619
  "border-neutrals"?: any;
2848
2620
  "border-neutrals-active"?: any;
2849
2621
  "border-neutrals-controls"?: any;
@@ -2936,13 +2708,13 @@ declare const StyledDescription: react.ForwardRefExoticComponent<Omit<Omit<_miro
2936
2708
  readonly body: "Open Sans, sans-serif";
2937
2709
  };
2938
2710
  radii: {
2711
+ readonly none: 0;
2712
+ readonly half: "999em";
2939
2713
  readonly 25: "2px";
2940
2714
  readonly 50: "4px";
2941
2715
  readonly 75: "6px";
2942
2716
  readonly 100: "8px";
2943
2717
  readonly 200: "16px";
2944
- readonly half: "999px";
2945
- readonly none: "0px";
2946
2718
  };
2947
2719
  shadows: {
2948
2720
  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-form",
3
- "version": "0.1.1-colors.0",
3
+ "version": "0.1.1",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -26,11 +26,11 @@
26
26
  "react": "^16.14 || ^17 || ^18"
27
27
  },
28
28
  "dependencies": {
29
- "@mirohq/design-system-base-form": "^0.1.1-colors.0",
30
29
  "@mirohq/design-system-primitive": "^1.1.2",
30
+ "@mirohq/design-system-base-form": "^0.1.0",
31
31
  "@mirohq/design-system-use-id": "^0.1.1",
32
- "@mirohq/design-system-stitches": "^2.6.1-colors.0",
33
- "@mirohq/design-system-utils": "^0.15.0"
32
+ "@mirohq/design-system-utils": "^0.15.0",
33
+ "@mirohq/design-system-stitches": "^2.6.0"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "rollup -c ../../../rollup.config.js",