@n8n/design-system 2.34.2 → 2.35.0
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/LICENSE_EE.md +27 -0
- package/dist/components/AskAssistantChat/AskAssistantChat.vue.d.ts +4 -4
- package/dist/components/N8nActionDropdown/ActionDropdown.types.d.ts +1 -0
- package/dist/components/N8nActionPill/ActionPill.vue.d.ts +2 -2
- package/dist/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.types.d.ts +1 -1
- package/dist/components/N8nChatInput/ChatInput.vue.d.ts +1 -1
- package/dist/components/N8nDialog/Dialog.vue.d.ts +2 -0
- package/dist/components/N8nDialog/DialogContent.vue.d.ts +1 -0
- package/dist/components/N8nDialog/DialogOverlay.vue.d.ts +1 -0
- package/dist/components/N8nIcon/icons.d.ts +2 -0
- package/dist/components/N8nSegmentControl/SegmentControl.types.d.ts +16 -0
- package/dist/components/{N8nRadioButtons/RadioButtons.vue.d.ts → N8nSegmentControl/SegmentControl.vue.d.ts} +5 -5
- package/dist/components/{N8nRadioButtons/RadioButton.vue.d.ts → N8nSegmentControl/SegmentControlItem.vue.d.ts} +6 -12
- package/dist/components/N8nSegmentControl/index.d.ts +3 -0
- package/dist/components/N8nSuggestedActions/SuggestedActions.vue.d.ts +2 -0
- package/dist/components/index.d.ts +2 -1
- package/dist/css/_tokens.scss +2 -0
- package/dist/css/fonts/inter.scss +14 -0
- package/dist/css/fonts.scss +3 -7
- package/dist/en-CIboFQvZ.js +2 -0
- package/dist/{en-BN17fhJM.js → en-Dvx8tZIA.js} +2 -0
- package/dist/index.js +4940 -4789
- package/dist/style.css +1 -1
- package/dist/theme.css +1 -1
- package/dist/types/tabs.d.ts +1 -1
- package/dist/v2/components/InputNumber/InputNumber.types.d.ts +7 -2
- package/dist/v2/components/InputNumber/InputNumber.vue.d.ts +1 -0
- package/package.json +69 -2
- package/.turbo/turbo-build.log +0 -155
- package/assets/.nojekyll +0 -0
- package/assets/images/storybook-logo-dark.png +0 -0
- package/assets/images/storybook-logo-light.png +0 -0
- package/biome.jsonc +0 -11
- package/chromatic.config.json +0 -4
- package/dist/components/N8nRadioButtons/index.d.ts +0 -2
- package/dist/en-eH4tuQQe.js +0 -2
- package/eslint.config.mjs +0 -55
- package/postcss.config.cjs +0 -6
- package/src/components/N8nIcon/custom/anthropic.svg +0 -16
- package/src/components/N8nIcon/custom/binary.svg +0 -1
- package/src/components/N8nIcon/custom/bolt-filled.svg +0 -3
- package/src/components/N8nIcon/custom/continue.svg +0 -1
- package/src/components/N8nIcon/custom/discord.svg +0 -1
- package/src/components/N8nIcon/custom/empty-output.svg +0 -1
- package/src/components/N8nIcon/custom/filled-square.svg +0 -3
- package/src/components/N8nIcon/custom/form.svg +0 -1
- package/src/components/N8nIcon/custom/grip-lines-vertical.svg +0 -4
- package/src/components/N8nIcon/custom/json.svg +0 -1
- package/src/components/N8nIcon/custom/linear.svg +0 -1
- package/src/components/N8nIcon/custom/lovable.svg +0 -46
- package/src/components/N8nIcon/custom/mcp.svg +0 -1
- package/src/components/N8nIcon/custom/node-dirty.svg +0 -1
- package/src/components/N8nIcon/custom/node-ellipsis.svg +0 -1
- package/src/components/N8nIcon/custom/node-execution-error.svg +0 -1
- package/src/components/N8nIcon/custom/node-pin.svg +0 -1
- package/src/components/N8nIcon/custom/node-play.svg +0 -1
- package/src/components/N8nIcon/custom/node-power.svg +0 -1
- package/src/components/N8nIcon/custom/node-success.svg +0 -1
- package/src/components/N8nIcon/custom/node-trash.svg +0 -1
- package/src/components/N8nIcon/custom/node-validation-error.svg +0 -3
- package/src/components/N8nIcon/custom/pop-out.svg +0 -1
- package/src/components/N8nIcon/custom/resolver.svg +0 -3
- package/src/components/N8nIcon/custom/retry.svg +0 -1
- package/src/components/N8nIcon/custom/run-once.svg +0 -1
- package/src/components/N8nIcon/custom/schema.svg +0 -6
- package/src/components/N8nIcon/custom/slack.svg +0 -1
- package/src/components/N8nIcon/custom/spinner.svg +0 -12
- package/src/components/N8nIcon/custom/star-filled.svg +0 -1
- package/src/components/N8nIcon/custom/status-canceled.svg +0 -1
- package/src/components/N8nIcon/custom/status-completed.svg +0 -1
- package/src/components/N8nIcon/custom/status-error.svg +0 -1
- package/src/components/N8nIcon/custom/status-new.svg +0 -1
- package/src/components/N8nIcon/custom/status-unknown.svg +0 -1
- package/src/components/N8nIcon/custom/status-waiting.svg +0 -1
- package/src/components/N8nIcon/custom/status-warning.svg +0 -1
- package/src/components/N8nIcon/custom/telegram.svg +0 -1
- package/src/components/N8nIcon/custom/text.svg +0 -1
- package/src/components/N8nIcon/custom/toolbox.svg +0 -3
- package/src/components/N8nIcon/custom/triangle.svg +0 -1
- package/src/components/N8nIcon/custom/vector-square.svg +0 -10
- package/src/components/N8nIcon/custom/webhook.svg +0 -1
- package/src/components/N8nIcon/nodes/aggregate.svg +0 -6
- package/src/components/N8nIcon/nodes/ai-agent.svg +0 -6
- package/src/components/N8nIcon/nodes/ai-transform.svg +0 -3
- package/src/components/N8nIcon/nodes/basic-llm-chain.svg +0 -5
- package/src/components/N8nIcon/nodes/calculator.svg +0 -9
- package/src/components/N8nIcon/nodes/call-n8n-sub-workflow-tool.svg +0 -5
- package/src/components/N8nIcon/nodes/character-text-splitter.svg +0 -4
- package/src/components/N8nIcon/nodes/chat-memory-manager.svg +0 -5
- package/src/components/N8nIcon/nodes/chat-trigger.svg +0 -3
- package/src/components/N8nIcon/nodes/code.svg +0 -4
- package/src/components/N8nIcon/nodes/compare-datasets.svg +0 -4
- package/src/components/N8nIcon/nodes/compression.svg +0 -9
- package/src/components/N8nIcon/nodes/contextual-compression-retriever.svg +0 -7
- package/src/components/N8nIcon/nodes/convert-to-file.svg +0 -6
- package/src/components/N8nIcon/nodes/crypto.svg +0 -4
- package/src/components/N8nIcon/nodes/data-table.svg +0 -6
- package/src/components/N8nIcon/nodes/date-and-time.svg +0 -6
- package/src/components/N8nIcon/nodes/default-data-loader.svg +0 -9
- package/src/components/N8nIcon/nodes/edit-fields.svg +0 -5
- package/src/components/N8nIcon/nodes/edit-image.svg +0 -5
- package/src/components/N8nIcon/nodes/email-trigger.svg +0 -4
- package/src/components/N8nIcon/nodes/error-trigger.svg +0 -5
- package/src/components/N8nIcon/nodes/execute-command.svg +0 -5
- package/src/components/N8nIcon/nodes/execute-sub-workflow.svg +0 -5
- package/src/components/N8nIcon/nodes/execution-data.svg +0 -9
- package/src/components/N8nIcon/nodes/extract-from-file.svg +0 -6
- package/src/components/N8nIcon/nodes/filter.svg +0 -5
- package/src/components/N8nIcon/nodes/form-trigger.svg +0 -6
- package/src/components/N8nIcon/nodes/ftp.svg +0 -6
- package/src/components/N8nIcon/nodes/guardrails.svg +0 -4
- package/src/components/N8nIcon/nodes/html.svg +0 -5
- package/src/components/N8nIcon/nodes/http-request.svg +0 -5
- package/src/components/N8nIcon/nodes/if.svg +0 -6
- package/src/components/N8nIcon/nodes/information-extractor.svg +0 -5
- package/src/components/N8nIcon/nodes/item-list-output-parser.svg +0 -8
- package/src/components/N8nIcon/nodes/limit.svg +0 -4
- package/src/components/N8nIcon/nodes/local-file-trigger.svg +0 -4
- package/src/components/N8nIcon/nodes/loop-over-items.svg +0 -4
- package/src/components/N8nIcon/nodes/manual-trigger.svg +0 -5
- package/src/components/N8nIcon/nodes/markdown.svg +0 -6
- package/src/components/N8nIcon/nodes/merge.svg +0 -5
- package/src/components/N8nIcon/nodes/model-selector.svg +0 -6
- package/src/components/N8nIcon/nodes/multiquery-retriever.svg +0 -7
- package/src/components/N8nIcon/nodes/n8n-trigger.svg +0 -9
- package/src/components/N8nIcon/nodes/n8n.svg +0 -9
- package/src/components/N8nIcon/nodes/no-operation.svg +0 -5
- package/src/components/N8nIcon/nodes/question-and-answer-chain.svg +0 -5
- package/src/components/N8nIcon/nodes/read-write-files-from-disk.svg +0 -9
- package/src/components/N8nIcon/nodes/recursive-character-text-splitter.svg +0 -4
- package/src/components/N8nIcon/nodes/remove-duplicates.svg +0 -6
- package/src/components/N8nIcon/nodes/rename-keys.svg +0 -5
- package/src/components/N8nIcon/nodes/respond-to-webhook.svg +0 -8
- package/src/components/N8nIcon/nodes/rss-feed-trigger.svg +0 -5
- package/src/components/N8nIcon/nodes/rss-read.svg +0 -5
- package/src/components/N8nIcon/nodes/schedule-trigger.svg +0 -4
- package/src/components/N8nIcon/nodes/send-mail.svg +0 -4
- package/src/components/N8nIcon/nodes/sentiment-analysis.svg +0 -9
- package/src/components/N8nIcon/nodes/simple-memory.svg +0 -8
- package/src/components/N8nIcon/nodes/simple-vector-store.svg +0 -5
- package/src/components/N8nIcon/nodes/sort.svg +0 -6
- package/src/components/N8nIcon/nodes/split-out.svg +0 -6
- package/src/components/N8nIcon/nodes/sse-trigger.svg +0 -5
- package/src/components/N8nIcon/nodes/ssh.svg +0 -6
- package/src/components/N8nIcon/nodes/stop-and-error.svg +0 -4
- package/src/components/N8nIcon/nodes/structured-output-parser.svg +0 -5
- package/src/components/N8nIcon/nodes/sub-workflow-trigger.svg +0 -5
- package/src/components/N8nIcon/nodes/summarization-chain.svg +0 -6
- package/src/components/N8nIcon/nodes/summarize.svg +0 -5
- package/src/components/N8nIcon/nodes/switch.svg +0 -8
- package/src/components/N8nIcon/nodes/text-classifier.svg +0 -4
- package/src/components/N8nIcon/nodes/think-tool.svg +0 -10
- package/src/components/N8nIcon/nodes/token-splitter.svg +0 -4
- package/src/components/N8nIcon/nodes/totp.svg +0 -6
- package/src/components/N8nIcon/nodes/track-time-saved.svg +0 -7
- package/src/components/N8nIcon/nodes/vector-store-question-answer-tool.svg +0 -5
- package/src/components/N8nIcon/nodes/vector-store-retriever.svg +0 -5
- package/src/components/N8nIcon/nodes/wait.svg +0 -3
- package/src/components/N8nIcon/nodes/webhook.svg +0 -8
- package/src/components/N8nIcon/nodes/workflow-retriever.svg +0 -5
- package/src/components/N8nIcon/nodes/xml.svg +0 -5
- package/src/components/N8nInput/Input.stories.css +0 -14
- package/src/components/N8nLogo/logo-icon.svg +0 -3
- package/src/components/N8nLogo/logo-text.svg +0 -4
- package/src/css/tailwind/index.css +0 -3
- package/src/index.ts +0 -46
- package/src/styleguide/colour.mdx +0 -52
- package/src/styleguide/css-tokens.mdx +0 -97
- package/src/styleguide/motion.mdx +0 -104
- package/src/styleguide/shadow.mdx +0 -96
- package/src/styleguide/spacing-size.mdx +0 -78
- package/src/styleguide/type.mdx +0 -91
- package/src/v2/components/Tree/Tree.variables.module.css +0 -7
- package/stylelint.config.mjs +0 -9
- package/tailwind.config.js +0 -8
- package/tsconfig.build.json +0 -27
- package/tsconfig.json +0 -16
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M11.25 2.90674C11.7141 2.63879 12.2859 2.63879 12.75 2.90674L19.5 6.80385C19.9641 7.0718 20.25 7.56699 20.25 8.10289V15.8971C20.25 16.433 19.9641 16.9282 19.5 17.1962L12.75 21.0933C12.2859 21.3612 11.7141 21.3612 11.25 21.0933L4.49998 17.1962C4.03588 16.9282 3.74998 16.433 3.74998 15.8971V8.10289C3.74998 7.56699 4.03588 7.0718 4.49998 6.80385L11.25 2.90674Z" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<circle cx="11" cy="11" r="2.75" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M12.9501 12.95L15.5 15.5" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
</svg>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M21.75 13.75L17.25 18.25L12.75 13.75" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M11.25 10.25L6.75 5.75L2.25 10.25" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M17.25 5V18.25" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
<path d="M6.75 19V5.75" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
</svg>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M20 4.75H13.5211C12.4285 4.75 11.4222 5.34407 10.8944 6.30077L8.6056 10.4492C8.07776 11.4059 7.07151 12 5.97886 12H3" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M20 19.25H13.5211C12.4285 19.25 11.4222 18.6559 10.8944 17.6992L8.6056 13.5508C8.07776 12.5941 7.07151 12 5.97886 12H3" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M13 9.75H20" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
<path d="M13 14.25H20" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M5.28223 5.28223C3.56306 7.00139 2.5 9.37665 2.5 12C2.5 14.6234 3.56306 16.9986 5.28223 18.7178L4.22168 19.7783C2.23107 17.7877 1 15.0376 1 12C1 8.96243 2.23107 6.21229 4.22168 4.22168L5.28223 5.28223ZM19.7783 4.22168C21.7689 6.21229 23 8.96243 23 12C23 15.0376 21.7689 17.7877 19.7783 19.7783L18.7178 18.7178C20.4369 16.9986 21.5 14.6234 21.5 12C21.5 9.37665 20.4369 7.00139 18.7178 5.28223L19.7783 4.22168ZM8.11133 8.11133C7.11602 9.10663 6.5 10.4812 6.5 12C6.5 13.5188 7.11602 14.8934 8.11133 15.8887L7.0498 16.9502C5.78305 15.6834 5 13.933 5 12C5 10.067 5.78305 8.31656 7.0498 7.0498L8.11133 8.11133ZM16.9502 7.0498C18.2169 8.31656 19 10.067 19 12C19 13.933 18.2169 15.6834 16.9502 16.9502L15.8887 15.8887C16.884 14.8934 17.5 13.5188 17.5 12C17.5 10.4812 16.884 9.10663 15.8887 8.11133L16.9502 7.0498Z" fill="currentColor"/>
|
|
3
|
-
<circle cx="12" cy="12" r="2.25" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M12 14.25V22" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
</svg>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<rect x="3.75" y="3.75" width="16.5" height="16.5" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M7.25 17L10.25 14L7.25 11" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M12 16.75H17" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
<path d="M3.75 7.75H20.25" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M9 3.75H6.25C5.42157 3.75 4.75 4.42157 4.75 5.25V9.37868C4.75 9.7765 4.59197 10.158 4.31066 10.4393L2.75 12L4.31066 13.5607C4.59196 13.842 4.75 14.2235 4.75 14.6213V18.75C4.75 19.5784 5.42157 20.25 6.25 20.25H9" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M15 3.75H17.75C18.5784 3.75 19.25 4.42157 19.25 5.25V9.37868C19.25 9.7765 19.408 10.158 19.6893 10.4393L21.25 12L19.6893 13.5607C19.408 13.842 19.25 14.2235 19.25 14.6213V18.75C19.25 19.5784 18.5784 20.25 17.75 20.25H15" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M7.75 11.75L10.75 14.75L16.25 9.25" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M16 20.25L18.75 20.25C19.5784 20.25 20.25 19.5784 20.25 18.75L20.25 5.25C20.25 4.42157 19.5784 3.75 18.75 3.75L16 3.75" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M11 17.5L16.5 12L11 6.5" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M16.5 12L3 12" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
</svg>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M4 13.75H20" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M4 9.75H20" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M15.5 3.25L12 6.75L8.5 3.25" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
<path d="M15.5 20.75L12 17.25L8.5 20.75" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M3.75 8.25H20.25" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M8.25 3.75V20.25" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<rect x="3.75" y="3.75" width="16.5" height="16.5" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
</svg>
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M21.5 5.25H2" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M21.5 18.75H14.49C13.1614 18.75 11.9911 17.8761 11.6136 16.6023L8.88637 7.39773C8.50893 6.12387 7.33857 5.25 6.00997 5.25H2" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M21.5 12H12.49C11.1614 12 9.99107 11.1261 9.61363 9.85227L8.88637 7.39773C8.50893 6.12387 7.33857 5.25 6.00997 5.25H2" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
<path d="M19 9.5L21.5 12L19 14.5" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
<path d="M19 2.75L21.5 5.25L19 7.75" stroke="currentColor" stroke-width="1.5"/>
|
|
7
|
-
<path d="M19 16.25L21.5 18.75L19 21.25" stroke="currentColor" stroke-width="1.5"/>
|
|
8
|
-
</svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M20.25 17.75C20.25 18.5784 19.5784 19.25 18.75 19.25H7.51578C7.03479 19.25 6.58297 19.0193 6.30086 18.6298L1.5 12L6.30086 5.37023C6.58297 4.98066 7.03479 4.75 7.51578 4.75H18.75C19.5784 4.75 20.25 5.42157 20.25 6.25V17.75Z" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<circle cx="8" cy="12" r="1.5" fill="currentColor"/>
|
|
4
|
-
</svg>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M6.47852 17.249L7.16851 17.543L7.61012 16.5063L6.48337 16.499L6.47852 17.249ZM4.53125 11.417L4.98633 12.0131L5.6588 11.4998L5.06855 10.8937L4.53125 11.417ZM7.19824 6.84277L7.00812 7.56828L8.93462 8.07312L7.8197 6.42291L7.19824 6.84277ZM9.375 2.75V3.5C10.4105 3.5 11.25 4.33947 11.25 5.375H12H12.75C12.75 3.51104 11.239 2 9.375 2V2.75ZM12 5.375H11.25V18.375H12H12.75V5.375H12ZM12 18.375H11.25C11.25 19.5486 10.2986 20.5 9.125 20.5V21.25V22C11.127 22 12.75 20.377 12.75 18.375H12ZM9.125 21.25V20.5C7.9514 20.5 7 19.5486 7 18.375H6.25H5.5C5.5 20.377 7.12297 22 9.125 22V21.25ZM6.25 18.375H7C7 18.0779 7.06025 17.7971 7.16851 17.543L6.47852 17.249L5.78852 16.9551C5.60219 17.3925 5.5 17.873 5.5 18.375H6.25ZM6.47852 17.249L6.48337 16.499C5.1101 16.4901 4 15.3749 4 14H3.25H2.5C2.5 16.2006 4.27686 17.9848 6.47366 17.999L6.47852 17.249ZM3.25 14H4C4 13.1908 4.38531 12.4719 4.98633 12.0131L4.53125 11.417L4.07617 10.8208C3.12143 11.5496 2.5 12.7009 2.5 14H3.25ZM4.53125 11.417L5.06855 10.8937C4.71583 10.5315 4.5 10.0415 4.5 9.5H3.75H3C3 10.4509 3.38165 11.3115 3.99395 11.9403L4.53125 11.417ZM3.75 9.5H4.5C4.5 8.39543 5.39543 7.5 6.5 7.5V6.75V6C4.567 6 3 7.567 3 9.5H3.75ZM6.5 6.75V7.5C6.67017 7.5 6.83956 7.5241 7.00812 7.56828L7.19824 6.84277L7.38836 6.11727C7.11049 6.04445 6.81295 6 6.5 6V6.75ZM7.19824 6.84277L7.8197 6.42291C7.61785 6.12413 7.5 5.7645 7.5 5.375H6.75H6C6 6.07285 6.21252 6.72349 6.57678 7.26264L7.19824 6.84277ZM6.75 5.375H7.5C7.5 4.33947 8.33947 3.5 9.375 3.5V2.75V2C7.51104 2 6 3.51104 6 5.375H6.75Z" fill="currentColor"/>
|
|
3
|
-
<path d="M3.75 9.5C3.75 7.98122 4.98122 6.75 6.5 6.75C7.56474 6.75 8.48814 7.3551 8.9451 8.24018" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M20.2451 9.5C20.2451 7.98122 19.0139 6.75 17.4951 6.75C16.4303 6.75 15.5069 7.3551 15.05 8.24018" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
<path d="M12 11.25C12 12.3546 11.1046 13.25 10 13.25" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
<path d="M17.5215 17.249L16.8315 17.543L16.3899 16.5063L17.5166 16.499L17.5215 17.249ZM19.4688 11.417L19.0137 12.0131L18.3412 11.4998L18.9314 10.8937L19.4688 11.417ZM16.8018 6.84277L16.9919 7.56828L15.0654 8.07312L16.1803 6.42291L16.8018 6.84277ZM14.625 2.75V3.5C13.5895 3.5 12.75 4.33947 12.75 5.375H12H11.25C11.25 3.51104 12.761 2 14.625 2V2.75ZM12 5.375H12.75V18.375H12H11.25V5.375H12ZM12 18.375H12.75C12.75 19.5486 13.7014 20.5 14.875 20.5V21.25V22C12.873 22 11.25 20.377 11.25 18.375H12ZM14.875 21.25V20.5C16.0486 20.5 17 19.5486 17 18.375H17.75H18.5C18.5 20.377 16.877 22 14.875 22V21.25ZM17.75 18.375H17C17 18.0779 16.9398 17.7971 16.8315 17.543L17.5215 17.249L18.2115 16.9551C18.3978 17.3925 18.5 17.873 18.5 18.375H17.75ZM17.5215 17.249L17.5166 16.499C18.8899 16.4901 20 15.3749 20 14H20.75H21.5C21.5 16.2006 19.7231 17.9848 17.5263 17.999L17.5215 17.249ZM20.75 14H20C20 13.1908 19.6147 12.4719 19.0137 12.0131L19.4688 11.417L19.9238 10.8208C20.8786 11.5496 21.5 12.7009 21.5 14H20.75ZM19.4688 11.417L18.9314 10.8937C19.2842 10.5315 19.5 10.0415 19.5 9.5H20.25H21C21 10.4509 20.6183 11.3115 20.0061 11.9403L19.4688 11.417ZM20.25 9.5H19.5C19.5 8.39543 18.6046 7.5 17.5 7.5V6.75V6C19.433 6 21 7.567 21 9.5H20.25ZM17.5 6.75V7.5C17.3298 7.5 17.1604 7.5241 16.9919 7.56828L16.8018 6.84277L16.6116 6.11727C16.8895 6.04445 17.187 6 17.5 6V6.75ZM16.8018 6.84277L16.1803 6.42291C16.3822 6.12413 16.5 5.7645 16.5 5.375H17.25H18C18 6.07285 17.7875 6.72349 17.4232 7.26264L16.8018 6.84277ZM17.25 5.375H16.5C16.5 4.33947 15.6605 3.5 14.625 3.5V2.75V2C16.489 2 18 3.51104 18 5.375H17.25Z" fill="currentColor"/>
|
|
7
|
-
<path d="M20.75 14C20.75 15.7949 19.2949 17.25 17.5 17.25C16.6432 17.25 15.8639 16.9185 15.2833 16.3767" stroke="currentColor" stroke-width="1.5"/>
|
|
8
|
-
<path d="M3.25 14C3.25 15.7949 4.70507 17.25 6.5 17.25C7.35677 17.25 8.13611 16.9185 8.71673 16.3767" stroke="currentColor" stroke-width="1.5"/>
|
|
9
|
-
<path d="M12 11.25C12 12.3546 12.8954 13.25 14 13.25" stroke="currentColor" stroke-width="1.5"/>
|
|
10
|
-
</svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M4.41553 13.9729C3.01983 14.5718 2.37393 16.1888 2.97287 17.5845C3.57181 18.9802 5.18878 19.6261 6.58448 19.0271C7.98018 18.4282 8.62608 16.8112 8.02714 15.4155C7.4282 14.0198 5.81122 13.3739 4.41553 13.9729ZM4.41553 13.9729L22 6.50003" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M4.41553 10.0272C3.01983 9.42823 2.37393 7.81126 2.97287 6.41556C3.57181 5.01986 5.18878 4.37396 6.58448 4.9729C7.98018 5.57184 8.62608 7.18881 8.02714 8.58451C7.4282 9.98021 5.81122 10.6261 4.41553 10.0272ZM4.41553 10.0272L22 17.5" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
</svg>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M12 3.25C16.8325 3.25 20.75 7.16751 20.75 12C20.75 16.8325 16.8325 20.75 12 20.75C7.16751 20.75 3.25 16.8325 3.25 12C3.25 9.58013 4.23232 7.3897 5.81994 5.8057" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M12 16.5V7.5" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M8.1054 14.2457L15.8996 9.74567" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
<path d="M8.11047 9.7456L15.9047 14.2456" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
</svg>
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle cx="12" cy="12" r="8.75" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M20.1317 3.86829L18.1872 5.81283" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M12 0.5V3.25" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
<path d="M16.5 7.5L12 12" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
<circle cx="12" cy="12" r="1.5" fill="currentColor"/>
|
|
7
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle cx="12" cy="15.75" r="1.25" fill="currentColor"/>
|
|
3
|
-
<path d="M9.75 10C9.75 8.75736 10.7574 7.75 12 7.75C13.2426 7.75 14.25 8.75736 14.25 10C14.25 11.2426 13.2426 12.25 12 12.25V13.5" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M7.7998 19.6777L8.16035 19.0201L7.90003 18.8774L7.61257 18.9515L7.7998 19.6777ZM3.11426 20.8857L2.38796 20.6987L2.07103 21.9292L3.3015 21.612L3.11426 20.8857ZM4.32129 16.1992L5.04759 16.3863L5.12159 16.099L4.979 15.8388L4.32129 16.1992ZM12 3.25V4C16.4183 4 20 7.58172 20 12H20.75H21.5C21.5 6.75329 17.2467 2.5 12 2.5V3.25ZM20.75 12H20C20 16.4183 16.4183 20 12 20V20.75V21.5C17.2467 21.5 21.5 17.2467 21.5 12H20.75ZM12 20.75V20C10.6071 20 9.29941 19.6445 8.16035 19.0201L7.7998 19.6777L7.43926 20.3354C8.7937 21.0779 10.3486 21.5 12 21.5V20.75ZM7.7998 19.6777L7.61257 18.9515L2.92702 20.1595L3.11426 20.8857L3.3015 21.612L7.98704 20.404L7.7998 19.6777ZM3.11426 20.8857L3.84056 21.0728L5.04759 16.3863L4.32129 16.1992L3.59499 16.0122L2.38796 20.6987L3.11426 20.8857ZM4.32129 16.1992L4.979 15.8388C4.35496 14.7001 4 13.3926 4 12H3.25H2.5C2.5 13.6507 2.92141 15.2054 3.66358 16.5597L4.32129 16.1992ZM3.25 12H4C4 7.58172 7.58172 4 12 4V3.25V2.5C6.75329 2.5 2.5 6.75329 2.5 12H3.25Z" fill="currentColor"/>
|
|
5
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M11.25 2.90674C11.7141 2.63879 12.2859 2.63879 12.75 2.90674L19.5 6.80385C19.9641 7.0718 20.25 7.56699 20.25 8.10289V15.8971C20.25 16.433 19.9641 16.9282 19.5 17.1962L12.75 21.0933C12.2859 21.3612 11.7141 21.3612 11.25 21.0933L4.49998 17.1962C4.03588 16.9282 3.74998 16.433 3.74998 15.8971V8.10289C3.74998 7.56699 4.03588 7.0718 4.49998 6.80385L11.25 2.90674Z" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M11 16.5L15.5 12L11 7.5" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M15.5 12L3.75 12" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
</svg>
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M18.25 20.25H5.75V17.6213C5.75 17.2235 5.90803 16.842 6.18934 16.5607L9.89645 12.8536C10.1228 12.6272 10.25 12.3201 10.25 12C10.25 11.6799 10.1228 11.3728 9.89645 11.1464L6.18934 7.43934C5.90803 7.15803 5.75 6.7765 5.75 6.37868V3.75H18.25V6.37868C18.25 6.7765 18.092 7.15804 17.8107 7.43934L14.1036 11.1464C13.8772 11.3728 13.75 11.6799 13.75 12C13.75 12.3201 13.8772 12.6272 14.1036 12.8536L17.8107 16.5607C18.092 16.842 18.25 17.2235 18.25 17.6213V20.25Z" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
</svg>
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle cx="12" cy="7" r="1.5" fill="currentColor"/>
|
|
3
|
-
<circle cx="6.5" cy="16.5" r="1.5" fill="currentColor"/>
|
|
4
|
-
<circle cx="17.5" cy="16.5" r="1.5" fill="currentColor"/>
|
|
5
|
-
<path d="M15.2476 8.875C15.5892 8.28336 15.7512 7.63732 15.7506 6.99998C15.7494 5.70521 15.077 4.44635 13.875 3.75241C12.0814 2.71687 9.78794 3.3314 8.75241 5.125C7.71687 6.9186 8.3314 9.21206 10.125 10.2476L6.5 16.5" stroke="currentColor" stroke-width="1.5"/>
|
|
6
|
-
<path d="M6.5 12.75C4.42893 12.75 2.75 14.4289 2.75 16.5C2.75 18.5711 4.42893 20.25 6.5 20.25C8.57107 20.25 10.25 18.5711 10.25 16.5H17.5" stroke="currentColor" stroke-width="1.5"/>
|
|
7
|
-
<path d="M14.2524 18.375C15.2879 20.1686 17.5814 20.7831 19.375 19.7476C21.1686 18.7121 21.7831 16.4186 20.7476 14.625C19.7121 12.8314 17.4186 12.2169 15.625 13.2524L12 7" stroke="currentColor" stroke-width="1.5"/>
|
|
8
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M3.75 16V18.75C3.75 19.5784 4.42157 20.25 5.25 20.25H18.75C19.5784 20.25 20.25 19.5784 20.25 18.75V16" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M6.5 11L12 16.5L17.5 11" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M12 16.5V3" stroke="currentColor" stroke-width="1.5"/>
|
|
5
|
-
</svg>
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M17.25 16.5L21.75 12L17.25 7.5" stroke="currentColor" stroke-width="1.5"/>
|
|
3
|
-
<path d="M7.25 16.5L2.75 12L7.25 7.5" stroke="currentColor" stroke-width="1.5"/>
|
|
4
|
-
<path d="M10.7432 21H9.20605L13.2568 3H14.7939L10.7432 21Z" fill="currentColor"/>
|
|
5
|
-
</svg>
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2 11.3955C26.4903 11.3959 25.8006 11.1603 25.2394 10.7259C24.6783 10.2914 24.2774 9.68271 24.1 8.99555H20.433C20.0543 8.9956 19.6879 9.12999 19.3989 9.3748C19.11 9.61962 18.9173 9.95899 18.855 10.3325L18.723 11.1225C18.6018 11.8478 18.2346 12.5092 17.683 12.9955C18.2348 13.4821 18.6021 14.1439 18.723 14.8695L18.855 15.6585C18.9173 16.0321 19.11 16.3715 19.3989 16.6163C19.6879 16.8611 20.0543 16.9955 20.433 16.9955H20.901C21.0968 16.2424 21.5603 15.5864 22.2047 15.1502C22.8491 14.714 23.6303 14.5275 24.4023 14.6255C25.1743 14.7236 25.8841 15.0995 26.399 15.6829C26.9139 16.2663 27.1987 17.0174 27.2 17.7955C27.2015 18.5755 26.9182 19.3292 26.4031 19.9149C25.8881 20.5006 25.1769 20.8781 24.4031 20.9764C23.6294 21.0746 22.8464 20.8869 22.2013 20.4485C21.5562 20.0101 21.0935 19.3511 20.9 18.5955H20.433C19.6756 18.5954 18.9428 18.3267 18.3649 17.837C17.787 17.3474 17.4015 16.6687 17.277 15.9215L17.145 15.1325C17.0828 14.759 16.89 14.4196 16.6011 14.1748C16.3121 13.93 15.9457 13.7956 15.567 13.7955H14.299C14.1214 14.4823 13.7206 15.0907 13.1596 15.525C12.5987 15.9593 11.9094 16.1949 11.2 16.1949C10.4906 16.1949 9.80129 15.9593 9.24036 15.525C8.67943 15.0907 8.27866 14.4823 8.10101 13.7955H6.29901C6.1032 14.5487 5.63975 15.2047 4.99533 15.6409C4.35091 16.0771 3.56967 16.2636 2.7977 16.1656C2.02573 16.0675 1.31592 15.6916 0.800999 15.1082C0.286083 14.5247 0.00133389 13.7737 6.20563e-06 12.9955C-0.00152906 12.2156 0.281849 11.4619 0.796882 10.8762C1.31191 10.2905 2.02314 9.91299 2.79689 9.81474C3.57064 9.71649 4.35363 9.90421 4.99871 10.3426C5.6438 10.781 6.10655 11.44 6.30001 12.1955H8.10001C8.27697 11.5079 8.67758 10.8985 9.23878 10.4635C9.79998 10.0284 10.4899 9.79229 11.2 9.79229C11.9101 9.79229 12.6 10.0284 13.1612 10.4635C13.7224 10.8985 14.123 11.5079 14.3 12.1955H15.567C15.9457 12.1955 16.3121 12.0611 16.6011 11.8163C16.89 11.5715 17.0828 11.2321 17.145 10.8585L17.277 10.0685C17.4017 9.32161 17.7873 8.64311 18.3652 8.15368C18.943 7.66425 19.6757 7.39562 20.433 7.39555H24.101C24.2968 6.64242 24.7603 5.9864 25.4047 5.5502C26.0491 5.114 26.8303 4.92747 27.6023 5.02552C28.3743 5.12356 29.0841 5.49945 29.599 6.0829C30.1139 6.66634 30.3987 7.41738 30.4 8.19555C30.4 9.04424 30.0629 9.85817 29.4627 10.4583C28.8626 11.0584 28.0487 11.3955 27.2 11.3955ZM27.2 9.79555C27.6244 9.79555 28.0313 9.62698 28.3314 9.32692C28.6314 9.02686 28.8 8.61989 28.8 8.19555C28.8 7.7712 28.6314 7.36423 28.3314 7.06418C28.0313 6.76412 27.6244 6.59555 27.2 6.59555C26.7757 6.59555 26.3687 6.76412 26.0686 7.06418C25.7686 7.36423 25.6 7.7712 25.6 8.19555C25.6 8.61989 25.7686 9.02686 26.0686 9.32692C26.3687 9.62698 26.7757 9.79555 27.2 9.79555ZM3.20001 14.5955C3.62435 14.5955 4.03132 14.427 4.33138 14.1269C4.63144 13.8269 4.80001 13.4199 4.80001 12.9955C4.80001 12.5712 4.63144 12.1642 4.33138 11.8642C4.03132 11.5641 3.62435 11.3955 3.20001 11.3955C2.77566 11.3955 2.36869 11.5641 2.06864 11.8642C1.76858 12.1642 1.60001 12.5712 1.60001 12.9955C1.60001 13.4199 1.76858 13.8269 2.06864 14.1269C2.36869 14.427 2.77566 14.5955 3.20001 14.5955ZM12.8 12.9955C12.8 13.2057 12.7586 13.4137 12.6782 13.6078C12.5978 13.802 12.48 13.9783 12.3314 14.1269C12.1828 14.2755 12.0064 14.3933 11.8123 14.4738C11.6182 14.5542 11.4101 14.5955 11.2 14.5955C10.9899 14.5955 10.7818 14.5542 10.5877 14.4738C10.3936 14.3933 10.2172 14.2755 10.0686 14.1269C9.92006 13.9783 9.80221 13.802 9.7218 13.6078C9.64139 13.4137 9.60001 13.2057 9.60001 12.9955C9.60001 12.5712 9.76858 12.1642 10.0686 11.8642C10.3687 11.5641 10.7757 11.3955 11.2 11.3955C11.6244 11.3955 12.0313 11.5641 12.3314 11.8642C12.6314 12.1642 12.8 12.5712 12.8 12.9955ZM25.6 17.7955C25.6 18.0057 25.5586 18.2137 25.4782 18.4078C25.3978 18.602 25.28 18.7783 25.1314 18.9269C24.9828 19.0755 24.8064 19.1933 24.6123 19.2738C24.4182 19.3542 24.2101 19.3955 24 19.3955C23.7899 19.3955 23.5818 19.3542 23.3877 19.2738C23.1936 19.1933 23.0172 19.0755 22.8686 18.9269C22.7201 18.7783 22.6022 18.602 22.5218 18.4078C22.4414 18.2137 22.4 18.0057 22.4 17.7955C22.4 17.3712 22.5686 16.9642 22.8686 16.6642C23.1687 16.3641 23.5757 16.1955 24 16.1955C24.4244 16.1955 24.8313 16.3641 25.1314 16.6642C25.4314 16.9642 25.6 17.3712 25.6 17.7955Z" fill="#EA4B71"/>
|
|
3
|
-
</svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 12.99V12.914C15.56 12.634 16.118 12.152 16.118 11.198C16.118 9.826 14.988 9 13.428 9C11.83 9 10.688 9.877 10.688 11.224C10.688 12.139 11.221 12.634 11.804 12.914V12.99C11.383 13.1435 11.0201 13.4241 10.7656 13.7931C10.5112 14.162 10.3778 14.6009 10.384 15.049C10.384 16.434 11.525 17.4 13.416 17.4C15.306 17.4 16.41 16.434 16.41 15.049C16.417 14.6023 16.2854 14.1645 16.0332 13.7957C15.7811 13.427 15.4208 13.1455 15.002 12.99ZM13.415 10.17C14.05 10.17 14.519 10.576 14.519 11.262C14.519 11.948 14.037 12.355 13.416 12.355C12.794 12.355 12.274 11.948 12.274 11.262C12.274 10.563 12.769 10.169 13.416 10.169M13.416 16.179C12.681 16.179 12.084 15.709 12.084 14.909C12.084 14.184 12.579 13.637 13.404 13.637C14.216 13.637 14.711 14.171 14.711 14.934C14.711 15.709 14.139 16.179 13.416 16.179Z" fill="#101330"/>
|
|
3
|
-
<path d="M18.3672 17.272H19.9912V13.83C19.9912 12.699 20.6762 12.203 21.4512 12.203C22.2112 12.203 22.8082 12.712 22.8082 13.753V17.273H24.4322V13.422C24.4322 11.758 23.4682 10.792 21.9582 10.792C21.0062 10.792 20.4732 11.173 20.0932 11.669H19.9912L19.8512 10.919H18.3672V17.272ZM3.99119 17.272H2.36719V10.92H3.85219L3.99219 11.67H4.09219C4.47319 11.174 5.00619 10.793 5.95819 10.793C7.46819 10.793 8.43219 11.759 8.43219 13.423V17.273H6.80819V13.752C6.80819 12.711 6.21219 12.202 5.45019 12.202C4.67619 12.202 3.99119 12.698 3.99119 13.829V17.272Z" fill="#101330"/>
|
|
4
|
-
</svg>
|
package/src/index.ts
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import * as locale from './locale';
|
|
2
|
-
|
|
3
|
-
export * from './components';
|
|
4
|
-
export * from './constants';
|
|
5
|
-
export * from './plugin';
|
|
6
|
-
export * from './types';
|
|
7
|
-
export * from './utils';
|
|
8
|
-
export * from './directives';
|
|
9
|
-
export { isIconOrEmoji, type IconOrEmoji } from './components/N8nIconPicker/types';
|
|
10
|
-
export { IconBodyLoaderKey, useInjectIconBodyLoader } from './composables/useIconBodyLoader';
|
|
11
|
-
export type { IconBodyLoader } from './composables/useIconBodyLoader';
|
|
12
|
-
export { useMessage } from './composables/useMessage';
|
|
13
|
-
export type { MessageBoxConfirmResult } from './composables/useMessage';
|
|
14
|
-
export { useProvideTooltipAppendTo } from './composables/useTooltipAppendTo';
|
|
15
|
-
export { default as N8nSelect2 } from './v2/components/Select/Select.vue';
|
|
16
|
-
export { default as N8nSelect2Item } from './v2/components/Select/SelectItem.vue';
|
|
17
|
-
export type * from './v2/components/Select/Select.types';
|
|
18
|
-
export { default as N8nCheckbox } from './v2/components/Checkbox/Checkbox.vue';
|
|
19
|
-
export type * from './v2/components/Checkbox/Checkbox.types';
|
|
20
|
-
export { default as N8nPagination2 } from './v2/components/Pagination/Pagination.vue';
|
|
21
|
-
export type * from './v2/components/Pagination/Pagination.types';
|
|
22
|
-
export { default as N8nLoading2 } from './v2/components/Loading/Loading.vue';
|
|
23
|
-
export type * from './v2/components/Loading/Loading.types';
|
|
24
|
-
export { default as N8nInputNumber2 } from './v2/components/InputNumber/InputNumber.vue';
|
|
25
|
-
export type * from './v2/components/InputNumber/InputNumber.types';
|
|
26
|
-
export { default as N8nRadioGroupItem } from './v2/components/RadioGroup/RadioGroupItem.vue';
|
|
27
|
-
export { default as N8nRadioGroup } from './v2/components/RadioGroup/RadioGroup.vue';
|
|
28
|
-
export type * from './v2/components/RadioGroup/RadioGroupItem.types';
|
|
29
|
-
export type * from './v2/components/RadioGroup/RadioGroup.types';
|
|
30
|
-
export { default as N8nTree2 } from './v2/components/Tree/Tree.vue';
|
|
31
|
-
export type * from './v2/components/Tree/Tree.types';
|
|
32
|
-
export { default as N8nTagsInput2 } from './v2/components/TagsInput/TagsInput.vue';
|
|
33
|
-
export {
|
|
34
|
-
TagsInputInput,
|
|
35
|
-
TagsInputItemDelete,
|
|
36
|
-
TagsInputItemText,
|
|
37
|
-
} from './v2/components/TagsInput/reka-ui';
|
|
38
|
-
export type * from './v2/components/TagsInput/TagsInput.types';
|
|
39
|
-
export { default as N8nSwitch2 } from './components/N8nSwitch/Switch.vue';
|
|
40
|
-
export type * from './components/N8nSwitch/Switch.types';
|
|
41
|
-
export { createPasswordRules } from './components/N8nFormInput/validators';
|
|
42
|
-
export { default as N8nMarkdownEditor } from './components/N8nMarkdownEditor/MarkdownEditor.vue';
|
|
43
|
-
export type * from './components/N8nMarkdownEditor/MarkdownEditor.types';
|
|
44
|
-
export { default as N8nCodeBlock } from './components/N8nCodeBlock';
|
|
45
|
-
export type * from './components/N8nCodeBlock';
|
|
46
|
-
export { locale };
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
import PrimitivesColorTable from './components/PrimitivesColorTable.vue';
|
|
4
|
-
|
|
5
|
-
<Meta title="Style guide/Colour" />
|
|
6
|
-
|
|
7
|
-
# Colour
|
|
8
|
-
|
|
9
|
-
We have a vast, beautiful color palette out of the box. Prefer using these rather than custom colours (e.g #ff0000). These are similar to Tailwind CSS.
|
|
10
|
-
|
|
11
|
-
Each colour has 13 steps ranging from lightest (50) to darkest (950).
|
|
12
|
-
|
|
13
|
-
<div class="sb-unstyled">
|
|
14
|
-
<PrimitivesColorTable />
|
|
15
|
-
</div>
|
|
16
|
-
|
|
17
|
-
## Tokens
|
|
18
|
-
|
|
19
|
-
Instead of using the raw primitive colours, it's often better to use a token. These are aliases for common use cases (e.g text color) to make it easier to keep UI consistent and flexible.
|
|
20
|
-
|
|
21
|
-
### Text
|
|
22
|
-
|
|
23
|
-
| Token | Description |
|
|
24
|
-
| ----------------------- | ----------------------------------------------- |
|
|
25
|
-
| `--text-color` | Default body text and primary labels. |
|
|
26
|
-
| `--text-color--subtle` | Secondary text such as helper copy or metadata. |
|
|
27
|
-
| `--text-color--subtler` | Tertiary or low-emphasis text. |
|
|
28
|
-
| `--text-color--inverse` | Text shown on dark or inverse surfaces. |
|
|
29
|
-
|
|
30
|
-
### Background
|
|
31
|
-
|
|
32
|
-
| Token | Description |
|
|
33
|
-
| ----------------------- | ------------------------------------------------------ |
|
|
34
|
-
| `--background--surface` | Base surface for cards, panels, and page sections. |
|
|
35
|
-
| `--background--hover` | Hover state for neutral interactive surfaces. |
|
|
36
|
-
| `--background--active` | Pressed/active state for neutral interactive surfaces. |
|
|
37
|
-
| `--background--success` | Success banners, badges, or confirmation surfaces. |
|
|
38
|
-
| `--background--warning` | Warning callouts and cautionary surfaces. |
|
|
39
|
-
| `--background--danger` | Danger/error surfaces behind destructive messaging. |
|
|
40
|
-
| `--background--info` | Informational surfaces and neutral notices. |
|
|
41
|
-
|
|
42
|
-
### Border
|
|
43
|
-
|
|
44
|
-
| Token | Description |
|
|
45
|
-
| ------------------------- | ------------------------------------------------- |
|
|
46
|
-
| `--border-color` | Default border for inputs, cards, and separators. |
|
|
47
|
-
| `--border-color--subtle` | Low-contrast dividers and lightweight outlines. |
|
|
48
|
-
| `--border-color--strong` | More prominent outlines for elevated contrast. |
|
|
49
|
-
| `--border-color--success` | Borders for success states and confirmations. |
|
|
50
|
-
| `--border-color--warning` | Borders for warning states and cautions. |
|
|
51
|
-
| `--border-color--danger` | Borders for error states and destructive actions. |
|
|
52
|
-
| `--border-color--info` | Borders for informational states. |
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
<Meta title="Style guide/CSS Tokens" />
|
|
4
|
-
|
|
5
|
-
# CSS Tokens
|
|
6
|
-
|
|
7
|
-
Our CSS variables are layered so we can keep the design system consistent and themeable.
|
|
8
|
-
|
|
9
|
-
## Token layers
|
|
10
|
-
|
|
11
|
-
There are two main token layers
|
|
12
|
-
|
|
13
|
-
1. Primitives (`@n8n/design-system/src/css/_primitives.scss`)
|
|
14
|
-
2. Semantic Tokens (`@n8n/design-system/src/css/_tokens.scss`)
|
|
15
|
-
|
|
16
|
-
### Primitives
|
|
17
|
-
|
|
18
|
-
Raw design decisions: color scales, spacing, typography, radius, heights, durations, easing, and shadows.
|
|
19
|
-
|
|
20
|
-
```scss
|
|
21
|
-
--color--orange-500: oklch(...);
|
|
22
|
-
--spacing--sm: 1rem;
|
|
23
|
-
--font-size--md: 1rem;
|
|
24
|
-
--shadow--md: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
### Semantic theme tokens
|
|
28
|
-
|
|
29
|
-
Contextual tokens used by components (`--text-color`, `--background--surface`, `--border-color--success`, etc.).
|
|
30
|
-
These map to primitives (directly or through compatibility aliases), and have light/dark definitions via `@mixin theme` and `@mixin theme-dark`.
|
|
31
|
-
|
|
32
|
-
## How to choose tokens
|
|
33
|
-
|
|
34
|
-
- Use semantic tokens first in component styles (for example `--text-color`, `--background--surface`, `--icon-color`).
|
|
35
|
-
- Use primitives when you need a low-level scale value (for example spacing, radius, or a specific color step).
|
|
36
|
-
- Add new semantic tokens in `src/css/_tokens.scss` when the value is reused by multiple components or represents a shared UI meaning.
|
|
37
|
-
- Add new primitive tokens in `src/css/_primitives.scss` only for new base scales.
|
|
38
|
-
|
|
39
|
-
## Naming rules
|
|
40
|
-
|
|
41
|
-
Naming is validated by `@n8n/css-var-naming` in `packages/@n8n/stylelint-config/src/rules/css-var-naming.ts` for files in `@n8n/design-system/src/css`.
|
|
42
|
-
|
|
43
|
-
### Required format
|
|
44
|
-
|
|
45
|
-
- Use groups separated by double dashes: `--group--group`.
|
|
46
|
-
- Use lowercase alphanumerics; single dashes are allowed only within a group.
|
|
47
|
-
- Keep values after properties (for example `--color--primary`, not `--primary--color`).
|
|
48
|
-
|
|
49
|
-
```scss
|
|
50
|
-
/* valid */
|
|
51
|
-
--background--surface
|
|
52
|
-
--button--color--background--primary--hover
|
|
53
|
-
--font-weight--regular
|
|
54
|
-
|
|
55
|
-
/* invalid */
|
|
56
|
-
--background-surface
|
|
57
|
-
--Primary--color
|
|
58
|
-
--primary--color
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### Property vocabulary
|
|
62
|
-
|
|
63
|
-
Variable names must include a recognized property group such as `color`, `background`, `text-color`, `border-color`, `spacing`, `radius`, `shadow`, `font-size`, `font-weight`, `duration`, or `easing`.
|
|
64
|
-
|
|
65
|
-
### Allowed exceptions
|
|
66
|
-
|
|
67
|
-
- `--n8n--*` prefix bypasses validation for local/internal helper variables.
|
|
68
|
-
- Namespaces `--reka--*`, `--ag--*`, and `--chat--*` are ignored for third-party interoperability.
|
|
69
|
-
- Single-group variables are only allowed for specific standalone properties (for example `--border`, `--radius`, `--shadow`, `--font-family`).
|
|
70
|
-
|
|
71
|
-
## Migration pattern (single-dash to double-dash)
|
|
72
|
-
|
|
73
|
-
When replacing older tokens, preserve compatibility by chaining fallbacks:
|
|
74
|
-
|
|
75
|
-
```scss
|
|
76
|
-
--color--secondary: var(--color-secondary, var(--color--purple-600));
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
This gives us:
|
|
80
|
-
|
|
81
|
-
- New naming for design system code.
|
|
82
|
-
- Existing overrides for embed/custom CSS users.
|
|
83
|
-
- Safe, incremental migration without breaking consumers.
|
|
84
|
-
|
|
85
|
-
## Practical guidance for contributors
|
|
86
|
-
|
|
87
|
-
- Prefer updating existing semantic tokens before introducing new one-off variables.
|
|
88
|
-
- If you must add a temporary exception, scope it tightly with `/* stylelint-disable @n8n/css-var-naming */` and re-enable immediately.
|
|
89
|
-
- Avoid hardcoded color hex values in component styles when an existing token can express the same intent.
|
|
90
|
-
|
|
91
|
-
---
|
|
92
|
-
|
|
93
|
-
<small>
|
|
94
|
-
Compatibility note: `src/css/_tokens.legacy.scss` contains non-semantic compatibility aliases used
|
|
95
|
-
during migration to the double-dash naming format. Keep new work on primitives + semantic tokens
|
|
96
|
-
in `src/css/_primitives.scss` and `src/css/_tokens.scss`.
|
|
97
|
-
</small>
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
-
import MotionExamples from './components/MotionExamples.vue';
|
|
3
|
-
|
|
4
|
-
<Meta title="Style guide/Motion" />
|
|
5
|
-
|
|
6
|
-
# Motion
|
|
7
|
-
|
|
8
|
-
Motion should make n8n feel responsive, understandable, and calm. Use animation to explain
|
|
9
|
-
state changes, guide attention, or show progress. Avoid motion that is decorative, slow,
|
|
10
|
-
distracting, or repeated so often that it gets in the way.
|
|
11
|
-
|
|
12
|
-
Motion utilities live in `@n8n/design-system/src/css/mixins/motion.scss`.
|
|
13
|
-
|
|
14
|
-
## Principles
|
|
15
|
-
|
|
16
|
-
- **Keep motion purposeful**: Use motion when it helps users understand what has changed (e.g loading states, enter/existing surfaces). Don't add motion for the sake of it.
|
|
17
|
-
- **Prefer subtle movement**: Most motion should be short and low-distance. Small transitions, such as opacity and translations, are enough. Don't animate rapid frequently interactions (e.g hover states)
|
|
18
|
-
- **Prefer non re-painting values**: Opacity and transform are the safest animation properties for performance. Use caution with layout and paint properties like height, width, box-shadow, background-color, and filter. When using those properties, add `will-change`.
|
|
19
|
-
- **Always aim for +60fps**: Motion should feel smooth and responsive. If an animation causes jank or lag, simplify the animation or use a more performant approach.
|
|
20
|
-
- **Respect reduced motion**: Always provide a non-animated fallback for users who prefer reduced motion. Motion mixins should handle `prefers-reduced-motion` internally so that consumers can use them without repeating media queries.
|
|
21
|
-
- **Easing**: Use easing to make motion feel more natural. Avoid linear easing for UI interactions, as it can feel mechanical and less responsive. Instead, use `ease-out` for entrances and exits, and `ease-in-out` for movements of already visible elements. Avoid `ease-in` for most UI animations, as it can delay feedback and make the interface feel sluggish.
|
|
22
|
-
|
|
23
|
-
## Available Mixins
|
|
24
|
-
|
|
25
|
-
| Mixin | Use for | Notes |
|
|
26
|
-
| ------------------------------- | ----------------------------------- | ---------------------------------------------------------- |
|
|
27
|
-
| `motion.spin` | Loading indicators | Continuous rotation. |
|
|
28
|
-
| `motion.skeleton-pulse` | Skeleton loading placeholders | Use for placeholder surfaces, not interactive elements. |
|
|
29
|
-
| `motion.shimmer` | Text or inline loading states | Best for short-lived AI or thinking states. |
|
|
30
|
-
| `motion.popover-in` | Dropdowns, menus, floating surfaces | Uses opacity, translate, and scale. |
|
|
31
|
-
| `motion.collapsible-slide-down` | Opening collapsible content | Animates height. Use only when height animation is needed. |
|
|
32
|
-
| `motion.collapsible-slide-up` | Closing collapsible content | Animates height. Use only when height animation is needed. |
|
|
33
|
-
| `motion.fade-in` | Simple entrance | Prefer for subtle one-off reveals. |
|
|
34
|
-
| `motion.fade-in-up` | Entrance from below | Use for vertical reveal patterns. |
|
|
35
|
-
| `motion.fade-in-down` | Entrance from above | Use when the element visually comes from above. |
|
|
36
|
-
| `motion.fade-in-left` | Entrance from left | Use for horizontal directional context. |
|
|
37
|
-
| `motion.fade-in-right` | Entrance from right | Use for horizontal directional context. |
|
|
38
|
-
| `motion.fade-out` | Simple exit | Use for removal without spatial movement. |
|
|
39
|
-
| `motion.fade-out-down` | Exit downward | Pair with matching entrance direction when possible. |
|
|
40
|
-
| `motion.fade-out-up` | Exit upward | Pair with matching entrance direction when possible. |
|
|
41
|
-
| `motion.fade-out-left` | Exit left | Pair with matching entrance direction when possible. |
|
|
42
|
-
| `motion.fade-out-right` | Exit right | Pair with matching entrance direction when possible. |
|
|
43
|
-
| `motion.blink-background` | Cursor-like attention states | Avoid for large areas or frequent UI. |
|
|
44
|
-
| `motion.typing-blink` | Typing indicators | Use for small repeated indicators only. |
|
|
45
|
-
| `motion.pulse-glow` | Rare emphasis or loading pulse | Animates `box-shadow`; use sparingly. |
|
|
46
|
-
| `motion.pulse-glow-delayed` | Secondary delayed pulse | Only use with `pulse-glow`. |
|
|
47
|
-
| `motion.width-transition` | Width changes | Layout-affecting. Use cautiously. |
|
|
48
|
-
| `motion.height-transition` | Height changes | Layout-affecting. Use cautiously. |
|
|
49
|
-
|
|
50
|
-
## Using Mixins
|
|
51
|
-
|
|
52
|
-
Motion mixins expose CSS variables for local customization. Prefer local overrides over
|
|
53
|
-
creating new keyframes.
|
|
54
|
-
|
|
55
|
-
```scss
|
|
56
|
-
.dropdown {
|
|
57
|
-
--animation--popover-in--duration: var(--duration--snappy);
|
|
58
|
-
--animation--popover-in--translate-y: var(--spacing--4xs);
|
|
59
|
-
|
|
60
|
-
@include motion.popover-in;
|
|
61
|
-
}
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
## Examples
|
|
65
|
-
|
|
66
|
-
<MotionExamples />
|
|
67
|
-
|
|
68
|
-
## Adding New Mixins
|
|
69
|
-
|
|
70
|
-
Before adding a new mixin, check whether an existing mixin can be customized with CSS
|
|
71
|
-
variables.
|
|
72
|
-
|
|
73
|
-
Add a new mixin only when:
|
|
74
|
-
|
|
75
|
-
- The motion pattern is reused by multiple components.
|
|
76
|
-
- The animation has a clear product purpose.
|
|
77
|
-
- The behavior cannot be expressed cleanly with existing mixins.
|
|
78
|
-
- The mixin includes reduced-motion handling.
|
|
79
|
-
- The mixin uses design-system duration and easing tokens.
|
|
80
|
-
|
|
81
|
-
New mixins should follow this shape:
|
|
82
|
-
|
|
83
|
-
```scss
|
|
84
|
-
@mixin example-motion {
|
|
85
|
-
animation: exampleMotion var(--animation--example-motion--duration, var(--duration--snappy))
|
|
86
|
-
var(--animation--example-motion--easing, var(--easing--ease-out));
|
|
87
|
-
|
|
88
|
-
@media (prefers-reduced-motion: reduce) {
|
|
89
|
-
animation: none;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
@keyframes exampleMotion {
|
|
94
|
-
from {
|
|
95
|
-
opacity: 0;
|
|
96
|
-
transform: translateY(var(--animation--example-motion--translate, var(--spacing--4xs)));
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
to {
|
|
100
|
-
opacity: 1;
|
|
101
|
-
transform: translateY(0);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
```
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import { Meta, Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
<Meta title="Style guide/Shadow" />
|
|
4
|
-
|
|
5
|
-
# Shadows
|
|
6
|
-
|
|
7
|
-
Create depth and elevation for UI elements
|
|
8
|
-
|
|
9
|
-
Shadows can be applied using the `shadow-*` primitive. Variants range from `xs` to `xl` and can be used to create depth and elevation for UI elements.
|
|
10
|
-
|
|
11
|
-
Below is a table showcasing the different shadow variants available in the design system.
|
|
12
|
-
|
|
13
|
-
| Step | Value | Description |
|
|
14
|
-
| ------- | ------------------------ | -------------------------------------------------------------- |
|
|
15
|
-
| outline | `var(--shadow--outline)` | Used for focus outlines and similar effects. |
|
|
16
|
-
| 2xs | `var(--shadow--2xs)` | Used for very subtle shadows, such as small elements. |
|
|
17
|
-
| xs | `var(--shadow--xs)` | Used for slightly subtle shadows, such as on buttons or cards. |
|
|
18
|
-
| sm | `var(--shadow--sm)` | Used for standard shadows, such as on popovers or selects. |
|
|
19
|
-
| md | `var(--shadow--md)` | Used for more prominent shadows, such as floating elements. |
|
|
20
|
-
| lg | `var(--shadow--lg)` | Used for larger shadows. |
|
|
21
|
-
| xl | `var(--shadow--xl)` | Used for elevated elements, such as dialogs. |
|
|
22
|
-
|
|
23
|
-
## Example
|
|
24
|
-
|
|
25
|
-
Shadows can be applied using the `shadow-*` primitive. It's recommended to create a local variable and apply the `_primitives.scss` token for flexibility.
|
|
26
|
-
|
|
27
|
-
<div class="sb-unstyled shadow-demo">
|
|
28
|
-
<div class="shadow-demo__item">
|
|
29
|
-
<div class="shadow-demo__label">.box1</div>
|
|
30
|
-
<div class="shadow-demo__card" style={{ boxShadow: 'var(--shadow--xs)' }} />
|
|
31
|
-
</div>
|
|
32
|
-
<div class="shadow-demo__item">
|
|
33
|
-
<div class="shadow-demo__label">.box2</div>
|
|
34
|
-
<div class="shadow-demo__card" style={{ boxShadow: 'var(--shadow--md)' }} />
|
|
35
|
-
</div>
|
|
36
|
-
<div class="shadow-demo__item">
|
|
37
|
-
<div class="shadow-demo__label">.box3</div>
|
|
38
|
-
<div class="shadow-demo__card" style={{ boxShadow: 'var(--shadow--xl)' }} />
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
|
-
```css
|
|
43
|
-
.box {
|
|
44
|
-
width: 160px;
|
|
45
|
-
height: 160px;
|
|
46
|
-
border-radius: var(--radius--lg);
|
|
47
|
-
background: var(--background--surface);
|
|
48
|
-
box-shadow: var(--n8n--shadow--box);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.box1 {
|
|
52
|
-
--n8n--shadow--box: var(--shadow--xs);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.box2 {
|
|
56
|
-
--n8n--shadow--box: var(--shadow--md);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.box3 {
|
|
60
|
-
--n8n--shadow--box: var(--shadow--xl);
|
|
61
|
-
}
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
<style>
|
|
65
|
-
{`
|
|
66
|
-
.shadow-demo {
|
|
67
|
-
display: grid;
|
|
68
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
69
|
-
gap: var(--spacing--lg);
|
|
70
|
-
padding: var(--spacing--xl);
|
|
71
|
-
padding-bottom:calc(2rem + var(--spacing--xl));
|
|
72
|
-
border-radius:var(--radius--lg) var(--radius--lg) 0 0;
|
|
73
|
-
border: 1px solid var(--border-color);
|
|
74
|
-
border-bottom:0;
|
|
75
|
-
background: light-dark(var(--color--neutral-100), var(--color--neutral-900));
|
|
76
|
-
margin-bottom:-2rem;
|
|
77
|
-
}
|
|
78
|
-
.shadow-demo__item {
|
|
79
|
-
display: flex;
|
|
80
|
-
flex-direction: column;
|
|
81
|
-
align-items: center;
|
|
82
|
-
gap: var(--spacing--md);
|
|
83
|
-
}
|
|
84
|
-
.shadow-demo__label {
|
|
85
|
-
color: var(--text-color);
|
|
86
|
-
font-weight: var(--font-weight--semibold);
|
|
87
|
-
}
|
|
88
|
-
.shadow-demo__card {
|
|
89
|
-
width: 160px;
|
|
90
|
-
height: 160px;
|
|
91
|
-
border: 1px solid var(--border-color);
|
|
92
|
-
border-radius: var(--radius--lg);
|
|
93
|
-
background: var(--background--surface);
|
|
94
|
-
}
|
|
95
|
-
`}
|
|
96
|
-
</style>
|