@spaced-out/genesis-mcp 1.0.9 → 1.0.10
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 +5 -5
- package/package.json +1 -1
package/data/design-system.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"buildDate": "2026-
|
|
4
|
-
"version": "0.5.
|
|
3
|
+
"buildDate": "2026-02-11T12:25:42.512Z",
|
|
4
|
+
"version": "0.5.45",
|
|
5
5
|
"designSystemPath": "/home/runner/work/ui-design-system/ui-design-system"
|
|
6
6
|
},
|
|
7
7
|
"components": {
|
|
@@ -1463,15 +1463,15 @@
|
|
|
1463
1463
|
"files": {
|
|
1464
1464
|
"main": {
|
|
1465
1465
|
"path": "KPIBox.d.ts",
|
|
1466
|
-
"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 topFoldContent?: string;\n middleFoldContent?: string;\n bottomFoldContent?: string;\n textContainer?: string;\n}>;\nexport interface KPIBoxProps {\n classNames?: ClassNames;\n semantic?: AlertSemanticType;\n topContent?: React.ReactNode;\n middleContent?: React.ReactNode;\n bottomContent?: React.ReactNode;\n iconName?: string;\n iconSize?: IconSize;\n iconType?: IconType;\n testId?: string;\n}\nexport declare const KPIBox: Flow.AbstractComponent<KPIBoxProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=KPIBox.d.ts.map"
|
|
1466
|
+
"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 topFoldContent?: string;\n middleFoldContent?: string;\n bottomFoldContent?: string;\n textContainer?: string;\n}>;\nexport interface KPIBoxProps {\n classNames?: ClassNames;\n semantic?: AlertSemanticType;\n topContent?: React.ReactNode;\n middleContent?: React.ReactNode;\n bottomContent?: React.ReactNode;\n iconName?: string;\n iconSize?: IconSize;\n iconType?: IconType;\n onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;\n testId?: string;\n}\nexport declare const KPIBox: Flow.AbstractComponent<KPIBoxProps, HTMLDivElement>;\nexport {};\n//# sourceMappingURL=KPIBox.d.ts.map"
|
|
1467
1467
|
},
|
|
1468
1468
|
"story": {
|
|
1469
1469
|
"path": "KPIBox.stories.tsx",
|
|
1470
|
-
"content": "import * as React from 'react';\n\n// import {ALERT_SEMANTIC} from '../../types/common';\nimport {Icon} from 'src/components/Icon';\nimport type {KPIBoxProps} from 'src/components/KPIBox';\nimport {KPIBox} from 'src/components/KPIBox';\nimport {SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/KPIBox/KPIBox.stories.module.css';\n\n// const semanticOptions: Array<mixed> = [...Object.values(ALERT_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Data Viz/KPI',\n component: KPIBox,\n argTypes: {\n // Uncomment when we encourage having semantic KPI Boxes\n // semantic: {\n // description:\n // 'The semantic type of the KPIBox (e.g., success, warning, danger, etc.).',\n // control: {\n // type: 'select',\n // },\n // options: semanticOptions,\n // table: {\n // type: {\n // summary: 'AlertSemanticType',\n // },\n // defaultValue: {summary: 'neutral'},\n // },\n // },\n topContent: {\n description: 'Content to be displayed at the top of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n middleContent: {\n description: 'Content to be displayed in the middle of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n bottomContent: {\n description: 'Content to be displayed at the bottom of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n semantic: {\n description: 'Semantic of the icon to be displayed in the KPIBox.',\n options: ['danger', 'information', 'neutral', 'success', 'warning'],\n control: {\n type: 'select',\n },\n table: {\n type: {\n summary: 'AlertSemanticType',\n defaultValue: {summary: 'neutral'},\n },\n },\n },\n iconName: {\n description: 'Name of the icon to be displayed in the KPIBox.',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n iconSize: {\n description: 'Size of the icon in the KPIBox.',\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n table: {\n type: {\n summary: 'IconSize',\n },\n defaultValue: {summary: 'medium'},\n },\n },\n iconType: {\n description: 'Type of the icon (e.g., outline, solid, duotone).',\n control: {\n type: 'select',\n },\n options: ['regular', 'solid', 'duotone', 'brands'],\n table: {\n type: {\n summary: 'IconType',\n },\n defaultValue: {summary: 'solid'},\n },\n },\n classNames: {\n description:\n 'Additional CSS classes to customize the appearance of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a KPIBox component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { KPIBox } from \"@spaced-out/ui-design-system/lib/components/KPIBox\";\n\\`\\`\\`\nThe KPIBox component is designed to display Key Performance\nIndicators (KPIs) with customizable content and icons.\nIt is commonly used in dashboard and reporting applications to highlight\nimportant metrics and data.\n\n### Usage\n\n\\`\\`\\`jsx\n<KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={(\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n )}\n iconName=\"chart-bar\"\n iconSize=\"medium\"\n iconType=\"solid\"\n/>\n\\`\\`\\`\n\n\\`\\`\\`css\n.bottomContent {\n display: flex;\n gap: spaceXXSmall;\n align-items: flex-start;\n}\n\\`\\`\\`\n\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/KPIBox/KPIBox',\n },\n },\n};\n\nexport const KPIStory = (args: KPIBoxProps) => (\n <>\n <SubTitleSmall>Customizable</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox {...args} />\n </div>\n <SubTitleSmall>Variations</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n testId=\"kpi-box-variation-1\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n testId=\"kpi-box-variation-2\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n testId=\"kpi-box-variation-3\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-4\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-5\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-6\"\n />\n </div>\n {/* Uncomment when we encourage having semantic KPI Boxes */}\n {/* <SubTitleSmall>Semantics</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n iconName=\"money-bill\"\n />\n\n <KPIBox\n semantic=\"information\"\n topContent=\"Website Visits\"\n middleContent=\"10,000\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-mixed\" color=\"information\" />\n <span>15% (1,500 total)</span>\n </div>\n }\n iconName=\"globe\"\n />\n\n <KPIBox\n semantic=\"warning\"\n topContent=\"Pending Orders\"\n middleContent=\"15\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-area\" color=\"warning\" />\n <span>20% (3,000 total)</span>\n </div>\n }\n iconName=\"exclamation-triangle\"\n />\n\n <KPIBox\n semantic=\"success\"\n topContent=\"New Subscribers\"\n middleContent=\"5,678\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"success\" />\n <span>8% (800 total)</span>\n </div>\n }\n iconName=\"user-plus\"\n />\n\n <KPIBox\n semantic=\"danger\"\n topContent=\"Critical Errors\"\n middleContent=\"3\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-line-down\" color=\"danger\" />\n <span>12% (1,200 total)</span>\n </div>\n }\n iconName=\"bug\"\n />\n </div> */}\n </>\n);\n\nKPIStory.args = {\n topContent: 'Total Users',\n middleContent: '10,000',\n bottomContent: (\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"success\" />\n <span>10% (1,000 total)</span>\n </div>\n ) as React.ReactElement<React.ComponentProps<'div'>>,\n iconName: 'users',\n iconType: 'duotone',\n testId: 'kpi-box-story',\n};\nKPIStory.storyName = 'KPI';\n"
|
|
1470
|
+
"content": "import * as React from 'react';\n\n// import {ALERT_SEMANTIC} from '../../types/common';\nimport {Icon} from 'src/components/Icon';\nimport type {KPIBoxProps} from 'src/components/KPIBox';\nimport {KPIBox} from 'src/components/KPIBox';\nimport {SubTitleSmall} from 'src/components/Text';\n\nimport css from 'src/components/KPIBox/KPIBox.stories.module.css';\n\n// const semanticOptions: Array<mixed> = [...Object.values(ALERT_SEMANTIC)];\n\nexport default {\n tags: ['autodocs'],\n title: 'Data Viz/KPI',\n component: KPIBox,\n argTypes: {\n // Uncomment when we encourage having semantic KPI Boxes\n // semantic: {\n // description:\n // 'The semantic type of the KPIBox (e.g., success, warning, danger, etc.).',\n // control: {\n // type: 'select',\n // },\n // options: semanticOptions,\n // table: {\n // type: {\n // summary: 'AlertSemanticType',\n // },\n // defaultValue: {summary: 'neutral'},\n // },\n // },\n topContent: {\n description: 'Content to be displayed at the top of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n middleContent: {\n description: 'Content to be displayed in the middle of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n bottomContent: {\n description: 'Content to be displayed at the bottom of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: 'React.Node',\n },\n },\n },\n semantic: {\n description: 'Semantic of the icon to be displayed in the KPIBox.',\n options: ['danger', 'information', 'neutral', 'success', 'warning'],\n control: {\n type: 'select',\n },\n table: {\n type: {\n summary: 'AlertSemanticType',\n defaultValue: {summary: 'neutral'},\n },\n },\n },\n iconName: {\n description: 'Name of the icon to be displayed in the KPIBox.',\n control: {\n type: 'text',\n },\n table: {\n type: {\n summary: 'string',\n },\n },\n },\n iconSize: {\n description: 'Size of the icon in the KPIBox.',\n control: {\n type: 'select',\n },\n options: ['small', 'medium'],\n table: {\n type: {\n summary: 'IconSize',\n },\n defaultValue: {summary: 'medium'},\n },\n },\n iconType: {\n description: 'Type of the icon (e.g., outline, solid, duotone).',\n control: {\n type: 'select',\n },\n options: ['regular', 'solid', 'duotone', 'brands'],\n table: {\n type: {\n summary: 'IconType',\n },\n defaultValue: {summary: 'solid'},\n },\n },\n onClick: {\n description:\n '**onClick** handler applied to the root element. When provided, the KPIBox is clickable, shows a pointer cursor, and is keyboard accessible.',\n action: 'clicked',\n table: {\n type: {summary: '(e: React.MouseEvent<HTMLDivElement>) => void'},\n },\n },\n classNames: {\n description:\n 'Additional CSS classes to customize the appearance of the KPIBox.',\n control: {\n type: 'object',\n },\n table: {\n type: {\n summary: '{wrapper?: string}',\n },\n },\n },\n testId: {\n description: 'Test ID for the component',\n control: {\n type: 'text',\n },\n table: {\n type: {summary: 'string'},\n },\n },\n },\n parameters: {\n docs: {\n subtitle: 'Generates a KPIBox component.',\n description: {\n component: `\n\\`\\`\\`js\nimport { KPIBox } from \"@spaced-out/ui-design-system/lib/components/KPIBox\";\n\\`\\`\\`\nThe KPIBox component is designed to display Key Performance\nIndicators (KPIs) with customizable content and icons.\nIt is commonly used in dashboard and reporting applications to highlight\nimportant metrics and data.\n\nOptional \\`onClick\\` makes the KPIBox clickable and keyboard accessible\n(role=\"button\", focusable via Tab, activated with Enter or Space).\n\n### Usage\n\n\\`\\`\\`jsx\n<KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={(\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n )}\n iconName=\"chart-bar\"\n iconSize=\"medium\"\n iconType=\"solid\"\n/>\n\\`\\`\\`\n\n### Clickable KPI\n\n\\`\\`\\`jsx\n<KPIBox\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n iconName=\"chart-bar\"\n onClick={() => { /* handle click */ }}\n/>\n\\`\\`\\`\n\n\\`\\`\\`css\n.bottomContent {\n display: flex;\n gap: spaceXXSmall;\n align-items: flex-start;\n}\n\\`\\`\\`\n\n `,\n },\n },\n storySource: {\n componentPath: '/src/components/KPIBox/KPIBox',\n },\n },\n};\n\nexport const KPIStory = (args: KPIBoxProps) => (\n <>\n <SubTitleSmall>Customizable</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox {...args} />\n </div>\n <SubTitleSmall>Variations</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n testId=\"kpi-box-variation-1\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n testId=\"kpi-box-variation-2\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n testId=\"kpi-box-variation-3\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-4\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent=\"5% (500 total)\"\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-5\"\n />\n\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n iconName=\"money-bill\"\n testId=\"kpi-box-variation-6\"\n />\n </div>\n {/* Uncomment when we encourage having semantic KPI Boxes */}\n {/* <SubTitleSmall>Semantics</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n semantic=\"neutral\"\n topContent=\"Total Sales\"\n middleContent=\"$1,234,567\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"neutral\" />\n <span>5% (500 total)</span>\n </div>\n }\n iconName=\"money-bill\"\n />\n\n <KPIBox\n semantic=\"information\"\n topContent=\"Website Visits\"\n middleContent=\"10,000\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-mixed\" color=\"information\" />\n <span>15% (1,500 total)</span>\n </div>\n }\n iconName=\"globe\"\n />\n\n <KPIBox\n semantic=\"warning\"\n topContent=\"Pending Orders\"\n middleContent=\"15\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-area\" color=\"warning\" />\n <span>20% (3,000 total)</span>\n </div>\n }\n iconName=\"exclamation-triangle\"\n />\n\n <KPIBox\n semantic=\"success\"\n topContent=\"New Subscribers\"\n middleContent=\"5,678\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"success\" />\n <span>8% (800 total)</span>\n </div>\n }\n iconName=\"user-plus\"\n />\n\n <KPIBox\n semantic=\"danger\"\n topContent=\"Critical Errors\"\n middleContent=\"3\"\n bottomContent={\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"chart-line-down\" color=\"danger\" />\n <span>12% (1,200 total)</span>\n </div>\n }\n iconName=\"bug\"\n />\n </div> */}\n </>\n);\n\nKPIStory.args = {\n topContent: 'Total Users',\n middleContent: '10,000',\n bottomContent: (\n <div className={css.bottomContent}>\n <Icon size=\"small\" name=\"arrow-trend-up\" color=\"success\" />\n <span>10% (1,000 total)</span>\n </div>\n ) as React.ReactElement<React.ComponentProps<'div'>>,\n iconName: 'users',\n iconType: 'duotone',\n testId: 'kpi-box-story',\n};\nKPIStory.storyName = 'KPI';\n\nexport const ClickableStory = (args: KPIBoxProps) => {\n const [clickCount, setClickCount] = React.useState(0);\n return (\n <>\n <SubTitleSmall>Click or focus and press Enter/Space</SubTitleSmall>\n <br />\n <div className={css.container}>\n <KPIBox\n {...args}\n onClick={(e) => {\n args.onClick?.(e);\n setClickCount((c) => c + 1);\n }}\n />\n </div>\n {clickCount > 0 && (\n <SubTitleSmall>Clicked {clickCount} time(s)</SubTitleSmall>\n )}\n </>\n );\n};\nClickableStory.args = {\n topContent: 'Total Sales',\n middleContent: '$1,234,567',\n bottomContent: '5% (500 total)',\n iconName: 'chart-bar',\n iconType: 'solid',\n testId: 'kpi-box-clickable-story',\n};\nClickableStory.storyName = 'Clickable';\n"
|
|
1471
1471
|
},
|
|
1472
1472
|
"css": {
|
|
1473
1473
|
"path": "KPIBox.module.css",
|
|
1474
|
-
"content": "@value (\n colorBackgroundTertiary,\n colorTextSecondary,\n colorTextPrimary\n) from '../../styles/variables/_color.css';\n@value (spaceXXSmall, spaceSmall, spaceLarge, spaceMedium) from '../../styles/variables/_space.css';\n@value (borderRadiusMedium) from '../../styles/variables/_border.css';\n@value (size60, size140, size252) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n composes: borderPrimary from '../../styles/border.module.css';\n min-width: size252;\n height: fit-content;\n align-items: center;\n gap: spaceSmall;\n background-color: colorBackgroundTertiary;\n border-radius: borderRadiusMedium;\n padding: spaceLarge spaceMedium;\n}\n\n.textContainer {\n display: flex;\n flex-direction: column;\n gap: spaceXXSmall;\n}\n\n.topFoldContent,\n.middleFoldContent,\n.bottomFoldContent {\n display: flex;\n}\n\n.topFoldContent {\n composes: formLabelSmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.middleFoldContent {\n composes: jumboSmall from '../../styles/typography.module.css';\n color: colorTextPrimary;\n}\n\n.bottomFoldContent {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n"
|
|
1474
|
+
"content": "@value (\n colorBackgroundTertiary,\n colorFillPrimary,\n colorFocusPrimary,\n colorTextSecondary,\n colorTextPrimary,\n colorBorderSecondary\n) from '../../styles/variables/_color.css';\n@value (spaceXXSmall, spaceSmall, spaceLarge, spaceMedium) from '../../styles/variables/_space.css';\n@value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';\n@value (size60, size140, size252) from '../../styles/variables/_size.css';\n\n.wrapper {\n display: flex;\n composes: borderPrimary from '../../styles/border.module.css';\n min-width: size252;\n height: fit-content;\n align-items: center;\n gap: spaceSmall;\n background-color: colorBackgroundTertiary;\n border-radius: borderRadiusMedium;\n padding: spaceLarge spaceMedium;\n}\n\n.clickable {\n cursor: pointer;\n outline: none;\n}\n\n.clickable:hover {\n border-color: colorBorderSecondary;\n}\n\n.clickable:focus {\n border-color: colorFillPrimary;\n box-shadow: borderWidthNone borderWidthNone borderWidthNone\n borderWidthTertiary colorFocusPrimary;\n}\n\n.textContainer {\n display: flex;\n flex-direction: column;\n gap: spaceXXSmall;\n}\n\n.topFoldContent,\n.middleFoldContent,\n.bottomFoldContent {\n display: flex;\n}\n\n.topFoldContent {\n composes: formLabelSmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n\n.middleFoldContent {\n composes: jumboSmall from '../../styles/typography.module.css';\n color: colorTextPrimary;\n}\n\n.bottomFoldContent {\n composes: bodySmall from '../../styles/typography.module.css';\n color: colorTextSecondary;\n}\n"
|
|
1475
1475
|
},
|
|
1476
1476
|
"index": {
|
|
1477
1477
|
"path": "index.d.ts",
|
package/package.json
CHANGED