@spaced-out/genesis-mcp 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/design-system.json +63 -3
- package/package.json +1 -1
package/data/design-system.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"buildDate": "
|
|
4
|
-
"version": "0.5.
|
|
3
|
+
"buildDate": "2026-01-16T06:55:50.533Z",
|
|
4
|
+
"version": "0.5.39",
|
|
5
5
|
"designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
|
|
6
6
|
},
|
|
7
7
|
"components": {
|
|
@@ -1771,6 +1771,66 @@
|
|
|
1771
1771
|
"index.ts"
|
|
1772
1772
|
]
|
|
1773
1773
|
},
|
|
1774
|
+
"PastChatCard": {
|
|
1775
|
+
"name": "PastChatCard",
|
|
1776
|
+
"path": "src/components/PastChatCard",
|
|
1777
|
+
"files": {
|
|
1778
|
+
"main": {
|
|
1779
|
+
"path": "PastChatCard.d.ts",
|
|
1780
|
+
"content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport { type AlertSemanticType } from '../../types/common';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n}>;\nexport interface PastChatCardProps {\n title: string;\n subTitle: string;\n iconName?: string;\n iconType?: IconType;\n iconSize?: IconSize;\n semantic?: AlertSemanticType;\n disabled?: boolean;\n classNames?: ClassNames;\n onClick?: (event: React.SyntheticEvent<HTMLDivElement>) => void;\n testId?: string;\n}\nexport declare const PastChatCard: Flow.AbstractComponent<PastChatCardProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=PastChatCard.d.ts.map"
|
|
1781
|
+
},
|
|
1782
|
+
"story": {
|
|
1783
|
+
"path": "PastChatCard.stories.tsx",
|
|
1784
|
+
"content": "import * as React from 'react';\n\nimport {ALERT_SEMANTIC} from 'src/types/common';\n\nimport {ICON_SIZE, ICON_TYPE} from 'src/components/Icon';\nimport type {PastChatCardProps} from 'src/components/PastChatCard/PastChatCard';\nimport {PastChatCard} from 'src/components/PastChatCard/PastChatCard';\n\nimport css from 'src/components/PastChatCard/PastChatCard.stories.module.css';\n\n\nconst iconTypeOptions: Array<unknown> = [...Object.values(ICON_TYPE)];\nconst iconSizeOptions: Array<unknown> = [...Object.values(ICON_SIZE)];\nconst semanticOptions: Array<unknown> = [...Object.values(ALERT_SEMANTIC)];\n\nconst meta = {\n tags: ['autodocs'],\n title: 'Components/Past Chat Card',\n component: PastChatCard,\n argTypes: {\n title: {\n description: 'The main title text displayed in the card',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n subTitle: {\n description: 'The text displayed below the title',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n iconName: {\n description: 'Name of the icon to be displayed in the PastChatCard.',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n iconType: {\n description: 'The type of icon (solid, regular, duotone, brands)',\n control: {type: 'select'},\n options: iconTypeOptions,\n table: {\n type: {summary: 'IconType'},\n defaultValue: {summary: ICON_TYPE.solid},\n },\n },\n iconSize: {\n description: 'The size of the icon',\n control: {type: 'select'},\n options: iconSizeOptions,\n table: {\n type: {summary: 'IconSize'},\n defaultValue: {summary: ICON_SIZE.small},\n },\n },\n semantic: {\n description: 'Semantic of the icon to be displayed in the PastChatCard.',\n control: {type: 'select'},\n options: semanticOptions,\n table: {\n type: {summary: 'AlertSemanticType'},\n defaultValue: {summary: ALERT_SEMANTIC.neutral},\n },\n },\n disabled: {\n description: 'If **true**, the card will be in disabled state',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n classNames: {\n description:\n 'Additional CSS classes to customize the appearance of the PastChatCard.',\n control: {type: 'object'},\n table: {\n type: {summary: '{ wrapper?: string }'},\n },\n },\n onClick: {\n description: 'onClick handler that is applied to the root <div> element.',\n action: 'clicked',\n table: {\n type: {\n summary: '(event: React.SyntheticEvent<HTMLDivElement>) => void',\n },\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a PastChatCard component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { PastChatCard } from \"@spaced-out/ui-design-system/lib/components/PastChatCard\";\n\\`\\`\\`\nPastChatCard component is for displaying past chat conversations with an optional icon, title, subtitle, and chevron indicator.\nThe card supports hover and focus states for interactive use.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/PastChatCard/PastChatCard.tsx',\n },\n },\n};\n\nexport default meta;\n\nexport const Default = {\n render: (args: PastChatCardProps) => (\n <div className={css.container}>\n <PastChatCard {...args} />\n </div>\n ),\n args: {\n title: 'Meeting scheduled rates last 30 days',\n subTitle: 'Sep 19, 9:28 AM',\n iconName: 'analytics',\n iconType: ICON_TYPE.solid,\n iconSize: ICON_SIZE.small,\n semantic: ALERT_SEMANTIC.information,\n },\n};\n\nexport const MultipleCards = {\n render: () => (\n <div className={css.container}>\n <div className={css.multipleCardsContainer}>\n <PastChatCard\n title=\"Meeting scheduled rates last 30 days\"\n subTitle=\"Sep 19, 9:28 AM\"\n iconName=\"analytics\"\n iconType={ICON_TYPE.solid}\n iconSize={ICON_SIZE.small}\n semantic={ALERT_SEMANTIC.information}\n />\n <PastChatCard\n title=\"Weekly sales report\"\n subTitle=\"Sep 18, 2:15 PM\"\n iconName=\"file-chart-column\"\n iconType={ICON_TYPE.solid}\n iconSize={ICON_SIZE.small}\n semantic={ALERT_SEMANTIC.danger}\n />\n <PastChatCard\n title=\"Customer feedback summary\"\n subTitle=\"Sep 17, 11:45 AM\"\n />\n </div>\n </div>\n ),\n};\n\nexport const Disabled = {\n render: (args: PastChatCardProps) => (\n <div className={css.container}>\n <PastChatCard {...args} />\n </div>\n ),\n args: {\n title: 'Meeting scheduled rates last 30 days',\n subTitle: 'Sep 19, 9:28 AM',\n iconName: 'analytics',\n iconType: ICON_TYPE.solid,\n iconSize: ICON_SIZE.small,\n semantic: ALERT_SEMANTIC.information,\n disabled: true,\n },\n};\n"
|
|
1785
|
+
},
|
|
1786
|
+
"css": {
|
|
1787
|
+
"path": "PastChatCard.module.css",
|
|
1788
|
+
"content": "@value (\n spaceSmall,\n spaceXSmall,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n\n@value (\n colorBorderPrimary,\n colorBorderTertiary,\n colorBackgroundTertiary,\n colorBackgroundPrimary,\n colorFocusPrimary,\n colorTextClickable\n) from '../../styles/variables/_color.css';\n\n@value (\n borderWidthPrimary,\n borderWidthTertiary,\n borderWidthNone,\n borderRadiusSmall\n) from '../../styles/variables/_border.css';\n\n@value (\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n.card {\n display: flex;\n align-items: center;\n gap: spaceXSmall;\n padding: spaceSmall;\n background-color: colorBackgroundTertiary;\n composes: borderPrimary from '../../styles/border.module.css';\n border-radius: borderRadiusSmall;\n cursor: pointer;\n width: sizeFluid;\n min-width: fit-content;\n\n &:focus {\n border-color: colorTextClickable;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n outline: none;\n }\n\n &:hover {\n background-color: colorBackgroundPrimary;\n\n &:not(:focus) {\n border-color: colorBorderTertiary;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n\n.textContent {\n display: flex;\n flex-direction: column;\n gap: spaceXXSmall;\n flex: 1;\n}\n\n.title,\n.subTitle {\n width: sizeFluid;\n}\n\n.chevronIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.semanticIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: borderRadiusSmall;\n}\n"
|
|
1789
|
+
},
|
|
1790
|
+
"index": {
|
|
1791
|
+
"path": "index.d.ts",
|
|
1792
|
+
"content": "export * from '../../components/PastChatCard/PastChatCard';\n//# sourceMappingURL=index.d.ts.map"
|
|
1793
|
+
},
|
|
1794
|
+
"additional": {}
|
|
1795
|
+
},
|
|
1796
|
+
"allFiles": [
|
|
1797
|
+
"PastChatCard.module.css",
|
|
1798
|
+
"PastChatCard.stories.module.css",
|
|
1799
|
+
"PastChatCard.stories.tsx",
|
|
1800
|
+
"PastChatCard.tsx",
|
|
1801
|
+
"index.ts"
|
|
1802
|
+
]
|
|
1803
|
+
},
|
|
1804
|
+
"PreviewCard": {
|
|
1805
|
+
"name": "PreviewCard",
|
|
1806
|
+
"path": "src/components/PreviewCard",
|
|
1807
|
+
"files": {
|
|
1808
|
+
"main": {
|
|
1809
|
+
"path": "PreviewCard.d.ts",
|
|
1810
|
+
"content": "import * as React from 'react';\nimport type { Flow } from 'flow-to-typescript-codemod';\nimport type { ColorTypes } from '../../types/typography';\nimport type { IconSize, IconType } from '../../components/Icon';\ntype ClassNames = Readonly<{\n wrapper?: string;\n card?: string;\n titleText?: string;\n previewText?: string;\n cardIconSection?: string;\n helperText?: string;\n}>;\nexport interface PreviewCardProps {\n title: string;\n previewText: string;\n cardImgIconName?: string;\n isSelected: boolean;\n disabled?: boolean;\n onClick?: (e: React.SyntheticEvent<HTMLElement>) => unknown;\n helperTextIconName?: string;\n helperTextIconColor?: ColorTypes;\n helperTextIconType?: IconType;\n helperTextIconSize?: IconSize;\n helperText?: string;\n classNames?: ClassNames;\n testId?: string;\n}\nexport declare const PreviewCard: Flow.AbstractComponent<PreviewCardProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=PreviewCard.d.ts.map"
|
|
1811
|
+
},
|
|
1812
|
+
"story": {
|
|
1813
|
+
"path": "PreviewCard.stories.tsx",
|
|
1814
|
+
"content": "import * as React from 'react';\n\nimport {TEXT_COLORS} from 'src/types/typography';\n\nimport {ICON_SIZE, ICON_TYPE} from 'src/components/Icon';\nimport type {PreviewCardProps} from 'src/components/PreviewCard/PreviewCard';\nimport {PreviewCard} from 'src/components/PreviewCard/PreviewCard';\n\nimport css from 'src/components/PreviewCard/PreviewCard.stories.module.css';\n\n\nconst colorOptions: Array<unknown> = [...Object.values(TEXT_COLORS)];\nconst iconTypeOptions: Array<unknown> = [...Object.values(ICON_TYPE)];\nconst iconSizeOptions: Array<unknown> = [...Object.values(ICON_SIZE)];\n\nconst meta = {\n tags: ['autodocs'],\n title: 'Components/Preview Card',\n component: PreviewCard,\n argTypes: {\n title: {\n description: 'Main title text displayed in the card',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n previewText: {\n description: 'Preview text displayed below the title',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n cardImgIconName: {\n description: 'Icon name for the animated card image displayed at right.',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: 'sparkles'},\n },\n },\n isSelected: {\n description: 'If **true**, the card will be in selected state',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n },\n },\n disabled: {\n description: 'If **true**, the card will be in disabled state',\n control: {type: 'boolean'},\n table: {\n type: {summary: 'boolean'},\n defaultValue: {summary: 'false'},\n },\n },\n onClick: {\n description: 'Callback function called when card is clicked',\n action: 'card-clicked',\n table: {\n type: {summary: '(e: React.SyntheticEvent<HTMLElement>) => unknown'},\n },\n },\n helperTextIconName: {\n description: 'Icon name for the helper text icon',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n helperTextIconColor: {\n description: 'Icon Color for the helper text icon',\n control: {type: 'select'},\n options: colorOptions,\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: TEXT_COLORS.primary},\n },\n },\n helperTextIconType: {\n description: 'Icon Type of the helper text icon',\n control: {type: 'select'},\n options: iconTypeOptions,\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: ICON_TYPE.regular},\n },\n },\n helperTextIconSize: {\n description: 'Icon Size of the helper text icon',\n control: {type: 'select'},\n options: iconSizeOptions,\n table: {\n type: {summary: 'string'},\n defaultValue: {summary: ICON_SIZE.small},\n },\n },\n helperText: {\n description: 'Helper text displayed below the card',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n classNames: {\n description:\n 'Provide optional classNames to be applied to different parts',\n control: {type: 'object'},\n table: {\n type: {\n summary:\n '{ wrapper?: string; card?: string; titleText?: string; previewText?: string; cardIconSection?: string; helperText?: string }',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {type: 'text'},\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a PreviewCard component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { PreviewCard } from \"@spaced-out/ui-design-system/lib/components/PreviewCard\";\n\\`\\`\\`\nThe PreviewCard component displays a clickable card with an animated card image displayed at right, with a title, preview text, and optional helper text.\nIt supports three states: default, hovered, and selected.\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/PreviewCard/PreviewCard.tsx',\n },\n },\n};\n\nexport default meta;\n\nexport const Default = {\n render: (args: PreviewCardProps) => (\n <div className={css.container}>\n <PreviewCard {...args} />\n </div>\n ),\n args: {\n title: 'The rate of conversations initiated by outbound',\n previewText: 'Preview',\n cardImgIconName: 'sparkles',\n isSelected: false,\n },\n};\n\nexport const WithHelperText = {\n render: (args: PreviewCardProps) => (\n <div className={css.container}>\n <PreviewCard {...args} />\n </div>\n ),\n args: {\n title: 'The rate of conversations initiated by outbound',\n previewText: 'Preview',\n cardImgIconName: 'sparkles',\n isSelected: false,\n helperText: 'Checkpoint made 3 days ago',\n helperTextIconName: 'check-circle',\n helperTextIconType: ICON_TYPE.regular,\n helperTextIconColor: TEXT_COLORS.success,\n helperTextIconSize: ICON_SIZE.small,\n },\n};\n\nexport const Selected = {\n render: (args: PreviewCardProps) => (\n <div className={css.container}>\n <PreviewCard {...args} />\n </div>\n ),\n args: {\n title: 'The rate of conversations initiated by outbound',\n previewText: 'Preview',\n cardImgIconName: 'sparkles',\n isSelected: true,\n helperText: 'Checkpoint made 3 days ago',\n helperTextIconName: 'check-circle',\n helperTextIconType: ICON_TYPE.regular,\n helperTextIconColor: TEXT_COLORS.success,\n helperTextIconSize: ICON_SIZE.small,\n },\n};\n\nexport const Disabled = {\n render: (args: PreviewCardProps) => (\n <div className={css.container}>\n <PreviewCard {...args} />\n </div>\n ),\n args: {\n title: 'The rate of conversations initiated by outbound',\n previewText: 'Preview',\n cardImgIconName: 'sparkles',\n isSelected: false,\n disabled: true,\n helperText: 'Checkpoint made 3 days ago',\n helperTextIconName: 'check-circle',\n helperTextIconType: ICON_TYPE.regular,\n helperTextIconColor: TEXT_COLORS.success,\n helperTextIconSize: ICON_SIZE.small,\n },\n};\n"
|
|
1815
|
+
},
|
|
1816
|
+
"css": {
|
|
1817
|
+
"path": "PreviewCard.module.css",
|
|
1818
|
+
"content": "@value (\n spaceSmall,\n spaceXSmall,\n spaceXXSmall,\n spaceXLarge,\n spaceNone\n) from '../../styles/variables/_space.css';\n\n@value (\n colorBorderPrimary,\n colorBackgroundTertiary,\n colorNeutralLightest,\n colorFillSecondary,\n colorInformationLightest,\n colorFillPrimary,\n colorInformation,\n colorTextClickable,\n colorFocusPrimary,\n colorDataViz1,\n colorDataViz2,\n colorTextDisabled\n) from '../../styles/variables/_color.css';\n\n@value (\n borderRadiusSmall,\n borderRadiusMedium,\n borderWidthPrimary,\n borderWidthTertiary,\n borderWidthNone\n) from '../../styles/variables/_border.css';\n\n@value (\n shadowBoxShadow1X,\n shadowBoxShadow1Y,\n shadowBoxShadow1Blur,\n shadowBoxShadow2X,\n shadowBoxShadow2Y,\n shadowBoxShadow2Blur,\n shadowBoxShadow1Spread,\n shadowBoxShadow1Color,\n shadowBoxShadow4Spread\n) from '../../styles/variables/_shadow.css';\n\n@value (\n sizeFluid,\n size66,\n size50,\n size4,\n size120,\n size10\n) from '../../styles/variables/_size.css';\n\n@value (\n motionDurationNormal,\n motionDurationSlow,\n motionEaseInEaseOut\n) from '../../styles/variables/_motion.css';\n\n.wrapper {\n display: flex;\n flex-direction: column;\n gap: spaceXSmall;\n width: sizeFluid;\n}\n\n.previewTextContainer {\n display: flex;\n align-items: center;\n gap: spaceXXSmall;\n}\n\n.card {\n background-color: colorBackgroundTertiary;\n border: borderWidthPrimary solid colorBorderPrimary;\n border-radius: borderRadiusMedium;\n cursor: pointer;\n outline: none;\n transition: all motionDurationNormal motionEaseInEaseOut;\n width: sizeFluid;\n min-height: fit-content;\n overflow: hidden;\n\n &:focus {\n border-color: colorTextClickable;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n }\n\n &:hover:not(:focus) {\n box-shadow: shadowBoxShadow1X shadowBoxShadow1Y shadowBoxShadow1Blur\n shadowBoxShadow1Spread shadowBoxShadow1Color;\n background-color: colorNeutralLightest;\n border-color: transparent;\n background-image: linear-gradient(\n colorNeutralLightest,\n colorNeutralLightest\n ),\n linear-gradient(to right, colorDataViz2, colorDataViz1);\n background-clip: content-box, border-box;\n background-origin: border-box;\n }\n\n &:focus:hover {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n background-color: colorNeutralLightest;\n }\n\n &.selected {\n border: borderWidthPrimary solid transparent;\n border-radius: borderRadiusMedium;\n background-image: linear-gradient(\n colorFillSecondary,\n colorInformationLightest\n ),\n linear-gradient(to right, colorFillPrimary, colorInformation);\n background-clip: content-box, border-box;\n background-origin: border-box;\n box-shadow: none;\n\n &:focus {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n border-color: colorTextClickable;\n }\n\n &:focus:hover {\n background-image: linear-gradient(\n colorNeutralLightest,\n colorNeutralLightest\n );\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n pointer-events: none;\n background-color: colorBackgroundTertiary;\n border: borderWidthPrimary solid colorBorderPrimary;\n }\n}\n\n.cardContent {\n display: flex;\n align-items: flex-start;\n padding: spaceSmall;\n gap: spaceSmall;\n position: relative;\n min-height: size66;\n}\n\n.mainContent {\n display: flex;\n flex-direction: column;\n gap: spaceXSmall;\n flex: 1;\n min-width: spaceNone;\n padding-right: calc(spaceXLarge + spaceXSmall + spaceSmall);\n}\n\n.titleText {\n width: sizeFluid;\n}\n\n.previewText {\n width: fit-content;\n}\n\n.cardIconSection {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n height: calc(size120 + size10);\n width: calc(size50 + size4);\n flex-shrink: 0;\n border-radius: borderRadiusSmall;\n background-color: colorNeutralLightest;\n border: borderWidthPrimary solid colorBorderPrimary;\n transition: all motionDurationSlow motionEaseInEaseOut;\n transform: rotate(-3deg);\n padding-top: spaceSmall;\n position: absolute;\n right: spaceXSmall;\n box-shadow: shadowBoxShadow2X shadowBoxShadow2Y shadowBoxShadow2Blur\n shadowBoxShadow4Spread shadowBoxShadow1Color;\n}\n\n.card:hover .cardIconSection {\n transform: rotate(5deg);\n}\n\n.card.selected .cardIconSection,\n.card:hover .cardIconSection {\n border: borderWidthPrimary solid colorBorderPrimary;\n background-image: linear-gradient(\n colorBackgroundTertiary,\n colorBackgroundTertiary\n );\n background-clip: border-box;\n background-origin: border-box;\n}\n\n.card.selected .cardIconSection > div,\n.card:hover .cardIconSection > div {\n color: colorTextClickable;\n}\n\n.card.disabled .cardIconSection > div {\n color: colorTextDisabled;\n}\n\n.helperText {\n display: flex;\n align-items: center;\n gap: spaceXXSmall;\n}\n"
|
|
1819
|
+
},
|
|
1820
|
+
"index": {
|
|
1821
|
+
"path": "index.d.ts",
|
|
1822
|
+
"content": "export * from '../../components/PreviewCard/PreviewCard';\n//# sourceMappingURL=index.d.ts.map"
|
|
1823
|
+
},
|
|
1824
|
+
"additional": {}
|
|
1825
|
+
},
|
|
1826
|
+
"allFiles": [
|
|
1827
|
+
"PreviewCard.module.css",
|
|
1828
|
+
"PreviewCard.stories.module.css",
|
|
1829
|
+
"PreviewCard.stories.tsx",
|
|
1830
|
+
"PreviewCard.tsx",
|
|
1831
|
+
"index.ts"
|
|
1832
|
+
]
|
|
1833
|
+
},
|
|
1774
1834
|
"ProgressDonut": {
|
|
1775
1835
|
"name": "ProgressDonut",
|
|
1776
1836
|
"path": "src/components/ProgressDonut",
|
|
@@ -2743,7 +2803,7 @@
|
|
|
2743
2803
|
},
|
|
2744
2804
|
"css": {
|
|
2745
2805
|
"path": "TokenListInput.module.css",
|
|
2746
|
-
"content": "@value (\n spaceNone,\n spaceSmall,\n spaceXSmall,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n@value (\n colorFocusDanger,\n colorFillPrimary,\n colorFillDisabled,\n colorFocusPrimary,\n colorBorderDanger,\n colorBorderPrimary,\n colorBorderTertiary\n) from '../../styles/variables/_color.css';\n@value (\n borderWidthPrimary,\n borderRadiusMedium,\n borderRadiusSmall,\n borderWidthNone,\n borderWidthTertiary\n) from '../../styles/variables/_border.css';\n@value (\n size2,\n size4,\n size8,\n size26,\n size228,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value tokenListHeaderHeight: 18px;\n@value smallBoxHeight: 34px;\n@value mediumBoxHeight: 42px;\n\n.box {\n display: flex;\n gap: size8;\n align-items: center;\n flex-wrap: wrap;\n width: sizeFluid;\n max-height: size228;\n flex: 0 0 auto;\n overflow: auto;\n cursor: pointer;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden) {\n border:
|
|
2806
|
+
"content": "@value (\n spaceNone,\n spaceSmall,\n spaceXSmall,\n spaceXXSmall\n) from '../../styles/variables/_space.css';\n@value (\n colorFocusDanger,\n colorFillPrimary,\n colorFillDisabled,\n colorFocusPrimary,\n colorBorderDanger,\n colorBorderPrimary,\n colorBorderTertiary\n) from '../../styles/variables/_color.css';\n@value (\n borderWidthPrimary,\n borderRadiusMedium,\n borderRadiusSmall,\n borderWidthNone,\n borderWidthTertiary\n) from '../../styles/variables/_border.css';\n@value (\n size2,\n size4,\n size8,\n size26,\n size228,\n sizeFluid\n) from '../../styles/variables/_size.css';\n\n@value tokenListHeaderHeight: 18px;\n@value smallBoxHeight: 34px;\n@value mediumBoxHeight: 42px;\n\n.box {\n display: flex;\n gap: size8;\n align-items: center;\n flex-wrap: wrap;\n width: sizeFluid;\n max-height: size228;\n flex: 0 0 auto;\n overflow: auto;\n cursor: pointer;\n border: borderWidthPrimary solid colorBorderPrimary;\n --box-shadow-focus: initial;\n --box-shadow-error-focus: initial;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden) {\n border-color: colorBorderPrimary;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(\n .inputHidden\n ):hover {\n border-color: colorBorderTertiary;\n}\n\n.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(\n .inputHidden\n ):focus-within {\n border-color: colorFillPrimary;\n box-shadow: var(\n --box-shadow-focus,\n borderWidthNone borderWidthNone borderWidthNone borderWidthTertiary\n colorFocusPrimary\n );\n}\n\n.box.withError {\n border-color: colorBorderDanger;\n}\n\n.box.withError:focus-within {\n border-color: colorBorderDanger;\n box-shadow: var(\n --box-shadow-error-focus,\n borderWidthNone borderWidthNone borderWidthNone borderWidthTertiary\n colorFocusDanger\n );\n}\n\n.box.inputLocked {\n border-color: colorBorderPrimary;\n border-style: dashed;\n}\n\n.box.inputDisabled {\n border-color: colorBorderPrimary;\n}\n\n.tokenListContainer {\n display: flex;\n position: relative;\n flex-flow: column;\n width: sizeFluid;\n gap: spaceXXSmall;\n}\n\n.tokenListHeader {\n display: flex;\n width: sizeFluid;\n height: tokenListHeaderHeight;\n justify-content: space-between;\n}\n\n.clearAllButton {\n cursor: pointer;\n}\n\n.clearAllButton:focus-visible {\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.medium {\n border-radius: borderRadiusMedium;\n padding: spaceXSmall spaceSmall;\n min-height: mediumBoxHeight;\n}\n\n.small {\n border-radius: borderRadiusSmall;\n padding: spaceXXSmall spaceSmall;\n min-height: smallBoxHeight;\n}\n\n.tokenListInputWrapper {\n display: flex;\n flex-direction: column;\n gap: spaceXSmall;\n}\n\n.inputMedium {\n composes: formInputMedium from '../../styles/typography.module.css';\n min-width: calc(sizeFluid/4);\n outline: none;\n border: none;\n background-color: transparent;\n padding: spaceNone spaceNone spaceNone spaceNone;\n flex: 1 0;\n}\n\n.inputSmall {\n composes: formInputSmall from '../../styles/typography.module.css';\n min-width: calc(sizeFluid/4);\n outline: none;\n border: none;\n background-color: transparent;\n padding: spaceNone spaceNone spaceNone spaceNone;\n flex: 1 0;\n}\n\n.lockIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: auto;\n}\n\n.loaderContainer {\n display: flex;\n align-items: center;\n justify-content: center;\n width: size26;\n height: size26;\n margin-left: auto;\n}\n\n.menuWrapper {\n width: var(--dropdown-width);\n z-index: var(--menu-elevation);\n}\n"
|
|
2747
2807
|
},
|
|
2748
2808
|
"index": {
|
|
2749
2809
|
"path": "index.d.ts",
|
package/package.json
CHANGED