@mrshmllw/smores-react 16.0.3 → 16.1.0

package/dist/RadioGroup/RadioItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FocusEvent, forwardRef, ReactNode, type ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\nimport { theme as oldTheme } from '../theme'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype RadioItemProps = {\n  name: string\n  visual?: string\n  icon?: Icons\n  iconComponent?: ReactNode\n  iconPosition?: IconPosition\n  value: BaseValueType\n  label: string\n  checked: boolean\n  onChange: (value: BaseValueType) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  displayType: DisplayType\n  isError: boolean\n  fallbackStyle?: boolean\n  bodyCopy?: string | ReactElement\n  disabled?: boolean\n  itemWidth?: ItemWidth\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n  function RadioItem(\n    {\n      name,\n      visual,\n      icon,\n      iconComponent,\n      iconPosition = 'center',\n      label,\n      value,\n      checked,\n      onChange,\n      onBlur,\n      displayType,\n      isError,\n      fallbackStyle,\n      bodyCopy,\n      disabled,\n      itemWidth,\n    },\n    ref,\n  ) {\n    const id = useUniqueId()\n\n    const iconToRender = iconComponent ? (\n      <IconContainer\n        $size={24}\n        style={{\n          display: 'flex',\n          justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',\n        }}\n      >\n        {iconComponent}\n      </IconContainer>\n    ) : icon ? (\n      <IconWrapper $iconPosition={iconPosition}>\n        <Icon render={icon} size={24} />\n      </IconWrapper>\n    ) : null\n\n    return (\n      <Wrapper\n        htmlFor={id}\n        checked={checked}\n        $displayType={displayType}\n        data-testid={value}\n        $isError={isError}\n        $fallbackStyle={fallbackStyle}\n        $disabled={disabled}\n        $itemWidth={itemWidth}\n      >\n        {visual && !icon && (\n          <VisualWrapper>\n            <Visual $visualUrl={visual} />\n          </VisualWrapper>\n        )}\n        {!visual && iconToRender}\n        <Box flex alignItems=\"center\">\n          <RadioElement\n            ref={ref}\n            name={name}\n            id={id}\n            value={value}\n            checked={checked}\n            onChange={onChange}\n            onBlur={onBlur}\n            isError={isError}\n            mr=\"space.100\"\n            isDisabled={disabled}\n          />\n          <Box>\n            <RadioText $isError={isError}>{label}</RadioText>\n            {bodyCopy && (\n              <Box>\n                {typeof bodyCopy === 'string' ? (\n                  <Text typo=\"caption\">{bodyCopy}</Text>\n                ) : (\n                  bodyCopy\n                )}\n              </Box>\n            )}\n          </Box>\n        </Box>\n      </Wrapper>\n    )\n  },\n)\n\nconst VisualWrapper = styled.div`\n  width: 100%;\n  max-width: 120px;\n  margin: 0 auto 8px;\n`\n\nconst IconWrapper = styled.div<{ $iconPosition?: IconPosition }>`\n  display: flex;\n  padding-bottom: ${({ theme }) => theme.space[150]};\n\n  ${({ $iconPosition }) =>\n    $iconPosition === 'center' &&\n    css`\n      justify-content: center;\n    `}\n\n  ${({ $iconPosition }) =>\n    $iconPosition === 'start' &&\n    css`\n      justify-content: flex-start;\n    `}\n`\n\nconst Visual = styled.div<{ $visualUrl: string }>`\n  width: 100%;\n  padding-top: 100%;\n  background-image: url('${(p) => p.$visualUrl}');\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n`\n\nconst Wrapper = styled.label<\n  TransientProps<\n    Pick<RadioItemProps, 'displayType' | 'isError' | 'fallbackStyle'>\n  > & { checked: boolean; $disabled?: boolean; $itemWidth?: ItemWidth }\n>`\n  display: flex;\n  flex-direction: column;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  ${({\n    $displayType,\n    checked,\n    $isError,\n    $fallbackStyle,\n    $disabled,\n    $itemWidth,\n    theme,\n  }) => css`\n    ${($displayType === 'horizontal-card' ||\n      $displayType === 'vertical-card') &&\n    css`\n      border-radius: 12px;\n      background-color: ${$fallbackStyle\n        ? theme.color.surface.base['000']\n        : theme.color.surface.base[300]};\n      padding: ${checked ? '10px' : '12px'};\n      border: ${checked &&\n      ($isError\n        ? `2px solid ${theme.color.feedback.negative[200]}`\n        : `2px solid ${theme.color.border.contrast}`)};\n\n      &:hover {\n        ${!$disabled &&\n        css`\n          background-color: ${$fallbackStyle\n            ? theme.color.surface.base[100]\n            : theme.color.surface.base[400]};\n        `}\n      }\n    `}\n    ${$displayType === 'horizontal-card' &&\n    css`\n      justify-content: center;\n      ${!$itemWidth &&\n      css`\n        @media (min-width: 420px) {\n          width: calc(50% - ${ITEM_GAP / 2}px);\n        }\n\n        @media (min-width: 768px) {\n          width: 201px;\n        }\n      `}\n    `}\n  width: ${$itemWidth ?? '100%'};\n  `}\n`\n\nconst RadioText = styled.span<{ $isError: boolean }>`\n  line-height: 16px;\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ $isError, theme }) =>\n    $isError ? theme.color.feedback.negative[200] : theme.color.text.base};\n  margin-top: ${({ theme }) => theme.space['050']};\n`\n"]}
+{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FocusEvent, forwardRef, ReactNode, type ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\nimport { theme as oldTheme } from '../theme'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon, Icons } from '../Icon'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition, ItemWidth } from './types'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\ntype RadioItemProps = {\n  name: string\n  visual?: string\n  icon?: Icons\n  iconComponent?: ReactNode\n  iconPosition?: IconPosition\n  value: BaseValueType\n  label: string\n  checked: boolean\n  onChange: (value: BaseValueType) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  displayType: DisplayType\n  isError: boolean\n  fallbackStyle?: boolean\n  bodyCopy?: string | ReactElement\n  disabled?: boolean\n  itemWidth?: ItemWidth\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n  function RadioItem(\n    {\n      name,\n      visual,\n      icon,\n      iconComponent,\n      iconPosition = 'center',\n      label,\n      value,\n      checked,\n      onChange,\n      onBlur,\n      displayType,\n      isError,\n      fallbackStyle,\n      bodyCopy,\n      disabled,\n      itemWidth,\n    },\n    ref,\n  ) {\n    const id = useUniqueId()\n\n    const iconToRender = iconComponent ? (\n      <IconContainer\n        $size={24}\n        style={{\n          display: 'flex',\n          justifyContent: iconPosition === 'center' ? 'center' : 'flex-start',\n        }}\n      >\n        {iconComponent}\n      </IconContainer>\n    ) : icon ? (\n      <IconWrapper $iconPosition={iconPosition}>\n        <Icon render={icon} size={24} />\n      </IconWrapper>\n    ) : null\n\n    return (\n      <Wrapper\n        htmlFor={id}\n        checked={checked}\n        $displayType={displayType}\n        data-testid={value}\n        $isError={isError}\n        $fallbackStyle={fallbackStyle}\n        $disabled={disabled}\n        $itemWidth={itemWidth}\n      >\n        {visual && !icon && (\n          <VisualWrapper>\n            <Visual $visualUrl={visual} />\n          </VisualWrapper>\n        )}\n        {!visual && iconToRender}\n        <Box flex alignItems=\"center\">\n          <RadioElement\n            ref={ref}\n            name={name}\n            id={id}\n            value={value}\n            checked={checked}\n            onChange={onChange}\n            onBlur={onBlur}\n            isError={isError}\n            mr=\"space.100\"\n            isDisabled={disabled}\n          />\n          <Box>\n            <RadioText $isError={isError}>{label}</RadioText>\n            {bodyCopy && (\n              <Box>\n                {typeof bodyCopy === 'string' ? (\n                  <Text typo=\"caption\">{bodyCopy}</Text>\n                ) : (\n                  bodyCopy\n                )}\n              </Box>\n            )}\n          </Box>\n        </Box>\n      </Wrapper>\n    )\n  },\n)\n\nconst VisualWrapper = styled.div`\n  width: 100%;\n  max-width: 120px;\n  margin: 0 auto 8px;\n`\n\nconst IconWrapper = styled.div<{ $iconPosition?: IconPosition }>`\n  display: flex;\n  padding-bottom: ${({ theme }) => theme.space[150]};\n\n  ${({ $iconPosition }) =>\n    $iconPosition === 'center' &&\n    css`\n      justify-content: center;\n    `}\n\n  ${({ $iconPosition }) =>\n    $iconPosition === 'start' &&\n    css`\n      justify-content: flex-start;\n    `}\n`\n\nconst Visual = styled.div<{ $visualUrl: string }>`\n  width: 100%;\n  padding-top: 100%;\n  background-image: url('${(p) => p.$visualUrl}');\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n`\n\nconst Wrapper = styled.label<\n  TransientProps<\n    Pick<RadioItemProps, 'displayType' | 'isError' | 'fallbackStyle'>\n  > & { checked: boolean; $disabled?: boolean; $itemWidth?: ItemWidth }\n>`\n  display: flex;\n  flex-direction: column;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  ${({\n    $displayType,\n    checked,\n    $isError,\n    $fallbackStyle,\n    $disabled,\n    $itemWidth,\n    theme,\n  }) => css`\n    ${($displayType === 'horizontal-card' ||\n      $displayType === 'vertical-card') &&\n    css`\n      border-radius: 12px;\n      background-color: ${$fallbackStyle\n        ? theme.color.surface.base['000']\n        : theme.color.surface.base[300]};\n      padding: ${checked ? '10px' : '12px'};\n      border: ${checked &&\n      ($isError\n        ? `2px solid ${theme.color.feedback.negative[200]}`\n        : `2px solid ${theme.color.border.contrast}`)};\n\n      &:hover {\n        ${!$disabled &&\n        css`\n          background-color: ${$fallbackStyle\n            ? theme.color.surface.base[100]\n            : theme.color.surface.base[400]};\n        `}\n      }\n    `}\n    ${$displayType === 'horizontal-card' &&\n    css`\n      justify-content: center;\n      ${!$itemWidth &&\n      css`\n        @media (min-width: 420px) {\n          width: calc(50% - ${ITEM_GAP / 2}px);\n        }\n\n        @media (min-width: 768px) {\n          width: 201px;\n        }\n      `}\n    `}\n  width: ${$itemWidth ?? '100%'};\n  `}\n`\n\nconst RadioText = styled.span<{ $isError: boolean }>`\n  line-height: 16px;\n  font-size: 16px;\n  font-weight: ${oldTheme.font.weight.medium};\n  color: ${({ $isError, theme }) =>\n    $isError ? theme.color.feedback.negative[200] : theme.color.text.base};\n  margin-top: ${({ theme }) => theme.space['050']};\n`\n"]}

package/dist/RichTextEditor/RichTextEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { CodeHighlightNode, CodeNode } from '@lexical/code-core';
 import { $generateNodesFromDOM } from '@lexical/html';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
@@ -18,6 +18,7 @@ import { $getRoot } from 'lexical';
 import styled from 'styled-components';
 import { Box } from '../Box';
 import CustomAutoLinkPlugin from './plugins/AutoLinkPlugin';
+import { CodeHighlightPlugin } from './plugins/CodeHighlightPlugin';
 import { EditorDefaultUpdatePlugin } from './plugins/EditorDefaultUpdatePlugin';
 import { EditorUpdatePlugin } from './plugins/EditorUpdatePlugin';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
@@ -46,7 +47,7 @@ export const RichTextEditor = ({ defaultValue, height, outline = false, maxHeigh
             CodeNode,
         ],
     };
-    return (_jsx(Container, { "$outline": outline, ...props, children: _jsx(Editor, { "$maxHeight": maxHeight, "$height": height, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(ToolbarPlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "editor-input" }), placeholder: _jsx("div", {}), ErrorBoundary: LexicalErrorBoundary }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HistoryPlugin, {}), _jsx(CustomAutoLinkPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(EditorUpdatePlugin, { onChange: onChange }), _jsx(EditorDefaultUpdatePlugin, { defaultValue: defaultValue })] }) }) }));
+    return (_jsx(Container, { "$outline": outline, ...props, children: _jsx(Editor, { "$maxHeight": maxHeight, "$height": height, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(ToolbarPlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "editor-input" }), placeholder: _jsx("div", {}), ErrorBoundary: LexicalErrorBoundary }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HistoryPlugin, {}), _jsx(CustomAutoLinkPlugin, {}), _jsx(CodeHighlightPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(EditorUpdatePlugin, { onChange: onChange }), _jsx(EditorDefaultUpdatePlugin, { defaultValue: defaultValue })] }) }) }));
 };
 const Editor = styled(Box) `
   .editor-input {

package/dist/RichTextEditor/RichTextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CodeHighlightNode, CodeNode } from '@lexical/code'\nimport { $generateNodesFromDOM } from '@lexical/html'\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\nimport { ListItemNode, ListNode } from '@lexical/list'\nimport { TRANSFORMERS } from '@lexical/markdown'\nimport { LexicalComposer } from '@lexical/react/LexicalComposer'\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable'\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin'\nimport { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport DOMPurify from 'dompurify'\nimport { $getRoot, LexicalEditor } from 'lexical'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport CustomAutoLinkPlugin from './plugins/AutoLinkPlugin'\nimport { EditorDefaultUpdatePlugin } from './plugins/EditorDefaultUpdatePlugin'\nimport { EditorUpdatePlugin } from './plugins/EditorUpdatePlugin'\nimport ToolbarPlugin from './plugins/ToolbarPlugin'\nimport { appendNodes } from './utils'\n\nexport interface RichTextEditorProps extends MarginProps {\n  defaultValue?: string\n  maxHeight?: string\n  height?: string\n  outline?: boolean\n  onChange: (e: string) => void\n}\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n  defaultValue,\n  height,\n  outline = false,\n  maxHeight = '300px',\n  onChange,\n  ...props\n}) => {\n  const defaultEditorState = (editor: LexicalEditor) => {\n    const parser = new DOMParser()\n    const dom = parser.parseFromString(\n      defaultValue ? DOMPurify.sanitize(defaultValue) : '<p></p>',\n      'text/html',\n    )\n    const nodes = $generateNodesFromDOM(editor, dom)\n    const root = $getRoot()\n    root.clear()\n\n    appendNodes(root, nodes)\n  }\n\n  const initialConfig = {\n    editorState: defaultEditorState,\n    namespace: 'MarshmallowRichTextEditor',\n    onError: (e: Error) => console.log(e),\n    nodes: [\n      AutoLinkNode,\n      LinkNode,\n      ListNode,\n      ListItemNode,\n      HeadingNode,\n      QuoteNode,\n      CodeHighlightNode,\n      CodeNode,\n    ],\n  }\n\n  return (\n    <Container $outline={outline} {...props}>\n      <Editor $maxHeight={maxHeight} $height={height}>\n        <LexicalComposer initialConfig={initialConfig}>\n          <ToolbarPlugin />\n          <RichTextPlugin\n            contentEditable={<ContentEditable className=\"editor-input\" />}\n            placeholder={<div></div>}\n            ErrorBoundary={LexicalErrorBoundary}\n          />\n          <LinkPlugin />\n          <ListPlugin />\n          <HistoryPlugin />\n          <CustomAutoLinkPlugin />\n          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />\n          <EditorUpdatePlugin onChange={onChange} />\n          <EditorDefaultUpdatePlugin defaultValue={defaultValue} />\n        </LexicalComposer>\n      </Editor>\n    </Container>\n  )\n}\n\nconst Editor = styled(Box)<{ $maxHeight: string; $height?: string }>`\n  .editor-input {\n    margin-top: ${({ theme }) => theme.space[150]};\n    background-color: ${({ theme }) => theme.color.background['000']};\n    border-radius: 12px;\n    border: 2px solid ${({ theme }) => theme.color.surface.base[400]};\n    padding: ${({ theme }) => theme.space[200]};\n    overflow: scroll;\n    outline-color: ${({ theme }) => theme.color.border.base};\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    ${({ $height }) => $height && `height: ${$height}`};\n    min-height: 84px;\n\n    * {\n      all: revert;\n      outline: none;\n    }\n  }\n`\n\nconst Container = styled(Box)<{ $outline: boolean }>`\n  background-color: ${({ theme }) => theme.color.background[100]};\n  border-radius: 16px;\n  padding: ${({ theme }) => theme.space[150]};\n  ${({ $outline, theme }) =>\n    $outline && `border: 2px solid ${theme.color.surface.base[400]}`}\n`\n"]}
+{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CodeHighlightNode, CodeNode } from '@lexical/code-core'\nimport { $generateNodesFromDOM } from '@lexical/html'\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\nimport { ListItemNode, ListNode } from '@lexical/list'\nimport { TRANSFORMERS } from '@lexical/markdown'\nimport { LexicalComposer } from '@lexical/react/LexicalComposer'\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable'\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin'\nimport { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport DOMPurify from 'dompurify'\nimport { $getRoot, LexicalEditor } from 'lexical'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport CustomAutoLinkPlugin from './plugins/AutoLinkPlugin'\nimport { CodeHighlightPlugin } from './plugins/CodeHighlightPlugin'\nimport { EditorDefaultUpdatePlugin } from './plugins/EditorDefaultUpdatePlugin'\nimport { EditorUpdatePlugin } from './plugins/EditorUpdatePlugin'\nimport ToolbarPlugin from './plugins/ToolbarPlugin'\nimport { appendNodes } from './utils'\n\nexport interface RichTextEditorProps extends MarginProps {\n  defaultValue?: string\n  maxHeight?: string\n  height?: string\n  outline?: boolean\n  onChange: (e: string) => void\n}\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n  defaultValue,\n  height,\n  outline = false,\n  maxHeight = '300px',\n  onChange,\n  ...props\n}) => {\n  const defaultEditorState = (editor: LexicalEditor) => {\n    const parser = new DOMParser()\n    const dom = parser.parseFromString(\n      defaultValue ? DOMPurify.sanitize(defaultValue) : '<p></p>',\n      'text/html',\n    )\n    const nodes = $generateNodesFromDOM(editor, dom)\n    const root = $getRoot()\n    root.clear()\n\n    appendNodes(root, nodes)\n  }\n\n  const initialConfig = {\n    editorState: defaultEditorState,\n    namespace: 'MarshmallowRichTextEditor',\n    onError: (e: Error) => console.log(e),\n    nodes: [\n      AutoLinkNode,\n      LinkNode,\n      ListNode,\n      ListItemNode,\n      HeadingNode,\n      QuoteNode,\n      CodeHighlightNode,\n      CodeNode,\n    ],\n  }\n\n  return (\n    <Container $outline={outline} {...props}>\n      <Editor $maxHeight={maxHeight} $height={height}>\n        <LexicalComposer initialConfig={initialConfig}>\n          <ToolbarPlugin />\n          <RichTextPlugin\n            contentEditable={<ContentEditable className=\"editor-input\" />}\n            placeholder={<div></div>}\n            ErrorBoundary={LexicalErrorBoundary}\n          />\n          <LinkPlugin />\n          <ListPlugin />\n          <HistoryPlugin />\n          <CustomAutoLinkPlugin />\n          <CodeHighlightPlugin />\n          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />\n          <EditorUpdatePlugin onChange={onChange} />\n          <EditorDefaultUpdatePlugin defaultValue={defaultValue} />\n        </LexicalComposer>\n      </Editor>\n    </Container>\n  )\n}\n\nconst Editor = styled(Box)<{ $maxHeight: string; $height?: string }>`\n  .editor-input {\n    margin-top: ${({ theme }) => theme.space[150]};\n    background-color: ${({ theme }) => theme.color.background['000']};\n    border-radius: 12px;\n    border: 2px solid ${({ theme }) => theme.color.surface.base[400]};\n    padding: ${({ theme }) => theme.space[200]};\n    overflow: scroll;\n    outline-color: ${({ theme }) => theme.color.border.base};\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    ${({ $height }) => $height && `height: ${$height}`};\n    min-height: 84px;\n\n    * {\n      all: revert;\n      outline: none;\n    }\n  }\n`\n\nconst Container = styled(Box)<{ $outline: boolean }>`\n  background-color: ${({ theme }) => theme.color.background[100]};\n  border-radius: 16px;\n  padding: ${({ theme }) => theme.space[150]};\n  ${({ $outline, theme }) =>\n    $outline && `border: 2px solid ${theme.color.surface.base[400]}`}\n`\n"]}

package/dist/RichTextEditor/plugins/AutoLinkPlugin.d.ts

@@ -1 +1 @@
-export default function CustomAutoLinkPlugin(): import("react/jsx-runtime").JSX.Element;
+export default function CustomAutoLinkPlugin(): import("react").JSX.Element;

package/dist/RichTextEditor/plugins/CodeHighlightPlugin.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const CodeHighlightPlugin: FC;

package/dist/RichTextEditor/plugins/CodeHighlightPlugin.js

@@ -0,0 +1,11 @@
+import { registerCodeHighlighting } from '@lexical/code-shiki';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+export const CodeHighlightPlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+};
+//# sourceMappingURL=CodeHighlightPlugin.js.map

package/dist/RichTextEditor/plugins/CodeHighlightPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeHighlightPlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/CodeHighlightPlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAA;AACjF,OAAO,EAAM,SAAS,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,CAAC,MAAM,mBAAmB,GAAO,GAAG,EAAE;IAC1C,MAAM,CAAC,MAAM,CAAC,GAAG,yBAAyB,EAAE,CAAA;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,wBAAwB,CAAC,MAAM,CAAC,CAAA;IACzC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,IAAI,CAAA;AACb,CAAC,CAAA","sourcesContent":["import { registerCodeHighlighting } from '@lexical/code-shiki'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { FC, useEffect } from 'react'\n\nexport const CodeHighlightPlugin: FC = () => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    return registerCodeHighlighting(editor)\n  }, [editor])\n\n  return null\n}\n"]}

package/dist/RichTextEditor/plugins/ToolbarPlugin.d.ts

@@ -1 +1 @@
-export default function ToolbarPlugin(): import("react/jsx-runtime").JSX.Element;
+export default function ToolbarPlugin(): import("react").JSX.Element;

package/dist/RichTextEditor/plugins/ToolbarPlugin.js

@@ -179,14 +179,14 @@ const Link = styled(EditorButton) `
   `}
 `;
 const LinkOpen = styled(IconContainer) `
-  background-color: ${({ theme }) => theme.color.interactive.tertiary.base};
+  background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};
   height: 32px;
   width: 32px;
   border-radius: 20px;
   padding: 6px;
 
   :hover {
-    background-color: ${({ theme }) => theme.color.interactive.tertiary.active};
+    background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.hover};
   }
 `;
 const LinkInput = styled.input `

package/dist/RichTextEditor/plugins/ToolbarPlugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarPlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/ToolbarPlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { MouseEvent } from 'react'\nimport {\n  $isListNode,\n  INSERT_UNORDERED_LIST_COMMAND,\n  ListNode,\n  REMOVE_LIST_COMMAND,\n} from '@lexical/list'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $isHeadingNode } from '@lexical/rich-text'\nimport { $isAtNodeEnd } from '@lexical/selection'\nimport { $getNearestNodeOfType, mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  CAN_REDO_COMMAND,\n  CAN_UNDO_COMMAND,\n  FORMAT_TEXT_COMMAND,\n  RangeSelection,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faArrowUpRightFromSquare,\n  faLinkSimple,\n  faList,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nconst LowPriority = 1\n\nfunction getSelectedNode(selection: RangeSelection) {\n  const anchor = selection.anchor\n  const focus = selection.focus\n  const anchorNode = selection.anchor.getNode()\n  const focusNode = selection.focus.getNode()\n  if (anchorNode === focusNode) {\n    return anchorNode\n  }\n  const isBackward = selection.isBackward()\n  if (isBackward) {\n    return $isAtNodeEnd(focus) ? anchorNode : focusNode\n  } else {\n    return $isAtNodeEnd(anchor) ? focusNode : anchorNode\n  }\n}\n\nexport default function ToolbarPlugin() {\n  const [editor] = useLexicalComposerContext()\n  const toolbarRef = useRef(null)\n  const [blockType, setBlockType] = useState('paragraph')\n  const [isLink, setIsLink] = useState(false)\n  const [isBold, setIsBold] = useState(false)\n  const [isItalic, setIsItalic] = useState(false)\n  const [linkURL, setLinkURL] = useState('')\n  const [prevLinkURL, setPrevLinkURL] = useState('')\n\n  const formatBulletList = () => {\n    if (blockType !== 'ul') {\n      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n    } else {\n      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)\n    }\n  }\n\n  const updateToolbar = useCallback(() => {\n    const selection = $getSelection()\n    if ($isRangeSelection(selection)) {\n      const anchorNode = selection.anchor.getNode()\n      const element =\n        anchorNode.getKey() === 'root'\n          ? anchorNode\n          : anchorNode.getTopLevelElementOrThrow()\n      const elementKey = element.getKey()\n      const elementDOM = editor.getElementByKey(elementKey)\n      if (elementDOM !== null) {\n        if ($isListNode(element)) {\n          const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n          const type = parentList ? parentList.getTag() : element.getTag()\n          setBlockType(type)\n        } else {\n          const type = $isHeadingNode(element)\n            ? element.getTag()\n            : element.getType()\n          setBlockType(type)\n        }\n      }\n      // Update text format\n      setIsBold(selection.hasFormat('bold'))\n      setIsItalic(selection.hasFormat('italic'))\n\n      // Update links\n      const node = getSelectedNode(selection)\n      const parent = node.getParent()\n      if ($isLinkNode(parent)) {\n        setIsLink(true)\n        setLinkURL(parent.getURL())\n      } else if ($isLinkNode(node)) {\n        setIsLink(true)\n        setLinkURL(node.getURL())\n      } else {\n        setIsLink(false)\n        setLinkURL('')\n      }\n    }\n  }, [editor])\n\n  const openNewWindow = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    try {\n      window.open(linkURL, '_blank')\n    } catch (error) {\n      console.warn('Failed to open invalid URL: ', error)\n    }\n  }\n\n  const urlInputRef = useRef<HTMLInputElement | null>(null)\n\n  useEffect(() => {\n    if (prevLinkURL !== '' && isLink && urlInputRef.current) {\n      urlInputRef.current.focus()\n    }\n    setPrevLinkURL(linkURL)\n  }, [linkURL])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          updateToolbar()\n        })\n      }),\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          updateToolbar()\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_UNDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_REDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n    )\n  }, [editor, updateToolbar])\n\n  return (\n    <Toolbar className=\"toolbar\" ref={toolbarRef}>\n      <Bold\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n        }}\n        $active={isBold}\n      >\n        B\n      </Bold>\n      <Italic\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n        }}\n        $active={isItalic}\n      >\n        i\n      </Italic>\n      <EditorButton\n        $active={blockType === 'ul'}\n        onClick={() => formatBulletList()}\n      >\n        <IconContainer $size={24}>\n          <FontAwesomeIcon icon={faList} />\n        </IconContainer>\n      </EditorButton>\n\n      <Link\n        $active={isLink}\n        onClick={() =>\n          !isLink\n            ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')\n            : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n        }\n      >\n        <Box ml={{ custom: '-4px' }} mt={{ custom: '6px' }}>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faLinkSimple} />\n          </IconContainer>\n        </Box>\n        <LinkInput\n          tabIndex={-1}\n          ref={urlInputRef}\n          placeholder=\"Enter url\"\n          value={linkURL}\n          onChange={(e) => {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value)\n          }}\n          onClick={(e) => e.stopPropagation()}\n        />\n        <Box onClick={openNewWindow}>\n          <LinkOpen $size={24}>\n            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />\n          </LinkOpen>\n        </Box>\n      </Link>\n    </Toolbar>\n  )\n}\n\nconst EditorButton = styled(Box)<{ $active: boolean }>`\n  height: 40px;\n  width: 40px;\n  line-height: 50px;\n  padding: ${({ theme }) => theme.space[150]};\n  border-radius: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  cursor: pointer;\n  background-color: ${({ theme }) => theme.color.surface.base[300]};\n  flex-shrink: 0;\n\n  ${({ $active, theme }) =>\n    $active &&\n    `\n    background-color: ${theme.color.interactive.primary.hover};\n  `}\n`\n\nconst Bold = styled(EditorButton)`\n  font-weight: 500;\n`\n\nconst Italic = styled(EditorButton)`\n  font-style: italic;\n  font-weight: 500;\n  text-indent: -4px;\n`\n\nconst Toolbar = styled(Box)`\n  display: flex;\n  flex-direction: row;\n  gap: ${({ theme }) => theme.space[100]};\n`\n\nconst Link = styled(EditorButton)`\n  transition: width 0.3s;\n  ${({ $active }) => $active && `width: 360px;`}\n  justify-content: left;\n  overflow: hidden;\n  gap: ${({ theme }) => theme.space[150]};\n  padding-right: 5px;\n  flex-shrink: 1;\n\n  ${({ $active, theme }) =>\n    $active &&\n    `\n    background-color: ${theme.color.interactive.primary.hover};\n\n    :hover {\n      filter: none;\n    }\n  `}\n`\n\nconst LinkOpen = styled(IconContainer)`\n  background-color: ${({ theme }) => theme.color.interactive.tertiary.base};\n  height: 32px;\n  width: 32px;\n  border-radius: 20px;\n  padding: 6px;\n\n  :hover {\n    background-color: ${({ theme }) => theme.color.interactive.tertiary.active};\n  }\n`\n\nconst LinkInput = styled.input`\n  width: inherit;\n  height: 32px;\n  border: none;\n  border-radius: 20px;\n  padding-left: ${({ theme }) => theme.space[150]};\n  padding-right: ${({ theme }) => theme.space[150]};\n  font-size: 16px;\n  min-width: 0;\n  background-color: white;\n\n  :hover {\n    outline: 2px solid ${({ theme }) => theme.color.surface.brand[200]};\n  }\n\n  :focus {\n    outline: 2px solid ${({ theme }) => theme.color.surface.brand[300]};\n  }\n`\n"]}
+{"version":3,"file":"ToolbarPlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/ToolbarPlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport { MouseEvent } from 'react'\nimport {\n  $isListNode,\n  INSERT_UNORDERED_LIST_COMMAND,\n  ListNode,\n  REMOVE_LIST_COMMAND,\n} from '@lexical/list'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $isHeadingNode } from '@lexical/rich-text'\nimport { $isAtNodeEnd } from '@lexical/selection'\nimport { $getNearestNodeOfType, mergeRegister } from '@lexical/utils'\nimport {\n  $getSelection,\n  $isRangeSelection,\n  CAN_REDO_COMMAND,\n  CAN_UNDO_COMMAND,\n  FORMAT_TEXT_COMMAND,\n  RangeSelection,\n  SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faArrowUpRightFromSquare,\n  faLinkSimple,\n  faList,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\n\nconst LowPriority = 1\n\nfunction getSelectedNode(selection: RangeSelection) {\n  const anchor = selection.anchor\n  const focus = selection.focus\n  const anchorNode = selection.anchor.getNode()\n  const focusNode = selection.focus.getNode()\n  if (anchorNode === focusNode) {\n    return anchorNode\n  }\n  const isBackward = selection.isBackward()\n  if (isBackward) {\n    return $isAtNodeEnd(focus) ? anchorNode : focusNode\n  } else {\n    return $isAtNodeEnd(anchor) ? focusNode : anchorNode\n  }\n}\n\nexport default function ToolbarPlugin() {\n  const [editor] = useLexicalComposerContext()\n  const toolbarRef = useRef(null)\n  const [blockType, setBlockType] = useState('paragraph')\n  const [isLink, setIsLink] = useState(false)\n  const [isBold, setIsBold] = useState(false)\n  const [isItalic, setIsItalic] = useState(false)\n  const [linkURL, setLinkURL] = useState('')\n  const [prevLinkURL, setPrevLinkURL] = useState('')\n\n  const formatBulletList = () => {\n    if (blockType !== 'ul') {\n      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n    } else {\n      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)\n    }\n  }\n\n  const updateToolbar = useCallback(() => {\n    const selection = $getSelection()\n    if ($isRangeSelection(selection)) {\n      const anchorNode = selection.anchor.getNode()\n      const element =\n        anchorNode.getKey() === 'root'\n          ? anchorNode\n          : anchorNode.getTopLevelElementOrThrow()\n      const elementKey = element.getKey()\n      const elementDOM = editor.getElementByKey(elementKey)\n      if (elementDOM !== null) {\n        if ($isListNode(element)) {\n          const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n          const type = parentList ? parentList.getTag() : element.getTag()\n          setBlockType(type)\n        } else {\n          const type = $isHeadingNode(element)\n            ? element.getTag()\n            : element.getType()\n          setBlockType(type)\n        }\n      }\n      // Update text format\n      setIsBold(selection.hasFormat('bold'))\n      setIsItalic(selection.hasFormat('italic'))\n\n      // Update links\n      const node = getSelectedNode(selection)\n      const parent = node.getParent()\n      if ($isLinkNode(parent)) {\n        setIsLink(true)\n        setLinkURL(parent.getURL())\n      } else if ($isLinkNode(node)) {\n        setIsLink(true)\n        setLinkURL(node.getURL())\n      } else {\n        setIsLink(false)\n        setLinkURL('')\n      }\n    }\n  }, [editor])\n\n  const openNewWindow = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation()\n    try {\n      window.open(linkURL, '_blank')\n    } catch (error) {\n      console.warn('Failed to open invalid URL: ', error)\n    }\n  }\n\n  const urlInputRef = useRef<HTMLInputElement | null>(null)\n\n  useEffect(() => {\n    if (prevLinkURL !== '' && isLink && urlInputRef.current) {\n      urlInputRef.current.focus()\n    }\n    setPrevLinkURL(linkURL)\n  }, [linkURL])\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({ editorState }) => {\n        editorState.read(() => {\n          updateToolbar()\n        })\n      }),\n      editor.registerCommand(\n        SELECTION_CHANGE_COMMAND,\n        () => {\n          updateToolbar()\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_UNDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n      editor.registerCommand(\n        CAN_REDO_COMMAND,\n        () => {\n          return false\n        },\n        LowPriority,\n      ),\n    )\n  }, [editor, updateToolbar])\n\n  return (\n    <Toolbar className=\"toolbar\" ref={toolbarRef}>\n      <Bold\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n        }}\n        $active={isBold}\n      >\n        B\n      </Bold>\n      <Italic\n        onClick={() => {\n          editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n        }}\n        $active={isItalic}\n      >\n        i\n      </Italic>\n      <EditorButton\n        $active={blockType === 'ul'}\n        onClick={() => formatBulletList()}\n      >\n        <IconContainer $size={24}>\n          <FontAwesomeIcon icon={faList} />\n        </IconContainer>\n      </EditorButton>\n\n      <Link\n        $active={isLink}\n        onClick={() =>\n          !isLink\n            ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')\n            : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n        }\n      >\n        <Box ml={{ custom: '-4px' }} mt={{ custom: '6px' }}>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faLinkSimple} />\n          </IconContainer>\n        </Box>\n        <LinkInput\n          tabIndex={-1}\n          ref={urlInputRef}\n          placeholder=\"Enter url\"\n          value={linkURL}\n          onChange={(e) => {\n            editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value)\n          }}\n          onClick={(e) => e.stopPropagation()}\n        />\n        <Box onClick={openNewWindow}>\n          <LinkOpen $size={24}>\n            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />\n          </LinkOpen>\n        </Box>\n      </Link>\n    </Toolbar>\n  )\n}\n\nconst EditorButton = styled(Box)<{ $active: boolean }>`\n  height: 40px;\n  width: 40px;\n  line-height: 50px;\n  padding: ${({ theme }) => theme.space[150]};\n  border-radius: 25px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  cursor: pointer;\n  background-color: ${({ theme }) => theme.color.surface.base[300]};\n  flex-shrink: 0;\n\n  ${({ $active, theme }) =>\n    $active &&\n    `\n    background-color: ${theme.color.interactive.primary.hover};\n  `}\n`\n\nconst Bold = styled(EditorButton)`\n  font-weight: 500;\n`\n\nconst Italic = styled(EditorButton)`\n  font-style: italic;\n  font-weight: 500;\n  text-indent: -4px;\n`\n\nconst Toolbar = styled(Box)`\n  display: flex;\n  flex-direction: row;\n  gap: ${({ theme }) => theme.space[100]};\n`\n\nconst Link = styled(EditorButton)`\n  transition: width 0.3s;\n  ${({ $active }) => $active && `width: 360px;`}\n  justify-content: left;\n  overflow: hidden;\n  gap: ${({ theme }) => theme.space[150]};\n  padding-right: 5px;\n  flex-shrink: 1;\n\n  ${({ $active, theme }) =>\n    $active &&\n    `\n    background-color: ${theme.color.interactive.primary.hover};\n\n    :hover {\n      filter: none;\n    }\n  `}\n`\n\nconst LinkOpen = styled(IconContainer)`\n  background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n  height: 32px;\n  width: 32px;\n  border-radius: 20px;\n  padding: 6px;\n\n  :hover {\n    background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.hover};\n  }\n`\n\nconst LinkInput = styled.input`\n  width: inherit;\n  height: 32px;\n  border: none;\n  border-radius: 20px;\n  padding-left: ${({ theme }) => theme.space[150]};\n  padding-right: ${({ theme }) => theme.space[150]};\n  font-size: 16px;\n  min-width: 0;\n  background-color: white;\n\n  :hover {\n    outline: 2px solid ${({ theme }) => theme.color.surface.brand[200]};\n  }\n\n  :focus {\n    outline: 2px solid ${({ theme }) => theme.color.surface.brand[300]};\n  }\n`\n"]}

package/dist/SearchInput/components/SearchOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAqB7C,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,UAAU,EACV,iBAAiB,GAClB,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAoC,EAAE,CAAC,CAAA;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,OAAO,GAAG,aAAa,CAAC,GAAG,CAClC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,SAAS,EAAiB,CAC5D,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;IAE1B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,eAAe,GAAG,QAAQ,EAAE,OAAO,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;QACpE,IAAI,gBAAgB,IAAI,CAAC,IAAI,eAAe,EAAE,CAAC;YAC7C,eAAe,CAAC,cAAc,CAAC;gBAC7B,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,OAAO;aAChB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAEtB,OAAO,CACL,KAAC,uBAAuB,cACtB,KAAC,sBAAsB,yBAAoB,gBAAgB,YACzD,KAAC,WAAW,sBAAiB,aAAa,EAAE,SAAS,EAAE,SAAS,YAC7D,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;oBAC1B,MAAM,UAAU,GACd,aAAa,KAAK,EAAE,CAAC,KAAK,IAAI,aAAa,KAAK,EAAE,CAAC,KAAK,CAAA;oBAE1D,OAAO,CACL,MAAC,UAAU,kBAEG,EAAE,CAAC,KAAK,GAAG,YAAY,EACnC,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,iBACd,UAAU,aACd,gBAAgB,KAAK,CAAC,EAC/B,YAAY,EAAE,GAAG,EAAE;4BACjB,mBAAmB,CAAC,CAAC,CAAC,CAAA;wBACxB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;4BACZ,mBAAmB,CAAC,CAAC,CAAC,CAAA;wBACxB,CAAC,aAEA,EAAE,CAAC,KAAK,EACR,UAAU,IAAI,CACb,KAAC,IAAI,IACH,MAAM,EAAC,MAAM,EACb,IAAI,EAAE,EAAE,EACR,KAAK,EAAC,yBAAyB,GAC/B,CACH,KApBI,EAAE,CAAC,KAAK,GAAG,YAAY,CAqBjB,CACd,CAAA;gBACH,CAAC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,YAAY,IACX,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,GACpC,CACH,GACW,GACS,GACD,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAExC;;;;aAIY,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;IACxC,CAAC,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAAC,CAAC,iBAAiB,IAAI,qBAAqB;;;;;;;;CAQzE,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAE5B;;;;;;sBAMqB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;;;;sBAI5C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;aAUjD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;;;CAGhD,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAA4C;;;;;;;;;;;IAWpE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAChB,OAAO;IACP,GAAG,CAAA;0BACmB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;KAC/D;;IAED,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;0BACmB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;KACjE;CACJ,CAAA;AAED,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1C,CAAA","sourcesContent":["import { FC, ReactNode, RefObject, createRef, useEffect, useRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { EmptyResults } from './EmptyResults'\n\ntype Option = {\n  label: string\n  value: string\n}\n\ntype SearchOptionsProps = {\n  displayedList: Array<Option>\n  selectedValue: string | null\n  highlightedIndex: number\n  setHighlightedIndex: (arg: number) => void\n  onSelect: (option: Option) => void\n  onKeyDown: (e: { key: string; preventDefault: () => void }) => void\n  positionRelative: boolean\n  resultsBorder: boolean\n  onNotFound?: (searchTerm: string) => void\n  searchTerm: string\n  notFoundComponent?: ReactNode\n}\n\nexport const SearchOptions: FC<SearchOptionsProps> = ({\n  displayedList,\n  selectedValue,\n  highlightedIndex,\n  setHighlightedIndex,\n  onSelect,\n  onKeyDown,\n  positionRelative,\n  resultsBorder,\n  onNotFound,\n  searchTerm,\n  notFoundComponent,\n}) => {\n  const itemRefs = useRef<RefObject<HTMLLIElement | null>[]>([])\n\n  useEffect(() => {\n    itemRefs.current = displayedList.map(\n      (_, i) => itemRefs.current[i] ?? createRef<HTMLLIElement>(),\n    )\n  }, [displayedList.length])\n\n  useEffect(() => {\n    const focusedListItem = itemRefs?.current[highlightedIndex]?.current\n    if (highlightedIndex >= 0 && focusedListItem) {\n      focusedListItem.scrollIntoView({\n        block: 'nearest',\n        inline: 'start',\n      })\n    }\n  }, [highlightedIndex])\n\n  return (\n    <BoxWithPositionRelative>\n      <StyledResultsContainer $positionRelative={positionRelative}>\n        <ResultsList $resultsBorder={resultsBorder} onKeyDown={onKeyDown}>\n          {displayedList.length ? (\n            displayedList.map((el, i) => {\n              const isSelected =\n                selectedValue === el.label || selectedValue === el.value\n\n              return (\n                <ListButton\n                  key={el.label + '_list_item'}\n                  aria-label={el.label + '_list_item'}\n                  ref={itemRefs.current[i]}\n                  onClick={() => onSelect(el)}\n                  $isSelected={isSelected}\n                  $showBg={highlightedIndex === i}\n                  onMouseEnter={() => {\n                    setHighlightedIndex(i)\n                  }}\n                  onFocus={() => {\n                    setHighlightedIndex(i)\n                  }}\n                >\n                  {el.label}\n                  {isSelected && (\n                    <Icon\n                      render=\"tick\"\n                      size={16}\n                      color=\"color.surface.brand.300\"\n                    />\n                  )}\n                </ListButton>\n              )\n            })\n          ) : (\n            <EmptyResults\n              onNotFound={onNotFound}\n              searchTerm={searchTerm}\n              notFoundComponent={notFoundComponent}\n            />\n          )}\n        </ResultsList>\n      </StyledResultsContainer>\n    </BoxWithPositionRelative>\n  )\n}\n\nconst StyledResultsContainer = styled.div<\n  TransientProps<Pick<SearchOptionsProps, 'positionRelative'>>\n>`\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: -16px;\n  padding: ${({ theme }) => theme.space[200]};\n  ${({ $positionRelative }) => !$positionRelative && 'position: absolute;'}\n  width:  calc(100% + 32px);\n  left: 0px;\n  top: -8px;\n\n  ul {\n    max-height: 192px;\n  }\n`\n\nconst ResultsList = styled.ul<\n  TransientProps<Pick<SearchOptionsProps, 'resultsBorder'>>\n>`\n  position: relative;\n  list-style: none;\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n  background-color: ${({ theme }) => theme.color.background['000']};\n  border-radius: 12px;\n  margin-top: 14px;\n  z-index: 1000;\n  border: 1px solid ${({ theme }) => theme.color.border.subtle};\n  box-shadow:\n    0px 10px 18px rgba(18, 18, 23, 0.03),\n    0px 5px 8px rgba(18, 18, 23, 0.04),\n    0px 2px 4px rgba(18, 18, 23, 0.04);\n\n  li {\n    padding: 16px 14px;\n    box-sizing: border-box;\n    font-size: 16px;\n    color: ${({ theme }) => theme.color.text.base};\n    cursor: pointer;\n  }\n`\n\nconst ListButton = styled.li<{ $isSelected: boolean; $showBg: boolean }>`\n  display: flex;\n  justify-content: space-between;\n\n  &:focus {\n    outline: none;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${({ $showBg }) =>\n    $showBg &&\n    css`\n      background-color: ${({ theme }) => theme.color.background[200]};\n    `}\n\n  ${({ $isSelected }) =>\n    $isSelected &&\n    css`\n      background-color: ${({ theme }) => theme.color.surface.base[300]};\n    `}\n`\n\nconst BoxWithPositionRelative = styled(Box)`\n  position: relative;\n`\n"]}
+{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../../src/SearchInput/components/SearchOptions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, RefObject, createRef, useEffect, useRef } from 'react'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from '../../utils/utilTypes'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { EmptyResults } from './EmptyResults'\n\ntype Option = {\n  label: string\n  value: string\n}\n\ntype SearchOptionsProps = {\n  displayedList: Array<Option>\n  selectedValue: string | null\n  highlightedIndex: number\n  setHighlightedIndex: (arg: number) => void\n  onSelect: (option: Option) => void\n  onKeyDown: (e: { key: string; preventDefault: () => void }) => void\n  positionRelative: boolean\n  resultsBorder: boolean\n  onNotFound?: (searchTerm: string) => void\n  searchTerm: string\n  notFoundComponent?: ReactNode\n}\n\nexport const SearchOptions: FC<SearchOptionsProps> = ({\n  displayedList,\n  selectedValue,\n  highlightedIndex,\n  setHighlightedIndex,\n  onSelect,\n  onKeyDown,\n  positionRelative,\n  resultsBorder,\n  onNotFound,\n  searchTerm,\n  notFoundComponent,\n}) => {\n  const itemRefs = useRef<RefObject<HTMLLIElement | null>[]>([])\n\n  useEffect(() => {\n    itemRefs.current = displayedList.map(\n      (_, i) => itemRefs.current[i] ?? createRef<HTMLLIElement>(),\n    )\n  }, [displayedList.length])\n\n  useEffect(() => {\n    const focusedListItem = itemRefs?.current[highlightedIndex]?.current\n    if (highlightedIndex >= 0 && focusedListItem) {\n      focusedListItem.scrollIntoView({\n        block: 'nearest',\n        inline: 'start',\n      })\n    }\n  }, [highlightedIndex])\n\n  return (\n    <BoxWithPositionRelative>\n      <StyledResultsContainer $positionRelative={positionRelative}>\n        <ResultsList $resultsBorder={resultsBorder} onKeyDown={onKeyDown}>\n          {displayedList.length ? (\n            displayedList.map((el, i) => {\n              const isSelected =\n                selectedValue === el.label || selectedValue === el.value\n\n              return (\n                <ListButton\n                  key={el.label + '_list_item'}\n                  aria-label={el.label + '_list_item'}\n                  ref={itemRefs.current[i]}\n                  onClick={() => onSelect(el)}\n                  $isSelected={isSelected}\n                  $showBg={highlightedIndex === i}\n                  onMouseEnter={() => {\n                    setHighlightedIndex(i)\n                  }}\n                  onFocus={() => {\n                    setHighlightedIndex(i)\n                  }}\n                >\n                  {el.label}\n                  {isSelected && (\n                    <Icon\n                      render=\"tick\"\n                      size={16}\n                      color=\"color.surface.brand.300\"\n                    />\n                  )}\n                </ListButton>\n              )\n            })\n          ) : (\n            <EmptyResults\n              onNotFound={onNotFound}\n              searchTerm={searchTerm}\n              notFoundComponent={notFoundComponent}\n            />\n          )}\n        </ResultsList>\n      </StyledResultsContainer>\n    </BoxWithPositionRelative>\n  )\n}\n\nconst StyledResultsContainer = styled.div<\n  TransientProps<Pick<SearchOptionsProps, 'positionRelative'>>\n>`\n  box-sizing: border-box;\n  overflow: hidden;\n  margin: -16px;\n  padding: ${({ theme }) => theme.space[200]};\n  ${({ $positionRelative }) => !$positionRelative && 'position: absolute;'}\n  width:  calc(100% + 32px);\n  left: 0px;\n  top: -8px;\n\n  ul {\n    max-height: 192px;\n  }\n`\n\nconst ResultsList = styled.ul<\n  TransientProps<Pick<SearchOptionsProps, 'resultsBorder'>>\n>`\n  position: relative;\n  list-style: none;\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n  background-color: ${({ theme }) => theme.color.background['000']};\n  border-radius: 12px;\n  margin-top: 14px;\n  z-index: 1000;\n  border: 1px solid ${({ theme }) => theme.color.border.subtle};\n  box-shadow:\n    0px 10px 18px rgba(18, 18, 23, 0.03),\n    0px 5px 8px rgba(18, 18, 23, 0.04),\n    0px 2px 4px rgba(18, 18, 23, 0.04);\n\n  li {\n    padding: 16px 14px;\n    box-sizing: border-box;\n    font-size: 16px;\n    color: ${({ theme }) => theme.color.text.base};\n    cursor: pointer;\n  }\n`\n\nconst ListButton = styled.li<{ $isSelected: boolean; $showBg: boolean }>`\n  display: flex;\n  justify-content: space-between;\n\n  &:focus {\n    outline: none;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n\n  ${({ $showBg }) =>\n    $showBg &&\n    css`\n      background-color: ${({ theme }) => theme.color.background[200]};\n    `}\n\n  ${({ $isSelected }) =>\n    $isSelected &&\n    css`\n      background-color: ${({ theme }) => theme.color.surface.base[300]};\n    `}\n`\n\nconst BoxWithPositionRelative = styled(Box)`\n  position: relative;\n`\n"]}

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -32,5 +32,5 @@ export type SegmentedControlProps<T> = {
  * ### How do I pass state to the `SegmentedControl` component?
  * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component
  */
-export declare const SegmentedControl: <T>({ options, value, onChange, showTag, styles: { tagBorder, tagText, tagBg, selectedText, text, background, toggle, fullWidth, }, }: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T>({ options, value, onChange, showTag, styles: { tagBorder, tagText, tagBg, selectedText, text, background, toggle, fullWidth, }, }: SegmentedControlProps<T>) => import("react").JSX.Element;
 export {};

package/dist/SegmentedControl/ToggleButton.d.ts

@@ -7,5 +7,5 @@ type ToggleButtonProps<Value> = {
     isDisabled?: boolean;
     children: ReactNode;
 };
-export declare const ToggleButton: <Value>({ name, value, onChange, isSelected, isDisabled, children, }: ToggleButtonProps<Value>) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleButton: <Value>({ name, value, onChange, isSelected, isDisabled, children, }: ToggleButtonProps<Value>) => import("react").JSX.Element;
 export {};

package/dist/Table/Table.d.ts

@@ -12,4 +12,4 @@ import { TableProps } from './types';
  * ## Improvements:
  * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this
  */
-export declare const Table: <T extends object, K extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, footer, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, alignSubTableColumns, columnWidths, hideTableHeader, getRowKey, }: TableProps<T, K>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends object, K extends object>({ columns, data, fixedHeader, hasKeyline, expandable, subTable, subRows, headerHeight, headerColor, rowColor, footer, stripedColor, rowBorderColor, rowActions, clickableRow, rowPadding, columnPadding, noDataContent, roundedTable, alignSubTableColumns, columnWidths, hideTableHeader, getRowKey, }: TableProps<T, K>) => import("react").JSX.Element;

package/dist/Table/components/RowActions.d.ts

@@ -1,2 +1,2 @@
 import { RowActionsProps } from '../types';
-export declare const RowActions: <T extends object>({ rowData, rowActions, isExpanded, toggleExpansion, expandable, width, canExpandRow, }: RowActionsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const RowActions: <T extends object>({ rowData, rowActions, isExpanded, toggleExpansion, expandable, width, canExpandRow, }: RowActionsProps<T>) => import("react").JSX.Element;

package/dist/Table/components/TableColumnGroup.d.ts

@@ -5,5 +5,5 @@ type TableColumnGroupProps = {
     setSubTableColumnWidths: Dispatch<SetStateAction<string[]>>;
     shouldAlignSubTableColumns?: boolean;
 };
-export declare function TableColumnGroup({ widths, columnCount, setSubTableColumnWidths, shouldAlignSubTableColumns, }: TableColumnGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableColumnGroup({ widths, columnCount, setSubTableColumnWidths, shouldAlignSubTableColumns, }: TableColumnGroupProps): import("react").JSX.Element;
 export {};

package/dist/Table/components/TableFooter.d.ts

@@ -3,5 +3,5 @@ type Props<K> = {
     footer: TableFooter<K>;
     columnCount: number;
 };
-export declare function TableFooter<K extends object>({ footer, columnCount, }: Props<K>): import("react/jsx-runtime").JSX.Element;
+export declare function TableFooter<K extends object>({ footer, columnCount, }: Props<K>): import("react").JSX.Element;
 export {};

package/dist/Table/components/TableHeader.d.ts

@@ -1,2 +1,2 @@
 import { TableHeaderProps } from '../types';
-export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }: TableHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableHeader: <T extends object>({ columns, fixedHeader, headerColor, rowActions, headerHeight, columnPadding, expandable, hasKeyline, }: TableHeaderProps<T>) => import("react").JSX.Element;

package/dist/Table/components/TableRow.d.ts

@@ -1,2 +1,2 @@
 import { TableRowProps } from '../types';
-export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, renderSubTable, hideBorder, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: <T extends object>({ rowData, rowIndex, columns, subRows, subTable, stripedColor, rowActions, rowColor, rowBorderColor, rowPadding, columnPadding, showActions, expandable, clickableRow, renderSubTable, hideBorder, }: TableRowProps<T>) => import("react").JSX.Element;

package/dist/Table/components/commonComponents.d.ts

@@ -1,12 +1,12 @@
-import { TransientProps } from 'utils/utilTypes';
+import { TransientProps } from '../../utils/utilTypes';
 import { TableStylesProps, type TableProps } from '../types';
 type StyledTableProps = {
     $roundedTable: TableProps<unknown>['roundedTable'];
 };
-export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, StyledTableProps>> & string;
-export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TransientProps<TableStylesProps>>> & string;
-export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, TransientProps<TableStylesProps>>> & string;
-export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TransientProps<TableStylesProps>>> & string;
+export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "$roundedTable"> & StyledTableProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "$roundedTable"> & StyledTableProps, never>>> & string;
+export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never>>> & string;
+export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never>>> & string;
+export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$width" | "$maxWidth" | "$minWidth" | "$headerHeight" | "$fixedHeader" | "$hasKeyline" | "$stripedColor" | "$headerColor" | "$rowColor" | "$rowBorderColor" | "$clickableRow" | "$rowPadding" | "$columnPadding" | "$stickyCell" | "$rowActionsBgColor" | "$noWrapContent" | "$truncateContent" | "$hideOverflow" | "$noRowBorderColor"> & TransientProps<TableStylesProps>, never>>> & string;
 type StyledSubTableCellProps = {
     $bgColor?: string;
     $padding?: string | undefined;
@@ -15,6 +15,6 @@ type StyledSubTableCellProps = {
 type StyledSubInnerCellProps = {
     $padding?: string | undefined;
 };
-export declare const StyledSubTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, StyledSubTableCellProps>> & string;
-export declare const StyledSubInnerCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSubInnerCellProps>> & string;
+export declare const StyledSubTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof StyledSubTableCellProps> & StyledSubTableCellProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof StyledSubTableCellProps> & StyledSubTableCellProps, never>>> & string;
+export declare const StyledSubInnerCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding"> & StyledSubInnerCellProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding"> & StyledSubInnerCellProps, never>>> & string;
 export {};

package/dist/Table/components/commonComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAO5D,MAAM,QAAQ,GAAG,CAAC,KAAc,EAAmB,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAA;AAE/E,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAkB;;;;;gBAKzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;;IAGxD,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;uBACgB,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;;KAElE;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,EAAE,CAAkC;gBAC3D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;mBACzC,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,WAAW,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;cACzD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;IAKlE,gBAAgB,CAAC,KAAK;kBACR,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;mBAC9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;iBACjC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;oBAC5B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;IAE/C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CACrB,YAAY;IACZ,GAAG,CAAA;oBACa,YAAY;KAC3B;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;gBACS,aAAa;KACxB;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;sBACe,cAAc;uBACb,cAAc;KAChC;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAkC;;kBAEnD,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,cAAc,IAAI,KAAK;mBAC9C,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,cAAc,IAAI,KAAK;iBACjD,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,KAAK;oBACtC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,KAAK;;IAEzD,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;;KAEF;;IAED,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACvB,cAAc;IACd,GAAG,CAAA;;KAEF;;IAED,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CACzB,gBAAgB;IAChB,GAAG,CAAA;;;;KAIF;;IAED,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACpB,WAAW;IACX,GAAG,CAAA;;;KAGF;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;mBACY,SAAS;KACvB;;IAED,CAAC,EAAE,kBAAkB,EAAE,EAAE,EAAE,CAC3B,kBAAkB;IAClB,GAAG,CAAA;oBACa,kBAAkB;KACjC;CACJ,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,CAAkC;gBACpD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAExD,CAAC,EAAE,eAAe,EAAE,iBAAiB,EAAE,EAAE,EAAE,CAC3C,eAAe;IACf,CAAC,iBAAiB;IAClB,GAAG,CAAA;iCAC0B,eAAe;KAC3C;;IAED,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT,GAAG,CAAA;oBACa,SAAS;KACxB;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb,GAAG,CAAA;;sBAEe,aAAa;;KAE9B;;MAEC,CAAC,EAAE,aAAa,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,CAC1C,aAAa;IACb,GAAG,CAAA;;;sBAGe,MAAM,CAAC,GAAG,EAAE,SAAS,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;;UAGnE,iBAAiB;sBACL,MAAM,CAAC,GAAG,EAAE,SAAS,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;KAExE;CACJ,CAAA;AAYD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CAAyB;aACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ;;IAE/C,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CACxB,eAAe;IACf,GAAG,CAAA;iCAC0B,eAAe;KAC3C;;IAED,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,qBAAqB,QAAQ,GAAG;CACjE,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAyB;aACxD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,QAAQ;CAClD,CAAA","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from 'utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps, type TableProps } from '../types'\n\ntype StyledTableProps = {\n  $roundedTable: TableProps<unknown>['roundedTable']\n}\n\nconst isString = (value: unknown): value is string => typeof value === 'string'\n\nexport const StyledTable = styled.table<StyledTableProps>`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${({ theme }) => theme.color.surface.base[100]};\n  border-spacing: 30px;\n\n  ${({ $roundedTable }) =>\n    $roundedTable &&\n    css`\n      border-radius: ${isString($roundedTable) ? $roundedTable : '16px'};\n      overflow: hidden;\n    `}\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n  background: ${({ theme }) => theme.color.surface.base[100]};\n  border-bottom: ${({ $hasKeyline, theme }) =>\n    $hasKeyline ? `1px solid ${theme.color.surface.base[900]}` : 'none'};\n  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping.label};\n  padding-left: ${({ theme }) => theme.space[100]};\n  padding-right: ${({ theme }) => theme.space[100]};\n  padding-top: ${({ theme }) => theme.space[100]};\n  padding-bottom: ${({ theme }) => theme.space[100]};\n\n  ${({ $headerColor }) =>\n    $headerColor &&\n    css`\n      background: ${$headerColor};\n    `}\n\n  ${({ $headerHeight }) =>\n    $headerHeight &&\n    css`\n      height: ${$headerHeight};\n    `}\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $minWidth }) =>\n    $minWidth &&\n    css`\n      min-width: ${$minWidth};\n    `}\n    \n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n  vertical-align: middle;\n  padding-left: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n  padding-right: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n  padding-top: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n  padding-bottom: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n\n  ${({ $hideOverflow }) =>\n    $hideOverflow &&\n    css`\n      overflow: hidden;\n    `};\n\n  ${({ $noWrapContent }) =>\n    $noWrapContent &&\n    css`\n      white-space: nowrap;\n    `};\n\n  ${({ $truncateContent }) =>\n    $truncateContent &&\n    css`\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    `};\n\n  ${({ $stickyCell }) =>\n    $stickyCell &&\n    css`\n      position: sticky;\n      right: 0;\n    `};\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $rowActionsBgColor }) =>\n    $rowActionsBgColor &&\n    css`\n      background: ${$rowActionsBgColor};\n    `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n  background: ${({ theme }) => theme.color.surface.base[300]};\n\n  ${({ $rowBorderColor, $noRowBorderColor }) =>\n    $rowBorderColor &&\n    !$noRowBorderColor &&\n    css`\n      border-bottom: 1px solid ${$rowBorderColor};\n    `}\n\n  ${({ $rowColor }) =>\n    $rowColor &&\n    css`\n      background: ${$rowColor};\n    `}\n\n  ${({ $stripedColor }) =>\n    $stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${$stripedColor};\n      }\n    `}\n\n    ${({ $clickableRow, $rowColor, theme }) =>\n    $clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};\n      }\n    `}\n`\n\ntype StyledSubTableCellProps = {\n  $bgColor?: string\n  $padding?: string | undefined\n  $rowBorderColor?: string\n}\n\ntype StyledSubInnerCellProps = {\n  $padding?: string | undefined\n}\n\nexport const StyledSubTableCell = styled.td<StyledSubTableCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n\n  ${({ $rowBorderColor }) =>\n    $rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${$rowBorderColor};\n    `}\n\n  ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`}\n`\n\nexport const StyledSubInnerCell = styled.div<StyledSubInnerCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n`\n"]}
+{"version":3,"file":"commonComponents.js","sourceRoot":"","sources":["../../../src/Table/components/commonComponents.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { TransientProps } from '../../utils/utilTypes'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps, type TableProps } from '../types'\n\ntype StyledTableProps = {\n  $roundedTable: TableProps<unknown>['roundedTable']\n}\n\nconst isString = (value: unknown): value is string => typeof value === 'string'\n\nexport const StyledTable = styled.table<StyledTableProps>`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${({ theme }) => theme.color.surface.base[100]};\n  border-spacing: 30px;\n\n  ${({ $roundedTable }) =>\n    $roundedTable &&\n    css`\n      border-radius: ${isString($roundedTable) ? $roundedTable : '16px'};\n      overflow: hidden;\n    `}\n`\n\nexport const StyledHeaderCell = styled.th<TransientProps<TableStylesProps>>`\n  background: ${({ theme }) => theme.color.surface.base[100]};\n  border-bottom: ${({ $hasKeyline, theme }) =>\n    $hasKeyline ? `1px solid ${theme.color.surface.base[900]}` : 'none'};\n  position: ${({ $fixedHeader }) => ($fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping.label};\n  padding-left: ${({ theme }) => theme.space[100]};\n  padding-right: ${({ theme }) => theme.space[100]};\n  padding-top: ${({ theme }) => theme.space[100]};\n  padding-bottom: ${({ theme }) => theme.space[100]};\n\n  ${({ $headerColor }) =>\n    $headerColor &&\n    css`\n      background: ${$headerColor};\n    `}\n\n  ${({ $headerHeight }) =>\n    $headerHeight &&\n    css`\n      height: ${$headerHeight};\n    `}\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $minWidth }) =>\n    $minWidth &&\n    css`\n      min-width: ${$minWidth};\n    `}\n    \n  ${({ $columnPadding }) =>\n    $columnPadding &&\n    css`\n      padding-left: ${$columnPadding};\n      padding-right: ${$columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TransientProps<TableStylesProps>>`\n  vertical-align: middle;\n  padding-left: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n  padding-right: ${({ $columnPadding }) => $columnPadding ?? '8px'};\n  padding-top: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n  padding-bottom: ${({ $rowPadding }) => $rowPadding ?? '8px'};\n\n  ${({ $hideOverflow }) =>\n    $hideOverflow &&\n    css`\n      overflow: hidden;\n    `};\n\n  ${({ $noWrapContent }) =>\n    $noWrapContent &&\n    css`\n      white-space: nowrap;\n    `};\n\n  ${({ $truncateContent }) =>\n    $truncateContent &&\n    css`\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    `};\n\n  ${({ $stickyCell }) =>\n    $stickyCell &&\n    css`\n      position: sticky;\n      right: 0;\n    `};\n\n  ${({ $maxWidth }) =>\n    $maxWidth &&\n    css`\n      max-width: ${$maxWidth};\n    `}\n\n  ${({ $rowActionsBgColor }) =>\n    $rowActionsBgColor &&\n    css`\n      background: ${$rowActionsBgColor};\n    `}\n`\n\nexport const StyledRow = styled.tr<TransientProps<TableStylesProps>>`\n  background: ${({ theme }) => theme.color.surface.base[300]};\n\n  ${({ $rowBorderColor, $noRowBorderColor }) =>\n    $rowBorderColor &&\n    !$noRowBorderColor &&\n    css`\n      border-bottom: 1px solid ${$rowBorderColor};\n    `}\n\n  ${({ $rowColor }) =>\n    $rowColor &&\n    css`\n      background: ${$rowColor};\n    `}\n\n  ${({ $stripedColor }) =>\n    $stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${$stripedColor};\n      }\n    `}\n\n    ${({ $clickableRow, $rowColor, theme }) =>\n    $clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, $rowColor ?? theme.color.surface.base[300])};\n      }\n    `}\n`\n\ntype StyledSubTableCellProps = {\n  $bgColor?: string\n  $padding?: string | undefined\n  $rowBorderColor?: string\n}\n\ntype StyledSubInnerCellProps = {\n  $padding?: string | undefined\n}\n\nexport const StyledSubTableCell = styled.td<StyledSubTableCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n\n  ${({ $rowBorderColor }) =>\n    $rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${$rowBorderColor};\n    `}\n\n  ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`}\n`\n\nexport const StyledSubInnerCell = styled.div<StyledSubInnerCellProps>`\n  padding: ${({ $padding }) => $padding ?? '12px 0'};\n`\n"]}

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AACrC,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAc7D,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,aAAa,EACb,SAAS,EACT,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC3D,MAAM,mBAAmB,GACvB,WAAW,IAAI,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAExD,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,aAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YACrD,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,OAAO,gBACI,eAAe,EACzB,SAAS,EAAE,SAAS,kBACN,mBAAmB,KAC7B,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,aAEf,YAAY,EACb,KAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,YACxD,KAAK,GACE,IACF,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,aAAa,YAAY,EAAE;;;;;;;;;CAS5E,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;mBACT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;CACnD,CAAA","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Icon, Icons } from '../Icon'\nimport {\n  ColorTypes,\n  getColorPath,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type TagProps = {\n  label: string\n  color: ColorTypes\n  bgColor: ColorTypes\n  borderColor?: ColorTypes\n  className?: string\n  icon?: Icons\n  iconComponent?: ReactNode\n  iconColor?: ColorTypes\n  onClick?: () => void\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  icon,\n  iconComponent,\n  iconColor,\n  onClick,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const resolvedBGColor = resolveToThemeColor(bgColor, theme)\n  const resolvedBorderColor =\n    borderColor && resolveToThemeColor(borderColor, theme)\n\n  const iconToRender = iconComponent ? (\n    <IconContainer $size={16} style={{ paddingRight: '4px' }}>\n      {iconComponent}\n    </IconContainer>\n  ) : icon ? (\n    <TagIcon\n      render={icon}\n      color={iconColor}\n      size={16}\n      data-testid={`tag-icon-${icon}`}\n    />\n  ) : null\n\n  return (\n    <Wrapper\n      $bgColor={resolvedBGColor}\n      className={className}\n      $borderColor={resolvedBorderColor}\n      {...marginProps}\n      alignContent=\"center\"\n      justifyContent=\"center\"\n      onClick={onClick}\n    >\n      {iconToRender}\n      <TagText tag=\"span\" typo=\"label\" color={getColorPath(color)}>\n        {label}\n      </TagText>\n    </Wrapper>\n  )\n}\n\ntype WrapperProps = TransientProps<{\n  bgColor: string\n  borderColor?: string\n}>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ $bgColor }) => $bgColor};\n  border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n  padding-right: ${({ theme }) => theme.space['050']};\n`\n"]}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAS,MAAM,SAAS,CAAA;AACrC,OAAO,EAEL,YAAY,EACZ,mBAAmB,GACpB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAc7D,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,aAAa,EACb,SAAS,EACT,OAAO,EACP,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC3D,MAAM,mBAAmB,GACvB,WAAW,IAAI,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;IAExD,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CACnC,KAAC,aAAa,aAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YACrD,aAAa,GACA,CACjB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,MAAM,EAAE,IAAI,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,EAAE,iBACK,YAAY,IAAI,EAAE,GAC/B,CACH,CAAC,CAAC,CAAC,IAAI,CAAA;IAER,OAAO,CACL,MAAC,OAAO,gBACI,eAAe,EACzB,SAAS,EAAE,SAAS,kBACN,mBAAmB,KAC7B,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ,EACvB,OAAO,EAAE,OAAO,aAEf,YAAY,EACb,KAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,YACxD,KAAK,GACE,IACF,CACX,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ;YACpC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,aAAa,YAAY,EAAE;;;;;;;;;CAS5E,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;mBACT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;CACnD,CAAA","sourcesContent":["import { FC, ReactNode } from 'react'\nimport styled, { useTheme } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Icon, Icons } from '../Icon'\nimport {\n  ColorTypes,\n  getColorPath,\n  resolveToThemeColor,\n} from '../ThemeProvider/utils/colourMap'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport type TagProps = {\n  label: string\n  color: ColorTypes\n  bgColor: ColorTypes\n  borderColor?: ColorTypes\n  className?: string\n  icon?: Icons\n  iconComponent?: ReactNode\n  iconColor?: ColorTypes\n  onClick?: () => void\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  icon,\n  iconComponent,\n  iconColor,\n  onClick,\n  ...marginProps\n}) => {\n  const theme = useTheme()\n\n  const resolvedBGColor = resolveToThemeColor(bgColor, theme)\n  const resolvedBorderColor =\n    borderColor && resolveToThemeColor(borderColor, theme)\n\n  const iconToRender = iconComponent ? (\n    <IconContainer $size={16} style={{ paddingRight: '4px' }}>\n      {iconComponent}\n    </IconContainer>\n  ) : icon ? (\n    <TagIcon\n      render={icon}\n      color={iconColor}\n      size={16}\n      data-testid={`tag-icon-${icon}`}\n    />\n  ) : null\n\n  return (\n    <Wrapper\n      $bgColor={resolvedBGColor}\n      className={className}\n      $borderColor={resolvedBorderColor}\n      {...marginProps}\n      alignContent=\"center\"\n      justifyContent=\"center\"\n      onClick={onClick}\n    >\n      {iconToRender}\n      <TagText tag=\"span\" typo=\"label\" color={getColorPath(color)}>\n        {label}\n      </TagText>\n    </Wrapper>\n  )\n}\n\ntype WrapperProps = TransientProps<{\n  bgColor: string\n  borderColor?: string\n}>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ $bgColor }) => $bgColor};\n  border: ${({ $borderColor }) => $borderColor && `1px solid ${$borderColor}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n\nconst TagIcon = styled(Icon)`\n  padding-right: ${({ theme }) => theme.space['050']};\n`\n"]}

package/dist/ThemeProvider/ThemeProvider.d.ts

@@ -3,6 +3,6 @@ import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.
 interface Props {
     children: ReactNode;
 }
-export declare const SmoresThemeProvider: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SmoresThemeProvider: ({ children }: Props) => import("react").JSX.Element;
 export type Theme = typeof designTokens;
 export {};

package/dist/ThemeProvider/utils/colourMap.d.ts

@@ -5,6 +5,6 @@ import { Theme } from '../ThemeProvider';
 export type NewColor = Prettify<Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>>;
 export type ColorTypes = Color | NewColor;
 export declare const resolveToThemeColor: (color: ColorTypes, theme: Theme) => string;
-export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.inverse" | "color.text.nonEssential" | "color.interactive.primary.base" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.primary.active" | "color.interactive.secondary.base" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.secondary.active" | "color.interactive.tertiary.base" | "color.interactive.tertiary.hover" | "color.interactive.tertiary.pressed" | "color.interactive.tertiary.active" | "color.interactive.destructive.base" | "color.interactive.destructive.hover" | "color.interactive.destructive.pressed" | "color.interactive.destructive.active" | "color.background.100" | "color.background.200" | "color.background.000" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.inverse" | "color.icon.nonEssential" | "color.surface.base.400" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.300" | "color.surface.base.000" | "color.surface.base.900" | "color.surface.brand.400" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.feedback.inactive.100" | "color.feedback.inactive.50" | "color.focus.onLight" | "color.focus.onDark" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "color.illustration.neutral.400" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.300" | "color.illustration.neutral.000" | "color.illustration.neutral.900" | "extended1.100" | "extended1.20" | "compareTheMarket" | "ravelin" | "stripe" | "intercom" | "checkout" | "hometree" | "premfina" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.compareTheMarket" | "thirdParty.facebook" | "thirdParty.ravelin" | "thirdParty.confusedCom" | "thirdParty.stripe" | "thirdParty.intercom" | "thirdParty.twitter" | "thirdParty.checkout" | "thirdParty.hometree" | "thirdParty.premfina" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "satsuma" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "confused" | "x";
+export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.inverse" | "color.text.nonEssential" | "color.interactive.primary.base" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.primary.selected" | "color.interactive.secondary.base" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.secondary.selected" | "color.interactive.neutral.strong.base" | "color.interactive.neutral.strong.hover" | "color.interactive.neutral.strong.pressed" | "color.interactive.neutral.strong.selected" | "color.interactive.neutral.strong.selectedHover" | "color.interactive.neutral.subtle.base" | "color.interactive.neutral.subtle.hover" | "color.interactive.neutral.subtle.pressed" | "color.interactive.neutral.subtle.selected" | "color.interactive.neutral.subtle.selectedHover" | "color.background.100" | "color.background.200" | "color.background.000" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.inverse" | "color.icon.nonEssential" | "color.surface.base.400" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.300" | "color.surface.base.000" | "color.surface.base.900" | "color.surface.brand.400" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.negative.300" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.positive.300" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.feedback.inactive.50" | "color.feedback.inactive.100" | "color.focus.onLight" | "color.focus.onDark" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.illustration.neutral.400" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.300" | "color.illustration.neutral.000" | "color.illustration.neutral.900" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "extended1.20" | "extended1.100" | "compareTheMarket" | "ravelin" | "stripe" | "intercom" | "checkout" | "hometree" | "premfina" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.compareTheMarket" | "thirdParty.facebook" | "thirdParty.ravelin" | "thirdParty.confusedCom" | "thirdParty.stripe" | "thirdParty.intercom" | "thirdParty.twitter" | "thirdParty.checkout" | "thirdParty.hometree" | "thirdParty.premfina" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "satsuma" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "confused" | "x";
 export declare const formatDesignTokenColor: () => string;
 export declare const legacyColorMap: Record<Color, NewColor>;

package/dist/Tooltip/Tooltip.d.ts

@@ -27,7 +27,10 @@ export interface TooltipProps {
 }
 export type TooltipVariant = 'primary' | 'fallback' | 'bubblegum';
 export declare const Tooltip: FC<TooltipProps>;
-export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$maxWidth" | "$background"> & {
     $maxWidth?: number;
     $background: string;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$maxWidth" | "$background"> & {
+    $maxWidth?: number;
+    $background: string;
+}, never>>> & string;

package/dist/fields/Field/Field.d.ts

@@ -4,4 +4,4 @@ export interface FieldProps extends CommonFieldProps {
     htmlFor?: string;
     children: ReactNode;
 }
-export declare const Field: ({ children, ...fieldProps }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Field: ({ children, ...fieldProps }: FieldProps) => import("react").JSX.Element;

package/dist/fields/Fieldset/Fieldset.d.ts

@@ -1,4 +1,4 @@
 import { MarginProps } from '../../utils/space';
 import { CommonFieldProps } from '../commonFieldTypes';
 export type FieldsetProps = CommonFieldProps & MarginProps;
-export declare const Fieldset: ({ children, renderAsTitle, id, ...fieldProps }: FieldsetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Fieldset: ({ children, renderAsTitle, id, ...fieldProps }: FieldsetProps) => import("react").JSX.Element;