@remember-web/primitive 0.4.8 → 0.5.0

package/dist/src/Common/Divider/index.cjs.js

@@ -1,42 +1,51 @@
 "use client";
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var SeparatorPrimitive = require('@radix-ui/react-separator');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var mixin = require('@remember-web/mixin');
+var react = require('react');
 var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
-var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _templateObject;
+var _excluded = ["decorative", "orientation"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var StyledDivider = styled__default.default(SeparatorPrimitive__namespace.Root)(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  background-color: ", ";\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: ", ";\n  }\n  &[data-orientation='vertical'] {\n    height: ", ";\n    width: 1px;\n  }\n"])), function (_ref) {
+var DEFAULT_ORIENTATION = 'horizontal';
+var ORIENTATIONS = ['horizontal', 'vertical'];
+function isValidOrientation(orientation) {
+  return ORIENTATIONS.includes(orientation);
+}
+var _Separator = /*#__PURE__*/react.forwardRef(function (props, forwardedRef) {
+  var decorative = props.decorative,
+    _props$orientation = props.orientation,
+    orientationProp = _props$orientation === void 0 ? DEFAULT_ORIENTATION : _props$orientation,
+    domProps = _objectWithoutProperties__default.default(props, _excluded);
+  var orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
+  // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+  var ariaOrientation = orientation === 'vertical' ? orientation : undefined;
+  var semanticProps = decorative ? {
+    role: 'none'
+  } : {
+    'aria-orientation': ariaOrientation,
+    role: 'separator'
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
+    "data-orientation": orientation
+  }, semanticProps), domProps), {}, {
+    ref: forwardedRef
+  }));
+});
+var StyledDivider = styled__default.default(_Separator)(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  background-color: ", ";\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: ", ";\n  }\n  &[data-orientation='vertical'] {\n    height: ", ";\n    width: 1px;\n  }\n"])), function (_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? mixin.divider : _ref$color;
   return color;

package/dist/src/Common/Divider/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { divider } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n  color?: string;\n  $width?: string | number;\n  $height?: string | number;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n  background-color: ${({ color = divider }) => color};\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: ${({ $width = '100%' }) =>\n      typeof $width === 'number' ? `${$width}px` : $width};\n  }\n  &[data-orientation='vertical'] {\n    height: ${({ $height = '100%' }) =>\n      typeof $height === 'number' ? `${$height}px` : $height};\n    width: 1px;\n  }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color","$width","$height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAYb;AACsB;AAAGA;AAAe;AAAY;AAGvC;AAAGC;;AACyC;AAG3C;AAAGC;;AAC2C;;AAK5D;AACA;AACA;AACA;;;AAC4E;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport { divider } from '@remember-web/mixin';\nimport { forwardRef } from 'react';\nimport styled from 'styled-components';\n\ninterface SeparatorProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Either `vertical` or `horizontal`. Defaults to `horizontal`.\n   */\n  orientation?: (typeof ORIENTATIONS)[number];\n  /**\n   * Whether or not the component is purely decorative. When true, accessibility-related attributes\n   * are updated so that that the rendered element is removed from the accessibility tree.\n   */\n  decorative?: boolean;\n}\n\nexport interface DividerProps extends SeparatorProps {\n  color?: string;\n  $width?: string | number;\n  $height?: string | number;\n}\n\nconst DEFAULT_ORIENTATION = 'horizontal';\nconst ORIENTATIONS = ['horizontal', 'vertical'] as const;\n\nfunction isValidOrientation(\n  orientation: any\n): orientation is (typeof ORIENTATIONS)[number] {\n  return ORIENTATIONS.includes(orientation);\n}\n\nconst _Separator = forwardRef<React.ComponentRef<'div'>, SeparatorProps>(\n  (props, forwardedRef) => {\n    const {\n      decorative,\n      orientation: orientationProp = DEFAULT_ORIENTATION,\n      ...domProps\n    } = props;\n    const orientation = isValidOrientation(orientationProp)\n      ? orientationProp\n      : DEFAULT_ORIENTATION;\n    // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical\n    const ariaOrientation =\n      orientation === 'vertical' ? orientation : undefined;\n    const semanticProps = decorative\n      ? { role: 'none' }\n      : { 'aria-orientation': ariaOrientation, role: 'separator' };\n\n    return (\n      <div\n        data-orientation={orientation}\n        {...semanticProps}\n        {...domProps}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\nconst StyledDivider = styled(_Separator)<DividerProps>`\n  background-color: ${({ color = divider }) => color};\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: ${({ $width = '100%' }) =>\n      typeof $width === 'number' ? `${$width}px` : $width};\n  }\n  &[data-orientation='vertical'] {\n    height: ${({ $height = '100%' }) =>\n      typeof $height === 'number' ? `${$height}px` : $height};\n    width: 1px;\n  }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["orientationProp","domProps","role","ref","color","$width","$height"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAwBb;AACA;AAEA;AAGE;AACF;AAEA;AAEI;;AAEeA;AACVC;;AAKL;;;AAIMC;AAAa;AACb;AAAqCA;;AAE3C;;;AAKIC;AAAkB;AAGxB;AAGF;AACsB;AAAGC;AAAe;AAAY;AAGvC;AAAGC;;AACyC;AAG3C;AAAGC;;AAC2C;;AAK5D;AACA;AACA;AACA;;;AAC4E;;"}

package/dist/src/Common/Divider/index.d.ts

@@ -1,12 +1,25 @@
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-export interface DividerProps extends SeparatorPrimitive.SeparatorProps {
+/// <reference types="react" />
+interface SeparatorProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+     */
+    orientation?: (typeof ORIENTATIONS)[number];
+    /**
+     * Whether or not the component is purely decorative. When true, accessibility-related attributes
+     * are updated so that that the rendered element is removed from the accessibility tree.
+     */
+    decorative?: boolean;
+}
+export interface DividerProps extends SeparatorProps {
     color?: string;
     $width?: string | number;
     $height?: string | number;
 }
+declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
 /**
  * @prop {"horizontal" | "vertical"} orientation - default: "horizontal"
  * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.
  */
 export declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/src/Common/Divider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Divider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAIhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB,CAAC,cAAc;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAgBD;;;GAGG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,4CAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Common/Divider/index.tsx"],"names":[],"mappings":";AAMA,UAAU,cAAe,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACpE;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;IAC5C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B;AAGD,QAAA,MAAM,YAAY,qCAAsC,CAAC;AAkDzD;;;GAGG;AACH,eAAO,MAAM,OAAO,UAAW,YAAY,4CAAiC,CAAC"}

package/dist/src/Common/Divider/index.esm.js

@@ -1,15 +1,42 @@
 "use client";
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { divider } from '@remember-web/mixin';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { jsx } from 'react/jsx-runtime';
 
 var _templateObject;
+var _excluded = ["decorative", "orientation"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var StyledDivider = styled(SeparatorPrimitive.Root)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: ", ";\n  }\n  &[data-orientation='vertical'] {\n    height: ", ";\n    width: 1px;\n  }\n"])), function (_ref) {
+var DEFAULT_ORIENTATION = 'horizontal';
+var ORIENTATIONS = ['horizontal', 'vertical'];
+function isValidOrientation(orientation) {
+  return ORIENTATIONS.includes(orientation);
+}
+var _Separator = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
+  var decorative = props.decorative,
+    _props$orientation = props.orientation,
+    orientationProp = _props$orientation === void 0 ? DEFAULT_ORIENTATION : _props$orientation,
+    domProps = _objectWithoutProperties(props, _excluded);
+  var orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
+  // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical
+  var ariaOrientation = orientation === 'vertical' ? orientation : undefined;
+  var semanticProps = decorative ? {
+    role: 'none'
+  } : {
+    'aria-orientation': ariaOrientation,
+    role: 'separator'
+  };
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
+    "data-orientation": orientation
+  }, semanticProps), domProps), {}, {
+    ref: forwardedRef
+  }));
+});
+var StyledDivider = styled(_Separator)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: ", ";\n  }\n  &[data-orientation='vertical'] {\n    height: ", ";\n    width: 1px;\n  }\n"])), function (_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? divider : _ref$color;
   return color;

package/dist/src/Common/Divider/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport * as SeparatorPrimitive from '@radix-ui/react-separator';\nimport { divider } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport interface DividerProps extends SeparatorPrimitive.SeparatorProps {\n  color?: string;\n  $width?: string | number;\n  $height?: string | number;\n}\n\nconst StyledDivider = styled(SeparatorPrimitive.Root)<DividerProps>`\n  background-color: ${({ color = divider }) => color};\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: ${({ $width = '100%' }) =>\n      typeof $width === 'number' ? `${$width}px` : $width};\n  }\n  &[data-orientation='vertical'] {\n    height: ${({ $height = '100%' }) =>\n      typeof $height === 'number' ? `${$height}px` : $height};\n    width: 1px;\n  }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["color","$width","$height"],"mappings":";;;;;;;;AAAa;AAAA;AAAA;AAYb;AACsB;AAAGA;AAAe;AAAY;AAGvC;AAAGC;;AACyC;AAG3C;AAAGC;;AAC2C;;AAK5D;AACA;AACA;AACA;;;AAC4E;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Common/Divider/index.tsx"],"sourcesContent":["'use client';\n\nimport { divider } from '@remember-web/mixin';\nimport { forwardRef } from 'react';\nimport styled from 'styled-components';\n\ninterface SeparatorProps extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * Either `vertical` or `horizontal`. Defaults to `horizontal`.\n   */\n  orientation?: (typeof ORIENTATIONS)[number];\n  /**\n   * Whether or not the component is purely decorative. When true, accessibility-related attributes\n   * are updated so that that the rendered element is removed from the accessibility tree.\n   */\n  decorative?: boolean;\n}\n\nexport interface DividerProps extends SeparatorProps {\n  color?: string;\n  $width?: string | number;\n  $height?: string | number;\n}\n\nconst DEFAULT_ORIENTATION = 'horizontal';\nconst ORIENTATIONS = ['horizontal', 'vertical'] as const;\n\nfunction isValidOrientation(\n  orientation: any\n): orientation is (typeof ORIENTATIONS)[number] {\n  return ORIENTATIONS.includes(orientation);\n}\n\nconst _Separator = forwardRef<React.ComponentRef<'div'>, SeparatorProps>(\n  (props, forwardedRef) => {\n    const {\n      decorative,\n      orientation: orientationProp = DEFAULT_ORIENTATION,\n      ...domProps\n    } = props;\n    const orientation = isValidOrientation(orientationProp)\n      ? orientationProp\n      : DEFAULT_ORIENTATION;\n    // `aria-orientation` defaults to `horizontal` so we only need it if `orientation` is vertical\n    const ariaOrientation =\n      orientation === 'vertical' ? orientation : undefined;\n    const semanticProps = decorative\n      ? { role: 'none' }\n      : { 'aria-orientation': ariaOrientation, role: 'separator' };\n\n    return (\n      <div\n        data-orientation={orientation}\n        {...semanticProps}\n        {...domProps}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\nconst StyledDivider = styled(_Separator)<DividerProps>`\n  background-color: ${({ color = divider }) => color};\n  &[data-orientation='horizontal'] {\n    height: 1px;\n    width: ${({ $width = '100%' }) =>\n      typeof $width === 'number' ? `${$width}px` : $width};\n  }\n  &[data-orientation='vertical'] {\n    height: ${({ $height = '100%' }) =>\n      typeof $height === 'number' ? `${$height}px` : $height};\n    width: 1px;\n  }\n`;\n\n/**\n * @prop {\"horizontal\" | \"vertical\"} orientation - default: \"horizontal\"\n * @prop {boolean} decorative - pure한 장식 컴포넌트 여부. true일 경우 웹 접근성 속성에서 제거됨.\n */\nexport const Divider = (props: DividerProps) => <StyledDivider {...props} />;\n"],"names":["orientationProp","domProps","role","ref","color","$width","$height"],"mappings":";;;;;;;;;AAAa;AAAA;AAAA;AAAA;AAwBb;AACA;AAEA;AAGE;AACF;AAEA;AAEI;;AAEeA;AACVC;;AAKL;;;AAIMC;AAAa;AACb;AAAqCA;;AAE3C;;;AAKIC;AAAkB;AAGxB;AAGF;AACsB;AAAGC;AAAe;AAAY;AAGvC;AAAGC;;AACyC;AAG3C;AAAGC;;AAC2C;;AAK5D;AACA;AACA;AACA;;;AAC4E;;"}

package/dist/src/ModalScreen/index.cjs.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var mixin = require('@remember-web/mixin');
+var index = require('../Common/Divider/index.cjs.js');
+require('../Common/Flex/index.cjs.js');
+require('../Common/Grid/index.cjs.js');
+require('@remember-web/icon');
+require('../Common/Spinner/styles.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+require('../Common/Skeleton/styles.cjs.js');
+var index$1 = require('../Common/Typography/index.cjs.js');
+require('../Common/Typography/styles.cjs.js');
+var styles = require('./styles.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ModalScreenHeader = function ModalScreenHeader(props) {
+  var _props$divider = props.divider,
+    divider = _props$divider === void 0 ? true : _props$divider;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(styles.StyledModalScreenHeader, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(styles.StyledModalScreenLeftElement, {
+        "data-layout": props.type || 'default',
+        children: [typeof props.title === 'string' ? /*#__PURE__*/jsxRuntime.jsx(index$1.Typography, {
+          variant: "Title1",
+          color: mixin.contents000,
+          ellipsis: 1,
+          children: props.title
+        }) : props.title, (props.type === 'vertical' || props.type === 'horizontal') && (typeof props.description === 'string' ? /*#__PURE__*/jsxRuntime.jsx(index$1.Typography, _objectSpread(_objectSpread({
+          variant: "UIBody2",
+          color: mixin.contents200
+        }, props.type === 'horizontal' && {
+          ellipsis: 1
+        }), {}, {
+          children: props.description
+        })) : props.description)]
+      }), props.rightElement]
+    }), divider && /*#__PURE__*/jsxRuntime.jsx(index.Divider, {})]
+  });
+};
+var ModalScreenBottom = function ModalScreenBottom(props) {
+  var _props$divider2 = props.divider,
+    divider = _props$divider2 === void 0 ? true : _props$divider2;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [divider && /*#__PURE__*/jsxRuntime.jsx(index.Divider, {}), /*#__PURE__*/jsxRuntime.jsxs(styles.StyledModalScreenBottom, {
+      children: [props.leftElement, props.rightElement]
+    })]
+  });
+};
+var ModalScreen = {
+  Header: ModalScreenHeader,
+  Bottom: ModalScreenBottom
+};
+
+exports.ModalScreen = ModalScreen;
+//# sourceMappingURL=index.cjs.js.map

package/dist/src/ModalScreen/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/ModalScreen/index.tsx"],"sourcesContent":["import { contents000, contents200 } from '@remember-web/mixin';\nimport type { ReactNode } from 'react';\nimport { Divider, Typography } from '@/Common';\nimport {\n  StyledModalScreenBottom,\n  StyledModalScreenHeader,\n  StyledModalScreenLeftElement,\n} from './styles';\n\ntype ModalScreenHeaderProps = {\n  title: ReactNode;\n  rightElement?: ReactNode;\n  divider?: boolean;\n} & (\n  | { type?: 'default' }\n  | { type: 'vertical' | 'horizontal'; description: ReactNode }\n);\n\nconst ModalScreenHeader = (props: ModalScreenHeaderProps) => {\n  const { divider = true } = props;\n\n  return (\n    <>\n      <StyledModalScreenHeader>\n        <StyledModalScreenLeftElement data-layout={props.type || 'default'}>\n          {typeof props.title === 'string' ? (\n            <Typography variant=\"Title1\" color={contents000} ellipsis={1}>\n              {props.title}\n            </Typography>\n          ) : (\n            props.title\n          )}\n          {(props.type === 'vertical' || props.type === 'horizontal') &&\n            (typeof props.description === 'string' ? (\n              <Typography\n                variant=\"UIBody2\"\n                color={contents200}\n                {...(props.type === 'horizontal' && { ellipsis: 1 })}\n              >\n                {props.description}\n              </Typography>\n            ) : (\n              props.description\n            ))}\n        </StyledModalScreenLeftElement>\n        {props.rightElement}\n      </StyledModalScreenHeader>\n      {divider && <Divider />}\n    </>\n  );\n};\n\ntype ModalScreenBottomProps = {\n  rightElement: ReactNode;\n  leftElement?: ReactNode;\n  divider?: boolean;\n};\n\nconst ModalScreenBottom = (props: ModalScreenBottomProps) => {\n  const { divider = true } = props;\n\n  return (\n    <>\n      {divider && <Divider />}\n      <StyledModalScreenBottom>\n        {props.leftElement}\n        {props.rightElement}\n      </StyledModalScreenBottom>\n    </>\n  );\n};\n\nconst ModalScreen = {\n  Header: ModalScreenHeader,\n  Bottom: ModalScreenBottom,\n};\n\nexport type { ModalScreenHeaderProps, ModalScreenBottomProps };\nexport { ModalScreen };\n"],"names":["ModalScreenHeader","props","_props$divider","divider","_jsxs","_Fragment","children","StyledModalScreenHeader","StyledModalScreenLeftElement","type","title","_jsx","Typography","variant","color","contents000","ellipsis","description","_objectSpread","contents200","rightElement","Divider","ModalScreenBottom","_props$divider2","StyledModalScreenBottom","leftElement","ModalScreen","Header","Bottom"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAA6B,EAAK;AAC3D,EAAA,IAAAC,cAAA,GAA2BD,KAAK,CAAxBE,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,cAAA;EAEtB,oBACEE,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,cACEF,eAAA,CAACG,8BAAuB,EAAA;MAAAD,QAAA,EAAA,cACtBF,eAAA,CAACI,mCAA4B,EAAA;AAAC,QAAA,aAAA,EAAaP,KAAK,CAACQ,IAAI,IAAI,SAAU;QAAAH,QAAA,EAAA,CAChE,OAAOL,KAAK,CAACS,KAAK,KAAK,QAAQ,gBAC9BC,cAAA,CAACC,kBAAU,EAAA;AAACC,UAAAA,OAAO,EAAC,QAAQ;AAACC,UAAAA,KAAK,EAAEC,iBAAY;AAACC,UAAAA,QAAQ,EAAE,CAAE;UAAAV,QAAA,EAC1DL,KAAK,CAACS;AAAK,SACF,CAAC,GAEbT,KAAK,CAACS,KACP,EACA,CAACT,KAAK,CAACQ,IAAI,KAAK,UAAU,IAAIR,KAAK,CAACQ,IAAI,KAAK,YAAY,MACvD,OAAOR,KAAK,CAACgB,WAAW,KAAK,QAAQ,gBACpCN,cAAA,CAACC,kBAAU,EAAAM,aAAA,CAAAA,aAAA,CAAA;AACTL,UAAAA,OAAO,EAAC,SAAS;AACjBC,UAAAA,KAAK,EAAEK;AAAY,SAAA,EACdlB,KAAK,CAACQ,IAAI,KAAK,YAAY,IAAI;AAAEO,UAAAA,QAAQ,EAAE;SAAG,CAAA,EAAA,EAAA,EAAA;UAAAV,QAAA,EAElDL,KAAK,CAACgB;AAAW,SAAA,CACR,CAAC,GAEbhB,KAAK,CAACgB,WACP,CAAC;AAAA,OACwB,CAAC,EAC9BhB,KAAK,CAACmB,YAAY;KACI,CAAC,EACzBjB,OAAO,iBAAIQ,cAAA,CAACU,aAAO,IAAE,CAAC;AAAA,GACvB,CAAC;AAEP,CAAC;AAQD,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIrB,KAA6B,EAAK;AAC3D,EAAA,IAAAsB,eAAA,GAA2BtB,KAAK,CAAxBE,OAAO;AAAPA,IAAAA,OAAO,GAAAoB,eAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,eAAA;EAEtB,oBACEnB,eAAA,CAAAC,mBAAA,EAAA;IAAAC,QAAA,EAAA,CACGH,OAAO,iBAAIQ,cAAA,CAACU,aAAO,EAAA,EAAE,CAAC,eACvBjB,eAAA,CAACoB,8BAAuB,EAAA;AAAAlB,MAAAA,QAAA,GACrBL,KAAK,CAACwB,WAAW,EACjBxB,KAAK,CAACmB,YAAY;AAAA,KACI,CAAC;AAAA,GAC1B,CAAC;AAEP,CAAC;AAED,IAAMM,WAAW,GAAG;AAClBC,EAAAA,MAAM,EAAE3B,iBAAiB;AACzB4B,EAAAA,MAAM,EAAEN;AACV;;;;"}

package/dist/src/ModalScreen/index.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+type ModalScreenHeaderProps = {
+    title: ReactNode;
+    rightElement?: ReactNode;
+    divider?: boolean;
+} & ({
+    type?: 'default';
+} | {
+    type: 'vertical' | 'horizontal';
+    description: ReactNode;
+});
+type ModalScreenBottomProps = {
+    rightElement: ReactNode;
+    leftElement?: ReactNode;
+    divider?: boolean;
+};
+declare const ModalScreen: {
+    Header: (props: ModalScreenHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Bottom: (props: ModalScreenBottomProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type { ModalScreenHeaderProps, ModalScreenBottomProps };
+export { ModalScreen };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/ModalScreen/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ModalScreen/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,CACA;IAAE,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,GACpB;IAAE,IAAI,EAAE,UAAU,GAAG,YAAY,CAAC;IAAC,WAAW,EAAE,SAAS,CAAA;CAAE,CAC9D,CAAC;AAoCF,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgBF,QAAA,MAAM,WAAW;oBAtDiB,sBAAsB;oBAwCtB,sBAAsB;CAiBvD,CAAC;AAEF,YAAY,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/ModalScreen/index.esm.js

@@ -0,0 +1,57 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { contents000, contents200 } from '@remember-web/mixin';
+import { Divider } from '../Common/Divider/index.esm.js';
+import '../Common/Flex/index.esm.js';
+import '../Common/Grid/index.esm.js';
+import '@remember-web/icon';
+import '../Common/Spinner/styles.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import 'react';
+import '../Common/Skeleton/styles.esm.js';
+import { Typography } from '../Common/Typography/index.esm.js';
+import '../Common/Typography/styles.esm.js';
+import { StyledModalScreenBottom, StyledModalScreenHeader, StyledModalScreenLeftElement } from './styles.esm.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ModalScreenHeader = function ModalScreenHeader(props) {
+  var _props$divider = props.divider,
+    divider = _props$divider === void 0 ? true : _props$divider;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(StyledModalScreenHeader, {
+      children: [/*#__PURE__*/jsxs(StyledModalScreenLeftElement, {
+        "data-layout": props.type || 'default',
+        children: [typeof props.title === 'string' ? /*#__PURE__*/jsx(Typography, {
+          variant: "Title1",
+          color: contents000,
+          ellipsis: 1,
+          children: props.title
+        }) : props.title, (props.type === 'vertical' || props.type === 'horizontal') && (typeof props.description === 'string' ? /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
+          variant: "UIBody2",
+          color: contents200
+        }, props.type === 'horizontal' && {
+          ellipsis: 1
+        }), {}, {
+          children: props.description
+        })) : props.description)]
+      }), props.rightElement]
+    }), divider && /*#__PURE__*/jsx(Divider, {})]
+  });
+};
+var ModalScreenBottom = function ModalScreenBottom(props) {
+  var _props$divider2 = props.divider,
+    divider = _props$divider2 === void 0 ? true : _props$divider2;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [divider && /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsxs(StyledModalScreenBottom, {
+      children: [props.leftElement, props.rightElement]
+    })]
+  });
+};
+var ModalScreen = {
+  Header: ModalScreenHeader,
+  Bottom: ModalScreenBottom
+};
+
+export { ModalScreen };
+//# sourceMappingURL=index.esm.js.map

package/dist/src/ModalScreen/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../src/ModalScreen/index.tsx"],"sourcesContent":["import { contents000, contents200 } from '@remember-web/mixin';\nimport type { ReactNode } from 'react';\nimport { Divider, Typography } from '@/Common';\nimport {\n  StyledModalScreenBottom,\n  StyledModalScreenHeader,\n  StyledModalScreenLeftElement,\n} from './styles';\n\ntype ModalScreenHeaderProps = {\n  title: ReactNode;\n  rightElement?: ReactNode;\n  divider?: boolean;\n} & (\n  | { type?: 'default' }\n  | { type: 'vertical' | 'horizontal'; description: ReactNode }\n);\n\nconst ModalScreenHeader = (props: ModalScreenHeaderProps) => {\n  const { divider = true } = props;\n\n  return (\n    <>\n      <StyledModalScreenHeader>\n        <StyledModalScreenLeftElement data-layout={props.type || 'default'}>\n          {typeof props.title === 'string' ? (\n            <Typography variant=\"Title1\" color={contents000} ellipsis={1}>\n              {props.title}\n            </Typography>\n          ) : (\n            props.title\n          )}\n          {(props.type === 'vertical' || props.type === 'horizontal') &&\n            (typeof props.description === 'string' ? (\n              <Typography\n                variant=\"UIBody2\"\n                color={contents200}\n                {...(props.type === 'horizontal' && { ellipsis: 1 })}\n              >\n                {props.description}\n              </Typography>\n            ) : (\n              props.description\n            ))}\n        </StyledModalScreenLeftElement>\n        {props.rightElement}\n      </StyledModalScreenHeader>\n      {divider && <Divider />}\n    </>\n  );\n};\n\ntype ModalScreenBottomProps = {\n  rightElement: ReactNode;\n  leftElement?: ReactNode;\n  divider?: boolean;\n};\n\nconst ModalScreenBottom = (props: ModalScreenBottomProps) => {\n  const { divider = true } = props;\n\n  return (\n    <>\n      {divider && <Divider />}\n      <StyledModalScreenBottom>\n        {props.leftElement}\n        {props.rightElement}\n      </StyledModalScreenBottom>\n    </>\n  );\n};\n\nconst ModalScreen = {\n  Header: ModalScreenHeader,\n  Bottom: ModalScreenBottom,\n};\n\nexport type { ModalScreenHeaderProps, ModalScreenBottomProps };\nexport { ModalScreen };\n"],"names":["ModalScreenHeader","props","_props$divider","divider","_jsxs","_Fragment","children","StyledModalScreenHeader","StyledModalScreenLeftElement","type","title","_jsx","Typography","variant","color","contents000","ellipsis","description","_objectSpread","contents200","rightElement","Divider","ModalScreenBottom","_props$divider2","StyledModalScreenBottom","leftElement","ModalScreen","Header","Bottom"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAA6B,EAAK;AAC3D,EAAA,IAAAC,cAAA,GAA2BD,KAAK,CAAxBE,OAAO;AAAPA,IAAAA,OAAO,GAAAD,cAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,cAAA;EAEtB,oBACEE,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,cACEF,IAAA,CAACG,uBAAuB,EAAA;MAAAD,QAAA,EAAA,cACtBF,IAAA,CAACI,4BAA4B,EAAA;AAAC,QAAA,aAAA,EAAaP,KAAK,CAACQ,IAAI,IAAI,SAAU;QAAAH,QAAA,EAAA,CAChE,OAAOL,KAAK,CAACS,KAAK,KAAK,QAAQ,gBAC9BC,GAAA,CAACC,UAAU,EAAA;AAACC,UAAAA,OAAO,EAAC,QAAQ;AAACC,UAAAA,KAAK,EAAEC,WAAY;AAACC,UAAAA,QAAQ,EAAE,CAAE;UAAAV,QAAA,EAC1DL,KAAK,CAACS;AAAK,SACF,CAAC,GAEbT,KAAK,CAACS,KACP,EACA,CAACT,KAAK,CAACQ,IAAI,KAAK,UAAU,IAAIR,KAAK,CAACQ,IAAI,KAAK,YAAY,MACvD,OAAOR,KAAK,CAACgB,WAAW,KAAK,QAAQ,gBACpCN,GAAA,CAACC,UAAU,EAAAM,aAAA,CAAAA,aAAA,CAAA;AACTL,UAAAA,OAAO,EAAC,SAAS;AACjBC,UAAAA,KAAK,EAAEK;AAAY,SAAA,EACdlB,KAAK,CAACQ,IAAI,KAAK,YAAY,IAAI;AAAEO,UAAAA,QAAQ,EAAE;SAAG,CAAA,EAAA,EAAA,EAAA;UAAAV,QAAA,EAElDL,KAAK,CAACgB;AAAW,SAAA,CACR,CAAC,GAEbhB,KAAK,CAACgB,WACP,CAAC;AAAA,OACwB,CAAC,EAC9BhB,KAAK,CAACmB,YAAY;KACI,CAAC,EACzBjB,OAAO,iBAAIQ,GAAA,CAACU,OAAO,IAAE,CAAC;AAAA,GACvB,CAAC;AAEP,CAAC;AAQD,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIrB,KAA6B,EAAK;AAC3D,EAAA,IAAAsB,eAAA,GAA2BtB,KAAK,CAAxBE,OAAO;AAAPA,IAAAA,OAAO,GAAAoB,eAAA,KAAA,MAAA,GAAG,IAAI,GAAAA,eAAA;EAEtB,oBACEnB,IAAA,CAAAC,QAAA,EAAA;IAAAC,QAAA,EAAA,CACGH,OAAO,iBAAIQ,GAAA,CAACU,OAAO,EAAA,EAAE,CAAC,eACvBjB,IAAA,CAACoB,uBAAuB,EAAA;AAAAlB,MAAAA,QAAA,GACrBL,KAAK,CAACwB,WAAW,EACjBxB,KAAK,CAACmB,YAAY;AAAA,KACI,CAAC;AAAA,GAC1B,CAAC;AAEP,CAAC;AAED,IAAMM,WAAW,GAAG;AAClBC,EAAAA,MAAM,EAAE3B,iBAAiB;AACzB4B,EAAAA,MAAM,EAAEN;AACV;;;;"}

package/dist/src/ModalScreen/radix.cjs.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var index = require('./index.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ModalScreenHeader = function ModalScreenHeader(props) {
+  var _props$title;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      style: {
+        position: 'absolute',
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: 'hidden',
+        clip: 'rect(0, 0, 0, 0)',
+        whiteSpace: 'nowrap',
+        wordWrap: 'normal'
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(DialogPrimitive.DialogTitle, {
+        children: (_props$title = props.title) === null || _props$title === void 0 ? void 0 : _props$title.toString()
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(index.ModalScreen.Header, _objectSpread({}, props))]
+  });
+};
+var ModalScreen = {
+  Dialog: DialogPrimitive.Dialog,
+  Overlay: DialogPrimitive.DialogOverlay,
+  Trigger: DialogPrimitive.DialogTrigger,
+  Portal: DialogPrimitive.DialogPortal,
+  Header: ModalScreenHeader,
+  Description: DialogPrimitive.DialogDescription,
+  Content: DialogPrimitive.DialogContent,
+  Bottom: index.ModalScreen.Bottom,
+  Close: DialogPrimitive.DialogClose
+};
+
+exports.ModalScreen = ModalScreen;
+//# sourceMappingURL=radix.cjs.js.map

package/dist/src/ModalScreen/radix.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix.cjs.js","sources":["../../../src/ModalScreen/radix.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from '@radix-ui/react-dialog';\nimport type { ModalScreenBottomProps, ModalScreenHeaderProps } from './index';\nimport { ModalScreen as BaseModalScreen } from './index';\n\n/**\n * Radix UI Dialog를 사용하는 프로젝트를 위한 ModalScreen 컴포넌트\n *\n * @example\n * ```tsx\n * import { ModalScreen } from '@remember-web/primitive/radix';\n *\n * <Dialog.Root open={isOpen}>\n *   <Dialog.Portal>\n *     <Dialog.Content>\n *       <ModalScreen.Header\n *         title=\"제목\"\n *         rightElement={<CloseButton />}\n *       />\n *       <ModalScreen.Bottom\n *         rightElement={<Button>확인</Button>}\n *       />\n *     </Dialog.Content>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\n\n/**\n * Radix UI DialogTitle로 래핑된 ModalScreen.Header\n * 접근성을 위해 DialogTitle이 필수인 Radix UI Dialog에서 사용\n */\nconst ModalScreenHeader = (props: ModalScreenHeaderProps) => {\n  return (\n    <>\n      <span\n        style={{\n          position: 'absolute',\n          border: 0,\n          width: 1,\n          height: 1,\n          padding: 0,\n          margin: -1,\n          overflow: 'hidden',\n          clip: 'rect(0, 0, 0, 0)',\n          whiteSpace: 'nowrap',\n          wordWrap: 'normal',\n        }}\n      >\n        <DialogTitle>{props.title?.toString()}</DialogTitle>\n      </span>\n      <BaseModalScreen.Header {...props} />\n    </>\n  );\n};\n\nexport const ModalScreen = {\n  Dialog,\n  Overlay: DialogOverlay,\n  Trigger: DialogTrigger,\n  Portal: DialogPortal,\n  Header: ModalScreenHeader,\n  Description: DialogDescription,\n  Content: DialogContent,\n  Bottom: BaseModalScreen.Bottom,\n  Close: DialogClose,\n};\n\nexport type { ModalScreenBottomProps, ModalScreenHeaderProps };\n"],"names":["ModalScreenHeader","props","_props$title","_jsxs","_Fragment","children","_jsx","style","position","border","width","height","padding","margin","overflow","clip","whiteSpace","wordWrap","DialogTitle","title","toString","BaseModalScreen","Header","_objectSpread","ModalScreen","Dialog","Overlay","DialogOverlay","Trigger","DialogTrigger","Portal","DialogPortal","Description","DialogDescription","Content","DialogContent","Bottom","Close","DialogClose"],"mappings":";;;;;;;;;;;;;AAwCA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAA6B,EAAK;AAAA,EAAA,IAAAC,YAAA;EAC3D,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEC,cAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,KAAK,EAAE;AACLC,QAAAA,QAAQ,EAAE,UAAU;AACpBC,QAAAA,MAAM,EAAE,CAAC;AACTC,QAAAA,KAAK,EAAE,CAAC;AACRC,QAAAA,MAAM,EAAE,CAAC;AACTC,QAAAA,OAAO,EAAE,CAAC;QACVC,MAAM,EAAE,EAAE;AACVC,QAAAA,QAAQ,EAAE,QAAQ;AAClBC,QAAAA,IAAI,EAAE,kBAAkB;AACxBC,QAAAA,UAAU,EAAE,QAAQ;AACpBC,QAAAA,QAAQ,EAAE;OACV;MAAAZ,QAAA,eAEFC,cAAA,CAACY,2BAAW,EAAA;AAAAb,QAAAA,QAAA,EAAA,CAAAH,YAAA,GAAED,KAAK,CAACkB,KAAK,MAAA,IAAA,IAAAjB,YAAA,KAAA,MAAA,GAAA,MAAA,GAAXA,YAAA,CAAakB,QAAQ;OAAgB;AAAC,KAChD,CAAC,eACPd,cAAA,CAACe,iBAAe,CAACC,MAAM,EAAAC,aAAA,CAAA,EAAA,EAAKtB,KAAK,CAAG,CAAC;AAAA,GACrC,CAAC;AAEP,CAAC;AAEM,IAAMuB,WAAW,GAAG;AACzBC,EAAAA,MAAM,EAANA,sBAAM;AACNC,EAAAA,OAAO,EAAEC,6BAAa;AACtBC,EAAAA,OAAO,EAAEC,6BAAa;AACtBC,EAAAA,MAAM,EAAEC,4BAAY;AACpBT,EAAAA,MAAM,EAAEtB,iBAAiB;AACzBgC,EAAAA,WAAW,EAAEC,iCAAiB;AAC9BC,EAAAA,OAAO,EAAEC,6BAAa;EACtBC,MAAM,EAAEf,iBAAe,CAACe,MAAM;AAC9BC,EAAAA,KAAK,EAAEC;AACT;;;;"}

package/dist/src/ModalScreen/radix.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ModalScreenBottomProps, ModalScreenHeaderProps } from './index';
+export declare const ModalScreen: {
+    Dialog: import("react").FC<import("@radix-ui/react-dialog").DialogProps>;
+    Overlay: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: import("react").FC<import("@radix-ui/react-dialog").DialogPortalProps>;
+    Header: (props: ModalScreenHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Description: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Bottom: (props: ModalScreenBottomProps) => import("react/jsx-runtime").JSX.Element;
+    Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type { ModalScreenBottomProps, ModalScreenHeaderProps };
+//# sourceMappingURL=radix.d.ts.map

package/dist/src/ModalScreen/radix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix.d.ts","sourceRoot":"","sources":["../../../src/ModalScreen/radix.tsx"],"names":[],"mappings":";AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAsD9E,eAAO,MAAM,WAAW;;;;;oBAxBU,sBAAsB;;;;;CAkCvD,CAAC;AAEF,YAAY,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/src/ModalScreen/radix.esm.js

@@ -0,0 +1,43 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { DialogClose, DialogContent, DialogDescription, DialogPortal, DialogTrigger, DialogOverlay, Dialog, DialogTitle } from '@radix-ui/react-dialog';
+import { ModalScreen as ModalScreen$1 } from './index.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ModalScreenHeader = function ModalScreenHeader(props) {
+  var _props$title;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("span", {
+      style: {
+        position: 'absolute',
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: 'hidden',
+        clip: 'rect(0, 0, 0, 0)',
+        whiteSpace: 'nowrap',
+        wordWrap: 'normal'
+      },
+      children: /*#__PURE__*/jsx(DialogTitle, {
+        children: (_props$title = props.title) === null || _props$title === void 0 ? void 0 : _props$title.toString()
+      })
+    }), /*#__PURE__*/jsx(ModalScreen$1.Header, _objectSpread({}, props))]
+  });
+};
+var ModalScreen = {
+  Dialog: Dialog,
+  Overlay: DialogOverlay,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Header: ModalScreenHeader,
+  Description: DialogDescription,
+  Content: DialogContent,
+  Bottom: ModalScreen$1.Bottom,
+  Close: DialogClose
+};
+
+export { ModalScreen };
+//# sourceMappingURL=radix.esm.js.map

package/dist/src/ModalScreen/radix.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix.esm.js","sources":["../../../src/ModalScreen/radix.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n} from '@radix-ui/react-dialog';\nimport type { ModalScreenBottomProps, ModalScreenHeaderProps } from './index';\nimport { ModalScreen as BaseModalScreen } from './index';\n\n/**\n * Radix UI Dialog를 사용하는 프로젝트를 위한 ModalScreen 컴포넌트\n *\n * @example\n * ```tsx\n * import { ModalScreen } from '@remember-web/primitive/radix';\n *\n * <Dialog.Root open={isOpen}>\n *   <Dialog.Portal>\n *     <Dialog.Content>\n *       <ModalScreen.Header\n *         title=\"제목\"\n *         rightElement={<CloseButton />}\n *       />\n *       <ModalScreen.Bottom\n *         rightElement={<Button>확인</Button>}\n *       />\n *     </Dialog.Content>\n *   </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\n\n/**\n * Radix UI DialogTitle로 래핑된 ModalScreen.Header\n * 접근성을 위해 DialogTitle이 필수인 Radix UI Dialog에서 사용\n */\nconst ModalScreenHeader = (props: ModalScreenHeaderProps) => {\n  return (\n    <>\n      <span\n        style={{\n          position: 'absolute',\n          border: 0,\n          width: 1,\n          height: 1,\n          padding: 0,\n          margin: -1,\n          overflow: 'hidden',\n          clip: 'rect(0, 0, 0, 0)',\n          whiteSpace: 'nowrap',\n          wordWrap: 'normal',\n        }}\n      >\n        <DialogTitle>{props.title?.toString()}</DialogTitle>\n      </span>\n      <BaseModalScreen.Header {...props} />\n    </>\n  );\n};\n\nexport const ModalScreen = {\n  Dialog,\n  Overlay: DialogOverlay,\n  Trigger: DialogTrigger,\n  Portal: DialogPortal,\n  Header: ModalScreenHeader,\n  Description: DialogDescription,\n  Content: DialogContent,\n  Bottom: BaseModalScreen.Bottom,\n  Close: DialogClose,\n};\n\nexport type { ModalScreenBottomProps, ModalScreenHeaderProps };\n"],"names":["ModalScreenHeader","props","_props$title","_jsxs","_Fragment","children","_jsx","style","position","border","width","height","padding","margin","overflow","clip","whiteSpace","wordWrap","DialogTitle","title","toString","BaseModalScreen","Header","_objectSpread","ModalScreen","Dialog","Overlay","DialogOverlay","Trigger","DialogTrigger","Portal","DialogPortal","Description","DialogDescription","Content","DialogContent","Bottom","Close","DialogClose"],"mappings":";;;;;;;AAwCA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAA6B,EAAK;AAAA,EAAA,IAAAC,YAAA;EAC3D,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAC,IAAAA,QAAA,gBACEC,GAAA,CAAA,MAAA,EAAA;AACEC,MAAAA,KAAK,EAAE;AACLC,QAAAA,QAAQ,EAAE,UAAU;AACpBC,QAAAA,MAAM,EAAE,CAAC;AACTC,QAAAA,KAAK,EAAE,CAAC;AACRC,QAAAA,MAAM,EAAE,CAAC;AACTC,QAAAA,OAAO,EAAE,CAAC;QACVC,MAAM,EAAE,EAAE;AACVC,QAAAA,QAAQ,EAAE,QAAQ;AAClBC,QAAAA,IAAI,EAAE,kBAAkB;AACxBC,QAAAA,UAAU,EAAE,QAAQ;AACpBC,QAAAA,QAAQ,EAAE;OACV;MAAAZ,QAAA,eAEFC,GAAA,CAACY,WAAW,EAAA;AAAAb,QAAAA,QAAA,EAAA,CAAAH,YAAA,GAAED,KAAK,CAACkB,KAAK,MAAA,IAAA,IAAAjB,YAAA,KAAA,MAAA,GAAA,MAAA,GAAXA,YAAA,CAAakB,QAAQ;OAAgB;AAAC,KAChD,CAAC,eACPd,GAAA,CAACe,aAAe,CAACC,MAAM,EAAAC,aAAA,CAAA,EAAA,EAAKtB,KAAK,CAAG,CAAC;AAAA,GACrC,CAAC;AAEP,CAAC;AAEM,IAAMuB,WAAW,GAAG;AACzBC,EAAAA,MAAM,EAANA,MAAM;AACNC,EAAAA,OAAO,EAAEC,aAAa;AACtBC,EAAAA,OAAO,EAAEC,aAAa;AACtBC,EAAAA,MAAM,EAAEC,YAAY;AACpBT,EAAAA,MAAM,EAAEtB,iBAAiB;AACzBgC,EAAAA,WAAW,EAAEC,iBAAiB;AAC9BC,EAAAA,OAAO,EAAEC,aAAa;EACtBC,MAAM,EAAEf,aAAe,CAACe,MAAM;AAC9BC,EAAAA,KAAK,EAAEC;AACT;;;;"}

package/dist/src/ModalScreen/styles.cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var mixin = require('@remember-web/mixin');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var StyledModalScreenHeader = styled__default.default.header(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  background-color: ", ";\n  padding: 24px;\n  border-radius: 8px 8px 0 0;\n\n  &:not(:has(> :only-child)) {\n    align-items: flex-start;\n  }\n  \n  &:has(> [data-layout='vertical']) {\n    padding-bottom: 16px;\n  }\n\n  ", "\n"])), mixin.bgModal100, mixin.mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n    border-radius: 0;\n  "]))));
+var StyledModalScreenLeftElement = styled__default.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: 8px;\n\n  &[data-layout='vertical'] {\n    grid-auto-flow: row;\n    align-items: flex-start;\n  }\n"])));
+var StyledModalScreenBottom = styled__default.default.footer(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding: 14px 24px;\n  border-radius: 0 0 8px 8px;\n  background-color: ", ";\n\n  &:has(> :only-child) {\n    justify-content: flex-end;\n  }\n\n  ", "\n"])), mixin.bgModal100, mixin.mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n    border-radius: 0;\n  "]))));
+
+exports.StyledModalScreenBottom = StyledModalScreenBottom;
+exports.StyledModalScreenHeader = StyledModalScreenHeader;
+exports.StyledModalScreenLeftElement = StyledModalScreenLeftElement;
+//# sourceMappingURL=styles.cjs.js.map

package/dist/src/ModalScreen/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../src/ModalScreen/styles.ts"],"sourcesContent":["import { bgModal100, mobileOnly } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const StyledModalScreenHeader = styled.header`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  background-color: ${bgModal100};\n  padding: 24px;\n  border-radius: 8px 8px 0 0;\n\n  &:not(:has(> :only-child)) {\n    align-items: flex-start;\n  }\n  \n  &:has(> [data-layout='vertical']) {\n    padding-bottom: 16px;\n  }\n\n  ${mobileOnly`\n    border-radius: 0;\n  `}\n`;\n\nexport const StyledModalScreenLeftElement = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: 8px;\n\n  &[data-layout='vertical'] {\n    grid-auto-flow: row;\n    align-items: flex-start;\n  }\n`;\n\nexport const StyledModalScreenBottom = styled.footer`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding: 14px 24px;\n  border-radius: 0 0 8px 8px;\n  background-color: ${bgModal100};\n\n  &:has(> :only-child) {\n    justify-content: flex-end;\n  }\n\n  ${mobileOnly`\n    border-radius: 0;\n  `}\n`;\n"],"names":["StyledModalScreenHeader","styled","header","_templateObject","_taggedTemplateLiteral","bgModal100","mobileOnly","_templateObject2","StyledModalScreenLeftElement","div","_templateObject3","StyledModalScreenBottom","footer","_templateObject4","_templateObject5"],"mappings":";;;;;;;;;;;;AAGO,IAAMA,uBAAuB,GAAGC,uBAAM,CAACC,MAAM,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAAA,CAAA,mHAAA,EAAA,0MAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAK9BC,gBAAU,EAY5BC,gBAAU,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,uCAAA,CAAA,CAAA,6BAAA,CAAA,CAAA,CAAA,CAAA;AAKP,IAAMI,4BAA4B,GAAGP,uBAAM,CAACQ,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,uCAAA,CAAA,CAAA,oLAAA,CAAA,CAAA,CAAA;AAY/C,IAAMO,uBAAuB,GAAGV,uBAAM,CAACW,MAAM,CAAAC,gBAAA,KAAAA,gBAAA,GAAAT,uCAAA,CAAA,CAAA,yKAAA,EAAA,0EAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAO9BC,gBAAU,EAM5BC,gBAAU,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAV,uCAAA,CAAA,CAAA,6BAAA,CAAA,CAAA,CAAA,CAAA;;;;;;"}

package/dist/src/ModalScreen/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledModalScreenHeader: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+export declare const StyledModalScreenLeftElement: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledModalScreenBottom: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/src/ModalScreen/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ModalScreen/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,uBAAuB,0MAoBnC,CAAC;AAEF,eAAO,MAAM,4BAA4B,gNAUxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,0MAgBnC,CAAC"}

package/dist/src/ModalScreen/styles.esm.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { bgModal100, mobileOnly } from '@remember-web/mixin';
+import styled from 'styled-components';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var StyledModalScreenHeader = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  background-color: ", ";\n  padding: 24px;\n  border-radius: 8px 8px 0 0;\n\n  &:not(:has(> :only-child)) {\n    align-items: flex-start;\n  }\n  \n  &:has(> [data-layout='vertical']) {\n    padding-bottom: 16px;\n  }\n\n  ", "\n"])), bgModal100, mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border-radius: 0;\n  "]))));
+var StyledModalScreenLeftElement = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: 8px;\n\n  &[data-layout='vertical'] {\n    grid-auto-flow: row;\n    align-items: flex-start;\n  }\n"])));
+var StyledModalScreenBottom = styled.footer(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding: 14px 24px;\n  border-radius: 0 0 8px 8px;\n  background-color: ", ";\n\n  &:has(> :only-child) {\n    justify-content: flex-end;\n  }\n\n  ", "\n"])), bgModal100, mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    border-radius: 0;\n  "]))));
+
+export { StyledModalScreenBottom, StyledModalScreenHeader, StyledModalScreenLeftElement };
+//# sourceMappingURL=styles.esm.js.map

package/dist/src/ModalScreen/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../src/ModalScreen/styles.ts"],"sourcesContent":["import { bgModal100, mobileOnly } from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const StyledModalScreenHeader = styled.header`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  background-color: ${bgModal100};\n  padding: 24px;\n  border-radius: 8px 8px 0 0;\n\n  &:not(:has(> :only-child)) {\n    align-items: flex-start;\n  }\n  \n  &:has(> [data-layout='vertical']) {\n    padding-bottom: 16px;\n  }\n\n  ${mobileOnly`\n    border-radius: 0;\n  `}\n`;\n\nexport const StyledModalScreenLeftElement = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  gap: 8px;\n\n  &[data-layout='vertical'] {\n    grid-auto-flow: row;\n    align-items: flex-start;\n  }\n`;\n\nexport const StyledModalScreenBottom = styled.footer`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 24px;\n  padding: 14px 24px;\n  border-radius: 0 0 8px 8px;\n  background-color: ${bgModal100};\n\n  &:has(> :only-child) {\n    justify-content: flex-end;\n  }\n\n  ${mobileOnly`\n    border-radius: 0;\n  `}\n`;\n"],"names":["StyledModalScreenHeader","styled","header","_templateObject","_taggedTemplateLiteral","bgModal100","mobileOnly","_templateObject2","StyledModalScreenLeftElement","div","_templateObject3","StyledModalScreenBottom","footer","_templateObject4","_templateObject5"],"mappings":";;;;;AAGO,IAAMA,uBAAuB,GAAGC,MAAM,CAACC,MAAM,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAAA,CAAA,mHAAA,EAAA,0MAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAK9BC,UAAU,EAY5BC,UAAU,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,CAAA,CAAA,6BAAA,CAAA,CAAA,CAAA,CAAA;AAKP,IAAMI,4BAA4B,GAAGP,MAAM,CAACQ,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,CAAA,CAAA,oLAAA,CAAA,CAAA,CAAA;AAY/C,IAAMO,uBAAuB,GAAGV,MAAM,CAACW,MAAM,CAAAC,gBAAA,KAAAA,gBAAA,GAAAT,sBAAA,CAAA,CAAA,yKAAA,EAAA,0EAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EAO9BC,UAAU,EAM5BC,UAAU,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAV,sBAAA,CAAA,CAAA,6BAAA,CAAA,CAAA,CAAA,CAAA;;;;"}