@artsy/palette 45.14.0-canary.1497.33070.0 → 45.14.0-canary.1497.33075.0

package/dist/esm/elements/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["React","useState","useRef","useEffect","Box","BoxProps","splitBoxProps","styled","isPropValid","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","mode","setMode","imageRef","_imageRef$current","current","complete","_splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","_objectSpread","ref","loading","undefined","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","_extends","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","Img","as","top","left","display","displayName","withConfig","shouldForwardProp","prop","componentId"],"sources":["../../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport styled from \"styled-components\"\nimport isPropValid from \"@emotion/is-prop-valid\"\n\nexport interface ImageProps\n  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n    BoxProps {\n  /** Flag for if image should be lazy loaded */\n  lazyLoad?: boolean\n  /** Flag indicating that right clicks should be prevented */\n  preventRightClick?: boolean\n  /** Currently, this is used by clients for BlurHash data,\n      decoded and represented as a data URL */\n  placeHolderURL?: string\n}\n\nexport const Image: React.FC<ImageProps> = ({\n  className,\n  height,\n  lazyLoad = false,\n  onLoad,\n  placeHolderURL,\n  preventRightClick = false,\n  style,\n  width,\n  ...rest\n}) => {\n  const [mode, setMode] = useState<\"Pending\" | \"Ready\">(\"Pending\")\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  useEffect(() => {\n    if (imageRef.current?.complete) {\n      setMode(\"Ready\")\n    }\n  }, [])\n\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  // Common image props\n  const commonImgProps = {\n    ref: imageRef as any,\n    loading: lazyLoad ? (\"lazy\" as const) : undefined,\n    onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setMode(\"Ready\")\n      onLoad?.(event)\n    },\n    onContextMenu: preventRightClick ? (e) => e.preventDefault() : undefined,\n    ...imageProps,\n  }\n\n  // Common lazy loading style\n  const lazyLoadStyle = lazyLoad\n    ? {\n        transition: \"opacity 0.2s ease-in-out\",\n        opacity: mode === \"Ready\" ? 1 : 0,\n      }\n    : {}\n\n  // If there's a placeholder URL or lazy loading is enabled, use a wrapper container\n  if (placeHolderURL || lazyLoad) {\n    return (\n      <Box\n        className={className}\n        position=\"relative\"\n        width={width || \"100%\"}\n        height={height || \"100%\"}\n        bg={lazyLoad && !placeHolderURL ? \"mono10\" : undefined}\n        {...boxProps}\n        style={{\n          ...(placeHolderURL && {\n            backgroundImage: `url(${placeHolderURL})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n          }),\n        }}\n      >\n        <Img\n          as=\"img\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          width=\"100%\"\n          height=\"100%\"\n          display=\"block\"\n          style={{ ...lazyLoadStyle, ...style }}\n          {...commonImgProps}\n        />\n      </Box>\n    )\n  }\n\n  // If no placeholder and no lazy loading, render a direct img element\n  return (\n    <Img\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      as=\"img\"\n      className={className}\n      width={width}\n      height={height}\n      display=\"block\"\n      style={style}\n      {...boxProps}\n      {...commonImgProps}\n    />\n  )\n}\n\n// Can be removed when styled-components is updated in Force\n// https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/is-prop-valid/CHANGELOG.md#patch-changes\nconst Img = styled(Box).withConfig({\n  shouldForwardProp: (prop) => isPropValid(prop) || prop === \"fetchPriority\",\n})``\n"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["React","useState","useRef","useEffect","Box","splitBoxProps","styled","isPropValid","Image","_ref","className","height","_ref$lazyLoad","lazyLoad","onLoad","placeHolderURL","_ref$preventRightClic","preventRightClick","style","width","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","mode","setMode","imageRef","_imageRef$current","current","complete","_splitBoxProps","_splitBoxProps2","boxProps","imageProps","commonImgProps","_objectSpread","ref","loading","undefined","event","onContextMenu","e","preventDefault","lazyLoadStyle","transition","opacity","createElement","_extends","position","bg","backgroundImage","concat","backgroundSize","backgroundPosition","Img","as","top","left","display","displayName","withConfig","shouldForwardProp","prop","componentId"],"sources":["../../../../src/elements/Image/Image.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport styled from \"styled-components\"\nimport isPropValid from \"@emotion/is-prop-valid\"\n\nexport interface ImageProps\n  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\">,\n    BoxProps {\n  /** Flag for if image should be lazy loaded */\n  lazyLoad?: boolean\n  /** Flag indicating that right clicks should be prevented */\n  preventRightClick?: boolean\n  /** Currently, this is used by clients for BlurHash data,\n      decoded and represented as a data URL */\n  placeHolderURL?: string\n}\n\nexport const Image: React.FC<ImageProps> = ({\n  className,\n  height,\n  lazyLoad = false,\n  onLoad,\n  placeHolderURL,\n  preventRightClick = false,\n  style,\n  width,\n  ...rest\n}) => {\n  const [mode, setMode] = useState<\"Pending\" | \"Ready\">(\"Pending\")\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  useEffect(() => {\n    if (imageRef.current?.complete) {\n      setMode(\"Ready\")\n    }\n  }, [])\n\n  const [boxProps, imageProps] = splitBoxProps(rest)\n\n  // Common image props\n  const commonImgProps = {\n    ref: imageRef as any,\n    loading: lazyLoad ? (\"lazy\" as const) : undefined,\n    onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      setMode(\"Ready\")\n      onLoad?.(event)\n    },\n    onContextMenu: preventRightClick ? (e) => e.preventDefault() : undefined,\n    ...imageProps,\n  }\n\n  // Common lazy loading style\n  const lazyLoadStyle = lazyLoad\n    ? {\n        transition: \"opacity 0.2s ease-in-out\",\n        opacity: mode === \"Ready\" ? 1 : 0,\n      }\n    : {}\n\n  // If there's a placeholder URL or lazy loading is enabled, use a wrapper container\n  if (placeHolderURL || lazyLoad) {\n    return (\n      <Box\n        className={className}\n        position=\"relative\"\n        width={width || \"100%\"}\n        height={height || \"100%\"}\n        bg={lazyLoad && !placeHolderURL ? \"mono10\" : undefined}\n        {...boxProps}\n        style={{\n          ...(placeHolderURL && {\n            backgroundImage: `url(${placeHolderURL})`,\n            backgroundSize: \"cover\",\n            backgroundPosition: \"center\",\n          }),\n        }}\n      >\n        <Img\n          as=\"img\"\n          position=\"absolute\"\n          top={0}\n          left={0}\n          width=\"100%\"\n          height=\"100%\"\n          display=\"block\"\n          style={{ ...lazyLoadStyle, ...style }}\n          {...commonImgProps}\n        />\n      </Box>\n    )\n  }\n\n  // If no placeholder and no lazy loading, render a direct img element\n  return (\n    <Img\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      as=\"img\"\n      className={className}\n      width={width}\n      height={height}\n      display=\"block\"\n      style={style}\n      {...boxProps}\n      {...commonImgProps}\n    />\n  )\n}\n\n// Can be removed when styled-components is updated in Force\n// https://github.com/emotion-js/emotion/blob/b882bcba85132554992e4bd49e94c95939bbf810/packages/is-prop-valid/CHANGELOG.md#patch-changes\nconst Img = styled(Box).withConfig({\n  shouldForwardProp: (prop) => isPropValid(prop) || prop === \"fetchPriority\",\n})``\n"],"mappings":"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"}

package/dist/esm/elements/Input/Input.js

@@ -13,7 +13,7 @@ import React, { useCallback } from "react";
 import styled, { css } from "styled-components";
 import { height as systemHeight } from "styled-system";
 import { RequiredField } from "../../shared/RequiredField";
-import { Box, BoxProps, splitBoxProps } from "../Box";
+import { Box, splitBoxProps } from "../Box";
 import { Text } from "../Text";
 import { Tooltip } from "../Tooltip";
 import { INPUT_STATES } from "./tokens";

package/dist/esm/elements/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["themeGet","React","useCallback","styled","css","height","systemHeight","RequiredField","Box","BoxProps","splitBoxProps","Text","Tooltip","INPUT_STATES","FORM_ELEMENT_TRANSITION","Input","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","labelOffset","showCounter","_ref$defaultValue","defaultValue","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_React$useState","useState","value","_React$useState2","setValue","handleChange","event","nextValue","currentTarget","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledInput","name","undefined","placeholder","StyledLabel","htmlFor","maxLength","display","mx","flex","String","length","ml","displayName","input","withConfig","componentId","props","default","active","completed","label","_ref2"],"sources":["../../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      defaultValue = \"\",\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [value, setValue] = React.useState(inputProps.value || defaultValue)\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.(event)\n      },\n      [onChange]\n    )\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            defaultValue={defaultValue || undefined}\n            onChange={handleChange}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n                  {String(value).length}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 1;\n        }\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["themeGet","React","useCallback","styled","css","height","systemHeight","RequiredField","Box","splitBoxProps","Text","Tooltip","INPUT_STATES","FORM_ELEMENT_TRANSITION","Input","forwardRef","_ref","ref","children","className","description","disabled","error","required","focus","hover","title","labelOffset","showCounter","_ref$defaultValue","defaultValue","onChange","rest","_objectWithoutProperties","_excluded","_splitBoxProps","_splitBoxProps2","_slicedToArray","boxProps","inputProps","_React$useState","useState","value","_React$useState2","setValue","handleChange","event","nextValue","currentTarget","createElement","_extends","width","pointer","content","placement","variant","color","textAlign","position","mt","StyledInput","name","undefined","placeholder","StyledLabel","htmlFor","maxLength","display","mx","flex","String","length","ml","displayName","input","withConfig","componentId","props","default","active","completed","label","_ref2"],"sources":["../../../../src/elements/Input/Input.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useCallback } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { height as systemHeight } from \"styled-system\"\nimport { RequiredField } from \"../../shared/RequiredField\"\nimport { Box, BoxProps, splitBoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Tooltip } from \"../Tooltip\"\nimport { INPUT_STATES } from \"./tokens\"\nimport { FORM_ELEMENT_TRANSITION } from \"../../helpers\"\n\nexport interface InputProps\n  extends BoxProps,\n    Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"size\" | \"width\" | \"height\" | \"capture\"\n    > {\n  active?: boolean\n  description?: string\n  disabled?: boolean\n  error?: string | boolean\n  focus?: boolean\n  hover?: boolean\n  required?: boolean\n  title?: string\n  labelOffset?: number\n  showCounter?: boolean\n}\n\n/** Input component */\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      children,\n      className,\n      description,\n      disabled,\n      error,\n      required,\n      focus,\n      hover,\n      title,\n      height,\n      labelOffset,\n      showCounter,\n      defaultValue = \"\",\n      onChange,\n      ...rest\n    },\n    ref\n  ) => {\n    const [boxProps, inputProps] = splitBoxProps(rest)\n    const [value, setValue] = React.useState(inputProps.value || defaultValue)\n\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const nextValue = event.currentTarget.value\n        setValue(nextValue)\n        onChange?.(event)\n      },\n      [onChange]\n    )\n\n    return (\n      <Box width=\"100%\" className={className} {...boxProps}>\n        {!!description && (\n          <Tooltip pointer content={description} placement=\"top-end\">\n            <Text variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n              <u>What is this?</u>\n            </Text>\n          </Tooltip>\n        )}\n\n        <Box position=\"relative\" mt={!!title && !description ? 1 : 0}>\n          <StyledInput\n            ref={ref as any}\n            disabled={disabled}\n            focus={focus}\n            hover={hover}\n            error={!!error}\n            required={required}\n            height={(height ?? 50) as any}\n            name={inputProps.name}\n            title={title}\n            labelOffset={labelOffset}\n            defaultValue={defaultValue || undefined}\n            onChange={handleChange}\n            placeholder={inputProps.placeholder || \" \"}\n            {...inputProps}\n          />\n\n          {!!title && (\n            <StyledLabel labelOffset={labelOffset} htmlFor={inputProps.name}>\n              {title}\n              <span />\n            </StyledLabel>\n          )}\n\n          {children}\n        </Box>\n\n        {(required || (inputProps?.maxLength && showCounter)) &&\n          !(error && typeof error === \"string\") && (\n            <Box display=\"flex\" mt={0.5} mx={1}>\n              {required && <RequiredField disabled={disabled} flex={1} />}\n\n              {!!inputProps?.maxLength && showCounter && (\n                <Text flex={1} variant=\"xs\" color=\"mono60\" textAlign=\"right\">\n                  {String(value).length}/{inputProps.maxLength}\n                </Text>\n              )}\n            </Box>\n          )}\n\n        {error && typeof error === \"string\" && (\n          <Text variant=\"xs\" mt={0.5} ml={1} color=\"red100\">\n            {error}\n          </Text>\n        )}\n      </Box>\n    )\n  }\n)\n\nInput.displayName = \"Input\"\n\ntype StyledInputProps = Pick<\n  InputProps,\n  \"disabled\" | \"error\" | \"hover\" | \"focus\" | \"active\" | \"title\" | \"labelOffset\"\n>\n\nconst StyledInput = styled.input<StyledInputProps>`\n  width: 100%;\n  padding: 0 ${themeGet(\"space.1\")};\n  appearance: none;\n  line-height: 1;\n  border: 1px solid;\n  border-radius: 3px;\n  transition: border-color 0.25s, color 0.25s;\n  font-family: ${themeGet(\"fonts.sans\")};\n  ${systemHeight};\n\n  ::placeholder {\n    transition: color 0.25s, opacity 0.25s;\n  }\n\n  ${(props) => {\n    return css`\n      ${INPUT_STATES.default}\n      ${props.hover && INPUT_STATES.hover}\n      ${props.focus && INPUT_STATES.focus}\n      ${props.active && INPUT_STATES.active}\n      ${props.disabled && INPUT_STATES.disabled}\n      ${props.error && INPUT_STATES.error}\n\n      &:hover {\n        ${INPUT_STATES.hover}\n      }\n\n      &:not(:placeholder-shown) {\n        ${INPUT_STATES.completed}\n        ${props.error && INPUT_STATES.error}\n      }\n\n      &:focus {\n        outline: none;\n        ${INPUT_STATES.focus}\n\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 1;\n        }\n\n        :not(:placeholder-shown) {\n          ${INPUT_STATES.active}\n          ${props.error && INPUT_STATES.error}\n        }\n      }\n\n      &:disabled {\n        cursor: default;\n        ${INPUT_STATES.disabled}\n      }\n\n      ${props.title &&\n      css`\n        &::placeholder {\n          transition: ${FORM_ELEMENT_TRANSITION};\n          opacity: 0;\n        }\n      `}\n    `\n  }};\n`\n\nconst StyledLabel = styled.label<StyledInputProps>`\n  position: absolute;\n  top: 50%;\n  left: 5px;\n  padding: 0 5px;\n  background-color: transparent;\n  transform: translateY(-50%);\n  transition: ${FORM_ELEMENT_TRANSITION};\n  transition-property: color, transform, padding, font-size;\n  font-family: ${themeGet(\"fonts.sans\")};\n  pointer-events: none;\n\n  & > span {\n    background-color: ${themeGet(\"colors.mono0\")};\n    height: 100%;\n    width: 100%;\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    transition: ${FORM_ELEMENT_TRANSITION};\n    transition-property: height, top;\n    transition-delay: 0.1s;\n  }\n\n  ${({ labelOffset }) =>\n    !!labelOffset &&\n    css`\n      padding-left: ${labelOffset - 5}px;\n    `}\n`\n"],"mappings":"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"}

package/dist/esm/elements/Input/tokens.js

@@ -1,6 +1,5 @@
 import { themeGet } from "@styled-system/theme-get";
 import { css } from "styled-components";
-import { State } from "./types";
 export var INPUT_STATES = {
   default: css(["background-color:", ";font-size:", ";color:", ";border-color:", ";::placeholder{color:", ";}& + label{color:", ";font-size:", ";}"], themeGet("colors.mono0"), themeGet("textVariants.sm-display.fontSize"), themeGet("colors.mono100"), themeGet("colors.mono30"), themeGet("colors.mono60"), themeGet("colors.mono60"), themeGet("textVariants.sm-display.fontSize")),
   focus: css(["color:", ";border-color:", ";::placeholder{color:", ";opacity:1;}& + label{color:", ";transform:translateY(-150%);font-size:", ";padding:0 5px;& > span{height:2px;top:50%;}}"], themeGet("colors.mono100"), themeGet("colors.blue100"), themeGet("colors.mono60"), themeGet("colors.blue100"), themeGet("textVariants.xs.fontSize")),

package/dist/esm/elements/Input/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":["themeGet","css","State","INPUT_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    background-color: ${themeGet(\"colors.mono0\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.blue60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.mono30\")};\n    /* For iOS */\n    opacity: 1;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AACvC,SAASC,KAAK;AAEd,OAAO,IAAMC,YAAgC,GAAG;EAC9CC,OAAO,EAAEH,GAAG,wIACUD,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDK,KAAK,EAAEJ,GAAG,oLACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,eAAe,CAAC,EAKzBA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDM,KAAK,EAAEL,GAAG,oFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDO,MAAM,EAAEN,GAAG,0KACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDQ,SAAS,EAAEP,GAAG,gJACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDS,QAAQ,EAAER,GAAG,gSACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAGdA,QAAQ,CAAC,eAAe,CAAC,EAKzCA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDU,KAAK,EAAET,GAAG,qIACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AASvD,CAAC"}
+{"version":3,"file":"tokens.js","names":["themeGet","css","INPUT_STATES","default","focus","hover","active","completed","disabled","error"],"sources":["../../../../src/elements/Input/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { State } from \"./types\"\n\nexport const INPUT_STATES: Record<State, any> = {\n  default: css`\n    background-color: ${themeGet(\"colors.mono0\")};\n    font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono60\")};\n      font-size: ${themeGet(\"textVariants.sm-display.fontSize\")};\n    }\n  `,\n  focus: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono60\")};\n      opacity: 1;\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  hover: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n  `,\n  active: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.blue100\")};\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono100\")};\n    }\n\n    & + label {\n      color: ${themeGet(\"colors.blue100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  completed: css`\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.mono60\")};\n\n    & + label {\n      color: ${themeGet(\"colors.blue60\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n  disabled: css`\n    color: ${themeGet(\"colors.mono30\")};\n    border-color: ${themeGet(\"colors.mono30\")};\n    background-color: transparent;\n    /* For Safari: */\n    -webkit-text-fill-color: ${themeGet(\"colors.mono30\")};\n    /* For iOS */\n    opacity: 1;\n\n    ::placeholder {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n\n    &:not(:placeholder-shown) + label {\n      color: ${themeGet(\"colors.mono30\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n\n    &:placeholder-shown + label {\n      color: ${themeGet(\"colors.mono30\")};\n    }\n  `,\n  error: css`\n    border-color: ${themeGet(\"colors.red100\")};\n\n    & + label {\n      color: ${themeGet(\"colors.red100\")};\n      transform: translateY(-150%);\n      font-size: ${themeGet(\"textVariants.xs.fontSize\")};\n      padding: 0 5px;\n\n      & > span {\n        height: 2px;\n        top: 50%;\n      }\n    }\n  `,\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,SAASC,GAAG,QAAQ,mBAAmB;AAGvC,OAAO,IAAMC,YAAgC,GAAG;EAC9CC,OAAO,EAAEF,GAAG,wIACUD,QAAQ,CAAC,cAAc,CAAC,EAC/BA,QAAQ,CAAC,kCAAkC,CAAC,EAChDA,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EACrBA,QAAQ,CAAC,kCAAkC,CAAC,CAE5D;EACDI,KAAK,EAAEH,GAAG,oLACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,eAAe,CAAC,EAKzBA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDK,KAAK,EAAEJ,GAAG,oFACCD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,CAEtC;EACDM,MAAM,EAAEL,GAAG,0KACAD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,gBAAgB,CAAC,EAG/BA,QAAQ,CAAC,gBAAgB,CAAC,EAI1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEtBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDO,SAAS,EAAEN,GAAG,gJACHD,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,CAQpD;EACDQ,QAAQ,EAAEP,GAAG,gSACFD,QAAQ,CAAC,eAAe,CAAC,EAClBA,QAAQ,CAAC,eAAe,CAAC,EAGdA,QAAQ,CAAC,eAAe,CAAC,EAKzCA,QAAQ,CAAC,eAAe,CAAC,EAIzBA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC,EASxCA,QAAQ,CAAC,eAAe,CAAC,CAErC;EACDS,KAAK,EAAER,GAAG,qIACQD,QAAQ,CAAC,eAAe,CAAC,EAG9BA,QAAQ,CAAC,eAAe,CAAC,EAErBA,QAAQ,CAAC,0BAA0B,CAAC;AASvD,CAAC"}

package/dist/esm/elements/Label/Label.js

@@ -6,7 +6,7 @@ import { Text } from "../Text";
 import * as React from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 export var LABEL_VARIANTS = {
   light: {
     backgroundColor: "mono10",

package/dist/esm/elements/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["Text","React","styled","variant","Box","BoxProps","LABEL_VARIANTS","light","backgroundColor","color","dark","brand","Label","_ref","children","_ref$variant","rest","_objectWithoutProperties","_excluded","createElement","Container","_extends","display","maxWidth","px","overflowEllipsis","displayName","withConfig","componentId","variants"],"sources":["../../../../src/elements/Label/Label.tsx"],"sourcesContent":["import { Text } from \"../Text\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport const LABEL_VARIANTS = {\n  light: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  dark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  brand: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nexport type LabelVariant = keyof typeof LABEL_VARIANTS\n\nexport interface LabelProps extends BoxProps {\n  variant?: LabelVariant\n  children: React.ReactNode\n}\n\nexport const Label: React.FC<React.PropsWithChildren<LabelProps>> = ({\n  children,\n  variant = \"light\",\n  ...rest\n}) => {\n  return (\n    <Container\n      display=\"inline-flex\"\n      maxWidth=\"100%\"\n      variant={variant}\n      {...rest}\n    >\n      <Text variant=\"xs\" px={0.5} overflowEllipsis>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ variant: LabelVariant }>`\n  ${variant({ variants: LABEL_VARIANTS })}\n`\n"],"mappings":";;;;AAAA,SAASA,IAAI;AACb,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG,EAAEC,QAAQ;AAEtB,OAAO,IAAMC,cAAc,GAAG;EAC5BC,KAAK,EAAE;IACLC,eAAe,EAAE,QAAQ;IACzBC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT,CAAC;EACDE,KAAK,EAAE;IACLH,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AASD,OAAO,IAAMG,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAI3D;EAAA,IAHJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CACRV,OAAO;IAAPA,OAAO,GAAAY,YAAA,cAAG,OAAO,GAAAA,YAAA;IACdC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,oBACEjB,KAAA,CAAAkB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,aAAa;IACrBC,QAAQ,EAAC,MAAM;IACfpB,OAAO,EAAEA;EAAQ,GACba,IAAI,gBAERf,KAAA,CAAAkB,aAAA,CAACnB,IAAI;IAACG,OAAO,EAAC,IAAI;IAACqB,EAAE,EAAE,GAAI;IAACC,gBAAgB;EAAA,GACzCX,QAAQ,CACJ,CACG;AAEhB,CAAC;AAjBYF,KAAoD,CAAAc,WAAA;AAmBjE,IAAMN,SAAS,GAAGlB,MAAM,CAACE,GAAG,CAAC,CAAAuB,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,aACzBzB,OAAO,CAAC;EAAE0B,QAAQ,EAAEvB;AAAe,CAAC,CAAC,CACxC"}
+{"version":3,"file":"Label.js","names":["Text","React","styled","variant","Box","LABEL_VARIANTS","light","backgroundColor","color","dark","brand","Label","_ref","children","_ref$variant","rest","_objectWithoutProperties","_excluded","createElement","Container","_extends","display","maxWidth","px","overflowEllipsis","displayName","withConfig","componentId","variants"],"sources":["../../../../src/elements/Label/Label.tsx"],"sourcesContent":["import { Text } from \"../Text\"\nimport * as React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\n\nexport const LABEL_VARIANTS = {\n  light: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  dark: {\n    backgroundColor: \"mono100\",\n    color: \"mono0\",\n  },\n  brand: {\n    backgroundColor: \"blue100\",\n    color: \"mono0\",\n  },\n}\n\nexport type LabelVariant = keyof typeof LABEL_VARIANTS\n\nexport interface LabelProps extends BoxProps {\n  variant?: LabelVariant\n  children: React.ReactNode\n}\n\nexport const Label: React.FC<React.PropsWithChildren<LabelProps>> = ({\n  children,\n  variant = \"light\",\n  ...rest\n}) => {\n  return (\n    <Container\n      display=\"inline-flex\"\n      maxWidth=\"100%\"\n      variant={variant}\n      {...rest}\n    >\n      <Text variant=\"xs\" px={0.5} overflowEllipsis>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n\nconst Container = styled(Box)<{ variant: LabelVariant }>`\n  ${variant({ variants: LABEL_VARIANTS })}\n`\n"],"mappings":";;;;AAAA,SAASA,IAAI;AACb,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,GAAG;AAEZ,OAAO,IAAMC,cAAc,GAAG;EAC5BC,KAAK,EAAE;IACLC,eAAe,EAAE,QAAQ;IACzBC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJF,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT,CAAC;EACDE,KAAK,EAAE;IACLH,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT;AACF,CAAC;AASD,OAAO,IAAMG,KAAoD,GAAG,SAAvDA,KAAoDA,CAAAC,IAAA,EAI3D;EAAA,IAHJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CACRT,OAAO;IAAPA,OAAO,GAAAW,YAAA,cAAG,OAAO,GAAAA,YAAA;IACdC,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP,oBACEhB,KAAA,CAAAiB,aAAA,CAACC,SAAS,EAAAC,QAAA;IACRC,OAAO,EAAC,aAAa;IACrBC,QAAQ,EAAC,MAAM;IACfnB,OAAO,EAAEA;EAAQ,GACbY,IAAI,gBAERd,KAAA,CAAAiB,aAAA,CAAClB,IAAI;IAACG,OAAO,EAAC,IAAI;IAACoB,EAAE,EAAE,GAAI;IAACC,gBAAgB;EAAA,GACzCX,QAAQ,CACJ,CACG;AAEhB,CAAC;AAjBYF,KAAoD,CAAAc,WAAA;AAmBjE,IAAMN,SAAS,GAAGjB,MAAM,CAACE,GAAG,CAAC,CAAAsB,UAAA;EAAAD,WAAA;EAAAE,WAAA;AAAA,aACzBxB,OAAO,CAAC;EAAEyB,QAAQ,EAAEvB;AAAe,CAAC,CAAC,CACxC"}

package/dist/esm/elements/Label/Label.story.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Label, LabelVariant, LABEL_VARIANTS } from "./Label";
+import { Label, LABEL_VARIANTS } from "./Label";
 import { Box } from "../Box";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 export default {

package/dist/esm/elements/Label/Label.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.story.js","names":["React","Label","LabelVariant","LABEL_VARIANTS","Box","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","AllVariants","render","createElement","display","flexDirection","gap","Object","keys","map","variant","key","OverflowEllipsis","width","overflow"],"sources":["../../../../src/elements/Label/Label.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Label, LabelVariant, LABEL_VARIANTS } from \"./Label\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Label,\n  title: \"Components/Label\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A label component with different visual variants for various use cases.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"Example\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic label component with default styling.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Label key={variant} variant={variant as LabelVariant}>\n          {variant} Label\n        </Label>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available label variants.\",\n      },\n    },\n  },\n}\n\nexport const OverflowEllipsis = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Box key={variant} width={75} overflow=\"hidden\">\n          <Label variant={variant as LabelVariant}>Longer Example</Label>\n        </Box>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Labels with text overflow demonstrating ellipsis behavior.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAEC,YAAY,EAAEC,cAAc;AAC5C,SAASC,GAAG;AACZ,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEL,KAAK;EAChBM,KAAK,EAAE,kBAAkB;EACzBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnB,KAAA,CAAAoB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC3B,KAAA,CAAAoB,aAAA,CAACnB,KAAK;QAAC2B,GAAG,EAAED,OAAQ;QAACA,OAAO,EAAEA;MAAwB,GACnDA,OAAO,EAAC,QACX,CAAQ;IAAA,CACT,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMY,gBAAgB,GAAG;EAC9BV,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnB,KAAA,CAAAoB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC3B,KAAA,CAAAoB,aAAA,CAAChB,GAAG;QAACwB,GAAG,EAAED,OAAQ;QAACG,KAAK,EAAE,EAAG;QAACC,QAAQ,EAAC;MAAQ,gBAC7C/B,KAAA,CAAAoB,aAAA,CAACnB,KAAK;QAAC0B,OAAO,EAAEA;MAAwB,GAAC,gBAAc,CAAQ,CAC3D;IAAA,CACP,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}
+{"version":3,"file":"Label.story.js","names":["React","Label","LABEL_VARIANTS","Box","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","AllVariants","render","createElement","display","flexDirection","gap","Object","keys","map","variant","key","OverflowEllipsis","width","overflow"],"sources":["../../../../src/elements/Label/Label.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Label, LabelVariant, LABEL_VARIANTS } from \"./Label\"\nimport { Box } from \"../Box\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Label,\n  title: \"Components/Label\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A label component with different visual variants for various use cases.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children: \"Example\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic label component with default styling.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Label key={variant} variant={variant as LabelVariant}>\n          {variant} Label\n        </Label>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available label variants.\",\n      },\n    },\n  },\n}\n\nexport const OverflowEllipsis = {\n  render: () => (\n    <Box display=\"flex\" flexDirection=\"column\" gap={1}>\n      {Object.keys(LABEL_VARIANTS).map((variant) => (\n        <Box key={variant} width={75} overflow=\"hidden\">\n          <Label variant={variant as LabelVariant}>Longer Example</Label>\n        </Box>\n      ))}\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Labels with text overflow demonstrating ellipsis behavior.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,EAAgBC,cAAc;AAC5C,SAASC,GAAG;AACZ,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEJ,KAAK;EAChBK,KAAK,EAAE,kBAAkB;EACzBC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EAAE;EACZ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC1B,KAAA,CAAAmB,aAAA,CAAClB,KAAK;QAAC0B,GAAG,EAAED,OAAQ;QAACA,OAAO,EAAEA;MAAwB,GACnDA,OAAO,EAAC,QACX,CAAQ;IAAA,CACT,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMY,gBAAgB,GAAG;EAC9BV,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA,CAAChB,GAAG;MAACiB,OAAO,EAAC,MAAM;MAACC,aAAa,EAAC,QAAQ;MAACC,GAAG,EAAE;IAAE,GAC/CC,MAAM,CAACC,IAAI,CAACtB,cAAc,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACvC1B,KAAA,CAAAmB,aAAA,CAAChB,GAAG;QAACwB,GAAG,EAAED,OAAQ;QAACG,KAAK,EAAE,EAAG;QAACC,QAAQ,EAAC;MAAQ,gBAC7C9B,KAAA,CAAAmB,aAAA,CAAClB,KAAK;QAACyB,OAAO,EAAEA;MAAwB,GAAC,gBAAc,CAAQ,CAC3D;IAAA,CACP,CAAC,CACE;EAAA,CACP;EACDlB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/LabeledInput/LabeledInput.js

@@ -15,7 +15,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useEffect, useRef, useState } from "react";
 import { isText as _isText } from "../../helpers/isText";
 import { Box, splitBoxProps } from "../Box";
-import { Input, InputProps } from "../Input";
+import { Input } from "../Input";
 import { Text } from "../Text";
 /** Input with a right-aligned or left-aligned label */
 export var LabeledInput = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {

package/dist/esm/elements/LabeledInput/LabeledInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledInput.js","names":["React","useEffect","useRef","useState","isText","_isText","Box","splitBoxProps","Input","InputProps","Text","LabeledInput","forwardRef","_ref","forwardedRef","label","height","_ref$variant","variant","rest","_objectWithoutProperties","_excluded","labelRef","_useState","_useState2","_slicedToArray","offset","setOffset","current","offsetWidth","_splitBoxProps","_splitBoxProps2","boxProps","inputProps","isPrefix","createElement","_extends","position","ref","labelOffset","undefined","style","_defineProperty","display","alignItems","top","bottom","pointerEvents","color","lineHeight","displayName"],"sources":["../../../../src/elements/LabeledInput/LabeledInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n  variant?: \"suffix\" | \"prefix\"\n}\n\n/** Input with a right-aligned or left-aligned label */\nexport const LabeledInput = React.forwardRef<\n  HTMLInputElement,\n  LabeledInputProps\n>(({ label, height, variant = \"suffix\", ...rest }, forwardedRef) => {\n  const labelRef = useRef<HTMLDivElement | null>(null)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (labelRef.current === null) return\n    setOffset(labelRef.current.offsetWidth)\n  }, [])\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const isText = _isText(label)\n\n  const isPrefix = variant === \"prefix\"\n\n  return (\n    <Box position=\"relative\" {...boxProps}>\n      <Input\n        ref={forwardedRef}\n        height={height}\n        labelOffset={isPrefix ? offset + 15 : undefined}\n        style={{ [isPrefix ? \"paddingLeft\" : \"paddingRight\"]: offset + 15 }}\n        {...inputProps}\n      >\n        <Box\n          ref={labelRef as any}\n          position=\"absolute\"\n          display=\"flex\"\n          alignItems=\"center\"\n          top={0}\n          bottom={0}\n          style={{ pointerEvents: isText ? \"none\" : undefined }}\n          {...{ [isPrefix ? \"left\" : \"right\"]: 1 }}\n        >\n          {isText ? (\n            <Text variant=\"sm-display\" color=\"mono60\" lineHeight={1}>\n              {label}\n            </Text>\n          ) : (\n            label\n          )}\n        </Box>\n      </Input>\n    </Box>\n  )\n})\n\nLabeledInput.displayName = \"LabeledInput\"\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,MAAM,IAAIC,OAAO;AAC1B,SAASC,GAAG,EAAEC,aAAa;AAC3B,SAASC,KAAK,EAAEC,UAAU;AAC1B,SAASC,IAAI;AAOb;AACA,OAAO,IAAMC,YAAY,gBAAGX,KAAK,CAACY,UAAU,CAG1C,UAAAC,IAAA,EAAiDC,YAAY,EAAK;EAAA,IAA/DC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAAC,YAAA,GAAAJ,IAAA,CAAEK,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,QAAQ,GAAAA,YAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC7C,IAAMC,QAAQ,GAAGpB,MAAM,CAAwB,IAAI,CAAC;EACpD,IAAAqB,SAAA,GAA4BpB,QAAQ,CAAC,CAAC,CAAC;IAAAqB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAhCG,MAAM,GAAAF,UAAA;IAAEG,SAAS,GAAAH,UAAA;EAExBvB,SAAS,CAAC,YAAM;IACd,IAAIqB,QAAQ,CAACM,OAAO,KAAK,IAAI,EAAE;IAC/BD,SAAS,CAACL,QAAQ,CAACM,OAAO,CAACC,WAAW,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,cAAA,GAA+BvB,aAAa,CAACY,IAAI,CAAC;IAAAY,eAAA,GAAAN,cAAA,CAAAK,cAAA;IAA3CE,QAAQ,GAAAD,eAAA;IAAEE,UAAU,GAAAF,eAAA;EAE3B,IAAM3B,MAAM,GAAGC,OAAO,CAACU,KAAK,CAAC;EAE7B,IAAMmB,QAAQ,GAAGhB,OAAO,KAAK,QAAQ;EAErC,oBACElB,KAAA,CAAAmC,aAAA,CAAC7B,GAAG,EAAA8B,QAAA;IAACC,QAAQ,EAAC;EAAU,GAAKL,QAAQ,gBACnChC,KAAA,CAAAmC,aAAA,CAAC3B,KAAK,EAAA4B,QAAA;IACJE,GAAG,EAAExB,YAAa;IAClBE,MAAM,EAAEA,MAAO;IACfuB,WAAW,EAAEL,QAAQ,GAAGR,MAAM,GAAG,EAAE,GAAGc,SAAU;IAChDC,KAAK,EAAAC,eAAA,KAAKR,QAAQ,GAAG,aAAa,GAAG,cAAc,EAAGR,MAAM,GAAG,EAAE;EAAG,GAChEO,UAAU,gBAEdjC,KAAA,CAAAmC,aAAA,CAAC7B,GAAG,EAAA8B,QAAA;IACFE,GAAG,EAAEhB,QAAgB;IACrBe,QAAQ,EAAC,UAAU;IACnBM,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBC,GAAG,EAAE,CAAE;IACPC,MAAM,EAAE,CAAE;IACVL,KAAK,EAAE;MAAEM,aAAa,EAAE3C,MAAM,GAAG,MAAM,GAAGoC;IAAU;EAAE,GAAAE,eAAA,KAC/CR,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAG,CAAC,IAErC9B,MAAM,gBACLJ,KAAA,CAAAmC,aAAA,CAACzB,IAAI;IAACQ,OAAO,EAAC,YAAY;IAAC8B,KAAK,EAAC,QAAQ;IAACC,UAAU,EAAE;EAAE,GACrDlC,KAAK,CACD,GAEPA,KACD,CACG,CACA,CACJ;AAEV,CAAC,CAAC;AAEFJ,YAAY,CAACuC,WAAW,GAAG,cAAc"}
+{"version":3,"file":"LabeledInput.js","names":["React","useEffect","useRef","useState","isText","_isText","Box","splitBoxProps","Input","Text","LabeledInput","forwardRef","_ref","forwardedRef","label","height","_ref$variant","variant","rest","_objectWithoutProperties","_excluded","labelRef","_useState","_useState2","_slicedToArray","offset","setOffset","current","offsetWidth","_splitBoxProps","_splitBoxProps2","boxProps","inputProps","isPrefix","createElement","_extends","position","ref","labelOffset","undefined","style","_defineProperty","display","alignItems","top","bottom","pointerEvents","color","lineHeight","displayName"],"sources":["../../../../src/elements/LabeledInput/LabeledInput.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { isText as _isText } from \"../../helpers/isText\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Input, InputProps } from \"../Input\"\nimport { Text } from \"../Text\"\n\nexport interface LabeledInputProps extends InputProps {\n  label: React.ReactNode\n  variant?: \"suffix\" | \"prefix\"\n}\n\n/** Input with a right-aligned or left-aligned label */\nexport const LabeledInput = React.forwardRef<\n  HTMLInputElement,\n  LabeledInputProps\n>(({ label, height, variant = \"suffix\", ...rest }, forwardedRef) => {\n  const labelRef = useRef<HTMLDivElement | null>(null)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (labelRef.current === null) return\n    setOffset(labelRef.current.offsetWidth)\n  }, [])\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const isText = _isText(label)\n\n  const isPrefix = variant === \"prefix\"\n\n  return (\n    <Box position=\"relative\" {...boxProps}>\n      <Input\n        ref={forwardedRef}\n        height={height}\n        labelOffset={isPrefix ? offset + 15 : undefined}\n        style={{ [isPrefix ? \"paddingLeft\" : \"paddingRight\"]: offset + 15 }}\n        {...inputProps}\n      >\n        <Box\n          ref={labelRef as any}\n          position=\"absolute\"\n          display=\"flex\"\n          alignItems=\"center\"\n          top={0}\n          bottom={0}\n          style={{ pointerEvents: isText ? \"none\" : undefined }}\n          {...{ [isPrefix ? \"left\" : \"right\"]: 1 }}\n        >\n          {isText ? (\n            <Text variant=\"sm-display\" color=\"mono60\" lineHeight={1}>\n              {label}\n            </Text>\n          ) : (\n            label\n          )}\n        </Box>\n      </Input>\n    </Box>\n  )\n})\n\nLabeledInput.displayName = \"LabeledInput\"\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,MAAM,IAAIC,OAAO;AAC1B,SAASC,GAAG,EAAEC,aAAa;AAC3B,SAASC,KAAK;AACd,SAASC,IAAI;AAOb;AACA,OAAO,IAAMC,YAAY,gBAAGV,KAAK,CAACW,UAAU,CAG1C,UAAAC,IAAA,EAAiDC,YAAY,EAAK;EAAA,IAA/DC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAAC,YAAA,GAAAJ,IAAA,CAAEK,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,QAAQ,GAAAA,YAAA;IAAKE,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAC7C,IAAMC,QAAQ,GAAGnB,MAAM,CAAwB,IAAI,CAAC;EACpD,IAAAoB,SAAA,GAA4BnB,QAAQ,CAAC,CAAC,CAAC;IAAAoB,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAhCG,MAAM,GAAAF,UAAA;IAAEG,SAAS,GAAAH,UAAA;EAExBtB,SAAS,CAAC,YAAM;IACd,IAAIoB,QAAQ,CAACM,OAAO,KAAK,IAAI,EAAE;IAC/BD,SAAS,CAACL,QAAQ,CAACM,OAAO,CAACC,WAAW,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,cAAA,GAA+BtB,aAAa,CAACW,IAAI,CAAC;IAAAY,eAAA,GAAAN,cAAA,CAAAK,cAAA;IAA3CE,QAAQ,GAAAD,eAAA;IAAEE,UAAU,GAAAF,eAAA;EAE3B,IAAM1B,MAAM,GAAGC,OAAO,CAACS,KAAK,CAAC;EAE7B,IAAMmB,QAAQ,GAAGhB,OAAO,KAAK,QAAQ;EAErC,oBACEjB,KAAA,CAAAkC,aAAA,CAAC5B,GAAG,EAAA6B,QAAA;IAACC,QAAQ,EAAC;EAAU,GAAKL,QAAQ,gBACnC/B,KAAA,CAAAkC,aAAA,CAAC1B,KAAK,EAAA2B,QAAA;IACJE,GAAG,EAAExB,YAAa;IAClBE,MAAM,EAAEA,MAAO;IACfuB,WAAW,EAAEL,QAAQ,GAAGR,MAAM,GAAG,EAAE,GAAGc,SAAU;IAChDC,KAAK,EAAAC,eAAA,KAAKR,QAAQ,GAAG,aAAa,GAAG,cAAc,EAAGR,MAAM,GAAG,EAAE;EAAG,GAChEO,UAAU,gBAEdhC,KAAA,CAAAkC,aAAA,CAAC5B,GAAG,EAAA6B,QAAA;IACFE,GAAG,EAAEhB,QAAgB;IACrBe,QAAQ,EAAC,UAAU;IACnBM,OAAO,EAAC,MAAM;IACdC,UAAU,EAAC,QAAQ;IACnBC,GAAG,EAAE,CAAE;IACPC,MAAM,EAAE,CAAE;IACVL,KAAK,EAAE;MAAEM,aAAa,EAAE1C,MAAM,GAAG,MAAM,GAAGmC;IAAU;EAAE,GAAAE,eAAA,KAC/CR,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAG,CAAC,IAErC7B,MAAM,gBACLJ,KAAA,CAAAkC,aAAA,CAACzB,IAAI;IAACQ,OAAO,EAAC,YAAY;IAAC8B,KAAK,EAAC,QAAQ;IAACC,UAAU,EAAE;EAAE,GACrDlC,KAAK,CACD,GAEPA,KACD,CACG,CACA,CACJ;AAEV,CAAC,CAAC;AAEFJ,YAAY,CAACuC,WAAW,GAAG,cAAc"}

package/dist/esm/elements/Link/Link.js

@@ -1,7 +1,7 @@
 import { themeGet } from "@styled-system/theme-get";
 import styled from "styled-components";
-import { compose, ResponsiveValue, system } from "styled-system";
-import { boxMixin, BoxProps } from "../Box";
+import { compose, system } from "styled-system";
+import { boxMixin } from "../Box";
 var textDecoration = system({
   textDecoration: true
 });

package/dist/esm/elements/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["themeGet","styled","compose","ResponsiveValue","system","boxMixin","BoxProps","textDecoration","linkMixin","Link","a","withConfig","displayName","componentId","defaultProps"],"sources":["../../../../src/elements/Link/Link.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst textDecoration = system({ textDecoration: true })\n\nexport interface LinkProps extends BoxProps {\n  textDecoration?: ResponsiveValue<string>\n}\n\nconst linkMixin = compose(boxMixin, textDecoration)\n\n/**\n * Basic <a> tag styled with additional LinkProps\n *\n * Tip: If working on Force, please use <Link as={RouterLink}>.\n\n */\nexport const Link = styled.a<LinkProps>`\n  color: currentColor;\n  transition: color 0.25s;\n  &:hover {\n    color: ${themeGet(\"colors.blue100\")};\n  }\n  &:visited {\n    color: ${themeGet(\"colors.blue150\")};\n  }\n  ${linkMixin};\n`\n\nLink.displayName = \"Link\"\n\nLink.defaultProps = {\n  textDecoration: \"underline\",\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAEC,eAAe,EAAEC,MAAM,QAAQ,eAAe;AAChE,SAASC,QAAQ,EAAEC,QAAQ;AAE3B,IAAMC,cAAc,GAAGH,MAAM,CAAC;EAAEG,cAAc,EAAE;AAAK,CAAC,CAAC;AAMvD,IAAMC,SAAS,GAAGN,OAAO,CAACG,QAAQ,EAAEE,cAAc,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAME,IAAI,GAAGR,MAAM,CAACS,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kGAIfb,QAAQ,CAAC,gBAAgB,CAAC,EAG1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEnCQ,SAAS,CACZ;AAEDC,IAAI,CAACG,WAAW,GAAG,MAAM;AAEzBH,IAAI,CAACK,YAAY,GAAG;EAClBP,cAAc,EAAE;AAClB,CAAC"}
+{"version":3,"file":"Link.js","names":["themeGet","styled","compose","system","boxMixin","textDecoration","linkMixin","Link","a","withConfig","displayName","componentId","defaultProps"],"sources":["../../../../src/elements/Link/Link.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst textDecoration = system({ textDecoration: true })\n\nexport interface LinkProps extends BoxProps {\n  textDecoration?: ResponsiveValue<string>\n}\n\nconst linkMixin = compose(boxMixin, textDecoration)\n\n/**\n * Basic <a> tag styled with additional LinkProps\n *\n * Tip: If working on Force, please use <Link as={RouterLink}>.\n\n */\nexport const Link = styled.a<LinkProps>`\n  color: currentColor;\n  transition: color 0.25s;\n  &:hover {\n    color: ${themeGet(\"colors.blue100\")};\n  }\n  &:visited {\n    color: ${themeGet(\"colors.blue150\")};\n  }\n  ${linkMixin};\n`\n\nLink.displayName = \"Link\"\n\nLink.defaultProps = {\n  textDecoration: \"underline\",\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,EAAmBC,MAAM,QAAQ,eAAe;AAChE,SAASC,QAAQ;AAEjB,IAAMC,cAAc,GAAGF,MAAM,CAAC;EAAEE,cAAc,EAAE;AAAK,CAAC,CAAC;AAMvD,IAAMC,SAAS,GAAGJ,OAAO,CAACE,QAAQ,EAAEC,cAAc,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAME,IAAI,GAAGN,MAAM,CAACO,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kGAIfX,QAAQ,CAAC,gBAAgB,CAAC,EAG1BA,QAAQ,CAAC,gBAAgB,CAAC,EAEnCM,SAAS,CACZ;AAEDC,IAAI,CAACG,WAAW,GAAG,MAAM;AAEzBH,IAAI,CAACK,YAAY,GAAG;EAClBP,cAAc,EAAE;AAClB,CAAC"}

package/dist/esm/elements/Marquee/Marquee.js

@@ -12,7 +12,7 @@ import React, { useState, useEffect, useRef } from "react";
 import styled, { keyframes } from "styled-components";
 import { variant } from "styled-system";
 import { Flex } from "../Flex";
-import { Box, BoxProps } from "../Box";
+import { Box } from "../Box";
 import { Text } from "../Text";
 var VARIANTS = {
   defaultLight: {

package/dist/esm/elements/Marquee/Marquee.js.map

@@ -1 +1 @@
-{"version":3,"file":"Marquee.js","names":["React","useState","useEffect","useRef","styled","keyframes","variant","Flex","Box","BoxProps","Text","VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","offset","Container","withConfig","displayName","componentId","variants","StyledText","Inner","div","speed","Item","Marquee","_ref","marqueeText","_ref$divider","divider","_ref$speed","_ref$variant","rest","_objectWithoutProperties","_excluded","containerEl","childEl","_useState","_useState2","_slicedToArray","amount","setAmount","_useState3","_useState4","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","createElement","_extends","ref","Array","from","map","_","i","key","px","py"],"sources":["../../../../src/elements/Marquee/Marquee.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Flex } from \"../Flex\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\n\nconst VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  brand: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n}\n\nconst move = (props) => keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-${props.offset}px);\n  }\n`\n\nconst Container = styled(Box)<{ variant: keyof typeof VARIANTS }>`\n  ${variant({ variants: VARIANTS })}\n  width: 100%;\n  overflow-x: hidden;\n`\nconst StyledText = styled(Text)`\n  ${variant({ variants: VARIANTS })}\n  white-space: nowrap;\n`\n\nconst Inner = styled.div<{ speed: string; offset: number }>`\n  animation: ${move} ${(props) => props.speed} infinite linear;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n`\n\nconst Item = styled.div`\n  display: inline-block;\n`\n\nexport interface MarqueeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  speed?: string\n  color?: string\n  marqueeText: string\n  divider?: boolean\n}\n\nexport const Marquee: React.FC<React.PropsWithChildren<MarqueeProps>> = ({\n  marqueeText,\n  divider = true,\n  speed = \"10s\",\n  variant = \"defaultDark\",\n  color,\n  ...rest\n}) => {\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const childEl = useRef<HTMLDivElement | null>(null)\n\n  const [amount, setAmount] = useState(1)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (!childEl.current || !containerEl.current) {\n      return\n    }\n    const containerWidth = containerEl.current.getBoundingClientRect().width\n    const childWidth = childEl.current.getBoundingClientRect().width\n    const targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100)\n\n    setOffset(targetAmount * childWidth)\n    setAmount(Math.ceil(targetAmount * 2))\n  }, [])\n\n  return (\n    <Container\n      ref={containerEl as any}\n      backgroundColor={color}\n      variant={variant}\n      {...rest}\n    >\n      <Inner speed={speed} offset={offset}>\n        {Array.from(Array(amount)).map((_, i) => (\n          <Item key={i} ref={childEl as any}>\n            <Flex>\n              <StyledText px={[2, 4]} py={0.5} variant=\"xs\">\n                {marqueeText}\n              </StyledText>\n              {divider && (\n                <StyledText px={[1, 4]} py={0.5} variant=\"xs\">\n                  •\n                </StyledText>\n              )}\n            </Flex>\n          </Item>\n        ))}\n      </Inner>\n    </Container>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Marquee.js","names":["React","useState","useEffect","useRef","styled","keyframes","variant","Flex","Box","Text","VARIANTS","defaultLight","backgroundColor","color","defaultDark","brand","move","props","offset","Container","withConfig","displayName","componentId","variants","StyledText","Inner","div","speed","Item","Marquee","_ref","marqueeText","_ref$divider","divider","_ref$speed","_ref$variant","rest","_objectWithoutProperties","_excluded","containerEl","childEl","_useState","_useState2","_slicedToArray","amount","setAmount","_useState3","_useState4","setOffset","current","containerWidth","getBoundingClientRect","width","childWidth","targetAmount","Math","min","ceil","createElement","_extends","ref","Array","from","map","_","i","key","px","py"],"sources":["../../../../src/elements/Marquee/Marquee.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\"\nimport styled, { keyframes } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Flex } from \"../Flex\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Text } from \"../Text\"\n\nconst VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  defaultDark: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n  brand: {\n    backgroundColor: \"mono10\",\n    color: \"mono100\",\n  },\n}\n\nconst move = (props) => keyframes`\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-${props.offset}px);\n  }\n`\n\nconst Container = styled(Box)<{ variant: keyof typeof VARIANTS }>`\n  ${variant({ variants: VARIANTS })}\n  width: 100%;\n  overflow-x: hidden;\n`\nconst StyledText = styled(Text)`\n  ${variant({ variants: VARIANTS })}\n  white-space: nowrap;\n`\n\nconst Inner = styled.div<{ speed: string; offset: number }>`\n  animation: ${move} ${(props) => props.speed} infinite linear;\n  cursor: default;\n  user-select: none;\n  white-space: nowrap;\n`\n\nconst Item = styled.div`\n  display: inline-block;\n`\n\nexport interface MarqueeProps extends BoxProps {\n  variant?: keyof typeof VARIANTS\n  speed?: string\n  color?: string\n  marqueeText: string\n  divider?: boolean\n}\n\nexport const Marquee: React.FC<React.PropsWithChildren<MarqueeProps>> = ({\n  marqueeText,\n  divider = true,\n  speed = \"10s\",\n  variant = \"defaultDark\",\n  color,\n  ...rest\n}) => {\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const childEl = useRef<HTMLDivElement | null>(null)\n\n  const [amount, setAmount] = useState(1)\n  const [offset, setOffset] = useState(0)\n\n  useEffect(() => {\n    if (!childEl.current || !containerEl.current) {\n      return\n    }\n    const containerWidth = containerEl.current.getBoundingClientRect().width\n    const childWidth = childEl.current.getBoundingClientRect().width\n    const targetAmount = Math.min(Math.ceil(containerWidth / childWidth), 100)\n\n    setOffset(targetAmount * childWidth)\n    setAmount(Math.ceil(targetAmount * 2))\n  }, [])\n\n  return (\n    <Container\n      ref={containerEl as any}\n      backgroundColor={color}\n      variant={variant}\n      {...rest}\n    >\n      <Inner speed={speed} offset={offset}>\n        {Array.from(Array(amount)).map((_, i) => (\n          <Item key={i} ref={childEl as any}>\n            <Flex>\n              <StyledText px={[2, 4]} py={0.5} variant=\"xs\">\n                {marqueeText}\n              </StyledText>\n              {divider && (\n                <StyledText px={[1, 4]} py={0.5} variant=\"xs\">\n                  •\n                </StyledText>\n              )}\n            </Flex>\n          </Item>\n        ))}\n      </Inner>\n    </Container>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/elements/Message/Message.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from "react";
 import styled from "styled-components";
 import { variant } from "styled-system";
-import { Flex, FlexProps } from "../Flex";
+import { Flex } from "../Flex";
 import { Text } from "../Text";
 export var MESSAGE_VARIANTS = {
   default: {

package/dist/esm/elements/Message/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","names":["React","styled","variant","Flex","FlexProps","Text","MESSAGE_VARIANTS","default","backgroundColor","color","info","success","alert","warning","error","Container","withConfig","displayName","componentId","variants","Message","_ref","children","title","_ref$variant","rest","_objectWithoutProperties","_excluded","createElement","_extends","p"],"sources":["../../../../src/elements/Message/Message.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport const MESSAGE_VARIANTS = {\n  default: {\n    backgroundColor: \"mono5\",\n    color: \"mono100\",\n  },\n  info: {\n    backgroundColor: \"blue10\",\n    color: \"blue100\",\n  },\n  success: {\n    backgroundColor: \"green10\",\n    color: \"green150\",\n  },\n  alert: {\n    backgroundColor: \"orange10\",\n    color: \"orange150\",\n  },\n  warning: {\n    backgroundColor: \"yellow10\",\n    color: \"yellow150\",\n  },\n  error: {\n    backgroundColor: \"red10\",\n    color: \"red100\",\n  },\n}\n\nexport type MessageVariant = keyof typeof MESSAGE_VARIANTS\n\nexport interface MessageProps extends FlexProps {\n  children?: React.ReactNode\n  title?: string\n  variant?: MessageVariant\n}\n\nconst Container = styled(Flex)<MessageProps>`\n  ${variant({ variants: MESSAGE_VARIANTS })}\n  flex-direction: column;\n`\n\n/**\n * `Message` is used for in-line communication. These should fill the allotted\n * container or space they are placed and key for temporal messages and\n * comments within flows. Additionally, they can be used to highlight particular\n * messaging within a specific section of a page or screen.\n */\nexport const Message: React.FC<React.PropsWithChildren<MessageProps>> = ({\n  children,\n  title,\n  variant = \"default\",\n  ...rest\n}) => {\n  const color = variant === \"default\" ? \"mono60\" : \"mono100\"\n\n  return (\n    <Container p={2} variant={variant} {...rest}>\n      <Text variant=\"sm-display\" color=\"currentColor\">\n        {title}\n      </Text>\n\n      <Text variant=\"sm-display\" color={color}>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,IAAI,EAAEC,SAAS;AACxB,SAASC,IAAI;AAEb,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAE;IACPC,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJF,eAAe,EAAE,QAAQ;IACzBC,KAAK,EAAE;EACT,CAAC;EACDE,OAAO,EAAE;IACPH,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT,CAAC;EACDG,KAAK,EAAE;IACLJ,eAAe,EAAE,UAAU;IAC3BC,KAAK,EAAE;EACT,CAAC;EACDI,OAAO,EAAE;IACPL,eAAe,EAAE,UAAU;IAC3BC,KAAK,EAAE;EACT,CAAC;EACDK,KAAK,EAAE;IACLN,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAUD,IAAMM,SAAS,GAAGd,MAAM,CAACE,IAAI,CAAC,CAAAa,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAC1BhB,OAAO,CAAC;EAAEiB,QAAQ,EAAEb;AAAiB,CAAC,CAAC,CAE1C;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMc,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAK/D;EAAA,IAJJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,YAAA,GAAAH,IAAA,CACLnB,OAAO;IAAPA,OAAO,GAAAsB,YAAA,cAAG,SAAS,GAAAA,YAAA;IAChBC,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,IAAMlB,KAAK,GAAGP,OAAO,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS;EAE1D,oBACEF,KAAA,CAAA4B,aAAA,CAACb,SAAS,EAAAc,QAAA;IAACC,CAAC,EAAE,CAAE;IAAC5B,OAAO,EAAEA;EAAQ,GAAKuB,IAAI,gBACzCzB,KAAA,CAAA4B,aAAA,CAACvB,IAAI;IAACH,OAAO,EAAC,YAAY;IAACO,KAAK,EAAC;EAAc,GAC5Cc,KAAK,CACD,eAEPvB,KAAA,CAAA4B,aAAA,CAACvB,IAAI;IAACH,OAAO,EAAC,YAAY;IAACO,KAAK,EAAEA;EAAM,GACrCa,QAAQ,CACJ,CACG;AAEhB,CAAC;AAnBYF,OAAwD,CAAAH,WAAA"}
+{"version":3,"file":"Message.js","names":["React","styled","variant","Flex","Text","MESSAGE_VARIANTS","default","backgroundColor","color","info","success","alert","warning","error","Container","withConfig","displayName","componentId","variants","Message","_ref","children","title","_ref$variant","rest","_objectWithoutProperties","_excluded","createElement","_extends","p"],"sources":["../../../../src/elements/Message/Message.tsx"],"sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { Text } from \"../Text\"\n\nexport const MESSAGE_VARIANTS = {\n  default: {\n    backgroundColor: \"mono5\",\n    color: \"mono100\",\n  },\n  info: {\n    backgroundColor: \"blue10\",\n    color: \"blue100\",\n  },\n  success: {\n    backgroundColor: \"green10\",\n    color: \"green150\",\n  },\n  alert: {\n    backgroundColor: \"orange10\",\n    color: \"orange150\",\n  },\n  warning: {\n    backgroundColor: \"yellow10\",\n    color: \"yellow150\",\n  },\n  error: {\n    backgroundColor: \"red10\",\n    color: \"red100\",\n  },\n}\n\nexport type MessageVariant = keyof typeof MESSAGE_VARIANTS\n\nexport interface MessageProps extends FlexProps {\n  children?: React.ReactNode\n  title?: string\n  variant?: MessageVariant\n}\n\nconst Container = styled(Flex)<MessageProps>`\n  ${variant({ variants: MESSAGE_VARIANTS })}\n  flex-direction: column;\n`\n\n/**\n * `Message` is used for in-line communication. These should fill the allotted\n * container or space they are placed and key for temporal messages and\n * comments within flows. Additionally, they can be used to highlight particular\n * messaging within a specific section of a page or screen.\n */\nexport const Message: React.FC<React.PropsWithChildren<MessageProps>> = ({\n  children,\n  title,\n  variant = \"default\",\n  ...rest\n}) => {\n  const color = variant === \"default\" ? \"mono60\" : \"mono100\"\n\n  return (\n    <Container p={2} variant={variant} {...rest}>\n      <Text variant=\"sm-display\" color=\"currentColor\">\n        {title}\n      </Text>\n\n      <Text variant=\"sm-display\" color={color}>\n        {children}\n      </Text>\n    </Container>\n  )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,IAAI;AACb,SAASC,IAAI;AAEb,OAAO,IAAMC,gBAAgB,GAAG;EAC9BC,OAAO,EAAE;IACPC,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT,CAAC;EACDC,IAAI,EAAE;IACJF,eAAe,EAAE,QAAQ;IACzBC,KAAK,EAAE;EACT,CAAC;EACDE,OAAO,EAAE;IACPH,eAAe,EAAE,SAAS;IAC1BC,KAAK,EAAE;EACT,CAAC;EACDG,KAAK,EAAE;IACLJ,eAAe,EAAE,UAAU;IAC3BC,KAAK,EAAE;EACT,CAAC;EACDI,OAAO,EAAE;IACPL,eAAe,EAAE,UAAU;IAC3BC,KAAK,EAAE;EACT,CAAC;EACDK,KAAK,EAAE;IACLN,eAAe,EAAE,OAAO;IACxBC,KAAK,EAAE;EACT;AACF,CAAC;AAUD,IAAMM,SAAS,GAAGb,MAAM,CAACE,IAAI,CAAC,CAAAY,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAC1Bf,OAAO,CAAC;EAAEgB,QAAQ,EAAEb;AAAiB,CAAC,CAAC,CAE1C;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMc,OAAwD,GAAG,SAA3DA,OAAwDA,CAAAC,IAAA,EAK/D;EAAA,IAJJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,YAAA,GAAAH,IAAA,CACLlB,OAAO;IAAPA,OAAO,GAAAqB,YAAA,cAAG,SAAS,GAAAA,YAAA;IAChBC,IAAI,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAEP,IAAMlB,KAAK,GAAGN,OAAO,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS;EAE1D,oBACEF,KAAA,CAAA2B,aAAA,CAACb,SAAS,EAAAc,QAAA;IAACC,CAAC,EAAE,CAAE;IAAC3B,OAAO,EAAEA;EAAQ,GAAKsB,IAAI,gBACzCxB,KAAA,CAAA2B,aAAA,CAACvB,IAAI;IAACF,OAAO,EAAC,YAAY;IAACM,KAAK,EAAC;EAAc,GAC5Cc,KAAK,CACD,eAEPtB,KAAA,CAAA2B,aAAA,CAACvB,IAAI;IAACF,OAAO,EAAC,YAAY;IAACM,KAAK,EAAEA;EAAM,GACrCa,QAAQ,CACJ,CACG;AAEhB,CAAC;AAnBYF,OAAwD,CAAAH,WAAA"}

package/dist/esm/elements/Message/Message.story.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Text } from "../Text";
-import { Message, MESSAGE_VARIANTS, MessageVariant } from "./Message";
+import { Message, MESSAGE_VARIANTS } from "./Message";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 export default {
   component: Message,

package/dist/esm/elements/Message/Message.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.story.js","names":["React","Text","Message","MESSAGE_VARIANTS","MessageVariant","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","AllVariants","render","createElement","style","display","flexDirection","gap","Object","keys","map","variant","key","WithoutTitle","WithCustomChildren","color"],"sources":["../../../../src/elements/Message/Message.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Message, MESSAGE_VARIANTS, MessageVariant } from \"./Message\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Message,\n  title: \"Components/Message\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A message component with different variants for displaying information, warnings, or errors.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni. Natus, aliquam neque odio debitis totam labore maiores, corrupti mollitia repudiandae optio illo, autem sunt.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic message with default styling.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      {Object.keys(MESSAGE_VARIANTS).map((variant) => (\n        <Message\n          key={variant}\n          variant={variant as MessageVariant}\n          title=\"Message Title\"\n        >\n          Lorem ipsum dolor sit amet consectetur adipisicing elit.\n        </Message>\n      ))}\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available message variants with titles.\",\n      },\n    },\n  },\n}\n\nexport const WithoutTitle = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <Message variant=\"info\">Information message without title.</Message>\n      <Message variant=\"warning\">Warning message without title.</Message>\n      <Message variant=\"error\">Error message without title.</Message>\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Messages without titles showing different variants.\",\n      },\n    },\n  },\n}\n\nexport const WithCustomChildren = {\n  args: {\n    children: (\n      <Text variant=\"lg-display\" color=\"red100\">\n        custom children\n      </Text>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Message with custom React children instead of plain text.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,OAAO,EAAEC,gBAAgB,EAAEC,cAAc;AAClD,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEJ,OAAO;EAClBK,KAAK,EAAE,oBAAoB;EAC3BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EACN;EACJ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnB,KAAA,CAAAoB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,GACnEC,MAAM,CAACC,IAAI,CAACvB,gBAAgB,CAAC,CAACwB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACzC5B,KAAA,CAAAoB,aAAA,CAAClB,OAAO;QACN2B,GAAG,EAAED,OAAQ;QACbA,OAAO,EAAEA,OAA0B;QACnCrB,KAAK,EAAC;MAAe,GACtB,0DAED,CAAU;IAAA,CACX,CAAC,CACE;EAAA,CACP;EACDE,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMa,YAAY,GAAG;EAC1BX,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJnB,KAAA,CAAAoB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,gBACpExB,KAAA,CAAAoB,aAAA,CAAClB,OAAO;MAAC0B,OAAO,EAAC;IAAM,GAAC,oCAAkC,CAAU,eACpE5B,KAAA,CAAAoB,aAAA,CAAClB,OAAO;MAAC0B,OAAO,EAAC;IAAS,GAAC,gCAA8B,CAAU,eACnE5B,KAAA,CAAAoB,aAAA,CAAClB,OAAO;MAAC0B,OAAO,EAAC;IAAO,GAAC,8BAA4B,CAAU,CAC3D;EAAA,CACP;EACDnB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMc,kBAAkB,GAAG;EAChChB,IAAI,EAAE;IACJC,QAAQ,eACNhB,KAAA,CAAAoB,aAAA,CAACnB,IAAI;MAAC2B,OAAO,EAAC,YAAY;MAACI,KAAK,EAAC;IAAQ,GAAC,iBAE1C;EAEJ,CAAC;EACDvB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}
+{"version":3,"file":"Message.story.js","names":["React","Text","Message","MESSAGE_VARIANTS","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Default","args","children","story","AllVariants","render","createElement","style","display","flexDirection","gap","Object","keys","map","variant","key","WithoutTitle","WithCustomChildren","color"],"sources":["../../../../src/elements/Message/Message.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { Text } from \"../Text\"\nimport { Message, MESSAGE_VARIANTS, MessageVariant } from \"./Message\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Message,\n  title: \"Components/Message\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A message component with different variants for displaying information, warnings, or errors.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    children:\n      \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae natus assumenda distinctio, voluptatum magni. Natus, aliquam neque odio debitis totam labore maiores, corrupti mollitia repudiandae optio illo, autem sunt.\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic message with default styling.\",\n      },\n    },\n  },\n}\n\nexport const AllVariants = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      {Object.keys(MESSAGE_VARIANTS).map((variant) => (\n        <Message\n          key={variant}\n          variant={variant as MessageVariant}\n          title=\"Message Title\"\n        >\n          Lorem ipsum dolor sit amet consectetur adipisicing elit.\n        </Message>\n      ))}\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"All available message variants with titles.\",\n      },\n    },\n  },\n}\n\nexport const WithoutTitle = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <Message variant=\"info\">Information message without title.</Message>\n      <Message variant=\"warning\">Warning message without title.</Message>\n      <Message variant=\"error\">Error message without title.</Message>\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Messages without titles showing different variants.\",\n      },\n    },\n  },\n}\n\nexport const WithCustomChildren = {\n  args: {\n    children: (\n      <Text variant=\"lg-display\" color=\"red100\">\n        custom children\n      </Text>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Message with custom React children instead of plain text.\",\n      },\n    },\n  },\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI;AACb,SAASC,OAAO,EAAEC,gBAAgB;AAClC,SAASC,yBAAyB;AAElC,eAAe;EACbC,SAAS,EAAEH,OAAO;EAClBI,KAAK,EAAE,oBAAoB;EAC3BC,IAAI,EAAE,CAAC,UAAU,CAAC;EAClBC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXL,SAAS,EACP;MACJ;IACF,CAAC;IACDM,QAAQ,EAAE;MACNC,OAAO,EAAER;IACX;EACJ;AACF,CAAC;AAED,OAAO,IAAMS,OAAO,GAAG;EACrBC,IAAI,EAAE;IACJC,QAAQ,EACN;EACJ,CAAC;EACDP,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMC,WAAW,GAAG;EACzBC,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,GACnEC,MAAM,CAACC,IAAI,CAACtB,gBAAgB,CAAC,CAACuB,GAAG,CAAC,UAACC,OAAO;MAAA,oBACzC3B,KAAA,CAAAmB,aAAA,CAACjB,OAAO;QACN0B,GAAG,EAAED,OAAQ;QACbA,OAAO,EAAEA,OAA0B;QACnCrB,KAAK,EAAC;MAAe,GACtB,0DAED,CAAU;IAAA,CACX,CAAC,CACE;EAAA,CACP;EACDE,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMa,YAAY,GAAG;EAC1BX,MAAM,EAAE,SAARA,MAAMA,CAAA;IAAA,oBACJlB,KAAA,CAAAmB,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,MAAM;QAAEC,aAAa,EAAE,QAAQ;QAAEC,GAAG,EAAE;MAAO;IAAE,gBACpEvB,KAAA,CAAAmB,aAAA,CAACjB,OAAO;MAACyB,OAAO,EAAC;IAAM,GAAC,oCAAkC,CAAU,eACpE3B,KAAA,CAAAmB,aAAA,CAACjB,OAAO;MAACyB,OAAO,EAAC;IAAS,GAAC,gCAA8B,CAAU,eACnE3B,KAAA,CAAAmB,aAAA,CAACjB,OAAO;MAACyB,OAAO,EAAC;IAAO,GAAC,8BAA4B,CAAU,CAC3D;EAAA,CACP;EACDnB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC;AAED,OAAO,IAAMc,kBAAkB,GAAG;EAChChB,IAAI,EAAE;IACJC,QAAQ,eACNf,KAAA,CAAAmB,aAAA,CAAClB,IAAI;MAAC0B,OAAO,EAAC,YAAY;MAACI,KAAK,EAAC;IAAQ,GAAC,iBAE1C;EAEJ,CAAC;EACDvB,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,WAAW,EAAE;QACXM,KAAK,EAAE;MACT;IACF;EACF;AACF,CAAC"}

package/dist/esm/elements/Modal/ModalBase.js

@@ -10,9 +10,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import { zIndex as systemZIndex, ZIndexProps } from "styled-system";
+import { zIndex as systemZIndex } from "styled-system";
 import { usePortal } from "../../utils/usePortal";
-import { Flex, FlexProps } from "../Flex";
+import { Flex } from "../Flex";
 import { FocusOn } from "react-focus-on";
 import { useDidMount } from "../../utils";
 var Focus = styled(FocusOn).withConfig({

package/dist/esm/elements/Modal/ModalBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBase.js","names":["React","useEffect","useRef","useState","styled","zIndex","systemZIndex","ZIndexProps","usePortal","Flex","FlexProps","FocusOn","useDidMount","Focus","withConfig","displayName","componentId","Backdrop","div","Container","Dialog","attrs","role","DEFAULT_MODAL_Z_INDEX","ModalBase","props","isClient","createElement","_ModalBase","_ref","children","_ref$zIndex","_ref$dialogProps","dialogProps","_ref$onClose","onClose","rest","_objectWithoutProperties","_excluded","focusEl","backdropEl","handleMouseDown","event","target","current","handleKeydown","key","preventDefault","stopPropagation","document","addEventListener","removeEventListener","_useState","window","innerHeight","_useState2","_slicedToArray","maxHeight","setMaxHeight","updateMaxHeight","setTimeout","dispatchEvent","Event","passive","_usePortal","createPortal","_extends","ref","onMouseDown"],"sources":["../../../../src/elements/Modal/ModalBase.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { zIndex as systemZIndex, ZIndexProps } from \"styled-system\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { FocusOn } from \"react-focus-on\"\nimport { useDidMount } from \"../../utils\"\n\nconst Focus = styled(FocusOn)`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Backdrop = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Container = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  ${systemZIndex}\n`\n\nconst Dialog = styled(Flex).attrs({ role: \"dialog\" })`\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  > * {\n    max-height: 100%;\n  }\n`\n\n/** BaseModal */\nexport type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> &\n  FlexProps &\n  ZIndexProps & {\n    children?: React.ReactNode\n    dialogProps?: FlexProps\n    onClose?(): void\n  }\n\n/**\n * It seems we've landed on this value as the 'top'\n */\nexport const DEFAULT_MODAL_Z_INDEX = 9999\n\n/**\n * BaseModal\n * Low-level modal that has no opinions about layout/overlay\n * Modals content using a portal, locks scroll.\n */\nexport const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>> = (\n  props\n) => {\n  const isClient = useDidMount()\n\n  if (!isClient) {\n    return null\n  }\n  return <_ModalBase {...props} />\n}\n\nexport const _ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>> = ({\n  children,\n  zIndex = DEFAULT_MODAL_Z_INDEX,\n  dialogProps = {},\n  onClose = () => null,\n  ...rest\n}) => {\n  const focusEl = useRef<HTMLDivElement | null>(null)\n  const backdropEl = useRef<HTMLDivElement | null>(null)\n\n  const handleMouseDown = (\n    event: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    if (event.target === backdropEl.current) {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Escape\":\n          // Prevent <esc> from interfering with the returned focus\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Handle close\n          return onClose()\n        default:\n          break\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [onClose])\n\n  // Sets to `innerHeight` so as to simulate `100vh` on iOS\n  const [maxHeight, setMaxHeight] = useState(window.innerHeight)\n\n  // Keeps `maxHeight` in sync\n  useEffect(() => {\n    const updateMaxHeight = () => {\n      setMaxHeight(window.innerHeight)\n    }\n\n    // Due to the dialog being portaled; we need to wait until the next tick\n    // before we can perform any operations that rely on the sizing of elements.\n    // Presumably anything that relies on this also listens to resize for updates.\n    setTimeout(() => {\n      window.dispatchEvent(new Event(\"resize\"))\n    }, 0)\n\n    window.addEventListener(\"resize\", updateMaxHeight, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", updateMaxHeight)\n    }\n  }, [])\n\n  const { createPortal } = usePortal()\n\n  return createPortal(\n    <Container zIndex={zIndex} {...rest}>\n      <Focus ref={focusEl as any}>\n        <Backdrop ref={backdropEl as any} onMouseDown={handleMouseDown}>\n          <Dialog maxHeight={maxHeight} {...dialogProps}>\n            {children}\n          </Dialog>\n        </Backdrop>\n      </Focus>\n    </Container>\n  )\n}\n\nModalBase.displayName = \"ModalBase\"\n"],"mappings":"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"}
+{"version":3,"file":"ModalBase.js","names":["React","useEffect","useRef","useState","styled","zIndex","systemZIndex","usePortal","Flex","FocusOn","useDidMount","Focus","withConfig","displayName","componentId","Backdrop","div","Container","Dialog","attrs","role","DEFAULT_MODAL_Z_INDEX","ModalBase","props","isClient","createElement","_ModalBase","_ref","children","_ref$zIndex","_ref$dialogProps","dialogProps","_ref$onClose","onClose","rest","_objectWithoutProperties","_excluded","focusEl","backdropEl","handleMouseDown","event","target","current","handleKeydown","key","preventDefault","stopPropagation","document","addEventListener","removeEventListener","_useState","window","innerHeight","_useState2","_slicedToArray","maxHeight","setMaxHeight","updateMaxHeight","setTimeout","dispatchEvent","Event","passive","_usePortal","createPortal","_extends","ref","onMouseDown"],"sources":["../../../../src/elements/Modal/ModalBase.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { zIndex as systemZIndex, ZIndexProps } from \"styled-system\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Flex, FlexProps } from \"../Flex\"\nimport { FocusOn } from \"react-focus-on\"\nimport { useDidMount } from \"../../utils\"\n\nconst Focus = styled(FocusOn)`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Backdrop = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Container = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  ${systemZIndex}\n`\n\nconst Dialog = styled(Flex).attrs({ role: \"dialog\" })`\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  > * {\n    max-height: 100%;\n  }\n`\n\n/** BaseModal */\nexport type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> &\n  FlexProps &\n  ZIndexProps & {\n    children?: React.ReactNode\n    dialogProps?: FlexProps\n    onClose?(): void\n  }\n\n/**\n * It seems we've landed on this value as the 'top'\n */\nexport const DEFAULT_MODAL_Z_INDEX = 9999\n\n/**\n * BaseModal\n * Low-level modal that has no opinions about layout/overlay\n * Modals content using a portal, locks scroll.\n */\nexport const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>> = (\n  props\n) => {\n  const isClient = useDidMount()\n\n  if (!isClient) {\n    return null\n  }\n  return <_ModalBase {...props} />\n}\n\nexport const _ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>> = ({\n  children,\n  zIndex = DEFAULT_MODAL_Z_INDEX,\n  dialogProps = {},\n  onClose = () => null,\n  ...rest\n}) => {\n  const focusEl = useRef<HTMLDivElement | null>(null)\n  const backdropEl = useRef<HTMLDivElement | null>(null)\n\n  const handleMouseDown = (\n    event: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    if (event.target === backdropEl.current) {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Escape\":\n          // Prevent <esc> from interfering with the returned focus\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Handle close\n          return onClose()\n        default:\n          break\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [onClose])\n\n  // Sets to `innerHeight` so as to simulate `100vh` on iOS\n  const [maxHeight, setMaxHeight] = useState(window.innerHeight)\n\n  // Keeps `maxHeight` in sync\n  useEffect(() => {\n    const updateMaxHeight = () => {\n      setMaxHeight(window.innerHeight)\n    }\n\n    // Due to the dialog being portaled; we need to wait until the next tick\n    // before we can perform any operations that rely on the sizing of elements.\n    // Presumably anything that relies on this also listens to resize for updates.\n    setTimeout(() => {\n      window.dispatchEvent(new Event(\"resize\"))\n    }, 0)\n\n    window.addEventListener(\"resize\", updateMaxHeight, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", updateMaxHeight)\n    }\n  }, [])\n\n  const { createPortal } = usePortal()\n\n  return createPortal(\n    <Container zIndex={zIndex} {...rest}>\n      <Focus ref={focusEl as any}>\n        <Backdrop ref={backdropEl as any} onMouseDown={handleMouseDown}>\n          <Dialog maxHeight={maxHeight} {...dialogProps}>\n            {children}\n          </Dialog>\n        </Backdrop>\n      </Focus>\n    </Container>\n  )\n}\n\nModalBase.displayName = \"ModalBase\"\n"],"mappings":"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"}

package/dist/esm/elements/Modal/ModalBase.story.js

@@ -15,7 +15,7 @@ import { Button } from "../Button";
 import { Input } from "../Input";
 import { Join } from "../Join";
 import { Spacer } from "../Spacer";
-import { ModalBase, ModalBaseProps } from "./ModalBase";
+import { ModalBase } from "./ModalBase";
 import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
 var Example = function Example() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},

package/dist/esm/elements/Modal/ModalBase.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBase.story.js","names":["React","useEffect","useState","Text","Box","Button","Input","Join","Spacer","ModalBase","ModalBaseProps","STORYBOOK_PROPS_BLOCKLIST","Example","_ref","arguments","length","undefined","bodyChildren","dialogChildren","defer","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","open","setOpen","label","handleClose","_useState3","_useState4","deferred","setDeferred","setTimeout","createElement","Fragment","variant","onClick","_extends","onClose","background","p","width","height","style","border","textAlign","color","separator","y","placeholder","component","title","tags","parameters","docs","description","controls","exclude","Default","render","story","DeferredFocusables","Fullscreen","dialogProps","alignItems","justifyContent","Scrolling","Array","from","map","_","i","key"],"sources":["../../../../src/elements/Modal/ModalBase.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { ModalBase, ModalBaseProps } from \"./ModalBase\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Example: React.FC<\n  React.PropsWithChildren<\n    ModalBaseProps & {\n      dialogChildren?: JSX.Element\n      bodyChildren?: JSX.Element\n      /** Simulates an input being added after render */\n      defer?: boolean\n    }\n  >\n> = ({ bodyChildren, dialogChildren, defer, ...rest } = {}) => {\n  const [open, setOpen] = useState(false)\n  const label = open ? \"opened\" : \"open\"\n  const handleClose = () => setOpen(false)\n\n  const [deferred, setDeferred] = useState(false)\n\n  useEffect(() => {\n    if (defer && open) {\n      setTimeout(() => {\n        setDeferred(true)\n      }, 1000)\n    }\n  }, [defer, open])\n\n  return (\n    <>\n      <Button variant=\"primaryGray\" onClick={() => setOpen(true)}>\n        {label}\n      </Button>\n\n      {bodyChildren}\n\n      {open && (\n        <ModalBase onClose={handleClose} {...rest}>\n          <Box\n            background=\"black\"\n            p={4}\n            width=\"100%\"\n            height=\"100%\"\n            style={{ border: \"2px solid red\" }}\n          >\n            <Box textAlign=\"center\">\n              <Text variant=\"sm-display\" color=\"mono0\">\n                <Join separator={<Spacer y={2} />}>\n                  <>Some example content. Click outside to close.</>\n                  <Button variant=\"primaryWhite\" onClick={handleClose}>\n                    Or click here to close.\n                  </Button>\n                  <Input placeholder=\"Just an example for focusing\" />\n                  <Input placeholder=\"Just an example for focusing\" />\n                  {dialogChildren}\n                  {deferred && <Input placeholder=\"Deferred input\" />}\n                </Join>\n              </Text>\n            </Box>\n          </Box>\n        </ModalBase>\n      )}\n    </>\n  )\n}\n\nexport default {\n  component: ModalBase,\n  title: \"Components/ModalBase\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A base modal component that handles focus management, backdrop clicks, and accessibility.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  render: () => <Example />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default ModalBase with basic functionality.\",\n      },\n    },\n  },\n}\n\nexport const DeferredFocusables = {\n  render: () => <Example defer />,\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with deferred focusable elements that are added after render.\",\n      },\n    },\n  },\n}\n\nexport const Fullscreen = {\n  render: () => (\n    <Example\n      dialogProps={{\n        width: \"100%\",\n        height: \"100%\",\n        background: \"black\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"ModalBase in fullscreen mode.\",\n      },\n    },\n  },\n}\n\nexport const Scrolling = {\n  render: () => (\n    <Example\n      bodyChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should not scroll when modal is open</div>\n          ))}\n        </>\n      }\n      dialogChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should be scrollable</div>\n          ))}\n        </>\n      }\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with scrollable content inside while body scroll is prevented.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}
+{"version":3,"file":"ModalBase.story.js","names":["React","useEffect","useState","Text","Box","Button","Input","Join","Spacer","ModalBase","STORYBOOK_PROPS_BLOCKLIST","Example","_ref","arguments","length","undefined","bodyChildren","dialogChildren","defer","rest","_objectWithoutProperties","_excluded","_useState","_useState2","_slicedToArray","open","setOpen","label","handleClose","_useState3","_useState4","deferred","setDeferred","setTimeout","createElement","Fragment","variant","onClick","_extends","onClose","background","p","width","height","style","border","textAlign","color","separator","y","placeholder","component","title","tags","parameters","docs","description","controls","exclude","Default","render","story","DeferredFocusables","Fullscreen","dialogProps","alignItems","justifyContent","Scrolling","Array","from","map","_","i","key"],"sources":["../../../../src/elements/Modal/ModalBase.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Text } from \"../Text\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Input } from \"../Input\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { ModalBase, ModalBaseProps } from \"./ModalBase\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst Example: React.FC<\n  React.PropsWithChildren<\n    ModalBaseProps & {\n      dialogChildren?: JSX.Element\n      bodyChildren?: JSX.Element\n      /** Simulates an input being added after render */\n      defer?: boolean\n    }\n  >\n> = ({ bodyChildren, dialogChildren, defer, ...rest } = {}) => {\n  const [open, setOpen] = useState(false)\n  const label = open ? \"opened\" : \"open\"\n  const handleClose = () => setOpen(false)\n\n  const [deferred, setDeferred] = useState(false)\n\n  useEffect(() => {\n    if (defer && open) {\n      setTimeout(() => {\n        setDeferred(true)\n      }, 1000)\n    }\n  }, [defer, open])\n\n  return (\n    <>\n      <Button variant=\"primaryGray\" onClick={() => setOpen(true)}>\n        {label}\n      </Button>\n\n      {bodyChildren}\n\n      {open && (\n        <ModalBase onClose={handleClose} {...rest}>\n          <Box\n            background=\"black\"\n            p={4}\n            width=\"100%\"\n            height=\"100%\"\n            style={{ border: \"2px solid red\" }}\n          >\n            <Box textAlign=\"center\">\n              <Text variant=\"sm-display\" color=\"mono0\">\n                <Join separator={<Spacer y={2} />}>\n                  <>Some example content. Click outside to close.</>\n                  <Button variant=\"primaryWhite\" onClick={handleClose}>\n                    Or click here to close.\n                  </Button>\n                  <Input placeholder=\"Just an example for focusing\" />\n                  <Input placeholder=\"Just an example for focusing\" />\n                  {dialogChildren}\n                  {deferred && <Input placeholder=\"Deferred input\" />}\n                </Join>\n              </Text>\n            </Box>\n          </Box>\n        </ModalBase>\n      )}\n    </>\n  )\n}\n\nexport default {\n  component: ModalBase,\n  title: \"Components/ModalBase\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A base modal component that handles focus management, backdrop clicks, and accessibility.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nexport const Default = {\n  render: () => <Example />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default ModalBase with basic functionality.\",\n      },\n    },\n  },\n}\n\nexport const DeferredFocusables = {\n  render: () => <Example defer />,\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with deferred focusable elements that are added after render.\",\n      },\n    },\n  },\n}\n\nexport const Fullscreen = {\n  render: () => (\n    <Example\n      dialogProps={{\n        width: \"100%\",\n        height: \"100%\",\n        background: \"black\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"ModalBase in fullscreen mode.\",\n      },\n    },\n  },\n}\n\nexport const Scrolling = {\n  render: () => (\n    <Example\n      bodyChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should not scroll when modal is open</div>\n          ))}\n        </>\n      }\n      dialogChildren={\n        <>\n          {Array.from(Array(100)).map((_, i) => (\n            <div key={i}>content should be scrollable</div>\n          ))}\n        </>\n      }\n    />\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story:\n          \"ModalBase with scrollable content inside while body scroll is prevented.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/ModalDialog/ModalDialog.js

@@ -10,8 +10,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from "react";
-import { ModalBase, ModalBaseProps } from "../Modal";
-import { ModalDialogContent, ModalDialogContentProps } from "./ModalDialogContent";
+import { ModalBase } from "../Modal";
+import { ModalDialogContent } from "./ModalDialogContent";
 import { splitBoxProps } from "../Box";
 import { useDidMount } from "../../utils/useDidMount";
 import { useTheme } from "../../Theme";

package/dist/esm/elements/ModalDialog/ModalDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDialog.js","names":["React","ModalBase","ModalBaseProps","ModalDialogContent","ModalDialogContentProps","splitBoxProps","useDidMount","useTheme","ModalDialog","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","zIndex","rest","_objectWithoutProperties","_excluded","isMounted","clearCallStack","_splitBoxProps","_splitBoxProps2","_slicedToArray","_splitBoxProps2$","width","boxProps","_excluded2","modalProps","_useTheme","theme","createElement","_extends","style","backgroundColor","effects","backdrop","transition","dialogProps","opacity","transform","displayName"],"sources":["../../../../src/elements/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\nimport { useTheme } from \"../../Theme\"\n\nexport type ModalDialogProps = Omit<ModalBaseProps, \"title\"> &\n  ModalDialogContentProps & {\n    leftPanel?: React.ReactNode\n    rightPanel?: React.ReactNode\n  }\n\nexport const ModalDialog: React.FC<React.PropsWithChildren<ModalDialogProps>> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  zIndex,\n  ...rest\n}) => {\n  const isMounted = useDidMount({ clearCallStack: true })\n\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  const { theme } = useTheme()\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: theme.effects.backdrop,\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 480 }}\n      zIndex={zIndex}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        leftPanel={leftPanel}\n        onClose={onClose}\n        rightPanel={rightPanel}\n        title={title}\n        header={header}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,cAAc;AAClC,SACEC,kBAAkB,EAClBC,uBAAuB;AAEzB,SAASC,aAAa;AACtB,SAASC,WAAW;AACpB,SAASC,QAAQ;AAQjB,OAAO,IAAMC,WAAgE,GAAG,SAAnEA,WAAgEA,CAAAC,IAAA,EAWvE;EAAA,IAVJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,MAAM,GAAAR,IAAA,CAANQ,MAAM;IACNC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACHC,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,IAAMC,SAAS,GAAGhB,WAAW,CAAC;IAAEiB,cAAc,EAAE;EAAK,CAAC,CAAC;EAEvD,IAAAC,cAAA,GAA6CnB,aAAa,CAACc,IAAI,CAAC;IAAAM,eAAA,GAAAC,cAAA,CAAAF,cAAA;IAAAG,gBAAA,GAAAF,eAAA;IAAvDG,KAAK,GAAAD,gBAAA,CAALC,KAAK;IAAKC,QAAQ,GAAAT,wBAAA,CAAAO,gBAAA,EAAAG,UAAA;IAAIC,UAAU,GAAAN,eAAA;EAEzC,IAAAO,SAAA,GAAkBzB,QAAQ,EAAE;IAApB0B,KAAK,GAAAD,SAAA,CAALC,KAAK;EAEb,oBACEjC,KAAA,CAAAkC,aAAA,CAACjC,SAAS,EAAAkC,QAAA;IACRrB,OAAO,EAAEA,OAAQ;IACjBsB,KAAK,EACHd,SAAS,GACL;MACEe,eAAe,EAAEJ,KAAK,CAACK,OAAO,CAACC,QAAQ;MACvCC,UAAU,EAAE;IACd,CAAC,GACD;MAAEH,eAAe,EAAE;IAAc,CACtC;IACDI,WAAW,EAAE;MAAEb,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;IAAI,CAAE;IACrCV,MAAM,EAAEA;EAAO,GACXa,UAAU,gBAEd/B,KAAA,CAAAkC,aAAA,CAAC/B,kBAAkB,EAAAgC,QAAA;IACjBxB,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfW,KAAK,EAAC,MAAM;IACZQ,KAAK,EACHd,SAAS,GACL;MACEoB,OAAO,EAAE,CAAC;MACVF,UAAU,EAAE;IACd,CAAC,GACD;MAAEE,OAAO,EAAE,CAAC;MAAEC,SAAS,EAAE;IAAmB;EACjD,GACGd,QAAQ,GAEXnB,QAAQ,CACU,CACX;AAEhB,CAAC;AAxDYF,WAAgE,CAAAoC,WAAA"}
+{"version":3,"file":"ModalDialog.js","names":["React","ModalBase","ModalDialogContent","splitBoxProps","useDidMount","useTheme","ModalDialog","_ref","children","footer","hasLogo","leftPanel","onClose","rightPanel","title","header","zIndex","rest","_objectWithoutProperties","_excluded","isMounted","clearCallStack","_splitBoxProps","_splitBoxProps2","_slicedToArray","_splitBoxProps2$","width","boxProps","_excluded2","modalProps","_useTheme","theme","createElement","_extends","style","backgroundColor","effects","backdrop","transition","dialogProps","opacity","transform","displayName"],"sources":["../../../../src/elements/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\nimport { useTheme } from \"../../Theme\"\n\nexport type ModalDialogProps = Omit<ModalBaseProps, \"title\"> &\n  ModalDialogContentProps & {\n    leftPanel?: React.ReactNode\n    rightPanel?: React.ReactNode\n  }\n\nexport const ModalDialog: React.FC<React.PropsWithChildren<ModalDialogProps>> = ({\n  children,\n  footer,\n  hasLogo,\n  leftPanel,\n  onClose,\n  rightPanel,\n  title,\n  header,\n  zIndex,\n  ...rest\n}) => {\n  const isMounted = useDidMount({ clearCallStack: true })\n\n  const [{ width, ...boxProps }, modalProps] = splitBoxProps(rest)\n\n  const { theme } = useTheme()\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: theme.effects.backdrop,\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      dialogProps={{ width: width ?? 480 }}\n      zIndex={zIndex}\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        leftPanel={leftPanel}\n        onClose={onClose}\n        rightPanel={rightPanel}\n        title={title}\n        header={header}\n        width=\"100%\"\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS;AAClB,SACEC,kBAAkB;AAGpB,SAASC,aAAa;AACtB,SAASC,WAAW;AACpB,SAASC,QAAQ;AAQjB,OAAO,IAAMC,WAAgE,GAAG,SAAnEA,WAAgEA,CAAAC,IAAA,EAWvE;EAAA,IAVJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,UAAU,GAAAN,IAAA,CAAVM,UAAU;IACVC,KAAK,GAAAP,IAAA,CAALO,KAAK;IACLC,MAAM,GAAAR,IAAA,CAANQ,MAAM;IACNC,MAAM,GAAAT,IAAA,CAANS,MAAM;IACHC,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAEP,IAAMC,SAAS,GAAGhB,WAAW,CAAC;IAAEiB,cAAc,EAAE;EAAK,CAAC,CAAC;EAEvD,IAAAC,cAAA,GAA6CnB,aAAa,CAACc,IAAI,CAAC;IAAAM,eAAA,GAAAC,cAAA,CAAAF,cAAA;IAAAG,gBAAA,GAAAF,eAAA;IAAvDG,KAAK,GAAAD,gBAAA,CAALC,KAAK;IAAKC,QAAQ,GAAAT,wBAAA,CAAAO,gBAAA,EAAAG,UAAA;IAAIC,UAAU,GAAAN,eAAA;EAEzC,IAAAO,SAAA,GAAkBzB,QAAQ,EAAE;IAApB0B,KAAK,GAAAD,SAAA,CAALC,KAAK;EAEb,oBACE/B,KAAA,CAAAgC,aAAA,CAAC/B,SAAS,EAAAgC,QAAA;IACRrB,OAAO,EAAEA,OAAQ;IACjBsB,KAAK,EACHd,SAAS,GACL;MACEe,eAAe,EAAEJ,KAAK,CAACK,OAAO,CAACC,QAAQ;MACvCC,UAAU,EAAE;IACd,CAAC,GACD;MAAEH,eAAe,EAAE;IAAc,CACtC;IACDI,WAAW,EAAE;MAAEb,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI;IAAI,CAAE;IACrCV,MAAM,EAAEA;EAAO,GACXa,UAAU,gBAEd7B,KAAA,CAAAgC,aAAA,CAAC9B,kBAAkB,EAAA+B,QAAA;IACjBxB,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfW,KAAK,EAAC,MAAM;IACZQ,KAAK,EACHd,SAAS,GACL;MACEoB,OAAO,EAAE,CAAC;MACVF,UAAU,EAAE;IACd,CAAC,GACD;MAAEE,OAAO,EAAE,CAAC;MAAEC,SAAS,EAAE;IAAmB;EACjD,GACGd,QAAQ,GAEXnB,QAAQ,CACU,CACX;AAEhB,CAAC;AAxDYF,WAAgE,CAAAoC,WAAA"}