@mittwald/flow-react-components 1.6.0-next.55 → 1.6.0-next.56
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/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Button/Button.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs +5 -2
- package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs.map +1 -1
- package/dist/js/packages/components/src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/IllustratedMessage/IllustratedMessage.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/InlineCode/InlineCode.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Kbd/Kbd.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/List/components/Header/components/SearchField/SearchField.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Markdown/Markdown.mjs +4 -0
- package/dist/js/packages/components/src/components/Markdown/Markdown.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Markdown/Markdown.module.mjs +3 -1
- package/dist/js/packages/components/src/components/Markdown/Markdown.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Options/Options.mjs +4 -1
- package/dist/js/packages/components/src/components/Options/Options.mjs.map +1 -1
- package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tooltip/Tooltip.module.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs +75 -9
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs +75 -9
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs.map +1 -1
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts +62 -0
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n@use \"@/styles/mixins/skeleton\";\n\n.button {\n position: relative;\n font-family:
|
|
1
|
+
{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n@use \"@/styles/mixins/skeleton\";\n\n.button {\n position: relative;\n font-family: var(--font-family--default);\n font-size: var(--font-size-text--m);\n font-weight: var(--font-weight--bold);\n line-height: var(--line-height);\n border: none;\n border-radius: var(--button--corner-radius);\n padding-block: var(--button--padding-y);\n padding-inline: var(--button--padding-x);\n transition-property: color, background-color, transform;\n transition-duration:\n var(--transition--duration--default), var(--transition--duration--default),\n var(--transition--duration--fast);\n transition-timing-function: ease, ease, ease-out;\n max-width: 100%;\n display: grid;\n align-items: center;\n grid-template-areas: \"content\";\n width: fit-content;\n\n &:where(.outline) {\n border-width: var(--button--border-width);\n border-style: var(--button--border-style);\n padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n padding-inline: calc(\n var(--button--padding-x) - var(--button--border-width)\n );\n }\n\n @include focus.focus;\n\n @extend .primary;\n @extend .solid;\n\n /* Elements */\n .content {\n display: flex;\n column-gap: var(--button--spacing);\n align-items: center;\n justify-content: center;\n text-align: start;\n text-wrap-style: pretty;\n\n /* Fade the label out when a state icon (pending/success/fail) takes over. */\n transition-property: opacity;\n transition-duration: var(--transition--duration--fast);\n }\n\n .content,\n .stateIcon {\n grid-area: content;\n }\n\n .stateIcon {\n justify-self: center;\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .counterBadge {\n position: absolute;\n top: calc(var(--size-px--xxs) * -1);\n inset-inline-end: calc(var(--size-px--xxs) * -1);\n }\n\n /* States */\n\n /* Subtle tactile press feedback: a slight inward scale while pressed.\n A muted button ignores the press, so it does not scale. Overlay triggers\n keep data-pressed while their overlay is open, so an expanded trigger is\n excluded. */\n &[data-pressed]:where(\n :not([data-readonly], [aria-disabled=\"true\"], [aria-expanded=\"true\"])\n ) {\n transform: scale(0.97);\n }\n\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n .content {\n opacity: 0;\n }\n }\n\n &.isPending {\n .stateIcon {\n color: var(--button--pending-icon-color);\n }\n }\n\n /* Success/failure icon pops in when it replaces the label. The pending\n spinner is left alone — it has its own animation. */\n &.isSucceeded,\n &.isFailed {\n .stateIcon {\n animation: state-icon-pop var(--transition--duration--default)\n cubic-bezier(0.34, 1.35, 0.5, 1);\n }\n }\n\n /* Size */\n\n &:where(.size-s) {\n font-size: var(--button--font-size-s);\n line-height: var(--button--line-height-s);\n padding-block: var(--button--padding-s-y);\n padding-inline: var(--button--padding-s-x);\n column-gap: var(--button--spacing-s);\n border-radius: var(--button--corner-radius-s);\n\n &:where(.outline) {\n padding-block: calc(\n var(--button--padding-s-y) - var(--button--border-width)\n );\n padding-inline: calc(\n var(--button--padding-s-x) - var(--button--border-width)\n );\n }\n\n &:where(:has(.icon):not(:has(.text), .hasText)) {\n padding: var(--button--padding-s-icon-only);\n\n &:where(.outline) {\n padding: calc(\n var(--button--padding-s-icon-only) - var(--button--border-width)\n );\n }\n }\n\n .content {\n column-gap: var(--button--spacing-s);\n }\n }\n\n /* Variants */\n\n @mixin variant($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--default\n );\n color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n &:hover:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--hover\n );\n }\n\n &[data-pressed]:where(:not([data-readonly])) {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--pressed\n );\n }\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed,\n &.isSucceeded {\n background-color: var(\n --button--#{$color}-#{$variant}-background-color--disabled\n );\n color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n }\n }\n }\n\n @include variant(primary, solid);\n @include variant(success, solid);\n @include variant(danger, solid);\n @include variant(secondary, solid);\n @include variant(dark, solid);\n @include variant(light, solid);\n @include variant(dark-static, solid);\n @include variant(light-static, solid);\n @include variant(primary, plain);\n @include variant(success, plain);\n @include variant(danger, plain);\n @include variant(secondary, plain);\n @include variant(dark, plain);\n @include variant(light, plain);\n @include variant(dark-static, plain);\n @include variant(light-static, plain);\n @include variant(primary, soft);\n @include variant(success, soft);\n @include variant(danger, soft);\n @include variant(secondary, soft);\n @include variant(dark, soft);\n @include variant(light, soft);\n @include variant(dark-static, soft);\n @include variant(light-static, soft);\n @include variant(primary, outline);\n @include variant(success, outline);\n @include variant(danger, outline);\n @include variant(secondary, outline);\n @include variant(dark, outline);\n @include variant(light, outline);\n @include variant(dark-static, outline);\n @include variant(light-static, outline);\n\n /* Outline */\n\n @mixin outline($color, $variant) {\n &:where(.#{$color}.#{$variant}) {\n &.outline {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--default\n );\n\n &[disabled],\n &[data-disabled],\n &.ariaDisabled,\n &.isPending,\n &.isFailed {\n border-color: var(\n --button--#{$color}-#{$variant}-border-color--disabled\n );\n }\n }\n }\n }\n\n @include outline(primary, outline);\n @include outline(success, outline);\n @include outline(danger, outline);\n @include outline(secondary, outline);\n @include outline(dark, outline);\n @include outline(light, outline);\n @include outline(dark-static, outline);\n @include outline(light-static, outline);\n @include avatarButton.avatarButton();\n\n &:has(.image) {\n padding: 0;\n background: none;\n height: fit-content;\n\n &:hover:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--hover);\n filter: brightness(var(--image-button--brightness--hover));\n }\n\n &[data-pressed]:where(:not([data-readonly])) .image {\n background: var(--button--dark-plain-background-color--pressed);\n filter: brightness(var(--image-button--brightness--pressed));\n }\n\n .image {\n width: 100%;\n }\n }\n\n /* SkeletonMode — after the variants, so the surface wins over their colors */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--button--corner-radius);\n\n &:where(.size-s) {\n --skeleton-radius: var(--button--corner-radius-s);\n }\n\n &:where(:has(.avatar)) {\n --skeleton-radius: var(--corner-radius--round);\n }\n }\n}\n\n@include skeleton.keyframes;\n\n@keyframes state-icon-pop {\n from {\n transform: scale(0.6);\n opacity: 0;\n }\n\n to {\n transform: scale(1);\n opacity: 1;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n.calendar {\n width: fit-content;\n\n .calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n /* react-aria's Heading — CalendarHeader passes no className, so its\n default class is the handle. */\n :global(.react-aria-Heading) {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n .container {\n display: flex;\n flex-direction: row;\n gap: var(--popover--padding--m);\n\n .presetMenu {\n max-width:
|
|
1
|
+
{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n.calendar {\n width: fit-content;\n\n .calendarHeader {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n /* react-aria's Heading — CalendarHeader passes no className, so its\n default class is the handle. */\n :global(.react-aria-Heading) {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n .container {\n display: flex;\n flex-direction: row;\n gap: var(--popover--padding--m);\n\n .presetMenu {\n max-width: var(--calendar--preset-menu-max-width);\n\n /*\n * With an auto width, WebKit resolved the menu one item padding wider on\n * every layout. Each reposition of the popover then resized it again,\n * inside react-aria's resize observer on the popover: a\n * \"ResizeObserver loop\" error per step.\n */\n width: max-content;\n }\n }\n\n @media (max-width: 530px) {\n .container {\n flex-direction: column-reverse;\n\n .presetMenu {\n width: auto;\n }\n\n /* The presets move below the grid, so the separator turns horizontal. */\n .presetSeparator {\n border-inline-end: 0;\n border-top: var(--separator--height) var(--separator--border-style)\n var(--separator--color);\n width: 100%;\n }\n }\n }\n\n :global(.react-aria-CalendarHeaderCell) {\n font-size: var(--calendar--cell-font-size);\n height: var(--calendar--cell-size);\n }\n\n :global(.react-aria-CalendarGrid) {\n border-spacing: var(--calendar--spacing);\n }\n\n :global(.react-aria-CalendarCell) {\n width: var(--calendar--cell-size);\n height: var(--calendar--cell-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n border-radius: var(--calendar--cell-corner-radius);\n font-size: var(--calendar--cell-font-size);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &[data-outside-month] {\n display: none;\n }\n\n &:hover {\n background: var(--calendar--cell-background-color--hover);\n }\n\n &[data-pressed] {\n background: var(--calendar--cell-background-color--pressed);\n }\n\n &[data-selected] {\n background: var(--calendar--cell-background-color--selected);\n color: var(--calendar--cell-content-color--selected);\n }\n\n &[data-disabled],\n &[data-unavailable=\"true\"] {\n background: var(--calendar--cell-background-color--disabled);\n color: var(--calendar--cell-content-color--disabled);\n }\n\n @include focus.focus;\n }\n\n &.range {\n :global(.react-aria-CalendarCell) {\n position: relative;\n isolation: isolate;\n transition-duration: 0s;\n\n &[data-selected] {\n &::before {\n content: \"\";\n background: var(--calendar--range-background-color);\n border-block: var(--calendar--range-border-width)\n var(--calendar--range-border-style)\n var(--calendar--range-border-color);\n // Reaches across the border spacing into the next cell\n width: calc(100% + var(--calendar--spacing) * 1.5);\n height: 100%;\n position: absolute;\n z-index: -1;\n }\n\n &::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n border-radius: var(--calendar--cell-corner-radius);\n }\n\n &:hover {\n &::after {\n background: var(--calendar--cell-background-color--hover);\n }\n }\n\n &[data-pressed] {\n &::after {\n background: var(--calendar--cell-background-color--pressed);\n }\n }\n\n &[data-selection-start],\n &[data-selection-end] {\n &::after {\n background: var(--calendar--cell-background-color--selected);\n }\n }\n\n &[data-selection-start] {\n &::before {\n border-start-start-radius: var(--calendar--cell-corner-radius);\n border-end-start-radius: var(--calendar--cell-corner-radius);\n inset-inline-start: 0;\n }\n }\n\n &[data-selection-end] {\n &::before {\n border-start-end-radius: var(--calendar--cell-corner-radius);\n border-end-end-radius: var(--calendar--cell-corner-radius);\n inset-inline-end: 0;\n }\n }\n\n &:not([data-selection-start], [data-selection-end]) {\n color: var(--text--color--default);\n background: none;\n }\n\n &[data-selection-start][data-selection-end] {\n &::before {\n display: none;\n }\n }\n }\n }\n }\n\n /* SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n }\n}\n\n@include skeleton.keyframes;\n\n@media (max-width: 360px) {\n .calendar {\n --calendar--cell-size: 2.1rem;\n --calendar--cell-font-size: 0.8rem;\n }\n}\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.module.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.cartesianChart {\n font-family:
|
|
1
|
+
{"version":3,"file":"CartesianChart.module.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.cartesianChart {\n font-family: var(--font-family--default);\n isolation: isolate;\n\n *:focus:not(:focus-visible) {\n outline: none !important;\n }\n\n .emptyViewContainer {\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n &.emptyView {\n :global(.recharts-cartesian-grid) {\n display: none;\n }\n }\n\n // recharts renders every svg here; only its outermost surface is classed.\n // stylelint-disable-next-line selector-max-type -- third-party svgs\n svg {\n overflow: visible;\n }\n\n :global(.recharts-tooltip-wrapper) {\n z-index: 1;\n }\n}\n\n/* SkeletonMode */\n\n.skeleton {\n @include skeleton.surface;\n\n width: 100%;\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.mjs";
|
|
3
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
5
|
// src/components/CartesianChart/components/AreaDot/AreaDot.tsx
|
|
5
6
|
var AreaDot = ({ cx, cy, color }) => {
|
|
7
|
+
const tokens = useDesignTokens();
|
|
6
8
|
if (cx === void 0 || cy === void 0) return null;
|
|
9
|
+
const backgroundColor = tokens.area["dot-background-color"].value;
|
|
7
10
|
return /* @__PURE__ */ jsxs("svg", {
|
|
8
11
|
x: cx - 7,
|
|
9
12
|
y: cy - 7,
|
|
@@ -16,14 +19,14 @@ var AreaDot = ({ cx, cy, color }) => {
|
|
|
16
19
|
cx: "7",
|
|
17
20
|
cy: "7",
|
|
18
21
|
r: "7",
|
|
19
|
-
fill:
|
|
22
|
+
fill: backgroundColor
|
|
20
23
|
}), /* @__PURE__ */ jsx("circle", {
|
|
21
24
|
cx: "7",
|
|
22
25
|
cy: "7",
|
|
23
26
|
r: "4",
|
|
24
27
|
stroke: color,
|
|
25
28
|
strokeWidth: "2",
|
|
26
|
-
fill:
|
|
29
|
+
fill: backgroundColor
|
|
27
30
|
})]
|
|
28
31
|
});
|
|
29
32
|
};
|
package/dist/js/packages/components/src/components/CartesianChart/components/AreaDot/AreaDot.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AreaDot.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\n\nexport interface AreaDotProps extends Recharts.DotProps {\n color: string;\n}\n\nexport const AreaDot: FC<AreaDotProps> = ({ cx, cy, color }) => {\n if (cx === undefined || cy === undefined) return null;\n\n return (\n <svg\n x={cx - 7}\n y={cy - 7}\n width={14}\n height={14}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"7\" cy=\"7\" r=\"7\" fill
|
|
1
|
+
{"version":3,"file":"AreaDot.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/AreaDot/AreaDot.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport type * as Recharts from \"recharts\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface AreaDotProps extends Recharts.DotProps {\n color: string;\n}\n\nexport const AreaDot: FC<AreaDotProps> = ({ cx, cy, color }) => {\n const tokens = useDesignTokens();\n\n if (cx === undefined || cy === undefined) return null;\n\n const backgroundColor = tokens.area[\"dot-background-color\"].value;\n\n return (\n <svg\n x={cx - 7}\n y={cy - 7}\n width={14}\n height={14}\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"7\" cy=\"7\" r=\"7\" fill={backgroundColor} />\n <circle\n cx=\"7\"\n cy=\"7\"\n r=\"4\"\n stroke={color}\n strokeWidth=\"2\"\n fill={backgroundColor}\n />\n </svg>\n );\n};\n\nexport default AreaDot;\n"],"mappings":";;;;;AAQA,IAAa,WAA6B,EAAE,IAAI,IAAI,YAAY;CAC9D,MAAM,SAAS,gBAAgB;CAE/B,IAAI,OAAO,KAAA,KAAa,OAAO,KAAA,GAAW,OAAO;CAEjD,MAAM,kBAAkB,OAAO,KAAK,uBAAuB,CAAC;CAE5D,OACE,qBAAC,OAAD;EACE,GAAG,KAAK;EACR,GAAG,KAAK;EACR,OAAO;EACP,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,OAAM;EAPR,UAAA,CASE,oBAAC,UAAD;GAAQ,IAAG;GAAI,IAAG;GAAI,GAAE;GAAI,MAAM;EAAkB,CAAA,GACpD,oBAAC,UAAD;GACE,IAAG;GACH,IAAG;GACH,GAAE;GACF,QAAQ;GACR,aAAY;GACZ,MAAM;EACP,CAAA,CACE;;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartTooltip.module.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss"],"sourcesContent":[":global(.recharts-tooltip-wrapper-right) {\n margin-inline-start: calc(var(--popover--tip-height) + var(--chart-tooltip--spacing));\n}\n\n:global(.recharts-tooltip-wrapper-left) {\n margin-inline-start: calc(\n calc(var(--popover--tip-height) + var(--chart-tooltip--spacing)) * -1\n );\n}\n\n.chartTooltip {\n background-color: var(--popover--background-color);\n box-shadow: var(--popover--box-shadow);\n border-radius: var(--popover--corner-radius);\n border-width: var(--popover--border-width);\n border-style: var(--popover--border-style);\n border-color: var(--popover--border-color);\n padding: var(--popover--padding--m);\n\n &:has(.progressBar) {\n min-width:
|
|
1
|
+
{"version":3,"file":"ChartTooltip.module.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/ChartTooltip/ChartTooltip.module.scss"],"sourcesContent":[":global(.recharts-tooltip-wrapper-right) {\n margin-inline-start: calc(\n var(--popover--tip-height) + var(--chart-tooltip--spacing)\n );\n}\n\n:global(.recharts-tooltip-wrapper-left) {\n margin-inline-start: calc(\n calc(var(--popover--tip-height) + var(--chart-tooltip--spacing)) * -1\n );\n}\n\n.chartTooltip {\n background-color: var(--popover--background-color);\n box-shadow: var(--popover--box-shadow);\n border-radius: var(--popover--corner-radius);\n border-width: var(--popover--border-width);\n border-style: var(--popover--border-style);\n border-color: var(--popover--border-color);\n padding: var(--popover--padding--m);\n\n &:has(.progressBar) {\n min-width: var(--chart-tooltip--progress-bar-min-width);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IllustratedMessage.module.mjs","names":[],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.module.scss"],"sourcesContent":[".illustratedMessage {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--illustrated-message--padding);\n row-gap: var(--illustrated-message--spacing);\n\n /* Elements */\n\n :where(.icon) {\n color: var(--illustrated-message--content-color);\n }\n\n .text,\n .heading {\n max-width: var(--max-text-width);\n text-align: center;\n }\n\n .actionGroup {\n justify-content: center;\n }\n\n .progressBar {\n max-width:
|
|
1
|
+
{"version":3,"file":"IllustratedMessage.module.mjs","names":[],"sources":["../../../../../../../src/components/IllustratedMessage/IllustratedMessage.module.scss"],"sourcesContent":[".illustratedMessage {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--illustrated-message--padding);\n row-gap: var(--illustrated-message--spacing);\n\n /* Elements */\n\n :where(.icon) {\n color: var(--illustrated-message--content-color);\n }\n\n .text,\n .heading {\n max-width: var(--max-text-width);\n text-align: center;\n }\n\n .actionGroup {\n justify-content: center;\n }\n\n .progressBar {\n max-width: var(--illustrated-message--progress-bar-max-width);\n }\n\n /* Color */\n\n @mixin color($color) {\n &.#{$color} {\n :where(.icon) {\n color: var(--illustrated-message--#{$color}-content-color);\n }\n }\n }\n\n @include color(danger);\n @include color(unavailable);\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineCode.module.mjs","names":[],"sources":["../../../../../../../src/components/InlineCode/InlineCode.module.scss"],"sourcesContent":[".inlineCode {\n font-family:
|
|
1
|
+
{"version":3,"file":"InlineCode.module.mjs","names":[],"sources":["../../../../../../../src/components/InlineCode/InlineCode.module.scss"],"sourcesContent":[".inlineCode {\n font-family: var(--font-family--code);\n font-size: var(--inline-code--font-size);\n overflow-wrap: anywhere;\n padding-inline: var(--inline-code--padding-x);\n padding-block: var(--inline-code--padding-y);\n border-radius: var(--inline-code--corner-radius);\n display: inline;\n width: fit-content;\n max-width: 100%;\n min-width: 0;\n color: var(--inline-code--content-color);\n background-color: var(--inline-code--background-color);\n\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--inline-code--#{$color}-content-color);\n background-color: var(--inline-code--#{$color}-background-color);\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Kbd.module.mjs","names":[],"sources":["../../../../../../../src/components/Kbd/Kbd.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.kbd {\n font-family:
|
|
1
|
+
{"version":3,"file":"Kbd.module.mjs","names":[],"sources":["../../../../../../../src/components/Kbd/Kbd.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.kbd {\n font-family: var(--font-family--default);\n font-size: var(--font-size-text--s);\n}\n\n:not(.kbd) > .kbd {\n &.soft {\n display: inline-block;\n line-height: var(--font-size-text--m);\n color: var(--kbd--content-color--default);\n background-color: var(--kbd--background-color--default);\n padding: var(--kbd--padding);\n padding-top: var(--kbd--padding-y-start);\n border-radius: var(--kbd--corner-radius);\n border-inline-start: var(--kbd--inner-shadow-size-x) solid\n var(--kbd--inner-shadow-color--default);\n border-inline-end: var(--kbd--inner-shadow-size-x) solid\n var(--kbd--inner-shadow-color--default);\n box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n var(--kbd--inner-shadow-color--default);\n width: fit-content;\n height: fit-content;\n }\n\n &.plain {\n color: var(--kbd--content-color-plain--default);\n }\n\n &.disabled {\n &.soft {\n color: var(--kbd--content-color--disabled);\n background-color: var(--kbd--background-color--disabled);\n border-inline-start-color: var(--kbd--inner-shadow-color--disabled);\n border-inline-end-color: var(--kbd--inner-shadow-color--disabled);\n box-shadow: inset 0 calc(var(--kbd--inner-shadow-size-y-end) * -1) 0\n var(--kbd--inner-shadow-color--disabled);\n }\n\n &.plain {\n color: var(--kbd--content-color-plain--disabled);\n }\n }\n\n /* SkeletonMode — after the variants, and as specific as the disabled ones,\n so the surface wins over their colors */\n\n &.skeleton,\n &.skeleton.disabled {\n @include skeleton.shape;\n\n --skeleton-radius: var(--kbd--corner-radius);\n\n /* An inline box clips no overflow, so the shimmer would run past it. */\n display: inline-block;\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n max-width:
|
|
1
|
+
{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Header/components/SearchField/SearchField.module.scss"],"sourcesContent":[".searchField {\n max-width: var(--list--search-field-max-width);\n margin-inline-start: auto;\n flex-grow: 1;\n\n // The list's search field can be swapped out by the consumer's\n // `search.render`, so this has to match whatever input that renders.\n // stylelint-disable-next-line selector-max-type -- replaceable field\n input {\n width: var(--list--search-field-input-width);\n }\n}\n"],"mappings":""}
|
|
@@ -102,6 +102,10 @@ var Markdown = (props) => {
|
|
|
102
102
|
...props,
|
|
103
103
|
children: /* @__PURE__ */ jsx(SkeletonInlineContent, { children })
|
|
104
104
|
}),
|
|
105
|
+
table: ({ node: ignoredNode, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
106
|
+
className: Markdown_module_default.tableContainer,
|
|
107
|
+
children: /* @__PURE__ */ jsx("table", { ...props })
|
|
108
|
+
}),
|
|
105
109
|
th: ({ node: ignoredNode, children, ...props }) => /* @__PURE__ */ jsx("th", {
|
|
106
110
|
...props,
|
|
107
111
|
children: /* @__PURE__ */ jsx(SkeletonInlineContent, { children })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.mjs","names":["styles"],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, Ref } from \"react\";\nimport { Children, isValidElement, useId, useMemo } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport { isExternalHref } from \"@/components/Markdown/lib/isExternalHref\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport {\n SkeletonBlockText,\n SkeletonInlineContent,\n} from \"@/components/Markdown/components/SkeletonBlocks\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface MarkdownProps\n extends PropsWithClassName, Omit<Options, \"components\"> {\n /** The color schema of the markdown component. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** Shifts all heading levels by the given offset. @default 0 */\n headingOffset?: number;\n /** Allows overriding markdown element renderers from outside. */\n components?: Components;\n /** @internal */\n style?: CSSProperties;\n /** A ref to the elements root. */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const {\n children,\n color = \"default\",\n className,\n headingOffset = 0,\n components: customComponents,\n ref,\n allowElement,\n allowedElements,\n disallowedElements,\n rehypePlugins,\n remarkPlugins,\n remarkRehypeOptions,\n skipHtml,\n unwrapDisallowed,\n urlTransform,\n ...rest\n } = props;\n\n const isSkeleton = useSkeletonMode();\n /* Footnote ids are per document, so two instances on one page would share\n them and a back link would jump into the other one. */\n const clobberPrefix = `user-content-${useId().replace(/[^\\w-]/g, \"\")}-`;\n\n /* react-markdown uses the renderers as element types: new ones on every\n render would remount the whole tree. */\n const defaultComponents = useMemo<Components>(\n () => ({\n /* GFM footnotes link through `id` (the back link's target), `aria-label`\n and `aria-describedby`. */\n a: (props) => (\n <Link\n id={props.id}\n aria-label={props[\"aria-label\"]}\n aria-describedby={props[\"aria-describedby\"]}\n target={isExternalHref(props.href) ? \"_blank\" : undefined}\n color={color}\n href={props.href}\n >\n {props.children}\n </Link>\n ),\n p: (props) => (\n <Text elementType=\"p\" color={color}>\n {props.children}\n </Text>\n ),\n code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n h1: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(1, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(2, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(3, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(4, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(5, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(6, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n hr: () => <Separator />,\n pre: (props) => {\n const preElementContent = Children.toArray(props.children)[0];\n\n return (\n <CodeBlock\n copyable={false}\n language={\n isValidElement<{ className?: string }>(preElementContent) &&\n preElementContent.props.className\n ? (preElementContent.props.className.replace(\n \"language-\",\n \"\",\n ) as CodeEditorLanguage)\n : undefined\n }\n code={String(\n isValidElement<{ children: string }>(preElementContent)\n ? preElementContent.props.children\n : preElementContent,\n ).trim()}\n />\n );\n },\n ul: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ul {...props} />\n </SkeletonBlockText>\n ),\n ol: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ol {...props} />\n </SkeletonBlockText>\n ),\n li: ({ node: ignoredNode, children, ...props }) => (\n <li {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </li>\n ),\n th: ({ node: ignoredNode, children, ...props }) => (\n <th {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </th>\n ),\n td: ({ node: ignoredNode, children, ...props }) => (\n <td {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </td>\n ),\n /* A text bar resets the mode for its content, so the image reads it\n from here. A skeleton issues no request. */\n img: ({ node: ignoredNode, ...props }) =>\n isSkeleton ? null : <img {...props} />,\n blockquote: (props) => (\n <SkeletonBlockText color={color}>\n <blockquote>{props.children}</blockquote>\n </SkeletonBlockText>\n ),\n }),\n [color, headingOffset, isSkeleton],\n );\n\n const textContent = extractTextFromFirstChild(children);\n const mergedComponents = useMemo<Components>(\n () => ({\n ...defaultComponents,\n ...customComponents,\n }),\n [defaultComponents, customComponents],\n );\n\n return (\n <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n <ReactMarkdown\n allowElement={allowElement}\n allowedElements={allowedElements}\n disallowedElements={disallowedElements}\n rehypePlugins={rehypePlugins}\n remarkPlugins={remarkPlugins ?? [remarkGfm]}\n remarkRehypeOptions={{ clobberPrefix, ...remarkRehypeOptions }}\n skipHtml={skipHtml}\n unwrapDisallowed={unwrapDisallowed}\n urlTransform={urlTransform}\n components={mergedComponents}\n >\n {textContent}\n </ReactMarkdown>\n </div>\n );\n};\n\nexport default Markdown;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Markdown.mjs","names":["styles"],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, Ref } from \"react\";\nimport { Children, isValidElement, useId, useMemo } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport { isExternalHref } from \"@/components/Markdown/lib/isExternalHref\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport {\n SkeletonBlockText,\n SkeletonInlineContent,\n} from \"@/components/Markdown/components/SkeletonBlocks\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface MarkdownProps\n extends PropsWithClassName, Omit<Options, \"components\"> {\n /** The color schema of the markdown component. @default \"default\" */\n color?: \"default\" | AlphaColor;\n /** Shifts all heading levels by the given offset. @default 0 */\n headingOffset?: number;\n /** Allows overriding markdown element renderers from outside. */\n components?: Components;\n /** @internal */\n style?: CSSProperties;\n /** A ref to the elements root. */\n ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const {\n children,\n color = \"default\",\n className,\n headingOffset = 0,\n components: customComponents,\n ref,\n allowElement,\n allowedElements,\n disallowedElements,\n rehypePlugins,\n remarkPlugins,\n remarkRehypeOptions,\n skipHtml,\n unwrapDisallowed,\n urlTransform,\n ...rest\n } = props;\n\n const isSkeleton = useSkeletonMode();\n /* Footnote ids are per document, so two instances on one page would share\n them and a back link would jump into the other one. */\n const clobberPrefix = `user-content-${useId().replace(/[^\\w-]/g, \"\")}-`;\n\n /* react-markdown uses the renderers as element types: new ones on every\n render would remount the whole tree. */\n const defaultComponents = useMemo<Components>(\n () => ({\n /* GFM footnotes link through `id` (the back link's target), `aria-label`\n and `aria-describedby`. */\n a: (props) => (\n <Link\n id={props.id}\n aria-label={props[\"aria-label\"]}\n aria-describedby={props[\"aria-describedby\"]}\n target={isExternalHref(props.href) ? \"_blank\" : undefined}\n color={color}\n href={props.href}\n >\n {props.children}\n </Link>\n ),\n p: (props) => (\n <Text elementType=\"p\" color={color}>\n {props.children}\n </Text>\n ),\n code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n h1: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(1, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(2, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(3, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(4, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(5, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading\n id={props.id}\n level={getHeadingLevelWithOffset(6, headingOffset)}\n color={color}\n >\n {props.children}\n </Heading>\n ),\n hr: () => <Separator />,\n pre: (props) => {\n const preElementContent = Children.toArray(props.children)[0];\n\n return (\n <CodeBlock\n copyable={false}\n language={\n isValidElement<{ className?: string }>(preElementContent) &&\n preElementContent.props.className\n ? (preElementContent.props.className.replace(\n \"language-\",\n \"\",\n ) as CodeEditorLanguage)\n : undefined\n }\n code={String(\n isValidElement<{ children: string }>(preElementContent)\n ? preElementContent.props.children\n : preElementContent,\n ).trim()}\n />\n );\n },\n ul: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ul {...props} />\n </SkeletonBlockText>\n ),\n ol: ({ node: ignoredNode, ...props }) => (\n <SkeletonBlockText color={color}>\n <ol {...props} />\n </SkeletonBlockText>\n ),\n li: ({ node: ignoredNode, children, ...props }) => (\n <li {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </li>\n ),\n /* A table cannot shrink below its content, so the box around it scrolls\n instead of the table overflowing the markdown. */\n table: ({ node: ignoredNode, ...props }) => (\n <div className={styles.tableContainer}>\n <table {...props} />\n </div>\n ),\n th: ({ node: ignoredNode, children, ...props }) => (\n <th {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </th>\n ),\n td: ({ node: ignoredNode, children, ...props }) => (\n <td {...props}>\n <SkeletonInlineContent>{children}</SkeletonInlineContent>\n </td>\n ),\n /* A text bar resets the mode for its content, so the image reads it\n from here. A skeleton issues no request. */\n img: ({ node: ignoredNode, ...props }) =>\n isSkeleton ? null : <img {...props} />,\n blockquote: (props) => (\n <SkeletonBlockText color={color}>\n <blockquote>{props.children}</blockquote>\n </SkeletonBlockText>\n ),\n }),\n [color, headingOffset, isSkeleton],\n );\n\n const textContent = extractTextFromFirstChild(children);\n const mergedComponents = useMemo<Components>(\n () => ({\n ...defaultComponents,\n ...customComponents,\n }),\n [defaultComponents, customComponents],\n );\n\n return (\n <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n <ReactMarkdown\n allowElement={allowElement}\n allowedElements={allowedElements}\n disallowedElements={disallowedElements}\n rehypePlugins={rehypePlugins}\n remarkPlugins={remarkPlugins ?? [remarkGfm]}\n remarkRehypeOptions={{ clobberPrefix, ...remarkRehypeOptions }}\n skipHtml={skipHtml}\n unwrapDisallowed={unwrapDisallowed}\n urlTransform={urlTransform}\n components={mergedComponents}\n >\n {textContent}\n </ReactMarkdown>\n </div>\n );\n};\n\nexport default Markdown;\n"],"mappings":"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"}
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
// src/components/Markdown/Markdown.module.scss
|
|
4
4
|
var markdown = "flow--markdown";
|
|
5
|
+
var tableContainer = "flow--markdown--table-container";
|
|
5
6
|
var skeletonBlock = "flow--markdown--skeleton-block";
|
|
6
7
|
var Markdown_module_default = {
|
|
7
8
|
markdown,
|
|
9
|
+
tableContainer,
|
|
8
10
|
skeletonBlock
|
|
9
11
|
};
|
|
10
|
-
export { Markdown_module_default as default, markdown, skeletonBlock };
|
|
12
|
+
export { Markdown_module_default as default, markdown, skeletonBlock, tableContainer };
|
|
11
13
|
|
|
12
14
|
//# sourceMappingURL=Markdown.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.markdown {\n display: flex;\n flex-direction: column;\n row-gap: var(--markdown--spacing);\n min-width: 0;\n\n /* Everything below styles react-markdown's output. Consumers can replace any\n renderer through the `components` prop, so these rules have to match the\n element, not a Flow class that a replacement would not carry. */\n // stylelint-disable-next-line selector-max-type -- react-markdown output\n p {\n white-space: break-spaces;\n }\n\n
|
|
1
|
+
{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n@use \"@/styles/mixins/skeleton\";\n\n.markdown {\n display: flex;\n flex-direction: column;\n row-gap: var(--markdown--spacing);\n min-width: 0;\n\n /* Everything below styles react-markdown's output. Consumers can replace any\n renderer through the `components` prop, so these rules have to match the\n element, not a Flow class that a replacement would not carry. */\n // stylelint-disable-next-line selector-max-type -- react-markdown output\n p {\n white-space: break-spaces;\n }\n\n /* Only scrolls, like `Table`: a replaced `table` renderer has no container\n and keeps the table's own look. */\n .tableContainer {\n @include scrollbar.scrollbar;\n\n overflow-x: auto;\n }\n\n // stylelint-disable selector-max-type -- react-markdown table output\n table {\n min-inline-size: 100%;\n border-radius: var(--table--corner-radius);\n overflow: hidden;\n border-width: var(--table--border-width);\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-spacing: 0;\n background-color: var(--table--background-color);\n\n thead {\n font-weight: var(--table--header-font-weight);\n }\n\n th,\n td {\n padding-inline: var(--table--padding-x);\n padding-block: var(--table--padding-y);\n text-align: start;\n border-style: var(--table--border-style);\n border-color: var(--table--border-color);\n border-width: 0;\n }\n\n th {\n border-block-end-width: var(--table--header-border-width);\n }\n\n tbody tr {\n &:nth-of-type(odd) td {\n background-color: var(--table--background-color-accent);\n }\n\n &:not(:last-child) td {\n border-block-end-width: var(--table--border-width);\n }\n }\n }\n // stylelint-enable selector-max-type\n}\n\n/* SkeletonMode: a list or quote whose items became bars. The bullets take the\n bar color, so no real glyph shows. */\n.skeletonBlock ::marker {\n color: skeleton.$background-color;\n}\n"],"mappings":""}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
|
|
4
|
+
import all_light_default from "../../../../design-tokens/dist/json-runtime/all-light.mjs";
|
|
4
5
|
import { Popover } from "../Popover/Popover.mjs";
|
|
5
6
|
import Options_module_default from "./Options.module.mjs";
|
|
6
7
|
import clsx from "clsx";
|
|
@@ -8,13 +9,15 @@ import "react";
|
|
|
8
9
|
import { jsx } from "react/jsx-runtime";
|
|
9
10
|
import * as Aria from "react-aria-components";
|
|
10
11
|
// src/components/Options/Options.tsx
|
|
12
|
+
/** `Popover`'s `maxHeight` is a number, so it cannot read the CSS variable. */
|
|
13
|
+
var maxHeight = Number.parseFloat(all_light_default.options["max-height"].value);
|
|
11
14
|
var Options = flowComponent("Options", (props) => {
|
|
12
15
|
const { className, children, controller, renderEmptyState, onAction, ...restPopoverProps } = props;
|
|
13
16
|
const rootClassName = clsx(Options_module_default.options, className);
|
|
14
17
|
return /* @__PURE__ */ jsx(Popover, {
|
|
15
18
|
className: Options_module_default.popover,
|
|
16
19
|
controller,
|
|
17
|
-
maxHeight
|
|
20
|
+
maxHeight,
|
|
18
21
|
...restPopoverProps,
|
|
19
22
|
children: /* @__PURE__ */ jsx(Aria.ListBox, {
|
|
20
23
|
onAction,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Options.mjs","names":["styles"],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface OptionsProps\n extends\n Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" | \"onAction\">,\n PopoverProps {\n controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n const {\n className,\n children,\n controller,\n renderEmptyState,\n onAction,\n ...restPopoverProps\n } = props;\n\n const rootClassName = clsx(styles.options, className);\n\n return (\n <Popover\n className={styles.popover}\n controller={controller}\n maxHeight={
|
|
1
|
+
{"version":3,"file":"Options.mjs","names":["tokens","styles"],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport tokens from \"@mittwald/flow-design-tokens/json-runtime/all-light.json\";\n\n/** `Popover`'s `maxHeight` is a number, so it cannot read the CSS variable. */\nconst maxHeight = Number.parseFloat(tokens.options[\"max-height\"].value);\n\nexport interface OptionsProps\n extends\n Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" | \"onAction\">,\n PopoverProps {\n controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n const {\n className,\n children,\n controller,\n renderEmptyState,\n onAction,\n ...restPopoverProps\n } = props;\n\n const rootClassName = clsx(styles.options, className);\n\n return (\n <Popover\n className={styles.popover}\n controller={controller}\n maxHeight={maxHeight}\n {...restPopoverProps}\n >\n <Aria.ListBox\n onAction={onAction}\n className={rootClassName}\n renderEmptyState={renderEmptyState}\n >\n {children}\n </Aria.ListBox>\n </Popover>\n );\n});\n\nexport default Options;\n"],"mappings":";;;;;;;;;;;;AAWA,IAAM,YAAY,OAAO,WAAWA,kBAAO,QAAQ,aAAa,CAAC,KAAK;AAStE,IAAa,UAA4B,cAAc,YAAY,UAAU;CAC3E,MAAM,EACJ,WACA,UACA,YACA,kBACA,UACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,KAAKC,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,SAAD;EACE,WAAWA,uBAAO;EACN;EACD;EACX,GAAI;EAEJ,UAAA,oBAAC,KAAK,SAAN;GACY;GACV,WAAW;GACO;GAEjB;EACW,CAAA;CACP,CAAA;AAEb,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexityIndicator.module.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.scss"],"sourcesContent":["@use \"complexity\";\n\n.complexityIndicator {\n width: 100%;\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n height: var(--progress-bar--height--s);\n overflow: hidden;\n border-top: var(--form-control--border-width) solid\n var(--progress-bar--border-color);\n\n @include complexity.animation-in(\"height\");\n @include complexity.animation-in(\"border-top-color\");\n\n &.hide {\n transition-duration: #{complexity.$animation-out-duration};\n height: 0;\n border-top-color: transparent;\n overflow: hidden;\n }\n\n & .bar {\n position: relative;\n display: block;\n height: 100%;\n width: calc(var(--complexity-indicator--percentage) * 1%);\n border-radius: calc(var(--form-control--corner-radius) - 1px);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n transition:\n width #{complexity.$animation-width-responsiveness},\n background-color #{complexity.$animation-background-color-change};\n\n &.running {\n border-end-end-radius: 0;\n }\n\n &.bar-background-status-danger {\n background-color: var(--progress-bar--danger-fill-background-color);\n }\n\n &.bar-background-status-success {\n background-color: var(--progress-bar--success-fill-background-color);\n }\n\n &.bar-background-status-warning {\n background-color: var(--progress-bar--warning-fill-background-color);\n }\n\n &.bar-background-status-indeterminate {\n background-color: var(\n --progress-bar--indeterminate-fill-background-color\n );\n }\n\n &.loading {\n &::after {\n position: absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n
|
|
1
|
+
{"version":3,"file":"ComplexityIndicator.module.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.module.scss"],"sourcesContent":["@use \"complexity\";\n\n.complexityIndicator {\n width: 100%;\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n height: var(--progress-bar--height--s);\n overflow: hidden;\n border-top: var(--form-control--border-width) solid\n var(--progress-bar--border-color);\n\n @include complexity.animation-in(\"height\");\n @include complexity.animation-in(\"border-top-color\");\n\n &.hide {\n transition-duration: #{complexity.$animation-out-duration};\n height: 0;\n border-top-color: transparent;\n overflow: hidden;\n }\n\n & .bar {\n position: relative;\n display: block;\n height: 100%;\n width: calc(var(--complexity-indicator--percentage) * 1%);\n border-radius: calc(var(--form-control--corner-radius) - 1px);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n transition:\n width #{complexity.$animation-width-responsiveness},\n background-color #{complexity.$animation-background-color-change};\n\n &.running {\n border-end-end-radius: 0;\n }\n\n &.bar-background-status-danger {\n background-color: var(--progress-bar--danger-fill-background-color);\n }\n\n &.bar-background-status-success {\n background-color: var(--progress-bar--success-fill-background-color);\n }\n\n &.bar-background-status-warning {\n background-color: var(--progress-bar--warning-fill-background-color);\n }\n\n &.bar-background-status-indeterminate {\n background-color: var(\n --progress-bar--indeterminate-fill-background-color\n );\n }\n\n &.loading {\n &::after {\n position: absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n transparent 0,\n var(--password-creation-field--complexity-shimmer-color) 20%,\n transparent 40%\n );\n animation: shimmer\n var(--password-creation-field--complexity-shimmer-duration) infinite;\n content: \"\";\n }\n }\n }\n}\n\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.module.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".tooltip {\n border-radius: var(--tooltip--corner-radius);\n background-color: var(--tooltip--background-color);\n color: var(--tooltip--color);\n font-size: var(--tooltip--font-size);\n padding-block: var(--tooltip--padding-y);\n padding-inline: var(--tooltip--padding-x);\n max-width: var(--tooltip--max-width);\n transform: translate3d(0, 0, 0);\n box-shadow: var(--tooltip--box-shadow);\n\n --translate-origin-length: var(--tooltip--tooltip-to-trigger-spacing) / 2;\n\n /**\n * React Aria sets `data-placement` once it has computed a position, and\n * renders the overlay at `top: 0; left: 0` of the viewport until then. It\n * skips computing one when the tooltip mounts for its exit animation alone –\n * swapping quickly between neighbouring triggers does that – and never\n * retries afterwards, so such a tooltip stays parked in the corner for its\n * whole lifetime. Keep it out of sight instead. `visibility` rather than\n * `display`, so the overlay stays measurable for the positioning pass.\n */\n &:not([data-placement]) {\n visibility: hidden;\n }\n\n /* Placement */\n &[data-placement=\"top\"] {\n margin-bottom: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateY(var(--translate-origin-length));\n }\n\n &[data-placement=\"bottom\"] {\n margin-top: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateY(var(--translate-origin-length) * -1);\n\n .tip .tipIcon {\n transform: rotate(180deg);\n }\n }\n\n &[data-placement=\"right\"] {\n margin-inline-start: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateX(var(--translate-origin-length) * -1);\n\n .tip .tipIcon {\n transform: rotate(90deg);\n }\n }\n\n &[data-placement=\"left\"] {\n margin-inline-end: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateX(var(--translate-origin-length));\n\n .tip .tipIcon {\n transform: rotate(-90deg);\n }\n }\n\n /* Animation */\n\n &[data-entering] {\n animation: slide
|
|
1
|
+
{"version":3,"file":"Tooltip.module.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".tooltip {\n border-radius: var(--tooltip--corner-radius);\n background-color: var(--tooltip--background-color);\n color: var(--tooltip--color);\n font-size: var(--tooltip--font-size);\n padding-block: var(--tooltip--padding-y);\n padding-inline: var(--tooltip--padding-x);\n max-width: var(--tooltip--max-width);\n transform: translate3d(0, 0, 0);\n box-shadow: var(--tooltip--box-shadow);\n\n --translate-origin-length: var(--tooltip--tooltip-to-trigger-spacing) / 2;\n\n /**\n * React Aria sets `data-placement` once it has computed a position, and\n * renders the overlay at `top: 0; left: 0` of the viewport until then. It\n * skips computing one when the tooltip mounts for its exit animation alone –\n * swapping quickly between neighbouring triggers does that – and never\n * retries afterwards, so such a tooltip stays parked in the corner for its\n * whole lifetime. Keep it out of sight instead. `visibility` rather than\n * `display`, so the overlay stays measurable for the positioning pass.\n */\n &:not([data-placement]) {\n visibility: hidden;\n }\n\n /* Placement */\n &[data-placement=\"top\"] {\n margin-bottom: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateY(var(--translate-origin-length));\n }\n\n &[data-placement=\"bottom\"] {\n margin-top: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateY(var(--translate-origin-length) * -1);\n\n .tip .tipIcon {\n transform: rotate(180deg);\n }\n }\n\n &[data-placement=\"right\"] {\n margin-inline-start: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateX(var(--translate-origin-length) * -1);\n\n .tip .tipIcon {\n transform: rotate(90deg);\n }\n }\n\n &[data-placement=\"left\"] {\n margin-inline-end: var(--tooltip--tooltip-to-trigger-spacing);\n\n --translate-origin: translateX(var(--translate-origin-length));\n\n .tip .tipIcon {\n transform: rotate(-90deg);\n }\n }\n\n /* Animation */\n\n &[data-entering] {\n animation: slide var(--transition--duration--fast);\n }\n\n &[data-exiting] {\n animation: slide var(--transition--duration--fast) reverse ease-in;\n }\n\n .tip {\n width: var(--tooltip--tip-size);\n height: var(--tooltip--tip-size);\n\n .tipIcon {\n display: block;\n fill: var(--tooltip--background-color);\n }\n }\n}\n\n@keyframes slide {\n from {\n transform: var(--translate-origin);\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"],"mappings":""}
|
|
@@ -1321,6 +1321,10 @@ var area = {
|
|
|
1321
1321
|
"border-color": {
|
|
1322
1322
|
"value": "#1B1F24",
|
|
1323
1323
|
"path": ["area", "border-color"]
|
|
1324
|
+
},
|
|
1325
|
+
"dot-background-color": {
|
|
1326
|
+
"value": "rgb(0 0 0 / 100%)",
|
|
1327
|
+
"path": ["area", "dot-background-color"]
|
|
1324
1328
|
}
|
|
1325
1329
|
};
|
|
1326
1330
|
var axis = {
|
|
@@ -1539,8 +1543,16 @@ var calendar = {
|
|
|
1539
1543
|
"header-cell-font-weight": {
|
|
1540
1544
|
"value": "bold",
|
|
1541
1545
|
"path": ["calendar", "header-cell-font-weight"]
|
|
1546
|
+
},
|
|
1547
|
+
"preset-menu-max-width": {
|
|
1548
|
+
"value": "200px",
|
|
1549
|
+
"path": ["calendar", "preset-menu-max-width"]
|
|
1542
1550
|
}
|
|
1543
1551
|
};
|
|
1552
|
+
var options = { "max-height": {
|
|
1553
|
+
"value": "324px",
|
|
1554
|
+
"path": ["options", "max-height"]
|
|
1555
|
+
} };
|
|
1544
1556
|
var rating = {
|
|
1545
1557
|
"spacing": {
|
|
1546
1558
|
"s": {
|
|
@@ -2612,6 +2624,20 @@ var notification = {
|
|
|
2612
2624
|
}
|
|
2613
2625
|
}
|
|
2614
2626
|
};
|
|
2627
|
+
var skeleton = {
|
|
2628
|
+
"background-color": {
|
|
2629
|
+
"value": "rgba(183, 201, 219, 0.5)",
|
|
2630
|
+
"path": ["skeleton", "background-color"]
|
|
2631
|
+
},
|
|
2632
|
+
"shimmer-color": {
|
|
2633
|
+
"value": "rgba(255, 255, 255, 0.4)",
|
|
2634
|
+
"path": ["skeleton", "shimmer-color"]
|
|
2635
|
+
},
|
|
2636
|
+
"shimmer-duration": {
|
|
2637
|
+
"value": "3000ms",
|
|
2638
|
+
"path": ["skeleton", "shimmer-duration"]
|
|
2639
|
+
}
|
|
2640
|
+
};
|
|
2615
2641
|
var accordion = {
|
|
2616
2642
|
"spacing": {
|
|
2617
2643
|
"value": "0.5rem",
|
|
@@ -2726,6 +2752,14 @@ var list = {
|
|
|
2726
2752
|
"filter-to-search-spacing": {
|
|
2727
2753
|
"value": "32px",
|
|
2728
2754
|
"path": ["list", "filter-to-search-spacing"]
|
|
2755
|
+
},
|
|
2756
|
+
"search-field-max-width": {
|
|
2757
|
+
"value": "500px",
|
|
2758
|
+
"path": ["list", "search-field-max-width"]
|
|
2759
|
+
},
|
|
2760
|
+
"search-field-input-width": {
|
|
2761
|
+
"value": "200px",
|
|
2762
|
+
"path": ["list", "search-field-input-width"]
|
|
2729
2763
|
}
|
|
2730
2764
|
};
|
|
2731
2765
|
var section = {
|
|
@@ -4230,6 +4264,10 @@ var all_dark_default = {
|
|
|
4230
4264
|
"value": "1rem",
|
|
4231
4265
|
"path": ["illustrated-message", "spacing"]
|
|
4232
4266
|
},
|
|
4267
|
+
"progress-bar-max-width": {
|
|
4268
|
+
"value": "400px",
|
|
4269
|
+
"path": ["illustrated-message", "progress-bar-max-width"]
|
|
4270
|
+
},
|
|
4233
4271
|
"content-color": {
|
|
4234
4272
|
"value": "#FFFFFF",
|
|
4235
4273
|
"path": ["illustrated-message", "content-color"]
|
|
@@ -4368,10 +4406,16 @@ var all_dark_default = {
|
|
|
4368
4406
|
"path": ["cartesian-grid", "stroke-width"]
|
|
4369
4407
|
}
|
|
4370
4408
|
},
|
|
4371
|
-
"chart-tooltip": {
|
|
4372
|
-
"
|
|
4373
|
-
|
|
4374
|
-
|
|
4409
|
+
"chart-tooltip": {
|
|
4410
|
+
"spacing": {
|
|
4411
|
+
"value": "8px",
|
|
4412
|
+
"path": ["chart-tooltip", "spacing"]
|
|
4413
|
+
},
|
|
4414
|
+
"progress-bar-min-width": {
|
|
4415
|
+
"value": "250px",
|
|
4416
|
+
"path": ["chart-tooltip", "progress-bar-min-width"]
|
|
4417
|
+
}
|
|
4418
|
+
},
|
|
4375
4419
|
"donut-chart": {
|
|
4376
4420
|
"transition-duration": {
|
|
4377
4421
|
"value": "800ms",
|
|
@@ -4458,6 +4502,16 @@ var all_dark_default = {
|
|
|
4458
4502
|
blur,
|
|
4459
4503
|
transition,
|
|
4460
4504
|
focus,
|
|
4505
|
+
"font-family": {
|
|
4506
|
+
"default": {
|
|
4507
|
+
"value": "Inter, sans-serif",
|
|
4508
|
+
"path": ["font-family", "default"]
|
|
4509
|
+
},
|
|
4510
|
+
"code": {
|
|
4511
|
+
"value": "FiraCode, monospace",
|
|
4512
|
+
"path": ["font-family", "code"]
|
|
4513
|
+
}
|
|
4514
|
+
},
|
|
4461
4515
|
"font-weight": {
|
|
4462
4516
|
"normal": {
|
|
4463
4517
|
"value": "normal",
|
|
@@ -4744,6 +4798,7 @@ var all_dark_default = {
|
|
|
4744
4798
|
}
|
|
4745
4799
|
}
|
|
4746
4800
|
},
|
|
4801
|
+
options,
|
|
4747
4802
|
rating,
|
|
4748
4803
|
"segmented-button": { "text-to-text-spacing": {
|
|
4749
4804
|
"value": "0.25rem",
|
|
@@ -5333,10 +5388,20 @@ var all_dark_default = {
|
|
|
5333
5388
|
}
|
|
5334
5389
|
},
|
|
5335
5390
|
notification,
|
|
5336
|
-
"password-creation-field": {
|
|
5337
|
-
"
|
|
5338
|
-
|
|
5339
|
-
|
|
5391
|
+
"password-creation-field": {
|
|
5392
|
+
"rule-to-rule-spacing": {
|
|
5393
|
+
"value": "8px",
|
|
5394
|
+
"path": ["password-creation-field", "rule-to-rule-spacing"]
|
|
5395
|
+
},
|
|
5396
|
+
"complexity-shimmer-color": {
|
|
5397
|
+
"value": "rgba(255, 255, 255, 0.8)",
|
|
5398
|
+
"path": ["password-creation-field", "complexity-shimmer-color"]
|
|
5399
|
+
},
|
|
5400
|
+
"complexity-shimmer-duration": {
|
|
5401
|
+
"value": "1000ms",
|
|
5402
|
+
"path": ["password-creation-field", "complexity-shimmer-duration"]
|
|
5403
|
+
}
|
|
5404
|
+
},
|
|
5340
5405
|
"progress-bar": {
|
|
5341
5406
|
"transition-duration": {
|
|
5342
5407
|
"value": "800ms",
|
|
@@ -5429,6 +5494,7 @@ var all_dark_default = {
|
|
|
5429
5494
|
"path": ["progress-bar", "indeterminate-fill-background-color"]
|
|
5430
5495
|
}
|
|
5431
5496
|
},
|
|
5497
|
+
skeleton,
|
|
5432
5498
|
"accent-box": {
|
|
5433
5499
|
"background-color-neutral": {
|
|
5434
5500
|
"value": "#3A434E",
|
|
@@ -5841,6 +5907,6 @@ var all_dark_default = {
|
|
|
5841
5907
|
}
|
|
5842
5908
|
}
|
|
5843
5909
|
};
|
|
5844
|
-
export { accordion, alert, area, avatar, axis, badge, bar, blur, breadcrumb, button, calendar, chat, choice, color, combine, danger, dark, decorative, all_dark_default as default, focus, heading, icon, image, info, initials, kbd, label, legend, light, line, link, list, markdown, menu, message, modal, neutral, notification, overlay, popover, primary, rating, scrollbar, section, separator, shadow, slider, success, table, tabs, text, texture, tooltip, transition, unavailable, warning };
|
|
5910
|
+
export { accordion, alert, area, avatar, axis, badge, bar, blur, breadcrumb, button, calendar, chat, choice, color, combine, danger, dark, decorative, all_dark_default as default, focus, heading, icon, image, info, initials, kbd, label, legend, light, line, link, list, markdown, menu, message, modal, neutral, notification, options, overlay, popover, primary, rating, scrollbar, section, separator, shadow, skeleton, slider, success, table, tabs, text, texture, tooltip, transition, unavailable, warning };
|
|
5845
5911
|
|
|
5846
5912
|
//# sourceMappingURL=all-dark.mjs.map
|