@liner-fe/prism 2.6.6 → 2.6.8

package/lib/index.css

@@ -1372,25 +1372,46 @@
 }
 
 /* esbuild-sass-plugin:css-chunk:src/components/Textfield/style.module.scss */
-._textfield-container_ogykf_1 {
+._textfield-container_qi63h_1 {
   display: flex;
   flex-direction: column;
   gap: var(--lp-sys-gap-positive-200);
   width: 100%;
 }
-._textfield-container_ogykf_1:hover > ._textfield_ogykf_1 {
+._textfield-container_qi63h_1 > ._textfield_qi63h_1:focus-within {
+  outline: 2px solid var(--neutral-border-opaque-strong) !important;
+}
+._textfield-container_qi63h_1:hover > ._textfield_qi63h_1 {
   outline: 1px solid var(--neutral-border-opaque-strong);
 }
-._textfield-container_ogykf_1[data-disabled=true] {
+._textfield-container_qi63h_1[data-disabled=true] {
   cursor: not-allowed;
 }
-._textfield-container_ogykf_1[data-disabled=true] > * {
+._textfield-container_qi63h_1[data-disabled=true] > * {
   cursor: not-allowed !important;
 }
-._textfield-container_ogykf_1[data-disabled=true] > ._textfield_ogykf_1 {
-  outline: 1px solid var(--neutral-border-opaque-normal) !important;
+._textfield-container_qi63h_1[data-disabled=true] > ._textfield_qi63h_1 {
+  outline: 1px solid var(--neutral-border-opaque-normal);
+}
+._textfield-container_qi63h_1[data-error=true] > ._textfield_qi63h_1 {
+  outline: 2px solid var(--function-label-negative);
+}
+._textfield-container_qi63h_1[data-error=true] > ._textfield_qi63h_1 > ._input_qi63h_25 + ._label_qi63h_25 {
+  color: var(--function-label-negative);
+}
+._textfield-container_qi63h_1[data-error=true] > ._textfield_qi63h_1:hover {
+  outline: 2px solid var(--function-label-negative);
+}
+._textfield-container_qi63h_1[data-error=true] > ._textfield_qi63h_1:focus-within {
+  outline: 2px solid var(--function-label-negative) !important;
+}
+._textfield-container_qi63h_1[data-error=true] > ._textfield_qi63h_1:focus-within > ._label_qi63h_25 {
+  color: var(--function-label-negative);
 }
-._textfield_ogykf_1 {
+._textfield-container_qi63h_1[data-error=true] > ._footer_qi63h_37 > ._error-wrapper_qi63h_37 > ._error-message_qi63h_37 {
+  color: var(--function-label-negative);
+}
+._textfield_qi63h_1 {
   box-sizing: border-box;
   position: relative;
   width: 100%;
@@ -1401,43 +1422,40 @@
   cursor: text;
   transition: ease-out all 0.1s;
 }
-._textfield_ogykf_1:focus-within {
-  outline: 2px solid var(--neutral-border-opaque-strong);
-}
-._textfield_ogykf_1:disabled {
+._textfield_qi63h_1:disabled {
   outline: 1px solid var(--neutral-border-opaque-subtle);
   cursor: not-allowed;
 }
-._textfield_ogykf_1:disabled > ._label_ogykf_38 {
+._textfield_qi63h_1:disabled > ._label_qi63h_25 {
   color: var(--neutral-label-tertiary);
   cursor: not-allowed;
 }
-._textfield_ogykf_1._label-out-textfield_ogykf_42 {
+._textfield_qi63h_1._label-out-textfield_qi63h_60 {
   height: 52px;
   margin-top: 24px;
 }
-._textfield_ogykf_1._white_ogykf_46 {
+._textfield_qi63h_1._white_qi63h_64 {
   background: var(--neutral-container-lowest);
 }
-._textfield_ogykf_1._gray_ogykf_49 {
+._textfield_qi63h_1._gray_qi63h_67 {
   background: var(--neutral-container-mid);
 }
-._label_ogykf_38 {
+._label_qi63h_25 {
   position: absolute;
   left: 0;
   top: 0;
   color: var(--neutral-label-secondary);
   cursor: text;
 }
-._label-in_ogykf_61 {
+._label-in_qi63h_79 {
   transform-origin: left top;
   transform: translate(var(--lp-sys-padding-component-400), 100%) scale(1);
   transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
 }
-._label-out_ogykf_42 {
+._label-out_qi63h_60 {
   transform: translateY(-150%);
 }
-._label-visually-hidden_ogykf_71 {
+._label-visually-hidden_qi63h_89 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -1447,7 +1465,7 @@
   white-space: nowrap;
   border: 0;
 }
-._input-wrapper_ogykf_82 {
+._input-wrapper_qi63h_100 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1455,7 +1473,7 @@
   height: 100%;
   gap: var(--lp-sys-gap-positive-300);
 }
-._input_ogykf_82 {
+._input_qi63h_25 {
   background: transparent;
   border: none;
   outline: none;
@@ -1469,68 +1487,49 @@
   font-weight: var(--lp-pri-font-weight-400);
   line-height: 130%;
 }
-._input_ogykf_82:focus + ._label-in_ogykf_61,
-._input_ogykf_82:not(:placeholder-shown) + ._label-in_ogykf_61 {
+._input_qi63h_25:focus + ._label-in_qi63h_79,
+._input_qi63h_25:not(:placeholder-shown) + ._label-in_qi63h_79 {
   transform: translate(var(--lp-sys-padding-component-400), 60%) scale(0.8);
   font-weight: var(--lp-pri-font-weight-500);
   color: var(--neutral-label-primary);
 }
-._input_ogykf_82::placeholder {
+._input_qi63h_25::placeholder {
   color: var(--neutral-label-tertiary);
   font-size: var(--lp-pri-font-size-15);
   font-style: normal;
   font-weight: var(--lp-pri-font-weight-400);
   line-height: 130%;
 }
-._label-out-input_ogykf_118 {
+._label-out-input_qi63h_136 {
   transform: translateY(0);
 }
-._input-action-buttons_ogykf_122 {
+._input-action-buttons_qi63h_140 {
   display: flex;
   align-items: center;
   gap: var(--lp-sys-gap-positive-50);
 }
-._action-button_ogykf_128 {
+._action-button_qi63h_146 {
   margin-right: var(--lp-sys-padding-component-100);
 }
-._action-button_ogykf_128 > svg > circle {
+._action-button_qi63h_146 > svg > circle {
   fill: var(--neutral-label-secondary);
 }
-._error_ogykf_135 {
-  display: block;
-  outline: 2px solid var(--function-label-negative);
-}
-._error_ogykf_135 > ._input_ogykf_82 + ._label_ogykf_38 {
-  color: var(--function-label-negative);
-}
-._error_ogykf_135:hover {
-  outline: 2px solid var(--function-label-negative);
-}
-._error_ogykf_135:focus-within {
-  outline: 2px solid var(--function-label-negative);
-}
-._error_ogykf_135:focus-within > ._label_ogykf_38 {
-  color: var(--function-label-negative);
-}
-._error_ogykf_135 > div > ._error-message_ogykf_151 {
-  color: var(--function-label-negative);
-}
-._error-wrapper_ogykf_155 {
+._error-wrapper_qi63h_37 {
   display: flex;
   align-items: flex-end;
   gap: 4px;
 }
-._error-wrapper_ogykf_155 > ._error-message_ogykf_151 {
+._error-wrapper_qi63h_37 > ._error-message_qi63h_37 {
   color: var(--function-label-negative);
 }
-._footer_ogykf_164 {
+._footer_qi63h_37 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   min-height: var(--lp-sys-icon-size-xs);
 }
-._character_ogykf_172 {
+._character_qi63h_170 {
   color: var(--neutral-label-secondary);
 }
 

package/lib/index.d.ts

@@ -8,6 +8,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, Slider as Slider$1, Select as Select$1, Label as Label$1 } from 'radix-ui';
+import * as recoil from 'recoil';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
 import { ImageProps } from 'next/image';
@@ -504,6 +505,11 @@ type SnackbarPropWithId = SnackbarProp & {
 declare const Snackbar: () => react_jsx_runtime.JSX.Element;
 declare const SingleSnackbar: (props: SnackbarPropWithId) => react_jsx_runtime.JSX.Element;
 
+declare const snackbarAtom: recoil.RecoilState<SnackbarPropWithId[]>;
+declare const useSnackbar: () => {
+    open: (info: SnackbarProp) => void;
+};
+
 declare const defaultLabelVariants: (props?: ({
     level?: "primary" | "secondary" | undefined;
     position?: "top" | "right" | undefined;
@@ -675,4 +681,4 @@ interface TagProps extends Omit<IPropsNormalBold, 'type' | 'size' | 'weight'> {
 }
 declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLParagraphElement>>;
 
-export { type BaseCoachMarkContentProps, type BasicColorType, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, DefaultButton, type DefaultButtonProps, Display, type FillFalseLevelType, type FillLevelType, type FillType, Heading, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, Icon, IconButton, type IconButtonLevelType, type IconButtonProps, type IconColorType, type IconComponent, type IconComponentProps, type IconKey, type IconMapType, type IconProps, type IconSizeKey, type IconSizeType, type ItemProps, Label, List, Loading, Logo, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, Radio, Select, type SelectItemProps, type SelectProps, SingleSnackbar, Slider, Snackbar, Tag, TextButton, type TextButtonProps, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, getIconComponent, iconKeyOptions, iconMap, isEmptyObject, objectToArray, rootMediaStyle, useToast };
+export { type BaseCoachMarkContentProps, type BasicColorType, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, DefaultButton, type DefaultButtonProps, Display, type FillFalseLevelType, type FillLevelType, type FillType, Heading, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, Icon, IconButton, type IconButtonLevelType, type IconButtonProps, type IconColorType, type IconComponent, type IconComponentProps, type IconKey, type IconMapType, type IconProps, type IconSizeKey, type IconSizeType, type ItemProps, Label, List, Loading, Logo, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, Radio, Select, type SelectItemProps, type SelectProps, SingleSnackbar, Slider, Snackbar, Tag, TextButton, type TextButtonProps, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, getIconComponent, iconKeyOptions, iconMap, isEmptyObject, objectToArray, rootMediaStyle, snackbarAtom, useSnackbar, useToast };

package/lib/index.js

@@ -69,6 +69,8 @@ __export(index_exports, {
   isEmptyObject: () => isEmptyObject,
   objectToArray: () => objectToArray,
   rootMediaStyle: () => rootMediaStyle,
+  snackbarAtom: () => snackbarAtom,
+  useSnackbar: () => useSnackbar,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
@@ -17125,25 +17127,24 @@ var import_react19 = require("react");
 
 // src/components/Textfield/style.module.scss
 var style_module_default13 = {
-  "textfield-container": "_textfield-container_ogykf_1",
-  "textfield": "_textfield_ogykf_1",
-  "label": "_label_ogykf_38",
-  "label-out-textfield": "_label-out-textfield_ogykf_42",
-  "white": "_white_ogykf_46",
-  "gray": "_gray_ogykf_49",
-  "label-in": "_label-in_ogykf_61",
-  "label-out": "_label-out_ogykf_42",
-  "label-visually-hidden": "_label-visually-hidden_ogykf_71",
-  "input-wrapper": "_input-wrapper_ogykf_82",
-  "input": "_input_ogykf_82",
-  "label-out-input": "_label-out-input_ogykf_118",
-  "input-action-buttons": "_input-action-buttons_ogykf_122",
-  "action-button": "_action-button_ogykf_128",
-  "error": "_error_ogykf_135",
-  "error-message": "_error-message_ogykf_151",
-  "error-wrapper": "_error-wrapper_ogykf_155",
-  "footer": "_footer_ogykf_164",
-  "character": "_character_ogykf_172"
+  "textfield-container": "_textfield-container_qi63h_1",
+  "textfield": "_textfield_qi63h_1",
+  "input": "_input_qi63h_25",
+  "label": "_label_qi63h_25",
+  "footer": "_footer_qi63h_37",
+  "error-wrapper": "_error-wrapper_qi63h_37",
+  "error-message": "_error-message_qi63h_37",
+  "label-out-textfield": "_label-out-textfield_qi63h_60",
+  "white": "_white_qi63h_64",
+  "gray": "_gray_qi63h_67",
+  "label-in": "_label-in_qi63h_79",
+  "label-out": "_label-out_qi63h_60",
+  "label-visually-hidden": "_label-visually-hidden_qi63h_89",
+  "input-wrapper": "_input-wrapper_qi63h_100",
+  "label-out-input": "_label-out-input_qi63h_136",
+  "input-action-buttons": "_input-action-buttons_qi63h_140",
+  "action-button": "_action-button_qi63h_146",
+  "character": "_character_qi63h_170"
 };
 
 // src/components/Textfield/index.tsx
@@ -17219,12 +17220,11 @@ var Textfield = (0, import_react19.forwardRef)((props, ref) => {
     }
   }, "handleDeidentify");
   (0, import_react19.useImperativeHandle)(ref, () => inputRef.current);
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { className: style_module_default13["textfield-container"], "data-disabled": disabled, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { className: style_module_default13["textfield-container"], "data-disabled": disabled, "data-error": !!error, children: [
     /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
       "div",
       {
         className: (0, import_clsx15.default)(defaultTextfieldVariants({ color }), {
-          [style_module_default13.error]: !!error,
           [style_module_default13["label-out-textfield"]]: !label || labelType === "out"
         }),
         onClick: handleTextfieldClick,
@@ -17632,6 +17632,15 @@ var snackbarAtom = (0, import_recoil3.atom)({
   key: "snackbarAtom",
   default: []
 });
+var useSnackbar = /* @__PURE__ */ __name(() => {
+  const setSnackbar = (0, import_recoil3.useSetRecoilState)(snackbarAtom);
+  return {
+    open: /* @__PURE__ */ __name((info) => {
+      const snackbarId = generateRandomId();
+      setSnackbar((prev) => [...prev, { ...info, snackbarId }]);
+    }, "open")
+  };
+}, "useSnackbar");
 
 // src/components/Snackbar/SnackbarIcon/style.module.scss
 var style_module_default18 = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "scripts": {
     "dev": "next dev",
     "start": "next start",