@liner-fe/prism 2.12.6 → 2.12.8

package/lib/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 /* esbuild-sass-plugin:css-chunk:src/components/Button/style.module.scss */
-._button_3le0q_1 {
+._button_10jfg_1 {
   position: relative;
   display: flex;
   align-items: center;
@@ -16,163 +16,174 @@
   overflow: hidden;
   cursor: pointer;
 }
-._button_3le0q_1:disabled:not(._loading-with-disabled_3le0q_16) {
+._button_10jfg_1:disabled:not(._loading-with-disabled_10jfg_16) {
   cursor: not-allowed;
 }
-._button_3le0q_1:disabled._loading-with-disabled_3le0q_16 {
+._button_10jfg_1:disabled._loading-with-disabled_10jfg_16 {
   cursor: not-allowed;
 }
-._primary_3le0q_23 {
+._primary_10jfg_23 {
   color: var(--inverse-label-static-primary);
   background: var(--brand-container-mid);
 }
-._primary_3le0q_23:not(:disabled):hover {
+._primary_10jfg_23:not(:disabled):hover {
   background: var(--brand-container-mid-hover);
 }
-._primary_3le0q_23:disabled:not(._loading_3le0q_16) {
+._primary_10jfg_23:disabled:not(._loading_10jfg_16) {
   background: var(--neutral-fill-overlay-mid);
   color: var(--neutral-label-tertiary);
 }
-._secondary_3le0q_35 {
+._secondary_10jfg_35 {
   color: var(--brand-label-primary);
   background: var(--neutral-fill-opaque-lowest);
   border: 1px solid var(--brand-border-opaque-strong);
 }
-._secondary_3le0q_35:not(:disabled):hover {
+._secondary_10jfg_35:not(:disabled):hover {
   background: var(--brand-fill-low-hover);
 }
-._secondary_3le0q_35:disabled:not(._loading_3le0q_16) {
+._secondary_10jfg_35:disabled:not(._loading_10jfg_16) {
   border: 1px solid var(--neutral-border-overlay-normal);
   color: var(--neutral-label-tertiary);
 }
-._tertiary_3le0q_48 {
+._tertiary_10jfg_48 {
   color: var(--neutral-label-primary);
   background: var(--neutral-fill-opaque-lowest);
   border: 1px solid var(--neutral-border-overlay-normal);
 }
-._tertiary_3le0q_48:not(:disabled):hover {
+._tertiary_10jfg_48:not(:disabled):hover {
   background: var(--neutral-fill-opaque-lowest-hover);
 }
-._tertiary_3le0q_48:disabled:not(._loading_3le0q_16) {
+._tertiary_10jfg_48:disabled:not(._loading_10jfg_16) {
   color: var(--neutral-label-tertiary);
 }
-._quaternary_3le0q_60 {
+._quaternary_10jfg_60 {
   color: var(--neutral-label-primary);
   background: var(--neutral-fill-overlay-lowest);
 }
-._quaternary_3le0q_60:not(:disabled):hover {
+._quaternary_10jfg_60:not(:disabled):hover {
   background: var(--neutral-fill-overlay-lowest-hover);
 }
-._quaternary_3le0q_60:disabled:not(._loading_3le0q_16) {
+._quaternary_10jfg_60:disabled:not(._loading_10jfg_16) {
   background: var(--neutral-fill-overlay-mid);
   color: var(--neutral-label-tertiary);
 }
-._quinary_3le0q_72 {
+._quinary_10jfg_72 {
   color: var(--neutral-label-secondary);
   background: var(--neutral-container-lowest);
 }
-._quinary_3le0q_72:not(:disabled):hover {
+._quinary_10jfg_72:not(:disabled):hover {
   background: var(--neutral-fill-overlay-lowest-hover);
 }
-._quinary_3le0q_72:disabled:not(._loading_3le0q_16) {
+._quinary_10jfg_72:disabled:not(._loading_10jfg_16) {
   background: none;
   color: var(--neutral-label-quaternary);
 }
-._negative_3le0q_84 {
+._negative_10jfg_84 {
   color: var(--inverse-label-static-primary);
   background: var(--function-fill-negative-mid);
 }
-._negative_3le0q_84:not(:disabled):hover {
+._negative_10jfg_84:not(:disabled):hover {
   background: var(--function-fill-negative-mid-hover);
 }
-._negative_3le0q_84:disabled:not(._loading_3le0q_16) {
+._negative_10jfg_84:disabled:not(._loading_10jfg_16) {
   background: var(--neutral-fill-overlay-mid);
   color: var(--neutral-label-tertiary);
 }
-._static_3le0q_96 {
+._static_10jfg_96 {
   background: var(--neutral-container-static-lowest);
   color: var(--neutral-label-static-primary);
 }
-._static_3le0q_96:not(:disabled):hover {
+._static_10jfg_96:not(:disabled):hover {
   background: var(--neutral-container-static-lowest-hover);
 }
-._static_3le0q_96:disabled:not(._loading_3le0q_16) {
+._static_10jfg_96:disabled:not(._loading_10jfg_16) {
   background: var(--neutral-fill-overlay-mid);
   color: var(--neutral-label-tertiary);
 }
-._inverse-static_3le0q_108 {
+._inverse-static_10jfg_108 {
   background: var(--inverse-container-static-high);
   color: var(--inverse-label-static-primary);
 }
-._inverse-static_3le0q_108:not(:disabled):hover {
+._inverse-static_10jfg_108:not(:disabled):hover {
   background: var(--inverse-container-static-high-hover);
 }
-._inverse-static_3le0q_108:disabled:not(._loading_3le0q_16) {
+._inverse-static_10jfg_108:disabled:not(._loading_10jfg_16) {
   background: var(--inverse-label-tertiary);
   color: var(--inverse-label-tertiary);
 }
-._cta_3le0q_120 {
+._cta_10jfg_120 {
   border-radius: var(--lp-sys-radius-m);
   width: fit-content;
   height: 48px;
   gap: 8px;
   min-width: 48px;
 }
-._l_3le0q_16 {
+._l_10jfg_16 {
   border-radius: var(--lp-sys-radius-s);
   width: fit-content;
   height: 40px;
   min-width: 40px;
 }
-._m_3le0q_135 {
+._m_10jfg_135 {
   border-radius: var(--lp-sys-radius-s);
   width: fit-content;
   height: 32px;
   min-width: 32px;
 }
-._s_3le0q_35 {
+._s_10jfg_35 {
   border-radius: var(--lp-sys-radius-xs);
   width: fit-content;
   height: 24px;
   min-width: 24px;
 }
-._align-center_3le0q_149 > span {
+._align-center_10jfg_149 > span {
   width: 100%;
   justify-content: center;
 }
-._content_3le0q_154 {
+._content_10jfg_154 {
   flex-shrink: 0;
   line-height: 0;
-  padding: 0px var(--lp-sys-padding-component-100);
 }
-._full_3le0q_160 {
+._full_10jfg_159 {
   width: 100%;
 }
-._fit-content_3le0q_164 {
+._fit-content_10jfg_163 {
   width: fit-content;
 }
-._children_3le0q_168 {
+._children_10jfg_167 {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-._cta-children_3le0q_175 {
-  padding: 0 var(--lp-sys-gap-positive-300);
+._cta-children_10jfg_174 {
+  padding: 0 var(--lp-sys-padding-component-300);
   gap: var(--lp-sys-gap-positive-100);
 }
-._l-children_3le0q_180 {
-  padding: 0 var(--lp-sys-gap-positive-200);
+._cta-children_10jfg_174 ._content_10jfg_154 {
+  padding: 0px var(--lp-sys-padding-component-100);
+}
+._l-children_10jfg_182 {
+  padding: 0 var(--lp-sys-padding-component-200);
   gap: var(--lp-sys-gap-positive-50);
 }
-._m-children_3le0q_185 {
-  padding: 0 var(--lp-sys-gap-positive-150);
+._l-children_10jfg_182 ._content_10jfg_154 {
+  padding: 0px var(--lp-sys-padding-component-100);
+}
+._m-children_10jfg_190 {
+  padding: 0 var(--lp-sys-padding-component-150);
   gap: var(--lp-sys-gap-positive-50);
 }
-._s-children_3le0q_190 {
-  padding: 0 var(--lp-sys-gap-positive-150);
+._m-children_10jfg_190 ._content_10jfg_154 {
+  padding: 0px var(--lp-sys-padding-component-100);
+}
+._s-children_10jfg_198 {
+  padding: 0 var(--lp-sys-padding-component-100);
   gap: var(--lp-sys-gap-positive-50);
 }
+._s-children_10jfg_198 ._content_10jfg_154 {
+  padding: 0px var(--lp-sys-padding-component-50);
+}
 
 /* esbuild-sass-plugin:css-chunk:src/components/Loading/style.module.scss */
 ._dots-loader-container_5kzc8_4 {

package/lib/index.d.ts

@@ -9,7 +9,7 @@ import { ToastProps } from '@radix-ui/react-toast';
 import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
 import { breakpointOrigin } from '@liner-fe/design-token';
 import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1 } from 'radix-ui';
-import * as recoil from 'recoil';
+import * as jotai from 'jotai';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
 import { IllustProps } from '@liner-fe/illust';
@@ -463,7 +463,9 @@ declare const SingleSnackbar: (props: SnackbarPropWithId & {
     position: "left" | "right";
 }) => react_jsx_runtime.JSX.Element;
 
-declare const snackbarAtom: recoil.RecoilState<SnackbarPropWithId[]>;
+declare const snackbarAtom: jotai.PrimitiveAtom<SnackbarPropWithId[]> & {
+    init: SnackbarPropWithId[];
+};
 declare const useSnackbar: () => {
     open: (info: SnackbarProp) => void;
 };

package/lib/index.js

@@ -25,30 +25,30 @@ import {
 
 // src/components/Button/style.module.scss
 var style_module_default = {
-  "button": "_button_3le0q_1",
-  "loading-with-disabled": "_loading-with-disabled_3le0q_16",
-  "primary": "_primary_3le0q_23",
-  "loading": "_loading_3le0q_16",
-  "secondary": "_secondary_3le0q_35",
-  "tertiary": "_tertiary_3le0q_48",
-  "quaternary": "_quaternary_3le0q_60",
-  "quinary": "_quinary_3le0q_72",
-  "negative": "_negative_3le0q_84",
-  "static": "_static_3le0q_96",
-  "inverse-static": "_inverse-static_3le0q_108",
-  "cta": "_cta_3le0q_120",
-  "l": "_l_3le0q_16",
-  "m": "_m_3le0q_135",
-  "s": "_s_3le0q_35",
-  "align-center": "_align-center_3le0q_149",
-  "content": "_content_3le0q_154",
-  "full": "_full_3le0q_160",
-  "fit-content": "_fit-content_3le0q_164",
-  "children": "_children_3le0q_168",
-  "cta-children": "_cta-children_3le0q_175",
-  "l-children": "_l-children_3le0q_180",
-  "m-children": "_m-children_3le0q_185",
-  "s-children": "_s-children_3le0q_190"
+  "button": "_button_10jfg_1",
+  "loading-with-disabled": "_loading-with-disabled_10jfg_16",
+  "primary": "_primary_10jfg_23",
+  "loading": "_loading_10jfg_16",
+  "secondary": "_secondary_10jfg_35",
+  "tertiary": "_tertiary_10jfg_48",
+  "quaternary": "_quaternary_10jfg_60",
+  "quinary": "_quinary_10jfg_72",
+  "negative": "_negative_10jfg_84",
+  "static": "_static_10jfg_96",
+  "inverse-static": "_inverse-static_10jfg_108",
+  "cta": "_cta_10jfg_120",
+  "l": "_l_10jfg_16",
+  "m": "_m_10jfg_135",
+  "s": "_s_10jfg_35",
+  "align-center": "_align-center_10jfg_149",
+  "content": "_content_10jfg_154",
+  "full": "_full_10jfg_159",
+  "fit-content": "_fit-content_10jfg_163",
+  "children": "_children_10jfg_167",
+  "cta-children": "_cta-children_10jfg_174",
+  "l-children": "_l-children_10jfg_182",
+  "m-children": "_m-children_10jfg_190",
+  "s-children": "_s-children_10jfg_198"
 };
 
 // src/components/Button/index.tsx
@@ -200,7 +200,7 @@ var defaultButtonVariants = cva2({
       cta: [style_module_default.cta, "lp-sys-typo-paragraph2-normal-bold"],
       l: [style_module_default.l, "lp-sys-typo-paragraph3-normal-bold"],
       m: [style_module_default.m, "lp-sys-typo-paragraph4-normal-medium"],
-      s: [style_module_default.s, "lp-sys-typo-caption1-normal-medium"]
+      s: [style_module_default.s, "lp-sys-typo-caption2-normal-regular"]
     },
     width: {
       full: style_module_default.full,
@@ -329,19 +329,16 @@ var Button = forwardRef((props, ref) => /* @__PURE__ */ jsx2(DefaultButton, { ..
 Button.displayName = "Button";
 
 // src/hooks/useToast.ts
-import { atom, useSetRecoilState } from "recoil";
+import { atom, useSetAtom } from "jotai";
 
 // src/types/generateRandomId.ts
 var generateRandomId = /* @__PURE__ */ __name(() => Date.now() + Math.random(), "generateRandomId");
 
 // src/hooks/useToast.ts
 import { millisecondsInSecond } from "date-fns/constants";
-var toastAtom = atom({
-  default: [],
-  key: "toastAtoms"
-});
+var toastAtom = atom([]);
 var useToast = /* @__PURE__ */ __name(() => {
-  const setToasts = useSetRecoilState(toastAtom);
+  const setToasts = useSetAtom(toastAtom);
   return {
     open: /* @__PURE__ */ __name((toast) => {
       const toastId = generateRandomId();
@@ -417,7 +414,7 @@ var Paragraph = forwardRef2(
 );
 
 // src/components/Toast/index.tsx
-import { useRecoilValue, useSetRecoilState as useSetRecoilState2 } from "recoil";
+import { useAtomValue, useSetAtom as useSetAtom2 } from "jotai";
 import Lottie from "lottie-web";
 
 // src/lottie/loading.json
@@ -898,7 +895,7 @@ import { millisecondsInSecond as millisecondsInSecond2 } from "date-fns/constant
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 import { createElement } from "react";
 var Toaster = /* @__PURE__ */ __name(() => {
-  const list = useRecoilValue(toastAtom);
+  const list = useAtomValue(toastAtom);
   return /* @__PURE__ */ jsxs3(Provider, { children: [
     list.map((props) => (
       // eslint-disable-next-line react/prop-types
@@ -908,7 +905,7 @@ var Toaster = /* @__PURE__ */ __name(() => {
   ] });
 }, "Toaster");
 var SingleToast = /* @__PURE__ */ __name((props) => {
-  const setToast = useSetRecoilState2(toastAtom);
+  const setToast = useSetAtom2(toastAtom);
   const timerRef = useRef();
   const { message, icon, button, timer, toastId, isLoading } = props;
   const [isOpen, setIsOpen] = useState(true);
@@ -2202,17 +2199,14 @@ var style_module_default14 = {
 
 // src/components/Snackbar/index.tsx
 import { Toast } from "radix-ui";
-import { useRecoilValue as useRecoilValue2, useSetRecoilState as useSetRecoilState4 } from "recoil";
+import { useAtomValue as useAtomValue2, useSetAtom as useSetAtom4 } from "jotai";
 
 // src/hooks/useSnackbar.ts
-import { atom as atom2, useSetRecoilState as useSetRecoilState3 } from "recoil";
+import { atom as atom2, useSetAtom as useSetAtom3 } from "jotai";
 import { millisecondsInSecond as millisecondsInSecond3 } from "date-fns/constants";
-var snackbarAtom = atom2({
-  key: "snackbarAtom",
-  default: []
-});
+var snackbarAtom = atom2([]);
 var useSnackbar = /* @__PURE__ */ __name(() => {
-  const setSnackbar = useSetRecoilState3(snackbarAtom);
+  const setSnackbar = useSetAtom3(snackbarAtom);
   return {
     open: /* @__PURE__ */ __name((info) => {
       const snackbarId = generateRandomId();
@@ -2438,7 +2432,7 @@ import { Fragment as Fragment7, jsx as jsx26, jsxs as jsxs12 } from "react/jsx-r
 import { createElement as createElement3 } from "react";
 var { Provider: Provider2, Root: Root2, Viewport: Viewport2 } = Toast;
 var Snackbar = /* @__PURE__ */ __name(() => {
-  const list = useRecoilValue2(snackbarAtom);
+  const list = useAtomValue2(snackbarAtom);
   const rightSnackbars = list.filter((snackbar) => snackbar.position !== "left");
   const leftSnackbars = list.filter((snackbar) => snackbar.position === "left");
   return /* @__PURE__ */ jsxs12(Fragment7, { children: [
@@ -2459,7 +2453,7 @@ var Snackbar = /* @__PURE__ */ __name(() => {
   ] });
 }, "Snackbar");
 var SingleSnackbar = /* @__PURE__ */ __name((props) => {
-  const setSnackbar = useSetRecoilState4(snackbarAtom);
+  const setSnackbar = useSetAtom4(snackbarAtom);
   const timerRef = useRef3();
   const { snackbarId, description, title, timer } = props;
   const [isOpen, setIsOpen] = useState5(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "2.12.6",
+  "version": "2.12.8",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -15,10 +15,10 @@
     "radix-ui": "^1.4.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "recoil": "^0.5.2",
-    "@liner-fe/design-token": "^2.5.49",
-    "@liner-fe/design-token-primitive": "^0.2.45",
-    "@liner-fe/icon": "^0.2.73",
+    "jotai": "^2.11.0",
+    "@liner-fe/design-token": "^2.5.50",
+    "@liner-fe/design-token-primitive": "^0.2.46",
+    "@liner-fe/icon": "^0.2.74",
     "@liner-fe/illust": "^0.2.12"
   },
   "devDependencies": {