@elice/material-quiz 1.220803.0

package/es/components/material-quiz-edit/options/OptionText.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Input, Vspace, Checkbox } from '@elice/blocks';
+import { useMaterialQuizEditContext } from '../context.js';
+
+const MIN_TEXT_LENGTH = 1;
+const MAX_TEXT_LENGTH = 128;
+
+const OptionText = () => {
+  const intl = useIntl();
+  const {
+    disabled
+  } = useMaterialQuizEditContext();
+  const {
+    control,
+    watch
+  } = useFormContext();
+  const watchedIsAutoGrade = watch('isAutoGrade'); //
+  //
+  //
+
+  return React.createElement(React.Fragment, null, React.createElement(Controller, {
+    control: control,
+    name: "answerInfo",
+    rules: {
+      required: {
+        value: watchedIsAutoGrade,
+        message: intl.formatMessage({
+          id: 'option.text.answerInfo.errorMessage.required'
+        })
+      },
+      minLength: {
+        value: MIN_TEXT_LENGTH,
+        message: intl.formatMessage({
+          id: 'common.errorMessage.range'
+        }, {
+          min: MIN_TEXT_LENGTH,
+          max: MAX_TEXT_LENGTH
+        })
+      },
+      maxLength: {
+        value: MAX_TEXT_LENGTH,
+        message: intl.formatMessage({
+          id: 'common.errorMessage.range'
+        }, {
+          min: MIN_TEXT_LENGTH,
+          max: MAX_TEXT_LENGTH
+        })
+      }
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _a;
+
+      return React.createElement(Input, Object.assign({
+        size: "small",
+        width: "full",
+        minLength: MIN_TEXT_LENGTH,
+        maxLength: MAX_TEXT_LENGTH,
+        readOnly: disabled,
+        disabled: !watchedIsAutoGrade,
+        invalid: fieldState.invalid,
+        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+        helpText: intl.formatMessage({
+          id: 'option.text.answerInfo.hintText'
+        })
+      }, field, {
+        value: field.value
+      }));
+    }
+  }), React.createElement(Vspace, {
+    height: 0.5
+  }), React.createElement(Controller, {
+    control: control,
+    name: "isAutoGrade",
+    render: ({
+      field
+    }) => React.createElement(Checkbox, Object.assign({
+      size: "small"
+    }, field, {
+      value: !field.value,
+      checked: !field.value,
+      onChange: v => field.onChange(!v)
+    }), React.createElement(FormattedMessage, {
+      id: "option.text.isAutoGrade.checkbox.label"
+    }))
+  }));
+};
+
+export { OptionText as default };

package/es/components/material-quiz-edit/utils/editValue.d.ts

@@ -0,0 +1,15 @@
+import type { MaterialQuizEditValue } from '../MaterialQuizEdit';
+export declare type _QuizEditValue = Omit<MaterialQuizEditValue, 'optionInfo'> & {
+    optionInfo: {
+        id: string;
+        value: string;
+    }[];
+};
+/**
+ *
+ */
+export declare function manipulateValue(v: MaterialQuizEditValue): _QuizEditValue;
+/**
+ * Restore manipulation from `manipulateValue()`.
+ */
+export declare function restoreValue(v: _QuizEditValue): MaterialQuizEditValue;

package/es/components/material-quiz-edit/utils/editValue.js

@@ -0,0 +1,32 @@
+import { createRandomId } from './randomId.js';
+
+/**
+ *
+ */
+
+function manipulateValue(v) {
+  var _a, _b;
+
+  return Object.assign(Object.assign({}, v), {
+    // convert string array to object array
+    // - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
+    optionInfo: Array.isArray(v.optionInfo) ? v.optionInfo.map(option => ({
+      id: createRandomId(),
+      value: option
+    })) : [],
+    // remove `"` mark around value
+    answerInfo: typeof v.answerInfo === 'string' ? (_b = (_a = /^"?([^"]*)"?$/.exec(v.answerInfo)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '' : v.answerInfo
+  });
+}
+/**
+ * Restore manipulation from `manipulateValue()`.
+ */
+
+function restoreValue(v) {
+  return Object.assign(Object.assign({}, v), {
+    optionInfo: v.optionInfo.length ? v.optionInfo.map(option => option.value) : null,
+    answerInfo: Array.isArray(v.answerInfo) ? v.answerInfo : typeof v.answerInfo === 'object' || typeof v.answerInfo === 'undefined' ? undefined : `"${v.answerInfo}"`
+  });
+}
+
+export { manipulateValue, restoreValue };

package/es/components/material-quiz-edit/utils/randomId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Create random ID.
+ */
+export declare function createRandomId(): string;

package/es/components/material-quiz-edit/utils/randomId.js

@@ -0,0 +1,8 @@
+/**
+ * Create random ID.
+ */
+function createRandomId() {
+  return Math.random().toString(36).substring(2);
+}
+
+export { createRandomId };

package/es/components/shared/QuestionBox.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ButtonProps } from '@elice/blocks';
+interface QuestionBoxProps {
+    footerActions?: ButtonProps[];
+    title?: string;
+    submitResult?: React.ReactNode;
+    submitStatus?: React.ReactNode;
+    onNext?: () => void;
+    isNextActive?: boolean;
+}
+export declare const StyledQuestionBox: import("styled-components").StyledComponent<"div", any, {
+    vertical: boolean;
+    hasFooter: boolean;
+}, never>;
+declare const QuestionBox: React.FC<QuestionBoxProps>;
+export default QuestionBox;

package/es/components/shared/QuestionBox.js

@@ -0,0 +1,101 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Text, Button, Box } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import { useMaterialQuizState } from '../material-quiz/context/MaterialQuizContext.js';
+
+const StyledQuestionBox = styled.div.withConfig({
+  componentId: "sc-6qfyxj-0"
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], ({
+  vertical
+}) => vertical ? '0' : '8px', ({
+  hasFooter
+}) => hasFooter ? '100%' : '', ({
+  hasFooter
+}) => hasFooter ? '' : '100%');
+const StyledQuestionBoxHeader = styled.div.withConfig({
+  componentId: "sc-6qfyxj-1"
+})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], base.color.navy6);
+const StyledQuestionBoxBody = styled.div.withConfig({
+  componentId: "sc-6qfyxj-2"
+})(["padding:1.5rem;background-color:", ";flex:auto;", ""], base.color.navy7, ({
+  hasFooter
+}) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
+const StyledQuestionBoxFooter = styled.div.withConfig({
+  componentId: "sc-6qfyxj-3"
+})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], base.color.navy6, ({
+  vertical
+}) => {
+  return vertical ? `
+          flex-direction: column;
+          align-items: flex-start;
+        ` : '';
+});
+const StyledQuestionBoxFooterActions = styled.div.withConfig({
+  componentId: "sc-6qfyxj-4"
+})(["display:flex;"]);
+const StyledQuestionBoxFooterStatus = styled.div.withConfig({
+  componentId: "sc-6qfyxj-5"
+})(["margin-left:0.75rem;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          margin-left: 0;
+          margin-top: 0.75rem;
+        ` : '';
+});
+
+const QuestionBox = _a => {
+  var {
+    children,
+    footerActions = [],
+    title,
+    submitResult,
+    submitStatus,
+    onNext,
+    isNextActive
+  } = _a,
+      props = __rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext", "isNextActive"]);
+
+  const intl = useIntl();
+  const {
+    vertical
+  } = useMaterialQuizState();
+  const hasFooter = footerActions.length > 0;
+  const header = React.createElement(StyledQuestionBoxHeader, null, React.createElement(Text, {
+    bold: true,
+    customStyles: {
+      color: base.color.navy0
+    }
+  }, title || ' '), submitResult ? submitResult : null);
+  const body = React.createElement(StyledQuestionBoxBody, {
+    hasFooter: hasFooter
+  }, children);
+  const footer = React.createElement(StyledQuestionBoxFooter, {
+    vertical: vertical
+  }, React.createElement(StyledQuestionBoxFooterActions, null, footerActions.map((action, index) => React.createElement(Button, Object.assign({
+    key: index,
+    size: "small"
+  }, action), action.children)), isNextActive ? React.createElement(Box, {
+    marginleft: "0.75rem"
+  }, React.createElement(Button, {
+    size: "small",
+    border: true,
+    tabIndex: 0,
+    transparent: false,
+    role: "lightpurple",
+    onClick: onNext
+  }, intl.formatMessage({
+    id: 'materialQuiz.next'
+  }))) : null), React.createElement(StyledQuestionBoxFooterStatus, {
+    vertical: vertical
+  }, submitStatus));
+  return React.createElement(StyledQuestionBox, Object.assign({}, props, {
+    hasFooter: hasFooter,
+    vertical: vertical
+  }), header, body, footerActions.length > 0 ? footer : null);
+};
+
+export { StyledQuestionBox, QuestionBox as default };

package/es/components/shared/QuizDraggbleDroppedOption.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { QuizDraggbleOptionRole } from './QuizDraggbleOption';
+interface QuizDraggbleDroppedOptionProps {
+    id: string;
+    content: string;
+    disabled: boolean;
+    role: QuizDraggbleOptionRole;
+    indexOrder?: number;
+    isMarkdown?: boolean;
+}
+declare const QuizDraggbleDroppedOption: React.FC<QuizDraggbleDroppedOptionProps>;
+export default QuizDraggbleDroppedOption;

package/es/components/shared/QuizDraggbleDroppedOption.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import QuizDraggbleOption from './QuizDraggbleOption.js';
+
+const QuizDraggbleDroppedOption = ({
+  id,
+  content,
+  disabled = false,
+  role,
+  indexOrder,
+  isMarkdown
+}) => {
+  return React.createElement(QuizDraggbleOption, {
+    id: id,
+    key: id,
+    content: content,
+    className: "quiz-answer",
+    disabled: disabled,
+    role: role,
+    indexOrder: indexOrder,
+    clone: true,
+    isMarkdown: isMarkdown
+  });
+};
+
+export { QuizDraggbleDroppedOption as default };

package/es/components/shared/QuizDraggbleDummyOption.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { EbDroppableProps } from '../eb-sortable/EbDroppable';
+interface QuizDraggbleDummyOptionProps {
+    indexOrder: number;
+    onDrop: EbDroppableProps['onDrop'];
+}
+declare const QuizDraggbleDummyOption: React.FC<QuizDraggbleDummyOptionProps>;
+export default QuizDraggbleDummyOption;

package/es/components/shared/QuizDraggbleDummyOption.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+import EbDroppable from '../eb-sortable/EbDroppable.js';
+
+const StyledQuizDraggbleDummyOption = styled(EbDroppable).withConfig({
+  componentId: "sc-1ayp8c1-0"
+})(["display:flex;justify-content:space-between;align-items:center;border:1px dashed ", ";border-radius:8px;overflow:hidden;background-color:", ";padding:0.875rem;color:", ";font-size:0.875rem;&.ui-droppable-hover{outline:1px dashed ", ";}"], base.color.navy4, base.color.navy5, base.color.navy0, base.color.navy0);
+const StyledOrder = styled.div.withConfig({
+  componentId: "sc-1ayp8c1-1"
+})(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], base.color.navy0, base.color.navy4);
+
+const QuizDraggbleDummyOption = ({
+  indexOrder,
+  onDrop
+}) => {
+  return React.createElement(StyledQuizDraggbleDummyOption, {
+    onDrop: onDrop
+  }, React.createElement(Text, {
+    size: "small",
+    wordBreak: "break-all",
+    customStyles: {
+      color: base.color.navy0
+    }
+  }, '답안을 드래그 앤 드롭하세요.'), React.createElement(StyledOrder, null, indexOrder));
+};
+
+export { QuizDraggbleDummyOption as default };

package/es/components/shared/QuizDraggbleOption.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type QuizDraggbleOptionRole = 'default' | 'correct' | 'wrong' | 'answer';
+export interface QuizDraggbleOptionProps {
+    id: string;
+    className: string;
+    content: string;
+    disabled?: boolean;
+    role?: QuizDraggbleOptionRole;
+    indexOrder?: number;
+    clone?: boolean;
+    isMarkdown?: boolean;
+}
+declare const QuizDraggbleOption: React.FC<QuizDraggbleOptionProps>;
+export default QuizDraggbleOption;

package/es/components/shared/QuizDraggbleOption.js

@@ -0,0 +1,184 @@
+import React from 'react';
+import { Icon, Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilDraggableVertical } from '@elice/icons';
+import styled from 'styled-components';
+import EbDraggable from '../eb-sortable/EbDraggable.js';
+import { useMaterialQuizState } from '../material-quiz/context/MaterialQuizContext.js';
+import StyledMarkdown from './StyledMarkdown.js';
+
+const StyledQuizDraggbleOptionHandle = styled.div.withConfig({
+  componentId: "sc-19b0zkq-0"
+})(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], base.color.navy3);
+const StyledQuizDraggbleOptionContent = styled.div.withConfig({
+  componentId: "sc-19b0zkq-1"
+})(["display:flex;justify-content:space-between;min-width:0;align-items:center;flex:auto;padding:0.875rem;border:", ";background-color:", ";"], ({
+  role
+}) => {
+  switch (role) {
+    case 'correct':
+      return `1px solid ${base.color.primary6}`;
+
+    case 'wrong':
+      return `1px solid ${base.color.red6}`;
+
+    default:
+      return '';
+  }
+}, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return base.color.primary6;
+
+    default:
+      return '';
+  }
+});
+const StyledOrder = styled.div.withConfig({
+  componentId: "sc-19b0zkq-2"
+})(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], base.color.navy0, base.color.navy4);
+const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
+  componentId: "sc-19b0zkq-3"
+})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:999 !important;", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return base.color.primary4;
+    // todos
+
+    case 'correct':
+      return base.color.green4;
+
+    case 'wrong':
+      return base.color.red4;
+
+    default:
+      return base.color.navy3;
+  }
+}, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return base.color.primary9;
+    // todos
+
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return base.color.navy5;
+  }
+}, StyledQuizDraggbleOptionContent, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return base.color.primary1;
+    // todos
+
+    case 'correct':
+      return base.color.green1;
+
+    case 'wrong':
+      return base.color.red1;
+
+    default:
+      return base.color.navy5;
+  }
+}, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return base.color.primary9;
+    // todos
+
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return base.color.navy0;
+  }
+}, StyledOrder, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return base.color.primary3;
+    // todos
+
+    case 'correct':
+      return base.color.green3;
+
+    case 'wrong':
+      return base.color.red3;
+
+    default:
+      return base.color.navy4;
+  }
+}, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return base.color.primary9;
+    // todos
+
+    case 'correct':
+      return base.color.green9;
+
+    case 'wrong':
+      return base.color.red9;
+
+    default:
+      return base.color.navy0;
+  }
+}, base.color.navy0, StyledQuizDraggbleOptionHandle, base.color.navy5, StyledQuizDraggbleOptionContent, base.color.navy4, base.color.navy4, StyledOrder, base.color.navy0, base.color.navy5, base.color.navy0);
+
+const QuizDraggbleOption = ({
+  id,
+  className,
+  content,
+  disabled = false,
+  role = 'default',
+  indexOrder,
+  clone = false,
+  isMarkdown = false
+}) => {
+  const {
+    vertical
+  } = useMaterialQuizState();
+  return React.createElement(StyledQuizDraggbleOption, {
+    id: id,
+    className: className,
+    disabled: disabled,
+    role: role,
+    clone: clone,
+    vertical: vertical
+  }, React.createElement(StyledQuizDraggbleOptionHandle, null, React.createElement(Icon, {
+    size: "large",
+    icon: eilDraggableVertical
+  })), React.createElement(StyledQuizDraggbleOptionContent, null, isMarkdown ? React.createElement(StyledMarkdown, {
+    children: content,
+    dark: true,
+    paddingx: 0,
+    paddingy: 0
+  }) : React.createElement(Text, {
+    size: "small",
+    userSelect: "none",
+    wordBreak: "break-all",
+    role: role === 'answer' ? 'white' : 'default'
+  }, content), indexOrder ? React.createElement(StyledOrder, null, indexOrder) : null));
+};
+
+export { QuizDraggbleOption as default };

package/es/components/shared/StyledMarkdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const StyledMarkdown: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/markdown").MarkdownProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
+export default StyledMarkdown;

package/es/components/shared/StyledMarkdown.js

@@ -0,0 +1,8 @@
+import { Markdown } from '@elice/markdown';
+import styled from 'styled-components';
+
+const StyledMarkdown = styled(Markdown).withConfig({
+  componentId: "sc-l6r531-0"
+})(["p{margin:0 !important;}"]);
+
+export { StyledMarkdown as default };

package/es/components/shared/index.d.ts

@@ -0,0 +1,7 @@
+export { default as QuizDraggbleDroppedOption } from './QuizDraggbleDroppedOption';
+export { default as QuizDraggbleDummyOption } from './QuizDraggbleDummyOption';
+export { default as QuizDraggbleOption } from './QuizDraggbleOption';
+export { default as QuestionRadio } from './question-radio/QuestionRadio';
+export { default as QuestionRadioOption } from './question-radio/QuestionRadioOption';
+export { default as QuestionCheckbox } from './question-checkbox/QuestionCheckbox';
+export { default as QuestionCheckboxOption } from './question-checkbox/QuestionCheckboxOption';

package/es/components/shared/question-checkbox/QuestionCheckbox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface QuestionCheckboxProps {
+    selectedOptions: any[];
+    onSelect: (index: number) => void;
+    disabled: boolean;
+}
+declare const QuestionCheckbox: React.FC<QuestionCheckboxProps>;
+export default QuestionCheckbox;

package/es/components/shared/question-checkbox/QuestionCheckbox.js

@@ -0,0 +1,19 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import styled from 'styled-components';
+import { QuestionCheckboxContextProvider } from './QuestionCheckboxContext.js';
+
+const StyledQuestionCheckbox = styled.div.withConfig({
+  componentId: "sc-1jgy6x5-0"
+})(["display:flex;flex-direction:column;"]);
+
+const QuestionCheckbox = _a => {
+  var {
+    children
+  } = _a,
+      props = __rest(_a, ["children"]);
+
+  return React.createElement(QuestionCheckboxContextProvider, Object.assign({}, props), React.createElement(StyledQuestionCheckbox, null, children));
+};
+
+export { QuestionCheckbox as default };

package/es/components/shared/question-checkbox/QuestionCheckboxContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { QuestionCheckboxProps } from './QuestionCheckbox';
+declare type Value = Pick<QuestionCheckboxProps, 'selectedOptions' | 'disabled' | 'onSelect'>;
+interface QuestionCheckboxProviderProps extends QuestionCheckboxProps {
+    children: React.ReactNode;
+}
+declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): JSX.Element;
+declare function useQuestionCheckboxContext(): Value;
+export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };

package/es/components/shared/question-checkbox/QuestionCheckboxContext.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+const QuestionCheckboxContext = React.createContext(undefined);
+QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
+
+function QuestionCheckboxContextProvider({
+  selectedOptions,
+  onSelect,
+  disabled,
+  children
+}) {
+  const onSelectValue = React.useCallback(onSelect, []);
+  const value = React.useMemo(() => ({
+    selectedOptions,
+    disabled,
+    onSelect: onSelectValue
+  }), [selectedOptions, disabled, onSelectValue]);
+  return React.createElement(QuestionCheckboxContext.Provider, {
+    value: value
+  }, children);
+}
+
+function useQuestionCheckboxContext() {
+  const context = React.useContext(QuestionCheckboxContext);
+
+  if (context === undefined) {
+    throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
+  }
+
+  return context;
+}
+
+export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };

package/es/components/shared/question-checkbox/QuestionCheckboxOption.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionCheckboxOptionProps {
+    value: any;
+    status?: Status;
+    isAnswer?: boolean;
+}
+declare const QuestionCheckboxOption: React.FC<QuestionCheckboxOptionProps>;
+export default QuestionCheckboxOption;