@moneyforward/mfui-components 3.26.0 → 3.27.0

package/dist/styled-system/tokens/index.js

@@ -5744,15 +5744,15 @@ const tokens = {
         "variable": "var(--mfui-colors-mfui\\.color\\.base\\.content\\.pressed)"
     },
     "colors.mfui.color.base.sub-content.none": {
-        "value": "#747474ff",
+        "value": "#5e5e5eff",
         "variable": "var(--mfui-colors-mfui\\.color\\.base\\.sub-content\\.none)"
     },
     "colors.mfui.color.base.sub-content.hovered": {
-        "value": "#595959ff",
+        "value": "#474747ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.base\\.sub-content\\.hovered)"
     },
     "colors.mfui.color.base.sub-content.pressed": {
-        "value": "#424242ff",
+        "value": "#303030ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.base\\.sub-content\\.pressed)"
     },
     "colors.mfui.color.base.inverted-content.none": {
@@ -5940,15 +5940,15 @@ const tokens = {
         "variable": "var(--mfui-colors-mfui\\.color\\.disabled\\.background)"
     },
     "colors.mfui.color.link.content.none": {
-        "value": "#2e72d8ff",
+        "value": "#165cb7ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.link\\.content\\.none)"
     },
     "colors.mfui.color.link.content.hovered": {
-        "value": "#0d57b1ff",
+        "value": "#004396ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.link\\.content\\.hovered)"
     },
     "colors.mfui.color.link.content.pressed": {
-        "value": "#003e90ff",
+        "value": "#072977ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.link\\.content\\.pressed)"
     },
     "colors.mfui.color.neutral.content.none": {

package/dist/styles.css

@@ -156,9 +156,9 @@
                                   --mfui-colors-mfui\.color\.base\.content\.none: #262626ff;
   --mfui-colors-mfui\.color\.base\.content\.hovered: #111111ff;
   --mfui-colors-mfui\.color\.base\.content\.pressed: #000000ff;
-  --mfui-colors-mfui\.color\.base\.sub-content\.none: #747474ff;
-  --mfui-colors-mfui\.color\.base\.sub-content\.hovered: #595959ff;
-  --mfui-colors-mfui\.color\.base\.sub-content\.pressed: #424242ff;
+  --mfui-colors-mfui\.color\.base\.sub-content\.none: #5e5e5eff;
+  --mfui-colors-mfui\.color\.base\.sub-content\.hovered: #474747ff;
+  --mfui-colors-mfui\.color\.base\.sub-content\.pressed: #303030ff;
   --mfui-colors-mfui\.color\.base\.inverted-content\.none: #ffffffff;
   --mfui-colors-mfui\.color\.base\.inverted-content\.hovered: #f9f9f9ff;
   --mfui-colors-mfui\.color\.base\.inverted-content\.pressed: #e8e8e8ff;
@@ -179,9 +179,9 @@
   --mfui-colors-mfui\.color\.disabled\.content: #d1d1d1ff;
   --mfui-colors-mfui\.color\.disabled\.border: #ccccccff;
   --mfui-colors-mfui\.color\.disabled\.background: #e8e8e8ff;
-  --mfui-colors-mfui\.color\.link\.content\.none: #2e72d8ff;
-  --mfui-colors-mfui\.color\.link\.content\.hovered: #0d57b1ff;
-  --mfui-colors-mfui\.color\.link\.content\.pressed: #003e90ff;
+  --mfui-colors-mfui\.color\.link\.content\.none: #165cb7ff;
+  --mfui-colors-mfui\.color\.link\.content\.hovered: #004396ff;
+  --mfui-colors-mfui\.color\.link\.content\.pressed: #072977ff;
   --mfui-colors-mfui\.color\.neutral\.content\.none: #747474ff;
   --mfui-colors-mfui\.color\.neutral\.content\.hovered: #595959ff;
   --mfui-colors-mfui\.color\.neutral\.content\.pressed: #424242ff;
@@ -5905,6 +5905,346 @@ li:last-child > .mfui-cXGJls {
   height: var(--mfui-sizes-mfui\.size\.dimension\.control-container\.height\.comfort);
 }
 
+.mfui-doETf {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.none);
+  width: 200px;
+  height: 100%;
+}
+
+.mfui-doETf[data-mfui-dragging] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mfui-eiwAgy {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
+  padding-block: var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mfui-dXVlzk,.mfui-iaZfLW {
+  display: inline-flex;
+  align-items: center;
+}
+
+.mfui-eCoQhk {
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.mfui-jfalmU {
+  flex-shrink: 0;
+}
+
+.mfui-cUHRzB {
+  flex: 1 1 0%;
+  min-height: 0;
+  padding-top: 6px;
+}
+
+.mfui-iKnjCN {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.mfui-fBhmQk {
+  padding-inline: 14px;
+  padding-block: 3px;
+}
+
+.mfui-fBhmQk > .mfui-Tooltip__root {
+  display: block;
+}
+
+.mfui-jQneDG {
+  margin-inline: 14px;
+  margin-block: 3px;
+  border-top: 1px solid;
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
+.mfui-hoqJKf {
+  margin: 0;
+  padding: 0;
+  border: none;
+  font: inherit;
+  text-decoration: none;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  appearance: none;
+  -webkit-appearance: none;
+  text-align: start;
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.none);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  cursor: pointer;
+  width: 100%;
+}
+
+.mfui-hoqJKf[aria-current=page] {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.background\.none);
+}
+
+.mfui-hoqJKf[aria-current=page],.mfui-hoqJKf[aria-current=page] .mfui-Sidebar__navigationLinkIcon {
+  color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
+}
+
+.mfui-hoqJKf[aria-current=page] .mfui-Sidebar__navigationLinkLabel {
+  font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.label);
+}
+
+.mfui-hoqJKf:is(:focus-visible, [data-focus-visible]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-hoqJKf:is(:focus-visible, [data-focus-visible])[aria-current=page] {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
+}
+
+.mfui-hoqJKf:is(:hover, [data-hover]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-hoqJKf:is(:hover, [data-hover])[aria-current=page] {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
+}
+
+.mfui-hoqJKf:is(:active, [data-active]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.pressed);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-hoqJKf:is(:active, [data-active])[aria-current=page] {
+  background-color: var(--mfui-colors-mfui\.color\.primary\.background\.pressed);
+  color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
+}
+
+.mfui-jOPsct {
+  padding: 4px 7px;
+  gap: 7px;
+  border-radius: 6px;
+  flex: 1 0 0;
+  display: flex;
+  align-items: flex-start;
+  color: inherit;
+  min-width: 1px;
+}
+
+.mfui-iENmzA {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+  width: 18px;
+  height: 24px;
+}
+
+.mfui-gWmGAB {
+  flex: 1 0 0;
+  overflow-wrap: break-word;
+  color: inherit;
+  min-width: 1px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--mfui-sidebar-max-lines,1);
+  -webkit-box-orient: vertical;
+}
+
+.mfui-eZotJE {
+  border-top: 1px solid;
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.thin-border\.none);
+  flex-shrink: 0;
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.none);
+  padding-top: 3px;
+}
+
+.mfui-dsYgTD {
+  padding-inline: 14px;
+  padding-block: 3px;
+}
+
+.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger {
+  padding: 4px 7px;
+  margin: 0;
+  border: none;
+  gap: 7px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  appearance: none;
+  -webkit-appearance: none;
+  text-align: start;
+  background-color: transparent;
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  width: 100%;
+  min-width: 0;
+  height: auto;
+}
+
+.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger .mfui-Typography__root {
+  flex: 1 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 1px;
+}
+
+.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is(:hover, [data-hover]),.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is(:focus-visible, [data-focus-visible]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is(:active, [data-active]),.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.pressed);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger:is([aria-expanded=true], [data-expanded], [data-state="expanded"]):is(:hover, [data-hover]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-dsYgTD.mfui-Sidebar__serviceMenu .mfui-Sidebar__serviceTrigger .mfui-Button__leftIcon {
+  font-size: 18px;
+  flex-shrink: 0;
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+}
+
+.mfui-SeHWc {
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.paragraph\.horizontal\.comfort);
+  display: flex;
+  align-items: center;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 19px;
+  padding-right: 21px;
+}
+
+.mfui-cIxYdj {
+  gap: 4px;
+  padding-inline: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  width: 100%;
+}
+
+.mfui-eaAbaG {
+  width: 100%;
+}
+
+.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__tenantTrigger {
+  margin: 0;
+  border: none;
+  padding-inline: 7px;
+  padding-block: 3px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  appearance: none;
+  -webkit-appearance: none;
+  text-align: start;
+  background-color: transparent;
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  width: 100%;
+  min-width: 0;
+  height: auto;
+}
+
+.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__tenantTrigger:is(:hover, [data-hover]),.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__tenantTrigger:is(:focus-visible, [data-focus-visible]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__tenantTrigger:is(:active, [data-active]),.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__tenantTrigger:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.pressed);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__tenantTrigger:is([aria-expanded=true], [data-expanded], [data-state="expanded"]):is(:hover, [data-hover]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__userTrigger {
+  margin: 0;
+  border: none;
+  padding-inline: 7px;
+  padding-block: 0;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  appearance: none;
+  -webkit-appearance: none;
+  text-align: start;
+  background-color: transparent;
+  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  width: 100%;
+  min-width: 0;
+  height: auto;
+}
+
+.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__userTrigger:is(:hover, [data-hover]),.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__userTrigger:is(:focus-visible, [data-focus-visible]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__userTrigger:is(:active, [data-active]),.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__userTrigger:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.pressed);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.pressed);
+}
+
+.mfui-eaAbaG.mfui-Sidebar__footerUserIdMenuItem .mfui-Sidebar__userTrigger:is([aria-expanded=true], [data-expanded], [data-state="expanded"]):is(:hover, [data-hover]) {
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+}
+
+.mfui-cYwDQn {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  position: absolute;
+  cursor: col-resize;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 0;
+  padding-left: 8px;
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-right-style: solid;
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
+.mfui-cYwDQn[data-mfui-dragging],.mfui-cYwDQn:is(:focus-visible, [data-focus-visible]) {
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.indicator\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+}
+
+.mfui-cYwDQn:is(:hover, [data-hover]) {
+  border-right-width: var(--mfui-border-widths-mfui\.size\.border\.indicator\.width\.comfort);
+  border-right-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+}
+
 @media screen and (min-width: 37.5rem) {
   .mfui-hveqnu {
     width: var(--mfui-sizes-mfui\.layout\.area\.horizontal\.fixed);