pds-dev-kit-web-test 2.7.630 → 2.7.632

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts

@@ -1,5 +1,5 @@
 import { CB_LAYOUT_PROP_KEYS } from './layoutPropParsers/types';
 import { CB_STYLE_PROP_KEYS } from './stylePropParsers/types';
-import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE, CB_VIDEOPLAYER_PROPERTIES_TYPE } from './types';
+import type { Device, ParserResult, CB_TEXT_PROPERTIES_TYPE, CB_BTN_PROPERTIES_TYPE, CB_IMG_PROPERTIES_TYPE, CB_TWITTER_PROPERTIES_TYPE, CB_DIVIDER_PROPERTIES_TYPE, CB_YOUTUBE_PROPERTIES_TYPE, CB_RICHTEXT_PROPERTIES_TYPE, CB_EMBED_PROPERTIES_TYPE, CB_LIST_PROPERTIES_TYPE, CB_CONTENTSCAROUSEL_PROPERTIES_TYPE, CB_SLIDEBANNER_PROPERTIES_TYPE, CB_VIDEOPLAYER_PROPERTIES_TYPE, CB_SHAPE_PROPERTIES_TYPE } from './types';
 export type specTypes = CB_LAYOUT_PROP_KEYS | CB_STYLE_PROP_KEYS;
-export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE | CB_VIDEOPLAYER_PROPERTIES_TYPE, device: Device): ParserResult;
+export default function parseProperties(properties: CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_EMBED_PROPERTIES_TYPE | CB_LIST_PROPERTIES_TYPE | CB_CONTENTSCAROUSEL_PROPERTIES_TYPE | CB_SLIDEBANNER_PROPERTIES_TYPE | CB_VIDEOPLAYER_PROPERTIES_TYPE | CB_SHAPE_PROPERTIES_TYPE, device: Device): ParserResult;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -2,7 +2,7 @@ import type { CB_STYLE_PROP_CONTENTSCAROUSELBUTTON_SPECS, CB_STYLE_PROP_CONTENTS
 import type { CB_LAYOUT_PROP_HEIGHT, CB_LAYOUT_PROP_HEIGHTADJUSTMENT_SPECS, CB_STYLE_PROP_CONTENTSLISTDESIGN_SPECS, CB_STYLE_PROP_CONTENTSLISTPAGINATION_SPECS } from '../components/ComponentBlock/componentBlocks/ContentsList/types';
 import type { CB_STYLE_PROP_SLIDEBANNERBUTTON_SPECS, CB_STYLE_PROP_SLIDEBANNERDESIGN_SPECS, CB_STYLE_PROP_SLIDEBANNERPAGINATION_SPECS, CB_STYLE_PROP_SLIDEBANNERPLAYBACKMETHOD_SPECS, CB_STYLE_PROP_SLIDEBANNERPROGRESSBAR_SPECS } from '../components/ComponentBlock/componentBlocks/SlideBanner/types';
 import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter/types';
-import type { CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER, CB_STYLE_PROP_COLOR_SPECS, CB_STYLE_PROP_TEXT_SPECS, CB_CONTENT_PROP_CONTENTSLIST, CB_CONTENT_PROP_VIDEO, CB_CONTENT_PROP_TEXTOPTION, CB_STYLE_PROP_TEXTOPTION } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_CONTENTSCAROUSEL, CB_CONTENT_PROP_SLIDEBANNER, CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CODEBLOCK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER, CB_STYLE_PROP_COLOR_SPECS, CB_STYLE_PROP_TEXT_SPECS, CB_CONTENT_PROP_CONTENTSLIST, CB_CONTENT_PROP_VIDEO, CB_CONTENT_PROP_TEXTOPTION, CB_STYLE_PROP_TEXTOPTION, CB_CONTENT_PROP_SHAPE_DESIGN } from '../components/ComponentBlock/componentBlocks/types';
 import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
 import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
 import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
@@ -70,6 +70,18 @@ export type CB_BTN_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
     CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
 };
+export type CB_SHAPE_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_SHAPE_DESIGN: CB_CONTENT_PROP_SHAPE_DESIGN;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
 export type CB_IMG_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
     CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
     CB_CONTENT_PROP_IMAGE: CB_CONTENT_PROP_IMAGE;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.7.630",
+  "version": "2.7.632",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.d.ts

@@ -1,53 +0,0 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-declare const ALL_SQS_SHAPES: {
-    SQUARE: string;
-    CIRCLE: string;
-    ROUNDED_SQUARE: string;
-    OVAL: string;
-    PILL: string;
-    ARCH: string;
-    UPSIDE_DOWN_ARCH: string;
-    SIDEWAYS_ARCH_LEFT: string;
-    SIDEWAYS_ARCH_RIGHT: string;
-    DOUBLE_ARCH: string;
-    TRIANGLE: string;
-    DIAMOND: string;
-    PENTAGON: string;
-    HEXAGON: string;
-    OCTAGON: string;
-    TRAPEZOID: string;
-    PARALLELOGRAM: string;
-    RHOMBUS: string;
-    STAR_4: string;
-    STAR_5: string;
-    STAR_8: string;
-    STAR_12: string;
-    BURST_1: string;
-    BURST_2: string;
-    LEAF_1: string;
-    LEAF_2: string;
-    BLOB_1: string;
-    BLOB_2: string;
-    BLOB_3: string;
-    WAVE: string;
-    TICKET: string;
-    SHIELD: string;
-    TV: string;
-    CROSS: string;
-    HEART: string;
-};
-export type ShapeType = keyof typeof ALL_SQS_SHAPES;
-interface ShapeImageProps {
-    src: string;
-    shape?: ShapeType;
-    normalStyle: CSSProperties;
-    hoverStyle: CSSProperties;
-    focalPoint?: {
-        x: number;
-        y: number;
-    };
-    className?: string;
-}
-declare const ShapeImage: React.FC<ShapeImageProps>;
-export default ShapeImage;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.js

@@ -1,141 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = __importStar(require("styled-components"));
-// 1. Squarespace Fluid Engine의 모든 핵심 Shape Paths
-var ALL_SQS_SHAPES = {
-    // --- BASIC ---
-    SQUARE: 'M0,0 L100,0 L100,100 L0,100 Z',
-    CIRCLE: 'M50,0A50,50,0,1,1,50,100A50,50,0,1,1,50,0',
-    ROUNDED_SQUARE: 'M0,20 Q0,0 20,0 L80,0 Q100,0 100,20 L100,80 Q100,100 80,100 L20,100 Q0,100 0,80 Z',
-    OVAL: 'M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z',
-    PILL: 'M0,50 C0,22.4 22.4,0 50,0 L50,0 C77.6,0 100,22.4 100,50 L100,50 C100,77.6 77.6,100 50,100 L50,100 C22.4,100 0,77.6 0,50 Z',
-    // --- ARCHES & CURVES ---
-    ARCH: 'M0,100 L0,50 C0,22.4 22.4,0 50,0 C77.6,0 100,22.4 100,50 L100,100 Z',
-    UPSIDE_DOWN_ARCH: 'M100,0 L100,50 C100,77.6 77.6,100 50,100 C22.4,100 0,77.6 0,50 L0,0 Z',
-    SIDEWAYS_ARCH_LEFT: 'M100,0 L50,0 C22.4,0 0,22.4 0,50 C0,77.6 22.4,100 50,100 L100,100 Z',
-    SIDEWAYS_ARCH_RIGHT: 'M0,0 L50,0 C77.6,0 100,22.4 100,50 C100,77.6 77.6,100 50,100 L0,100 Z',
-    DOUBLE_ARCH: 'M0,50 C0,22.4 22.4,0 50,0 S100,22.4 100,50 S77.6,100 50,100 S0,77.6 0,50 Z',
-    // --- POLYGONS ---
-    TRIANGLE: 'M50,0 L100,100 L0,100 Z',
-    DIAMOND: 'M50,0 L100,50 L50,100 L0,50 Z',
-    PENTAGON: 'M50,0 L100,38 L81,100 L19,100 L0,38 Z',
-    HEXAGON: 'M25,0 L75,0 L100,50 L75,100 L25,100 L0,50 Z',
-    OCTAGON: 'M30,0 L70,0 L100,30 L100,70 L70,100 L30,100 L0,70 L0,30 Z',
-    TRAPEZOID: 'M20,0 L80,0 L100,100 L0,100 Z',
-    PARALLELOGRAM: 'M20,0 L100,0 L80,100 L0,100 Z',
-    RHOMBUS: 'M30,0 L100,0 L70,100 L0,100 Z',
-    // --- STARS & BURSTS ---
-    STAR_4: 'M50,0 L60,40 L100,50 L60,60 L50,100 L40,60 L0,50 L40,40 Z',
-    STAR_5: 'M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z',
-    STAR_8: 'M50,0 L58,33 L85,15 L75,45 L100,50 L75,55 L85,85 L58,67 L50,100 L42,67 L15,85 L25,55 L0,50 L25,45 L15,15 L42,33 Z',
-    STAR_12: 'M50,0 L54,20 L73,12 L65,30 L85,30 L72,43 L85,57 L65,57 L73,75 L54,67 L50,85 L46,67 L27,75 L35,57 L15,57 L28,43 L15,30 L35,30 L27,12 L46,20 Z',
-    BURST_1: 'M50,0 L60,10 L80,0 L80,20 L100,20 L90,40 L100,60 L80,60 L80,80 L60,70 L50,80 L40,70 L20,80 L20,60 L0,60 L10,40 L0,20 L20,20 L20,0 L40,10 Z',
-    BURST_2: 'M50,5 L65,0 L75,15 L95,10 L90,30 L100,50 L90,70 L100,90 L75,85 L65,100 L50,95 L35,100 L25,85 L5,90 L10,70 L0,50 L10,30 L5,10 L25,15 L35,0 Z',
-    // --- ORGANIC & ABSTRACT ---
-    LEAF_1: 'M0,100 C0,100 0,0 100,0 C100,0 100,100 0,100 Z',
-    LEAF_2: 'M50,0 C100,0 100,50 100,100 C100,100 50,100 0,100 C0,50 0,0 50,0 Z',
-    BLOB_1: 'M85,30 C95,50 85,80 60,90 C35,100 10,80 5,50 C0,20 30,0 60,5 C80,10 75,10 85,30 Z',
-    BLOB_2: 'M90,40 C100,60 80,90 50,95 C20,100 0,80 0,50 C0,20 30,0 60,0 C80,0 80,20 90,40 Z',
-    BLOB_3: 'M50,0 C80,0 100,20 100,50 S80,100 50,100 S0,80 0,50 S20,0 50,0',
-    WAVE: 'M0,20 Q25,0 50,20 T100,20 L100,100 L0,100 Z',
-    // --- SPECIAL FRAMES ---
-    TICKET: 'M0,20 Q0,0 20,0 L80,0 Q100,0 100,20 L100,40 Q85,50 100,60 L100,80 Q100,100 80,100 L20,100 Q0,100 0,80 L0,60 Q15,50 0,40 Z',
-    SHIELD: 'M0,0 L100,0 L100,60 C100,85 50,100 50,100 C50,100 0,85 0,60 Z',
-    TV: 'M10,0 Q0,0 0,10 L0,90 Q0,100 10,100 L90,100 Q100,100 100,90 L100,10 Q100,0 90,0 Z M15,15 L85,15 L85,85 L15,85 Z',
-    CROSS: 'M35,0 L65,0 L65,35 L100,35 L100,65 L65,65 L65,100 L35,100 L35,65 L0,65 L0,35 L35,35 Z',
-    HEART: 'M50,30 C50,10 20,10 20,40 C20,70 50,90 50,90 C50,90 80,70 80,40 C80,10 50,10 50,30 Z'
-};
-var S_ImageContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 100%;\n  position: relative;\n  width: 100%;\n\n  ", ";\n  ", "\n\n  & img {\n    height: 100%;\n    object-fit: ", ";\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    ", "\n    width: 100%;\n  }\n\n  /* Hover \uC2DC \uADF8\uB9BC\uC790 \uBC0F \uC2A4\uD0C0\uC77C \uBCC0\uD654 */\n  &:hover {\n    ", ";\n    ", "\n  }\n"], ["\n  height: 100%;\n  position: relative;\n  width: 100%;\n\n  ", ";\n  ", "\n\n  & img {\n    height: 100%;\n    object-fit: ", ";\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    ", "\n    width: 100%;\n  }\n\n  /* Hover \uC2DC \uADF8\uB9BC\uC790 \uBC0F \uC2A4\uD0C0\uC77C \uBCC0\uD654 */\n  &:hover {\n    ", ";\n    ", "\n  }\n"])), function (_a) {
-    var normalStyle = _a.normalStyle;
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), normalStyle);
-}, function (_a) {
-    var hasShape = _a.hasShape, normalStyle = _a.normalStyle;
-    return hasShape &&
-        (normalStyle.boxShadow || normalStyle.shadow) && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      box-shadow: none !important;\n      filter: drop-shadow(", ");\n    "], ["\n      box-shadow: none !important;\n      filter: drop-shadow(", ");\n    "])), normalStyle.boxShadow || normalStyle.shadow);
-}, function (_a) {
-    var normalStyle = _a.normalStyle;
-    return normalStyle.backgroundSize === 'contain' ? 'contain' : 'cover';
-}, function (_a) {
-    var hasShape = _a.hasShape, maskId = _a.maskId;
-    return hasShape && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        -webkit-clip-path: url(#", ");\n        clip-path: url(#", ");\n      "], ["\n        -webkit-clip-path: url(#", ");\n        clip-path: url(#", ");\n      "])), maskId, maskId);
-}, function (_a) {
-    var hoverStyle = _a.hoverStyle;
-    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", "\n      "], ["\n        ", "\n      "])), hoverStyle);
-}, function (_a) {
-    var hasShape = _a.hasShape, hoverStyle = _a.hoverStyle;
-    return hasShape &&
-        (hoverStyle.boxShadow || hoverStyle.shadow) && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        filter: drop-shadow(", ");\n      "], ["\n        filter: drop-shadow(", ");\n      "])), hoverStyle.boxShadow || hoverStyle.shadow);
-});
-var S_ShapeSelect = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  z-index: 2;\n\n  select {\n    appearance: none;\n    background: rgba(0, 0, 0, 0.6);\n    border: 1px solid rgba(255, 255, 255, 0.4);\n    border-radius: 6px;\n    color: #fff;\n    font-size: 12px;\n    outline: none;\n    padding: 4px 8px;\n  }\n"], ["\n  position: absolute;\n  right: 8px;\n  top: 8px;\n  z-index: 2;\n\n  select {\n    appearance: none;\n    background: rgba(0, 0, 0, 0.6);\n    border: 1px solid rgba(255, 255, 255, 0.4);\n    border-radius: 6px;\n    color: #fff;\n    font-size: 12px;\n    outline: none;\n    padding: 4px 8px;\n  }\n"])));
-var ShapeImage = function (_a) {
-    var src = _a.src, shape = _a.shape, normalStyle = _a.normalStyle, hoverStyle = _a.hoverStyle, _b = _a.focalPoint, focalPoint = _b === void 0 ? { x: 0.5, y: 0.5 } : _b, className = _a.className;
-    // 컴포넌트 인스턴스마다 고유한 마스크 ID 생성
-    var maskId = (0, react_1.useMemo)(function () { return "sqs-mask-".concat(Math.random().toString(36).substr(2, 9)); }, []);
-    var _c = (0, react_1.useState)(shape !== null && shape !== void 0 ? shape : ''), selectedShape = _c[0], setSelectedShape = _c[1];
-    (0, react_1.useEffect)(function () {
-        setSelectedShape(shape !== null && shape !== void 0 ? shape : '');
-    }, [shape]);
-    var effectiveShape = selectedShape || undefined;
-    var shapeOptions = Object.keys(ALL_SQS_SHAPES);
-    // 1. 테두리 스타일 추출 로직 (e.g., "2px solid red" -> {width: 2, color: 'red'})
-    var getBorderStyle = function (style) {
-        var _a, _b;
-        var width = (_a = parseInt(style.borderWidth, 10)) !== null && _a !== void 0 ? _a : 0;
-        var color = (_b = style.borderColor) !== null && _b !== void 0 ? _b : 'transparent';
-        return { width: width, color: color };
-    };
-    var normalBorder = getBorderStyle(normalStyle);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative', width: '100%', height: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(S_ShapeSelect, { children: (0, jsx_runtime_1.jsxs)("select", __assign({ value: selectedShape, onChange: function (event) { return setSelectedShape(event.target.value); } }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ value: "" }, { children: "None" })), shapeOptions.map(function (option) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: option }, { children: option.replace(/_/g, ' ') }), option)); })] })) }), (0, jsx_runtime_1.jsxs)(S_ImageContainer, __assign({ normalStyle: normalStyle, hoverStyle: hoverStyle, maskId: maskId, hasShape: !!effectiveShape, className: className }, { children: [effectiveShape && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", __assign({ width: "0", height: "0", style: { position: 'absolute' } }, { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", __assign({ id: maskId, clipPathUnits: "objectBoundingBox" }, { children: (0, jsx_runtime_1.jsx)("path", { d: ALL_SQS_SHAPES[effectiveShape], transform: "scale(0.01)" }) })) }) })), normalBorder.width > 0 && ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 100 100", preserveAspectRatio: "none", style: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    width: '100%',
-                                    height: '100%',
-                                    pointerEvents: 'none',
-                                    zIndex: 1
-                                } }, { children: (0, jsx_runtime_1.jsx)("path", { d: ALL_SQS_SHAPES[effectiveShape], fill: "none", stroke: normalBorder.color, strokeWidth: normalBorder.width, vectorEffect: "non-scaling-stroke" }) })))] })), (0, jsx_runtime_1.jsx)("img", { src: src, alt: "content", style: {
-                            objectPosition: "".concat(focalPoint.x * 100, "% ").concat(focalPoint.y * 100, "%")
-                        } })] }))] })));
-};
-exports.default = ShapeImage;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;