@mittwald/flow-react-components 1.5.53 → 1.5.54
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/CodeEditor/CodeEditor.mjs +6 -4
- package/dist/js/packages/components/src/components/CodeEditor/CodeEditor.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/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":""}
|
|
@@ -22,7 +22,7 @@ import CodeMirror, { EditorView } from "@uiw/react-codemirror";
|
|
|
22
22
|
* @flowStatus new
|
|
23
23
|
*/
|
|
24
24
|
var CodeEditor = flowComponent("CodeEditor", (props) => {
|
|
25
|
-
const { ref, children, className, language, extensions, isReadOnly, isDisabled, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, onChange, onStatistics, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, "");
|
|
25
|
+
const { ref, children, className, language, extensions, isReadOnly, isDisabled, isInvalid, isRequired, validationBehavior: _ignoredValidationBehavior, value, onChange, onStatistics, showLineNumbers = true, showCodeFolding = true, showCodeIndentationMakers = true, showLinterMarkers = true, showActiveLineMarker = true, copyable = true, editable = true, height, minHeight, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, "");
|
|
26
26
|
const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "CodeEditor");
|
|
27
27
|
const rootClassName = clsx(wrapperProps.className, CodeEditor_module_default.codeEditor, className);
|
|
28
28
|
const labelId = useId();
|
|
@@ -116,6 +116,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
|
|
|
116
116
|
});
|
|
117
117
|
const stableOnChange = useCallback((value) => handlersRef.current.onChange(value), []);
|
|
118
118
|
const stableOnStatistics = useCallback((statistics) => handlersRef.current.onStatistics?.(statistics), []);
|
|
119
|
+
const isEditable = editable && !isDisabled;
|
|
119
120
|
const highlightActiveLine = showActiveLineMarker && !isDisabled;
|
|
120
121
|
const basicSetup = useMemo(() => ({
|
|
121
122
|
highlightActiveLine,
|
|
@@ -123,8 +124,9 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
|
|
|
123
124
|
autocompletion: false,
|
|
124
125
|
lineNumbers: false,
|
|
125
126
|
foldGutter: false,
|
|
126
|
-
highlightSelectionMatches: false
|
|
127
|
-
|
|
127
|
+
highlightSelectionMatches: false,
|
|
128
|
+
bracketMatching: isEditable
|
|
129
|
+
}), [highlightActiveLine, isEditable]);
|
|
128
130
|
const localRef = useObjectRef(ref);
|
|
129
131
|
useMakeFocusable(localRef);
|
|
130
132
|
const isSkeleton = useSkeletonMode();
|
|
@@ -146,7 +148,7 @@ var CodeEditor = flowComponent("CodeEditor", (props) => {
|
|
|
146
148
|
"data-invalid": isInvalid || void 0,
|
|
147
149
|
"data-disabled": isDisabled || void 0,
|
|
148
150
|
readOnly: isReadOnly || isDisabled,
|
|
149
|
-
editable:
|
|
151
|
+
editable: isEditable,
|
|
150
152
|
className: clsx(CodeEditor_module_default.codeMirror, isReadOnly && CodeEditor_module_default.readonly),
|
|
151
153
|
ref: (codeMirrorRef) => {
|
|
152
154
|
if (codeMirrorRef?.editor) localRef.current = codeMirrorRef.editor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps, Statistics } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport {\n useCallback,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n type CodeEditorSetup,\n useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeEditorProps\n extends\n Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n CodeEditorSetup,\n FlowComponentProps {\n /** The initial code of an uncontrolled editor. */\n defaultValue?: string;\n /**\n * Whether the code can be read but not edited.\n *\n * @default false\n */\n isReadOnly?: boolean;\n /**\n * Whether the editor is disabled. The code can neither be edited, focused nor\n * copied.\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether the editor is displayed as invalid.\n *\n * @default false\n */\n isInvalid?: boolean;\n /** The elements class name. */\n className?: string;\n /**\n * The language the code is highlighted as. A language the editor does not\n * know is shown as plain text.\n */\n language?: CodeEditorLanguage | (string & {});\n /**\n * Whether a button to copy the code to the clipboard is shown.\n *\n * @default true\n */\n copyable?: boolean;\n /**\n * Whether the field must be filled in. Only marks the editor as required for\n * assistive technology — the editor does not validate itself.\n *\n * @default false\n */\n isRequired?: boolean;\n /**\n * @internal Set by `<Field />` on every form field. The editor has no\n * react-aria validation to forward it to and drops it.\n */\n validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n const {\n ref,\n children,\n className,\n language,\n extensions,\n isReadOnly,\n isDisabled,\n isInvalid,\n isRequired,\n validationBehavior: _ignoredValidationBehavior,\n value,\n onChange,\n onStatistics,\n showLineNumbers = true,\n showCodeFolding = true,\n showCodeIndentationMakers = true,\n showLinterMarkers = true,\n showActiveLineMarker = true,\n copyable = true,\n height,\n minHeight,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"CodeEditor\");\n\n const rootClassName = clsx(\n wrapperProps.className,\n styles.codeEditor,\n className,\n );\n\n const labelId = useId();\n const descriptionId = useId();\n\n /**\n * Both are optional. Their refs tell whether they are rendered, so the editor\n * never references an element that does not exist – a dangling id fails HTML\n * validators and a11y checks. The callbacks are stable: a new one per render\n * would detach and re-attach on every render.\n */\n const [hasLabel, setHasLabel] = useState(false);\n const [hasDescription, setHasDescription] = useState(false);\n const labelRef = useCallback((element: Element | null) => {\n setHasLabel(!!element);\n }, []);\n const descriptionRef = useCallback((element: Element | null) => {\n setHasDescription(!!element);\n }, []);\n\n /**\n * The label and the field description are declared as children of the code\n * editor, but must be rendered outside of the editor itself. They are\n * tunneled out of the editor – just like the field error. Their ids are the\n * ones the editor references.\n */\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n id: labelId,\n ref: labelRef,\n tunnel: { id: \"label\", component: \"CodeEditor\" },\n },\n FieldDescription: {\n ...fieldPropsContext.FieldDescription,\n id: descriptionId,\n ref: descriptionRef,\n tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n },\n };\n\n const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n showLineNumbers: showLineNumbers,\n showCodeIndentationMakers: showCodeIndentationMakers,\n showCodeFolding: showCodeFolding,\n showLinterMarkers: showLinterMarkers,\n });\n\n /**\n * The editable element of CodeMirror is the `.cm-content` element – not the\n * root element the props are applied to. Its ARIA attributes are set through\n * the content attributes facet.\n *\n * Without a label, an `aria-label` names the editor instead.\n */\n const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n const describedBy = joinIds(\n hasDescription && descriptionId,\n controlProps[\"aria-describedby\"],\n );\n\n /**\n * CodeMirror reconfigures the editor whenever `extensions`, `basicSetup` or\n * `onChange` is a new object. All three are stable, so a render with\n * unchanged props leaves the editor as it is.\n */\n const allExtensions = useMemo(\n () => [\n ...enabledExtensions,\n EditorView.contentAttributes.of({\n ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n }),\n ],\n [\n enabledExtensions,\n labelledBy,\n ariaLabel,\n describedBy,\n isRequired,\n isInvalid,\n isDisabled,\n ],\n );\n\n /*\n * A new `onChange` on every render would reconfigure the editor as well.\n * CodeMirror's update listener captures `onStatistics` along with it, so both\n * call the latest handler through a ref.\n */\n const handlersRef = useRef({ onChange, onStatistics });\n useLayoutEffect(() => {\n handlersRef.current = { onChange, onStatistics };\n });\n const stableOnChange = useCallback(\n (value: string) => handlersRef.current.onChange(value),\n [],\n );\n const stableOnStatistics = useCallback(\n (statistics: Statistics) => handlersRef.current.onStatistics?.(statistics),\n [],\n );\n\n const highlightActiveLine = showActiveLineMarker && !isDisabled;\n const basicSetup = useMemo(\n () => ({\n highlightActiveLine,\n highlightActiveLineGutter: highlightActiveLine,\n autocompletion: false,\n lineNumbers: false,\n foldGutter: false,\n highlightSelectionMatches: false,\n }),\n [highlightActiveLine],\n );\n\n const localRef = useObjectRef(ref);\n\n useMakeFocusable(localRef);\n\n const isSkeleton = useSkeletonMode();\n\n /* No CodeMirror: one surface, as high as the code in the editor's line\n height. The children still render, so a label or a field description\n tunnels out and follows its own skeleton rule. */\n const skeleton = (\n <div\n className={clsx(\n styles.codeMirror,\n isReadOnly && styles.readonly,\n styles.skeleton,\n )}\n >\n <div\n className={styles.skeletonLines}\n style={{ height: height ?? minHeight }}\n >\n {(value ?? \"\").split(\"\\n\").map((line, index) => (\n <div key={index}>{line || \" \"}</div>\n ))}\n </div>\n {children}\n </div>\n );\n\n const editor = (\n <CodeMirror\n {...rest}\n value={value}\n onChange={stableOnChange}\n onStatistics={stableOnStatistics}\n basicSetup={basicSetup}\n theme={defaultLightTheme}\n data-invalid={isInvalid || undefined}\n data-disabled={isDisabled || undefined}\n readOnly={isReadOnly || isDisabled}\n editable={!isDisabled}\n className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n ref={(codeMirrorRef) => {\n if (codeMirrorRef?.editor) {\n localRef.current = codeMirrorRef.editor;\n }\n }}\n extensions={allExtensions}\n height={height ?? minHeight}\n >\n {copyable && (\n <CopyButton\n className={styles.copyButton}\n size=\"s\"\n variant=\"soft\"\n text={value}\n isDisabled={isDisabled}\n />\n )}\n {children}\n </CodeMirror>\n );\n\n return (\n <div\n className={rootClassName}\n data-disabled={isDisabled || undefined}\n inert={isSkeleton || undefined}\n >\n <PropsContextProvider props={propsContext}>\n <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n <FieldErrorCaptureContext>\n {isSkeleton ? skeleton : editor}\n </FieldErrorCaptureContext>\n <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n <FieldErrorView />\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default CodeEditor;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CodeEditor.mjs","names":["styles"],"sources":["../../../../../../../src/components/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import type { ReactCodeMirrorProps, Statistics } from \"@uiw/react-codemirror\";\nimport CodeMirror, { EditorView } from \"@uiw/react-codemirror\";\nimport {\n useCallback,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./CodeEditor.module.scss\";\nimport { type CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"react-aria\";\nimport { defaultLightTheme } from \"@/components/CodeEditor/themes/defaultEditorTheme\";\nimport {\n type CodeEditorSetup,\n useCodeEditorExtensions,\n} from \"@/components/CodeEditor/hooks/useCodeEditorExtensions\";\nimport { CopyButton } from \"@/components/CopyButton\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CodeEditorProps\n extends\n Omit<ReactCodeMirrorProps, \"theme\" | \"lang\" | \"basicSetup\" | \"readOnly\">,\n CodeEditorSetup,\n FlowComponentProps {\n /** The initial code of an uncontrolled editor. */\n defaultValue?: string;\n /**\n * Whether the code can be read but not edited.\n *\n * @default false\n */\n isReadOnly?: boolean;\n /**\n * Whether the editor is disabled. The code can neither be edited, focused nor\n * copied.\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Whether the editor is displayed as invalid.\n *\n * @default false\n */\n isInvalid?: boolean;\n /** The elements class name. */\n className?: string;\n /**\n * The language the code is highlighted as. A language the editor does not\n * know is shown as plain text.\n */\n language?: CodeEditorLanguage | (string & {});\n /**\n * Whether a button to copy the code to the clipboard is shown.\n *\n * @default true\n */\n copyable?: boolean;\n /**\n * Whether the field must be filled in. Only marks the editor as required for\n * assistive technology — the editor does not validate itself.\n *\n * @default false\n */\n isRequired?: boolean;\n /**\n * @internal Set by `<Field />` on every form field. The editor has no\n * react-aria validation to forward it to and drops it.\n */\n validationBehavior?: unknown;\n}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const CodeEditor = flowComponent(\"CodeEditor\", (props) => {\n const {\n ref,\n children,\n className,\n language,\n extensions,\n isReadOnly,\n isDisabled,\n isInvalid,\n isRequired,\n validationBehavior: _ignoredValidationBehavior,\n value,\n onChange,\n onStatistics,\n showLineNumbers = true,\n showCodeFolding = true,\n showCodeIndentationMakers = true,\n showLinterMarkers = true,\n showActiveLineMarker = true,\n copyable = true,\n editable = true,\n height,\n minHeight,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n ...rest\n } = useControlledHostValueProps(props, \"\");\n\n const {\n FieldErrorView,\n FieldErrorCaptureContext,\n wrapperProps,\n controlProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"CodeEditor\");\n\n const rootClassName = clsx(\n wrapperProps.className,\n styles.codeEditor,\n className,\n );\n\n const labelId = useId();\n const descriptionId = useId();\n\n /**\n * Both are optional. Their refs tell whether they are rendered, so the editor\n * never references an element that does not exist – a dangling id fails HTML\n * validators and a11y checks. The callbacks are stable: a new one per render\n * would detach and re-attach on every render.\n */\n const [hasLabel, setHasLabel] = useState(false);\n const [hasDescription, setHasDescription] = useState(false);\n const labelRef = useCallback((element: Element | null) => {\n setHasLabel(!!element);\n }, []);\n const descriptionRef = useCallback((element: Element | null) => {\n setHasDescription(!!element);\n }, []);\n\n /**\n * The label and the field description are declared as children of the code\n * editor, but must be rendered outside of the editor itself. They are\n * tunneled out of the editor – just like the field error. Their ids are the\n * ones the editor references.\n */\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Label: {\n ...fieldPropsContext.Label,\n id: labelId,\n ref: labelRef,\n tunnel: { id: \"label\", component: \"CodeEditor\" },\n },\n FieldDescription: {\n ...fieldPropsContext.FieldDescription,\n id: descriptionId,\n ref: descriptionRef,\n tunnel: { id: \"fieldDescription\", component: \"CodeEditor\" },\n },\n };\n\n const enabledExtensions = useCodeEditorExtensions(language, extensions, {\n showLineNumbers: showLineNumbers,\n showCodeIndentationMakers: showCodeIndentationMakers,\n showCodeFolding: showCodeFolding,\n showLinterMarkers: showLinterMarkers,\n });\n\n /**\n * The editable element of CodeMirror is the `.cm-content` element – not the\n * root element the props are applied to. Its ARIA attributes are set through\n * the content attributes facet.\n *\n * Without a label, an `aria-label` names the editor instead.\n */\n const labelledBy = joinIds(ariaLabelledBy, hasLabel && labelId);\n const describedBy = joinIds(\n hasDescription && descriptionId,\n controlProps[\"aria-describedby\"],\n );\n\n /**\n * CodeMirror reconfigures the editor whenever `extensions`, `basicSetup` or\n * `onChange` is a new object. All three are stable, so a render with\n * unchanged props leaves the editor as it is.\n */\n const allExtensions = useMemo(\n () => [\n ...enabledExtensions,\n EditorView.contentAttributes.of({\n ...(labelledBy ? { \"aria-labelledby\": labelledBy } : {}),\n ...(ariaLabel ? { \"aria-label\": ariaLabel } : {}),\n ...(describedBy ? { \"aria-describedby\": describedBy } : {}),\n ...(isRequired ? { \"aria-required\": \"true\" } : {}),\n ...(isInvalid ? { \"aria-invalid\": \"true\" } : {}),\n ...(isDisabled ? { \"aria-disabled\": \"true\" } : {}),\n }),\n ],\n [\n enabledExtensions,\n labelledBy,\n ariaLabel,\n describedBy,\n isRequired,\n isInvalid,\n isDisabled,\n ],\n );\n\n /*\n * A new `onChange` on every render would reconfigure the editor as well.\n * CodeMirror's update listener captures `onStatistics` along with it, so both\n * call the latest handler through a ref.\n */\n const handlersRef = useRef({ onChange, onStatistics });\n useLayoutEffect(() => {\n handlersRef.current = { onChange, onStatistics };\n });\n const stableOnChange = useCallback(\n (value: string) => handlersRef.current.onChange(value),\n [],\n );\n const stableOnStatistics = useCallback(\n (statistics: Statistics) => handlersRef.current.onStatistics?.(statistics),\n [],\n );\n\n const isEditable = editable && !isDisabled;\n const highlightActiveLine = showActiveLineMarker && !isDisabled;\n const basicSetup = useMemo(\n () => ({\n highlightActiveLine,\n highlightActiveLineGutter: highlightActiveLine,\n autocompletion: false,\n lineNumbers: false,\n foldGutter: false,\n highlightSelectionMatches: false,\n bracketMatching: isEditable,\n }),\n [highlightActiveLine, isEditable],\n );\n\n const localRef = useObjectRef(ref);\n\n useMakeFocusable(localRef);\n\n const isSkeleton = useSkeletonMode();\n\n /* No CodeMirror: one surface, as high as the code in the editor's line\n height. The children still render, so a label or a field description\n tunnels out and follows its own skeleton rule. */\n const skeleton = (\n <div\n className={clsx(\n styles.codeMirror,\n isReadOnly && styles.readonly,\n styles.skeleton,\n )}\n >\n <div\n className={styles.skeletonLines}\n style={{ height: height ?? minHeight }}\n >\n {(value ?? \"\").split(\"\\n\").map((line, index) => (\n <div key={index}>{line || \" \"}</div>\n ))}\n </div>\n {children}\n </div>\n );\n\n const editor = (\n <CodeMirror\n {...rest}\n value={value}\n onChange={stableOnChange}\n onStatistics={stableOnStatistics}\n basicSetup={basicSetup}\n theme={defaultLightTheme}\n data-invalid={isInvalid || undefined}\n data-disabled={isDisabled || undefined}\n readOnly={isReadOnly || isDisabled}\n editable={isEditable}\n className={clsx(styles.codeMirror, isReadOnly && styles.readonly)}\n ref={(codeMirrorRef) => {\n if (codeMirrorRef?.editor) {\n localRef.current = codeMirrorRef.editor;\n }\n }}\n extensions={allExtensions}\n height={height ?? minHeight}\n >\n {copyable && (\n <CopyButton\n className={styles.copyButton}\n size=\"s\"\n variant=\"soft\"\n text={value}\n isDisabled={isDisabled}\n />\n )}\n {children}\n </CodeMirror>\n );\n\n return (\n <div\n className={rootClassName}\n data-disabled={isDisabled || undefined}\n inert={isSkeleton || undefined}\n >\n <PropsContextProvider props={propsContext}>\n <UiComponentTunnelExit id=\"label\" component=\"CodeEditor\" />\n <FieldErrorCaptureContext>\n {isSkeleton ? skeleton : editor}\n </FieldErrorCaptureContext>\n <UiComponentTunnelExit id=\"fieldDescription\" component=\"CodeEditor\" />\n <FieldErrorView />\n </PropsContextProvider>\n </div>\n );\n});\n\nexport default CodeEditor;\n"],"mappings":"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"}
|
|
@@ -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":""}
|
|
@@ -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
|