diff --git a/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx b/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
index 7f20907ee..7cdc238a6 100644
--- a/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
+++ b/app/assets/javascripts/components/NotesOptions/NotesOptions.tsx
@@ -197,7 +197,7 @@ const NoteSizeWarning: FunctionComponent<{
type="warning"
className="color-accessory-tint-3 flex-shrink-0 mr-3"
/>
-
+
This note may have trouble syncing to the mobile application due to its
size.
diff --git a/app/assets/javascripts/services/alertService.ts b/app/assets/javascripts/services/alertService.ts
index 18c1d1b56..5eec432ac 100644
--- a/app/assets/javascripts/services/alertService.ts
+++ b/app/assets/javascripts/services/alertService.ts
@@ -4,7 +4,7 @@ import {
ButtonType,
sanitizeHtmlString,
} from '@standardnotes/snjs';
-import { SKAlert } from 'sn-stylekit';
+import { SKAlert } from '@standardnotes/stylekit';
/** @returns a promise resolving to true if the user confirmed, false if they canceled */
export function confirmDialog({
diff --git a/app/assets/javascripts/typings/stylekit.d.ts b/app/assets/javascripts/typings/stylekit.d.ts
index 89481ace6..44b004f93 100644
--- a/app/assets/javascripts/typings/stylekit.d.ts
+++ b/app/assets/javascripts/typings/stylekit.d.ts
@@ -1 +1 @@
-declare module "sn-stylekit";
+declare module '@standardnotes/stylekit';
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 952075a9c..7c50835ef 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -303,6 +303,10 @@
max-width: 75%;
}
+.max-w-80\% {
+ max-width: 80%;
+}
+
.max-w-72 {
max-width: 18rem;
}
@@ -844,6 +848,10 @@
flex-shrink: 0;
}
+.leading-140\% {
+ line-height: 140%;
+}
+
.dimmed {
opacity: .5;
cursor: default;
diff --git a/app/assets/stylesheets/index.css.scss b/app/assets/stylesheets/index.css.scss
index 80fe33dc8..ae927f70a 100644
--- a/app/assets/stylesheets/index.css.scss
+++ b/app/assets/stylesheets/index.css.scss
@@ -1,4 +1,4 @@
-@import 'sn-stylekit/dist/stylekit';
+@import '@standardnotes/stylekit/dist/stylekit';
@import 'main';
@import 'ui';
@import 'footer';
diff --git a/package.json b/package.json
index eba71f912..399256472 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
"pug-loader": "^2.4.0",
"sass-loader": "^12.2.0",
"serve-static": "^1.14.1",
- "sn-stylekit": "5.2.21",
+ "@standardnotes/stylekit": "5.4.0",
"svg-jest": "^1.0.1",
"ts-jest": "^27.0.7",
"ts-loader": "^9.2.6",
diff --git a/yarn.lock b/yarn.lock
index 55f085594..7143bbf89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2662,6 +2662,15 @@
"@standardnotes/settings" "^1.11.3"
"@standardnotes/sncrypto-common" "^1.6.0"
+"@standardnotes/stylekit@5.4.0":
+ version "5.4.0"
+ resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.4.0.tgz#205697a3f5265a5214e192b89b1a9847e766dba4"
+ integrity sha512-Q7uAoaCYjLD3pcY0QGfh8vyLZT6JQYZYWpyuXOC+lSU4TvS+/fKbZ3aEGMjLn1d/SD7tlj0k3MwuqwCGkEcogw==
+ dependencies:
+ "@reach/listbox" "^0.15.0"
+ "@reach/menu-button" "^0.15.1"
+ prop-types "^15.7.2"
+
"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
version "5.4.0"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
@@ -9315,15 +9324,6 @@ slice-ansi@^5.0.0:
ansi-styles "^6.0.0"
is-fullwidth-code-point "^4.0.0"
-sn-stylekit@5.2.21:
- version "5.2.21"
- resolved "https://registry.yarnpkg.com/sn-stylekit/-/sn-stylekit-5.2.21.tgz#5aec6c329949bda64a1e3c563ee594b141295d27"
- integrity sha512-rjlgo42A/kx+M4iY7HYRpnQyp4dLb2HQpEMHz+CYumOzTf/lsRy0Up5HI1haNK4/JMmpq36Eb/7BMDmvLpdXnQ==
- dependencies:
- "@reach/listbox" "^0.15.0"
- "@reach/menu-button" "^0.15.1"
- prop-types "^15.7.2"
-
sockjs@^0.3.21:
version "0.3.21"
resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.21.tgz#b34ffb98e796930b60a0cfa11904d6a339a7d417"